銀杏の木

異世界に行って知り合った女の子と結婚して子どもまでもつことになった、たくや。

無警戒に生活していたある日、家に侵入され、こんな姿に。

そして、たくやの命を救うため、嫁さんは自ら命を・・・。（涙）

家を襲った連中の本拠地に飛び込む、たくや。ところが、途中で出会った素性の分からない女に、浮ついた軽率な態度で関わり・・・。

その女に言われるがまま、まったくの無防備についていき、結果、狙われていた娘まで、あっさり奪われる、たくや。

妻があんな目にあったばかりのときに、決死の覚悟で相手の本拠地に乗り込んでいるはずなのに、全くの無警戒に素性不明な人物に全てを委ね、狙われていると考えもしていなかったのか、娘まであっさり奪われるという、いっそ清々しいくらいの間の抜けたたくやの姿勢に、愕然とした。

たくや、いくらなんでも、それはないだろ・・・。

いや、 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 を配置し、そちらのイベントを取得するようにして問題を解決したが、親要素にもイベントが届くように設定する方法があるかも知れない。