だるかぶ
サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
前から気になっていたスマートフォンサイトを構築するためのフレームワーク [ jQuery Mobile ] やってみる。
▲ jQuery Mobile 公式サイト
[ jQuery Mobile ] サンプルページ
サンプルは、かちびと様制作の日本語サンプル をベースにさせて頂きました。ありがとうございます！
▲ 簡単なページなら、jQuery Mobile 公式サイトにあるサービスを使って、GUI でコードを生成できます。
複雑なものは、有料の Codiqa というサービスを使えば作れます。
デザイン ( テーマ ) を編集する
jQuery Mobile のサイトに ThemeRoller と言うページが用意されていて、CSS を書かずにスタイルを編集し、ZIP ファイルでダウンロードできます。
▲ ThemeRoller ボタンの角丸が大きすぎて、個人的に嫌だったんだけど、角丸の半径も編集できて素晴らしい！
jQuery Mobile Flat-UI Theme というフラットなデザインのテーマもありました。
わかった事
- data-role=”page” を持つ div 要素が１ページになる。
- a 要素の属性に data-direction=”reverse” を指定するとページ遷移時のアニメーションを逆向きに出来る。
- 普通にフォームのタグを書くとモバイル用にスタイリングされる。
- PC で検証するには、iOS, Android のエミュレーターをインストールするか、Safari で確認すると良いらしい。
- エラーメッセージ日本語化とか。
ToDo・調べてみる事
- jQuery Mobile を使うメリットは？
- ナビゲーションバーに自動的に戻るボタンが表示されるんじゃないの？
- 日本語のボタンは英語のボタンに比べて、縦幅が大きいので直したい。
参考にさせてもらったページ
- ASCII.jp：西畑一馬の jQuery Mobile デザイン入門
- jQuery Mobile を使う際に知っておくと役立ちそうな Tips や情報のまとめ – かちびと.net
- jQuery Mobile が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
ありがとうございます！
現場からは以上です。それでは、またッ！！！
だるかぶ
最後までお読みいただきありがとうございます！
スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！
記事内容の修正について記載している内容は記事執筆時の情報です。
できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。