研究日誌 - 1380461699 - したらば掲示板

252：名無しさん：2014/06/26(木) 07:53:07: 【共通】クリッカブルマップ

BASIC!のHTMLモードで画像処理がどこまでできるか
テストプログラムを作成して調べてみました。

確かHTMLのイメージ画像でもたしかクリックした
時の座標が取得できる方法があったはずと思い
調べていたら以下の記事を見つけけました

【画像をクリックしてその地点の座標を変数ｘ、ｙに代入したいのですが - JavaScript - 教えて！goo】
http://oshiete.goo.ne.jp/qa/2745098.html

この記事を参考にBASIC!のテストプログラムで使用する
HTMLファイルを作り始めました。

記事にはjavascriptでクリックした位置を計算すれば取得
可能と書かれていたので更に調べて以下の記事を参考に
HTMLファイルを作成しました。

【JavaScriptプログラミング講座　ダイアログを表示する】
http://hakuhin.jp/js/dialog.htm

【javascriptのキャスト - 備忘録】
http://blog.goo.ne.jp/kori39/e/03d9ce6a3180e9a553644a763fc42542

【ウィンドウ名.alert()－JavaScriptリファレンス】
http://www.htmq.com/js/window_alert.shtml

これらの記事からダイアログの出力方法や数値型の
座標位置情報を文字型に変換する方法を確認して作成
しました。

ここまではパソコンでHTMLファイルを作成、その後
kobo arc7でテストプログラムを用意しました。

テストプログラム自体は正常に動作してHTMLファイル
をロードしてjavascript問題なく動作しましたが
一点問題があることがわかりました。

それは、ピンチインして拡大した場合、正しく座標位置
が取得できない事でした。

そこでピンチインを抑止する方法を調べるとすぐに
見つかりました。

【HTML5とCSS】
http://www33.atpages.jp/usuisq/10_clock.html

mataタグ1つを追加するだけで抑止できました。

更に表示している画像のサイズを取得する方法も調べて
見つけたので以下のサイトを参考にしてjavascriptを
修正しました。

【 [JavaScript] 画像のオリジナルサイズを取得する最もシンプルな方法】
http://cojocco.blog113.fc2.com/blog-entry-131.html

座標位置もオリジナルサイズもgetElementByIdの情報で
取得できることがわかりました。

実際に作成したテストプログラムでの動きは以下です。

【クリッカブルマップのテストプログラム画面】
https://www.dropbox.com/s/wota7429xt518ff/Screenshot_2014-05-18-14-53-44.png

テスト用の画像上のどこかをタップすると以下のダイアログ
が表示されます。

【画像クリック時に座標を表示した位置確認ダイアログ】
https://www.dropbox.com/s/8sfd5x5n0wjwa5e/Screenshot_2014-05-18-14-53-55.png

ちゃんと座標位置やオリジナルサイズが取得できています。
このダイアログでキャンセルを押すと以下ののダイアログ
が表示されます。

【位置確認ダイアログでキャンセルを選択した時に表示するダイアログ】
https://www.dropbox.com/s/epi466fz53d4188/Screenshot_2014-05-18-14-54-47.png

2chMate 0.8.6/Kobo/arc 7/4.2.2/LT