銀杏の木

google は「モバイルフレンドリーテスト」という機能を持っている。

これは、あるサイトの表示が、スマートフォンなどでの表示に適切に対応しているかどうかをチェックしてくれる機能だ。

rNote の現状を考えてみると、 docomo や au などのガラケーに対する対応しかされていない。その対応方法は、クライアントからの request http header を見て、 user agent が携帯のものであった場合には、PC用の表示とは異なる携帯用の表示を行うよう動作するようになっている。

この方法は、スマートフォン全盛の現在でも有効だが、その場合、「スマホ向け表示を分けているときはVary HTTPヘッダーを使うこと など10+4記事（海外&国内SEO情報）」で説明されているように、サーバからの response http header に vary http であることが示されるようにすると良いようだ。

具体的には、 apache2 を使用しているサーバの場合、 .htaccess に、

と記述するだけでよい。

ただ、この方法だと、前述の google のテストに通らない場合があるようだ。理由は簡単で、 google がテストのためにサイトにアクセスしてくる際の bot の user agent が不明なため、サイト側でその　user agent をスマートフォンからのアクセスとして認識しないためだ。これを解決するためには、一度 google のテストを実行し、その際にアクセスしてきた google の got の user agent 名を調査し、その名前にサイト側で対応しておく必要がある。しかし、 google の bot の user agent 名は、いつ変更されるか分からないため、変更された場合、 google にモバイルフレンドリーなサイトであると認定されなくなることになる。

一方で、モバイルフレンドリーなサイトにするためのもうひとつの方法として、「メディアクエリ」を使用する方法がある。これは、ヘッダでスタイルシートを読み込むタグの要素に media　要素を追加し、

<link rel="stylesheet" href="/ichounoki/rnote/medium.css" media="screen and (min-width:480px) and (max-width:1024px)"> 

のように、画面の幅などによって異なるスタイルシートを読み込むようにする方法だ。または、「レスポンシブの基本、メディアクエリの書き方」で説明されているように、

@media screen and (min-width:480px) and ( max-width:1024px) {p {  } /* 横幅が 480 pixcel から 1024 pixcel までの場合の p タグのスタイル */}

のように、画面の幅などによって異なるスタイルが選択されるようにスタイルシート内に記述する方法だ。

ただ、この方法を試したところ、実際には、画面ではなく、ブラウザのウィンドウの幅によって切り替わってしまうようだ。つまり、例えば、PCで表示させていても、ブラウザのウィンドウの幅を短くしていくと、タブレットやスマートフォン用の表示に切り替わってしまう。これでは、まずいのだが、提示されたサンプルを見る限り、条件分けの記述に screen も指定されているようなので、この指定で画面の幅であるように動作しないのであれば、お手上げな気がする。

また、根本的な問題だが、この方法では、クライアントの表示サイズによって切り替えることができるのは、あくまでも「スタイルシートだけ」なので、「タグで表現された表示内容そのものは変更できない」のだ。現在の rNote が携帯用の表示を行う場合に、その小さな画面と画像表示能力を考慮して、表示する項目や表示するテキスト自体を変更していることを考えても、ただスタイルシートだけしか変更できないのでは、小さな画面用の表示として満足のいく設定ができるとは思えないので、自分的には、この、「メディアクエリ」という方法自体、構造的に既にダメである。

というわけで、 rNote-re の機能として、現状に対応させるためにモバイルフレンドリーにするとしたら、実装方法としては、 rNote と同様にクライアントの種別を user agent で読み取って表示自体を切り替えるという方法になるだろう。ただし、上述した通り google の変更を小豆に発見して対応する必要がある。

いや、 HTML5 に限った話ではないようだが・・・、例えば chrome に比べ、 firefox はずっと広い幅になってしまうようだ。

ぱっと見た感じ、 chrome では半角文字の幅が基準に使用され、 firefox では全角文字の幅が基準に使用されているように見える。

ともあれ、結果として、特定ブラウザ上で表示を合わせても別のブラウザでは表示が崩れてしまう。なんとかするには cols を使用せず css で width を指定することになる。

