jQuery Mobile を触ってみる
スマートフォン向けのサイトを作ろうと思って少し調べてみた。
jQuery Mobileを使えば手軽に作れそうだ。
入門記事はないかと探して、西畑一馬のjQuery Mobileデザイン入門をザザっと読んでみた。
「デザイン入門」なので、マークアップとCSSが中心でJavaScriptについてはあまり触れていない。
結局、リファレンスをひと通り読むことにした。
ページ遷移はjQuery Mobileがやってくれるので、リンクを貼るだけでいい。
遷移後のonloadや$(document).ready()に該当するものがわかりづらいが、data-role="page" のdivのpageinitイベントにバインドすればいいとわかった。
ただし、
とりあえず、
・メニューのリストから"ベジェ曲線を使ってみた"をタップすると、ベジェ曲線を使ってみたのCanvasが表示される。
・画面をタップするとボールが動く。もう一度タップすると止まる。
という動きをするMulti-pageを作ってみた。
作ってみたのだが、確認しようにもスマートフォンを持っていない。
パソコンからスマホ用サイトの表示をチェックできるMobilizerをインストールしてみたが、CPU負荷が100%に張り付いて動かない。
スマートフォンよりも開発用PCを買うのが先だな。
結局、Safariをインストールして、開発メニューからUser-AgentをiPhoneにして一応動くことを確認した。(HTTPヘッダのUser-Agentを変えているだけなら意味が無さそう)
ページイベント周りがよくわからないから、あとで整理したい。
jQuery Mobileを使えば手軽に作れそうだ。
入門記事はないかと探して、西畑一馬のjQuery Mobileデザイン入門をザザっと読んでみた。
「デザイン入門」なので、マークアップとCSSが中心でJavaScriptについてはあまり触れていない。
結局、リファレンスをひと通り読むことにした。
ページ遷移はjQuery Mobileがやってくれるので、リンクを貼るだけでいい。
遷移後のonloadや$(document).ready()に該当するものがわかりづらいが、data-role="page" のdivのpageinitイベントにバインドすればいいとわかった。
ただし、
$('#id').bind('pageinit', function(event){...
だとバインドされなかった。$('#id').live('pageinit', function(event){...
だとバインドされた。意味が分からない。とりあえず、
・メニューのリストから"ベジェ曲線を使ってみた"をタップすると、ベジェ曲線を使ってみたのCanvasが表示される。
・画面をタップするとボールが動く。もう一度タップすると止まる。
という動きをするMulti-pageを作ってみた。
作ってみたのだが、確認しようにもスマートフォンを持っていない。
パソコンからスマホ用サイトの表示をチェックできるMobilizerをインストールしてみたが、CPU負荷が100%に張り付いて動かない。
スマートフォンよりも開発用PCを買うのが先だな。
結局、Safariをインストールして、開発メニューからUser-AgentをiPhoneにして一応動くことを確認した。(HTTPヘッダのUser-Agentを変えているだけなら意味が無さそう)
ページイベント周りがよくわからないから、あとで整理したい。
スポンサーサイト
