だるかぶ
サンダルでスーパーカブ乗りの『だるかぶ』です！
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
ご訪問ありがとうございます。ゆっくりしていってね。（本ページは広告を含みます。）
前から気になっていたスマートフォンサイトを構築するためのフレームワーク [ 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 が必須スキルになる！と思うのでこれから勉強する際に参考になる記事まとめ | バシャログ。
ありがとうございます！
現場からは以上です。それでは、またッ！！！
だるかぶ
最後までお読みいただきありがとうございます！
スキ・コメント・シェア・フォローなどで応援いただけると『だるかぶ』のやる気がアップします！
記事内容の修正について
記載している内容は記事執筆時の情報です。
できるだけ最新情報を掲載するようにしていますが、情報が間違っている場合は「コメント」でご指摘いただけるとありがたいです。