だがそうすると px で指定することになるので textarea 内で使用されるフォントが可変だった場合に、現在のフォントの幅などに連動できなくなる。親要素に対する % 指定もできるようだが、自分の環境では px 指定でないと動作しなかった。自分の環境での css の定義され方に影響されているのかも知れないが、ぱっと見て分かるようなものではなかった。

textarea の cols 要素って文字数を指定する要素じゃないのか？なんのためにあるの？この要素は「 textarea　に現在設定されているフォントの幅を基準に何文字分の幅かを指定する」と定義されるのが正しい気がするが、フォントの設定は css の領分なので、 html 側からその設定内容をそのまま利用することは出来ない気がするので、そもそも cols という要素は「あるべき定義」が不可能な存在である気がする。

だがしかし、こんな誰もが必ず使用を迫られるような要素の動作がブラウザ間でばっらばらなのは、とてもすごく困るのだが・・・。

「枠」ボタンを追加した。選択されたテキストを囲んでボタンを押すとタグを挿入し、四角い枠内にテキストを表示するようにレイアウトする。

「コード」ボタンを追加した。選択されたテキストを囲んでボタンを押すとタグを挿入し、 prism を使ったソースコード表示（行番号表示設定）をするようにレイアウトする。

また、先日、追記用の入力欄も追加したので、「 URL 」「強調」「斜体」「下線」「取消」「引用」「上付」「下付」「枠」「コード」の各ボタンが、本文入力欄、追記入力欄のどちらかフォーカスのある方に作用するようにした。

今まで、枠をつけたりソースコード表示をしたりするたびに、手作業でタグを書き込んでいたので、大分楽になった。

今回の修正で少し考える必要があったのは、ボタンが押されたときに選択されている文字列を把握するために、 textarea 要素に対して onSelect でテキストが選択されるたびにイベントを起こしていたのだが、逆にテキストの選択が解除されたときに起きるイベントが javascript のイベントに存在しなかったため、どのように実現するかという点だった。

結局、 textarea 要素に対して onkeyup と onmouseup を補足し、そのイベントハンドラ内で getSelection(e) で選択文字列を取得し選択中の文字列として保存することで、選択の解除を補足することができた。（ onkeydown, onmousedown ではタイミングが早すぎて、まだ選択中の文字列が取得される。）

canvas で表示しているアニメーションの上に重なったカウンター、URL、画像のある場所では、 canvas にマウスイベントが届かないため、透明な別の canvas を更に上に配置し、そちらでマウスイベントを取得するようにして対処した。

しかし、今度は、アニメーション表示 canvas の上に重ねた URL 部分が反応しなくなった。透明な別 canvas の下にあるのだから当然と言えば当然だ。

で、調べた結果、やはり上に別の要素がある場合、下になった要素にはイベントが届かないことが分かった。また、設定で届くようにするような方法も用意されていないことも分かった。

とても困った仕様だが、そういう仕様なんだからしょうがない。

そこで、「複数枚重なったcanvasで透明領域にマウスイベントを見えている直下の要素に渡したい」を参考に、一番上の透明の canvas に届いたマウスイベント（ click, mousemove, mouseover, mouseout ）を、下にある要素に送るようにした。

これで URL をクリックした場合にリンク先に飛ぶ動作をするようにはなったが、マウスカーソルを URL 文字列の上にもっていっても色が変わるリンク文字列の動作をしてくれない。ということは、 mouseover, mouseout を送っても、色を変える動作はしないということだ。おそらく、イベントの種別として、 MouseEvent ではなく UIEvent を送る必要があるのだと思う。そして、 URL 文字列の要素に対し、 mouseover のイベントが届くタイミングで UIEvent の DOMFocusIn を送り、 mouseout のイベントが届くタイミングで UIEvent の DOMFocusOut を送ってやることでリンク文字列の色を変える動作をすると思われる。

しかし、問題が２つある。

