GraphicalWeb (CSS, SVG, WebGL etc) Advent Calendar 2012からお越しの皆様、こんにちは。GraphicalWeb Advent Calendarの2日目を務めさせて頂きます。どうぞよろしくお願いします。
Canvasというと、ブラウザ上でラスターグラフィックの描画を行うのに便利なAPI群です。これがあるおかげでグラフを描いたりすることがJavascriptでもお手軽に出来るようになりました。さらにWebGLを組み合わせることによって、Webブラウザ上でも本格的なゲームが作れるようになっています。
このAdvent CalendarはGraphicalWebという題がついているので、そういう派手な話題を取り上げた方が面白いのかもしれません。ですが今回取り上げるのは、CanvasでRich UIを作るという比較的地味なお話です。Rich UIを提供するフレームワークのライブラリの作者くらいしかありがたみの無い話かもしれません。
CanvasでRich UIを提供するお話は地味とはいえ、最近Canvasの仕様に新たなメソッドがいくつか追加されたりして、比較的ホットな話題であると言えるかもしれません。今回は、その最近追加されたメソッドについて簡単な解説をしたいと思います。残念なことに、まだ実際に実装しているWebブラウザがあまり無かったりするのですが。
実装があまり進んでいないので、実際の挙動を自分で確認したわけではありません。自分自身でも各メソッドの挙動について誤った理解をしている場合があるかもしれませんので、ぜひぜひツッコミをたくさん入れていただけるとありがたいです。
drawCustomFocusRing(element) / drawSystemFocusRing(element)
ある要素にフォーカスが当たっている場合に、その要素に指定した領域に枠を描こうというメソッドです。今でもonfocus()とCSSを使えば擬似的に再現は出来そうですが、フォーカスがあたって時の枠の描き方はプラットフォームによって異なるので、どのプラットフォームにおいてもそれぞれに適した描き方で枠を描画することを意図しています。
2つのメソッドの違いは、drawSystemFocusRing()は実行中のプラットフォームにおいてフォーカスが当たっているかどうかの枠を表示すべきかしないかを気にするのに対し、drawCustomFocusRing()はフォーカスが当たっていたらとにかく描画します。
addHitRegion(object) / removeHitRegion(object)
addHitRegion()は、引数objectのpathメンバーに指定された領域においてマウスのイベントが発生した際に、そのイベントを処理できるようにします。Canvas上の領域をクリックした際に何らかの処理を行う為に用いられます。
Canvasでボタンを描画し、そのボタンが押された時の処理を記述するなどの際に便利になります。
removeHitRegionは、addHitRegionで登録してhit regionを削除します。
scrollPathIntoView
指定した領域のCanvasを画面に表示します。携帯端末のように小さい画面を使っていると、画面サイズよりもCanvasの方が大きくなっているというケースが多くなります。そういう際に、指定した領域が画面に表示されるようにすることを意図しています。
タブでフォーカスを移動したときに、指定したボタンや入力領域に移動する (HTMLのtabindexのように) という処理が実装しやすくなるかもしれません。
