2017-05

スポンサーサイト

このエントリーをはてなブックマークに追加
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Canvas要素上でどこがクリックされたか正確に取得する方法

このエントリーをはてなブックマークに追加
3分くらいで読めます。

先のエントリで将棋の局面図を作るWebUIをアップデートしたと書きましたが、一番の問題はCanvas要素上でクリックされた座標を取得する方法がブラウザによって異なることでした。

ここでのポイントはページ内座標ではなくCanvas要素上でクリックされた座標の取得ということです。ページ内座標だとHTMLをいじくっているうちに座標がうまく取れない、なんてことが起こり得るのでCanvas上の座標でクリックされた場所を取得したいのです。

そのために、マウスクリック時のイベントオブジェクトではlayerXとlayerYというそのものずばりのプロパティがあるのですが、これだとFirefox6や64bit版ブラウザでうまく動作しないという問題がありました。

そこで検索した所、クリック時のページ内座標の取得についてはブラウザ別でも安定して取得する方法があるので、ページ内座標の取得→Canvasが配置されている座標のxy座標を引いて計算するという戦略でCanvas上の座標を取得するという方法が載っていました。Stack Overflowさまさまです。

以下はその引用です。

var x;
var y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
}
else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= gCanvasElement.offsetLeft;
y -= gCanvasElement.offsetTop;


しかし、クロスブラウザ対応ってクロスプラットフォーム対応より大変なんじゃないかという気がしてきました。まず主要ブラウザだけで、Internet Explorer、Firefox、Google Chrome、Opera、Safariと5つあり、このうちInternet Explorerはバージョン違いを考慮する必要があります。またFirefoxも4.0で大幅にUIを変えたり、アドオンの対応状況が微妙だったりということもあってアップデートに慎重な人もいたりします。ただ、これらに64bit版というのが掛け算でかかってくると頭の痛いところです。スマートフォンやタブレットに搭載のブラウザで動くというのは大きな魅力ではあるのですが、解像度のことを考えると画面デザインの変更は必須ですし…

ネイティブアプリの64bit対応ならば、APIの有無とかそもそも書き方が間違っている(例えばポインタのサイズ計算が間違っている)ということで解決できるのですが、ブラウザの対応についてはその時々のブラウザの実装状況というものに大きく左右されるので一瞬しか有用な情報ではなくバッドノウハウの最たるものではないかと思います。HTML5になってウェブアプリがリッチになったとは言え、完成されたライブラリの充実を待たないと修羅の道に足を踏み込むことになりそうです。
スポンサーサイト

新しい字幕フォーマットWebVTTについて

このエントリーをはてなブックマークに追加
日本語の資料が少ないので書いてみます。
WebVTTとはHTML5のvideoタグで使える字幕フォーマットです。

先日行われたGoogle I/O のプレゼンで詳しく解説されている。12分30秒あたりから



簡単に言うと、DVDの字幕フォーマットであるsrt + HTMLのタグが使えるフォーマットという理解でよさそうだ。
CSSによる文字の装飾なども可能。
プレゼンではrubyタグを使った日本語のルビを振ることも出来るとしている。

ビデオそのものに字幕を埋めこまずに外部ファイルにする利点としては、
・テキスト形式なので機械翻訳したり音声合成プログラムに渡すのが容易
・複数の字幕ファイルを用意して多言語対応にする(日本語、英語、フランス語、ドイツ語...)
などがあります。

動画・音声に対するタイミングフォーマットというと、
・.lrc .kra のような、カラオケ方面から発展してきたもの
・.srt .subのようなDVD字幕フォーマットから来たもの
・ニコニコ動画のコメントXML
などが挙げられますが、WebVTTが実装されれば一つの標準となるのかもしれません。

しかし、HTML5って盛りすぎじゃないですかね・・・

«  | ホーム |  »

プロフィール

fantakeshi

Author:fantakeshi
Web:ここ
Twitter ID:fantakeshi
自作物やプログラムやまとまった技術的メモについて

RSSに追加

自作物

最新記事

Twitter

最新コメント

最新トラックバック

月別アーカイブ

カテゴリ

自作物 (26)
一般 (1)
将棋 (12)
BONANZA (1)
ponanza (1)
HTML5 (2)
Chrome (1)
WebAPI (1)
Webサイト (2)
プログラム (2)
Tips (1)

カウンター

検索フォーム

RSSリンクの表示

リンク

このブログをリンクに追加する

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。