2012年10月19日jQueryMobileは、data-role属性とか、ちょっと見た感じでは、取っつきにくそうなのですが、いくつかのルールを覚えれば誰でも簡単にスマートフォンサイトを作成することができます。今日はjQueryMobileの基礎をご紹介したいと思います。jQueryMobileを利用するには、まずjQuryMobileを読み込まなくてはなりません。CDNを使う方法、ファイルをダウンロードして使う方法がありますが、とりあえず使うには、何も考えずにCDN(コンテンツデリバリネットワーク)を使いましょう。サイトのヘッダー部分にjQueryMobileを利用するためのコードを記述します。6行目から9行目はおまじないだと思って何も考えずに記述して下さい。jQueryMobileのページは<bory></body>内に、div要素で囲ったdata-role="page"を作成するだけです。このときにid名(任意)は忘れずに指定して下さい。jQueryMobileは1つのファイルに複数のページを記述することを前提に作られています。別ページを作成するには、同じようにdiv要素で囲ってページを作成します。それぞれページを区別するために、id名が必要になります。href="#page2">のように、アンカータグで指定します。1ページを作成して、ページを移動してみます。<p>1ページ目です。ブラウザで確認してみます。リンクをクリックすると画面が右から左へスライドして別ページを表示します。jQueryMobileはサイト内のページ移動にAjaxを利用しています。外部サイトへのリンクは、特に問題は生じないのですが、移動先が同じWebサイト内のファイルへのリンクの時は、注意が必要です。同じWebサイトの別ファイルへ移動するとき、移動先のファイルが複数ページに分かれていた場合、最初のページだけが読み込まれて、2ページ以降は読み込まれません。よって、移動先ページでリンク(内部リンク)が動作しないなどのトラブルが発生します。この問題を回避するには、いくつかの方法があるのですが、とりあえず、a要素に『dara-rel="external"』を指定して下さい。これは、強制的に外部サイトへのリンクだと指定する方法です。これ以外の方法は後で覚えればいいと思います。jQueryMobileでは、各ページをヘッダー、フッターやコンテンツに分けることにより見栄えを良くすることが出来ます。これもdiv要素で囲って、data-role属性に『header』、『content』、『footer』を指定するだけです。それでは、1ページ目にヘッダー、コンテンツ、フッターを指定してみます。data-role="content"><p>1ページ目です。ブラウザで確認してみます。footer内の文字は、何も指定しなければ、左寄りで表示されますので、10行目でスタイルを指定して、中央寄りに指定しました。デフォルトのヘッダーやフッターの背景色は黒ですので、背景色を変更したい場合は、data-themeを指定します。テーマのAが黒系、Bが青系、Eが黄色系、Cはグレイ系、Dは白系です。これ以外の背景色を使いたいときは、『jQueryMobileのテーマローダーで簡単テーマ作成』を参考にして、作成して下さい。統一感がないですが、実験ですので、1ページ目のheaderをB、contentをA、footerをEで指定してみます。data-theme="a"><p>1ページ目です。ブラウザで表示してみます。いやはや奇抜な配色ですが、背景色の指定方法は分かったと思います。前のページやTOPページへ戻るのに、いちいちリンクを作成するのは面倒ですので、ヘッダー部分に『Back』ボタンと『Home』アイコンを作成したいと思います。2ページ目にもヘッダー、コンテンツ、フッターを作成します。2ページ目のヘッダーに『Back』ボタンを表示するためには、data-role="page"の後に下記のコードを追加します。『Back』ボタンの表記を日本語にするには、さらに下記コードを追加します。次に『Home』アイコンを右側に表示するためには、下記コードを追加します。アイコンの中に名前を表示したい場合は、data-iconpos="notext"の部分を削除して下さい。ヘッダー部分が狭くなるので、私はアイコンのみの表示にしてあります。次は、アンカーリンクをボタンに変更してみましょう。これもものすごく簡単です。data-role属性に"button"を指定するだけです。ボタンの横にアイコンを表示するのも、data-icon属性を指定するだけです。ヘッダーの下にナビゲーションバーを表示してみます。これは、data-role属性に"navbar"を指定することで、可能です。ナビゲーションバーにもスウォッチ(data-theme)を指定することが出来ます。1行に5つまで表示することが出来ます。リストは、ul要素にdata-role属性の"listview"を指定します。リンクリストの初期アイコンは右矢印ですが、これを変更するには、li要素にdata-icon属性を指定します。アイコン名に"false"を指定するとアイコンは表示されません。リストを階層分けするには、data-role属性に"list-divider"を指定します。それでは、ここまでのコードを下記に記述しておきます。data-theme="b"><p>1ページ目です。data-theme="e"><p>2ページ目です。ブラウザで確認してみましょう。テキスト入力ボックスは、label要素とinput要素をdata-role属性の"fieldcontain"で囲むことでjQueryMobileは最適なテキストボックスを作成します。input要素のtype属性に指定することでいろいろな入力ボックスを作ることが出来ます。下記の入力キーボードの指定は、プラットフォームによりますので、携帯の機種によっては、適用されません。type="search"入力ボックスの左側に虫眼鏡アイコンが表示されます。type="password"パスワード入力ボックスを作ることが出来ます。type="number"入力キーボードが自動的に数値に適したものになる数値入力ボックスがを作ることが出来ます。type="email"入力キーボードが自動的にアドレス入力に適したものになります。type="url"入力キーボードが自動的にURL入力に適したものになります。type="tel"入力キーボードが自動的に電話番号入力に適したものになります。type="time"入力キーボードが自動的に時刻入力に適したものになります。type="date"入力キーボードが自動的に日付入力に適したものになります。type="month"入力キーボードが自動的に年月入力に適したものになります。type="datetime"入力キーボードが自動的に日時入力に適したものになります。ラジオボタンは、input要素にtype="radio"を指定した選択肢群を、filedsetで囲むことで作成することが出来ます。ラジオボタン群のラベルはレジェンド要素で設定します。ラジオボタングループを横に並べる場合は、fieldset要素にdata-type="horizontal"を指定します。チェックボックスも基本的にラジオボタンと変わりません。チェックボックスもラジオボタンと同様に横に並べることが出来ますが、中の文字数等により1行で表示されない可能性があります。デザイン的にこだわりがないのであれば、縦に並べることをお奨めします。それでは、ブラウザで確認してみましょう。最後に本日作成したHTMLファイルの全コードを下記に表示しておきます。data-theme="b"><p>1ページ目です。data-theme="e"><p>2ページ目です。Winroad</div></div></body></html>jQueryMobileは、今回紹介した以外に、たくさんの機能があります。今回これでサイトを作成してみて、これ以上の事がやりたくなったら、本格的に勉強して下さい。このサイトがjQueryMobileを使う足がかりになっていただければ幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト関連記事jQueryの基本的なことを調べてみました今までPHPを主体に勉強してきましたが、Webアプリケーションを開発する上で、欠かせない存在となってきているのが、JavaScriptです。...FuelPHPで軽量ビジュアルエディタの設置(実践編その10)今日は、ブログサイト等を作るときに文字装飾を簡単にしてくれるビジュアルエディタをFuelPHPに設置する方法を調べてみたいと思います。...jQueryMobileのテーマローダーで簡単テーマ作成jQueryMobileには、『a』~『e』の5種類のテーマがデフォルトで用意されていますが、これだけではバリエーションが全く足りないと思われている方が多いと思います。...jQueryのexValidationで簡単バリデーションjQueryのexValidationというプラグインがとても便利ですので、ご紹介したいと思います。...FuelPHPでスマホサイトを作成する最近、スマホサイトに関する質問が多くなってきていますので、今回から何回かにわけてFuePHP内でjQueryMobileを利用した、スマホ(モバイル)サイトを実際に作成してみたいと思います。AFFINGER5.。