まず１つ目の問題は、 UIEvent を送るタイミングをどのように決めるかである。上にある canvas 上で mousemove, mouseover, mouseout のイベントが届いたときに elementFromPoint で、マウスカーソル位置にある下の要素を取得しているが、いつその下の要素の上にマウスカーソルが入り、いつ出たのかを決定することができないからだ。この問題は、elementFromPoint で発見した要素を currentItem に追加し同時にその要素に UIEvent の DOMFocusIn を送り、その後の elementFromPoint で、 currentItem が示す要素と異なる要素または null となった場合に、 UIEvent の DOMFocusOut を送ることで、なんとかなるかも知れない。

しかし２つ目の問題として、 UIEvent を発行し DOMFocusIn を下の要素に送った場合、その要素にフォーカスが変わるため、上にあるイベントを受け取っていた要素がイベントを受け取れなくなってしまうであろうことがあげられる。こちらの問題の方が致命的で、本来イベントを受け取るべき要素がイベントを受け取れなくなるということなので、 URL のリンク文字列の色を変えるためにイベントを送るという考え方自体がダメということである。

そこで考え方を変え、 mousemove の elementFromPoint で発見した要素がリンク文字列であれば要素を currentItem にセットしその要素の色をマウスホバー色に変え、その後の elementFromPoint で、 currentItem が示す要素と異なる要素または null となった場合に、その要素の色を戻すことで対応した。

下が完成版。

var currentItem = null;

var currentItemCol = 0;

function passmouseevent(e, type)

{

  var mev;

  var tmp;

  var under;


  tmp = event1.style.display;

  event1.style.display = "none";

  under = document.elementFromPoint(e.clientX, e.clientY);

  if (type == "mousemove") {

	if (under != null) {

	  if (currentItem != under) {

		if ((currentItem != null) && (currentItem.tagName == "A")) {

		  currentItem.style.color = currentItemCol;

		}

	    currentItem = under;

		currentItemCol = under.style.color;

		if (under.tagName == "A") {

	      under.style.color = "#ff00ff";

		}

      }

	} else {

	  if ((currentItem != null) && (currentItem.tagName == "A")) {

		currentItem.style.color = currentItemCol;

		currentItem = null;

	  }

	}

  }

  if (under != null) {

    mev = document.createEvent('MouseEvents');

    mev.initMouseEvent(e.type, 

      e.bubbles, 

	  e.cancelable, 

	  e.view, 

	  e.detail, 

	  e.screenX, 

	  e.screenY, 

      e.clientX, 

	  e.clientY, 

	  e.ctrlKey, 

	  e.altKey, 

      e.shiftKey, 

	  e.metaKey, 

	  e.button, 

	  e.relatedTarget);

    under.dispatchEvent(mev);

  }

  event1.style.display = tmp;

}


function testclick(e)

{

  passmouseevent(e, 'click');

}


function testmove(e)

{

  passmouseevent(e, 'mousemove');

}

つい先日、

そして HTML5 対応が出来たら、トップページにアニメーションを追加したり HTML5 らしいデザインにしたりしてみようと思う。

・・・と書いたが、興味があったので、先にトップページにアニメーションを追加した。

「Canvasで桜を降らせてみました」を参考に、銀杏の葉が舞い落ちるようにしてみた。

なかなか興味深い内容で、 javascript を用いて描画処理を行い、 canvas の内容を消去して再描画することを繰り返すことでアニメーション効果を実現する、などの canvas を使ったアニメーションの基本が分かったし、 setTransform() を用いて画像を変形する方法も分かった。

マウスカーソルにも反応させたかったので検索して調べ、 addEventListener() を使い、 mousemove イベントを取得し、マウスカーソルが canvas 上を移動しているときは銀杏の葉がカーソルに近寄ってくるようにもしてみた。

ただ、 canvas の上にカウンターや銀杏の葉の画像が重ね表示されるようにしたのだが、それらの上にカーソルがあるときは、 canvas に mousemove イベントが届かないようだ。ある要素より上に別の子要素がある場合は、そちらにイベントが取得され、親要素には届かない仕組みのようだ。透明な子要素として、一番上にcanvas と位置とサイズが等しい別の canvas を配置し、そちらのイベントを取得するようにして問題を解決したが、親要素にもイベントが届くように設定する方法があるかも知れない。