Entries


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

-件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

-件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1334-9b421f78

jQueryMobileでよく使ってそうなマークアップあたりをメモしておく


jQueryMobileを個人的に作っているウェブゲームで使いはじめて一ヶ月もすぎた気がするので,よく使っている気がするマークアップを復習がてらメモしておきます.すぐ忘れちゃうもので.

            ___
          / ⌒  ⌒\   __
        / (⌒)  (⌒) \〈〈〈 ヽ
      /   ///(__人__)/// 〈⊃  }
      |   u.   `Y⌒y'´     |   | jQueryMobileはじめるお
     \       ゙ー ′   ,/   /
     /⌒ヽ   ー‐    ィ     /
     / rー'ゝ           /
    /,ノヾ ,>         /
     | ヽ〆         |


まず必要な情報など
ホーム - jQuery Mobile 1.0a4.1 日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/

サンプル集
http://yst.web.infoseek.co.jp/jquerymobile/sample.html

導入方法や書き方は上記のサイトとサイトのソースを見るだけでなんでもできるような気がします.たぶん

ということで結構使っているところをメモしてみます.

headタグ内のメタタグとかその周辺


メタタグについては詳しくわかりません.とりあえずサイトを参考に

1時間で携帯サイトをスマートフォン対応にする方法
http://labs.gree.jp/blog/2011/04/3282/


シンプルです.
簡単でいいっぽいです.

基本の枠組み


jQueryMobileは決まったHTMLの枠組みを使う必要があります.というよりこの通り書かないと表示されないんじゃないですかね.

「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる
http://www.publickey1.jp/blog/11/jquery_mobile.html



上記サイトにテンプレートが書いてあるのでそれをコピーして使います.

サブページの部分は削除して,メインページの中身に表示したいものを書けばOKです.

リンクについて


まずはリンクタグについて書いてみます.
jQueryMobileは同じサイト内へリンクタグを書くと,Ajaxでページ遷移が行われます.サイト内でAjaxを回避するにはdata-ajax="false"と属性を追加してあげればOKです.

以下の図は外部サイトへリンクを貼った場合です.
スクリーンショット(2011-05-27 19.45.40)

上記は外部の掲示板へのリンクですのでrel="external"と外部指定しています.rel属性に外部サイト指定をしたりtarget属性をつけるとAjaxにならないみたいです.

aタグのリンクボタンについて


jQueryMobileはaタグのリンクに属性を足すだけでボタンの様なデザインにすることができます.

以下の図の「モンスター」と「アイテム」はaタグに属性を書いただけでボタンになっています.
スクリーンショット(2011-05-30 20.41.57)


ボタンタイプのリンクにするにはdata-role="button"と指定すればボタンにできます.とても簡単です.

上にある『モンスター』と表示された青いボタンはclass="ui-btn-active"と指定してボタンの色を変えています.このボタンの色を変えるアクティブ指定は使用頻度が高そうな気がします.

使ってみて思ったのはclass="ui-btn-active"よりもdata-theme="b"のほうがいいかもしれません.違いは,マウスオーバーしたときや,クリックしたときに色が変わるか変わらないかです.class="ui-btn-active"ではマウスオーバーしてもリンク色が変わりません.細かいところですけど微妙に違いますね.

これらのdata-role属性のボタン指定ではwidthが100%まで広がります.100%まで広がってしまうと都合が悪い場合があります.ボタンをテキスト幅にそろえたくなってきます.
ボタンの幅をテキストに合わせるには

リンクボタンをテキストの幅に合わせて作ります.以下の図にあるキャンセルボタンはリンクタグで作っていまして,幅もテキストの幅になっています.
スクリーンショット(2011-05-30 20.47.51)


こんな感じでdata-inline="true"を指定してあげればOKです.
ちなみにdata-rel="back"と指定すると前のページに戻るリンクになります.

カラムを横に並べる


やっていると横にカラムを並べてレイアウトを作りたくなります.呼び方をレイアウトグリッドと呼ぶみたいです.

リファレンスが詳しいので読めばわかるのですけどここではメモとしてちょっとだけ書いておきます.
レイアウトグリッド - jQuery Mobile 1.0a4.1 日本語リファレンス

以下の図では横並びでボタンを並べています.
スクリーンショット(2011-05-30 20.38.08)

カラム分けはdivにclassを指定するだけです.class="ui-grid-a"で指定すると2カラムに,class="ui-grid-b"と指定すると3カラムに,class="ui-grid-c"と指定なら4カラム,class="ui-grid-d"と指定なら5カラムと変わります.たぶんポイントはここだけでかと.

中に入るdivにはclass="ui-block-a"と指定します.そしてカラムの数だけui-block-a,b,c・・・とdivを書いてあげます.

formで扱うinputタグのボタンについて


formのinputタグはタグを書くだけで見た目がボタンになります.aタグのリンクボタンで指定した属性がおそらく使用できます.

使いそうな属性としてはdata-ajax="false"data-inline="true"でしょうか.

ヘッダのボタンについて


jQueryMobileではページを遷移した際,ヘッダへ自動的に戻るボタンを挿入するようです.

以下の図は戻るボタンが表示されています.
スクリーンショット(2011-05-30 23.06.18)
このボタン表示させたくないと思います.

こんな感じでdata-backbtn="false"を指定してあげれば戻るボタンは表示されません.

ヘッダにリンクボタンを表示したい

ヘッダの中にaタグを書くと自動的にボタンになります.

以下の図はヘッダにボタンを配置した図です.
スクリーンショット(2011-05-31 20.11.45)


class="ui-btn-right"とクラスに書くと右側にボタンが配置されます.逆にclass="ui-btn-right"を書かなければリンクボタンは左に表示されます.

data-position="inline"というのがでてくるのですけど,これはよくわかりません.誰か教えて

リストについて


リストをちょっと見てみます.

こんどのサイトでは以下の図のようなデザインのリストにすることにしました.
スクリーンショット(2011-05-31 20.27.49)
ここのソースはこんな感じになります.

ulタグにdata-role="listview"と属性を書くだけでリストがオシャレになります.これを書かないと普通のテキストのように表示されます.
さらにdata-inset="true"と属性を書くと角丸のリストになります.

liタグにdata-role="list-divider"を属性つけると,図では青色で表示されていますが,リストに見出しの様なリストの分割区分をつけることができます.

リストは書き方がいっぱいあるみたいなので,リファレンスのソースをみて試してみるとわかりやすいです.
リスト - jQuery Mobile 1.0a4.1 日本語リファレンス

まとめと感想など


長くなってきたのでこの辺でやめておきます.ブログに書いてみたらaタグのボタン周りが多いですね.

jQueryMobileはHTMLとCSSの組み合わせよりも変化が少ないため,とても簡単な印象を持ちました.少しHTMLの経験があればすぐに扱えるようになるのではないかと思います.リンクタグやformのデザインを考えなくて済むのは素晴らしいですね.

この辺あまり実機でテストしてないのでよくわかりませんけど,ajaxがどうもうまく動かないことがあったため,formでデータをやり取りするならdata-ajax="false"は指定した方がいいような気がしました.また,ヘッダに自動で挿入される戻るボタンは表示されない場合がありました.

あとIEでは全く動きません.というか表示すらされません.

なにか間違いがあれば教えてください.
   / ̄ ̄\
 /   _ノ  \
 |    ( ●)(●)
. |     (__人__)
  |     ` ⌒´ノ
