jQuery Mobileのメモ & POMERAの使用感

友人の結婚式がありましたので、新幹線で地方から東京へ行ってまいりました。以下のメモは、その道中でjQuery Mobileのお勉強をした際の記録メモです。これまた、仕事上で理解しておく必要がありそうですので。

ちなみに、新幹線道中でのメモには『KINGJIM POMERA DM20』を使いました。iPad + Bluetoothキーボードという手もあるのですが、勉強するときはこっちの方が遥かに効率良いです。使っているBluetoothキーボードが若干使いづらいというのと、あとiPadだとKindle開いて『聖☆おにいさん』とかうっかり読み始めてしまうので。

DM20とかDM25 みたいな折りたたみキーボードがスライドして出てくる機構は大好きですが、実際問題カバンに入れて持ち運ぶときはDM100の方が持ち運びやすそうです。いつかお金に余裕ができたらほしいアイテムです。

と、余談はこれぐらいにして、以下メモです。今回はO’Reillyの『実践 jQuery Mobile 』がベースです。

<meta  name=”viewport” content=”width=device-width, initial-scale=1, user-scalable=no”>
・ブラウザに対して、表示領域とデバイスの画面の横幅を一致(サイズ比1対1)させることを通知
・ジェスチャによるスケール変更を禁止

jQuery Mobileでは、通常のHTMLタグに対して、data-*属性(カスタム属性)を記述することで、JQMのフレームワークが行う処理を指定する。data-*属性はHTML5の仕様の中で定義された、任意の属性を追加するための仕様で、HTML5に対応していないブラウザでは無視されるようになっている。

data-theme属性で指定するのは、スウォッチ(色見本)。デフォルトでは”a”〜”e”で指定する。aから順に黒、青、銀(デフォルト)、グレー、黄。任意の要素で指定可能で、親要素で指定されたスウォッチは、別のスウォッチが指定されない限り子孫の要素にも適用される。

一般的に、ページはヘッダー、コンテンツ、フッターの3つのパーツからなる。
<div data-role=”page”>
  <div data-role=”header”>
    <h1> </h1>
  </div>
  <div data-role=”content”>

  </div>
  <div data-role=”footer”>
    <h4> </h4>
  </div>
</div>

リンク(<a href>)の書き方は4つ。
・内部リンク(同一htmlファイル内でのリンク)
・外部リンク(JQMの別htmlファイルへのリンク)
・絶対リンク(非JQMファイルへのリンク)
・特殊リンク

内部リンクは、<a href=”#id名”>のように書く。<a href=”#”>とすると、デフォルトではどこにも飛ばないリンクになる(別途、javascriptで動作を設定できる)

外部リンクは、<a href=”other.html”>のように書く。リンク先のドキュメントに対してajaxでリクエストを行い、リクエスト先の最初の<div data-role=”page”>の内容を取得して、自分のDOMの中に埋め込む(内部リンクと同じ扱いができるようにする)。これによって、スムーズに別ファイルのページに移動できるようにしている。ただし、最初の<div data-role=”page”>の内容以外は、JQMのフレームワーク上ではすべて無視されるので注意。

絶対リンクは、<a href=”../hogehoge.js” data-rel=”external”>のように書く。JQMのコンテンツではないドキュメント(javascriptファイルなど)に対してリンクを行いたいときに使用する。

前のページに戻るボタンを自分で記述する場合には、ボタンの要素でdata-rel=”back”を指定する。

ナビゲーションバーでは、複数のリンクをツールバーに配置することによって、排他的な選択肢を提示できる。nabvarロールのタグの中に、リンクを箇条書きすればOK。
<div data-role=”navbar”>
  <ul>
    <li><a href=”#link1″ class=”ui-btn-active”>リンク1</a>
    <!– –>
    <li><a href=”#link2″>リンク2</a>
  </ul>
</div>
この場合、リンク1があらかじめ選択状態になる(色が変わる)


<div data-role=”content”>コンテナの中では、どのようなHTMLのコードも機能する。

折り畳み可能なコンテンツを作るには、contentロールの中に<div data-role=”collapsible”>コンテナを用意すればよい。中にはhx要素が1つ必要(例えばh2)。折り畳まれた状態で表示するには、コンテナの要素でdata-collapsed=”true”を指定する。
複数の中から一つだけ開いておきたい場合(いわゆるアコーディオン)にしたい場合は、<div data-role=”collapsible-set”>コンテナをつくり、その中にcollapsibleロールのコンテナを入れていく。デフォルトでは、アコーディオンの中で末尾のパネルが展開された状態で表示される。末尾以外のパネルが開かれた状態にしたい場合は、そのパネルの要素でdata-collapsed=”false”を指定し、その他すべてのパネルにはdata-collapsed=”true”を指定する。

JQMでリストを作りたい場合は、<ul>(箇条書き)か<ol>(番号つき箇条書き)にdata-role=”listview”を加えればOK。画面いっぱいのリストにしたくない場合は、さらにdata-inset=”true”を加える。

フォームを作る際、きちんとラベルを定義してあげれば、ラベルをタッチすると対象のフォームコントロールにフォーカスが移り、そのコントロールをすぐに利用できるようになる。

フォームを作る際は、フィールドコンテナをきちんと設定してやると、端末に応じて、ラベルと入力フィールドが適切に配置されるようになる。
<div data-role=”fieldcontain”>
  <label for=”company”>会社名:</label>
  <input type=”text” id=”company” name=”company”>
</div>
<div data-role=”fieldcontain”>
  <label for=”email”>メールアドレス:</label>
  <input type=”email” id=”email” name=”email”>
</div>
複数行入力させる場合は、inputではなくtextareaを使う。
<div data-role=”fieldcontain”>
  <label for=”comments”>コメント:</label>
  <textarea id=”comments” name=”comments”></textarea>
</div>

セレクトメニューを使いたい場合は、次のように書く。
<label for=”training”>トレーニング</label>
<select id=”training” name=”training”>
  <option value=”1″>HTML5</option>
  <option value=”2″>jQuery Mobile</option>
</select>

ラジオボタンを作るときには、選択肢を表すinput要素にはすべてtype=”radio”を指定し、同じグループに含まれるすべてのinput要素で、name属性に同じ値を指定する。
<legend>メニューの種類</legend>
<label for=”menu1″>メニュー1</label>
<input type=”radio” id=”menu1″ name=”menuType” value=”1″>
<label for=”menu2″>メニュー2</label>
<input type=”radio” id=”menu2″ name=”menuType” value=”1″>
legendコンテナ以外を<div data-role=”controlgroup”>の中に納めると、さらにきれいに表示される。さらに、controlgroup要素でtype=”horizontal”を追加すると、横並びのラジオボタンになる。


チェックボックスの作り方は、ラジオボタンとほぼ同様。typeがチェックボックスに変わる。また、nameを選択肢の間で揃える必要はない。
<legend>配送オプション</legend>
<div data-role=”controlgroup”>
  <label for=”optionGift”>ギフト包装</label>
  <input type=”checkbox” id=”optionGift” name=”optionGift” value=”yes”>
  <label for=”optionBag”>袋を付ける</label>
  <input type=”checkbox” id=”optionBag” name=”optionBag” value=”yes”>
</div>

とりあえず、以上。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>