.  |         }  ミ        ピコッ
.  ヽ        } ミ  /\  ,☆____
   ヽ     ノ    \  \ /     \
   /    く  \.  /\/ ─    ─ \
   |     `ー一⌒)  /   (●)  (●)  \  簡単すぎて
    |    i´ ̄ ̄ ̄ \ |      (__人__)     |  わざわざブログに書く価値ないな
               \_   ` ⌒´    /
                /          \



Jquery Mobile: Up and RunningJquery Mobile: Up and Running
(2011/08/22)
Maximiliano Firtman

商品詳細を見る

0件のコメント

コメントの投稿

新規

※設定NGワードは『http』です

投稿した内容は管理者にだけ閲覧出来ます

0件のトラックバック

トラックバックURL
http://pugiemonn.blog6.fc2.com/tb.php/1334-9b421f78

Appendix

プロフィール

川崎修

  • Author:川崎修
  • インターネット大好き!
    調布周辺で自宅警備してます



    メール:pugiemonn@gmail.com
    skype:pugiemonn
    twilog:Twilog
    mixi:mixi
    facebook:facebook
My Profile by iddy
FC2ブログ

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -

最近の記事

Twitter

コミュニティ

ブログ内検索

ブロとも申請フォーム

この人とブロともになる

Adsense

月別アーカイブ

はてぶ数

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。