jQueryMobileはJavascriptのライブラリで有名なjQueryベースで作られたスマートフォンサイト制作用のフレームワークのことです。
最大の特徴はAjax、Javascriptの知識がほとんど無くても、HTMLさえ理解できれば誰でもカッコイイスマートフォンサイトが作れるところ！
そんな魅力たっぷりなjQueryMobileをインストール時の注意点から細かく解説していきます。
今すぐあなたもjQueryMobileでスマートフォンサイトを作ってみましょう！
jQueryMobileでフォームを出力しましょう。jQueryMobileでは多彩なフォームUIを用意してくれています。
フォームを使いこなせれば、jQueryMobileをUIにして、アプリなんかも作れそうですね。
数が多いので、フォームのパーツごとに記事を書きたいと思います。
フォームの基本的な書き方については通常のHTMLと何ら変わりありませんが、スマートフォンの場合はHTML5で書いていくのがよいでしょう。
ちょっと更新が遅れましたが、jQueryMobile ナビゲーションについてです。ヘッダーやフッターにナビゲーションを表示して、よりスマートフォンサイトっぽく仕上げていきましょう。
まずはヘッダー内に下記のようにdata-role=”navbar”でリンクを設置して下さい。
なお、class=”ui-btn-active”とすると、リンクをアクティブ状態にすることが出来ます。
jQuery Mobile
先ほどのheaderのナビゲーションは変に余白がありましたが、それをきっちり並ぶようにします。基本的にはaタグを裸で設置するのを止めて、liタグで囲ってあげるようにしただけです。
jQuery Mobile
ヘッダーにナビゲーションを設置する際、ナビゲーションが6個を超えると2列表示に切り替わります。6個以上のヘッダーナビゲーションは常に2列表示です。
ナビゲーションはヘッダーだけではありませんね。data-role=”content”の中にもナビゲーションを表示してみましょう。
複数ボタンがあり、それらをグループとして結合させたい場合はdata-role=”controlgroup”を使います。
デフォルトでは横同士で結合ですが、data-type=”horizontal”を設定すると、縦同士で結合することが出来ます。
なお、一番したはフォームのボタンです。
(ここから追加)
さきほどナビゲーションを少しアレンジしてアイコンを表示してみたいと思います。data-iconはアイコンの種類を、data-iconposはアイコンの場所を設定することが出来ます。
data-iconposには下記の通りのパラメータが設定できます。
| 設定 | アイコン |
|---|---|
| alert | 注意(びっくりマーク) |
| data-icon=”arrow-l” | 左矢印 |
| data-icon="arrow-r" | 右矢印 |
| data-icon="arrow-u" | 上矢印 |
| data-icon="arrow-d" | 下矢印 |
| data-icon="delete" | ×印 |
| data-icon="plus" | ＋印 |
| data-icon="minus" | －印 |
| data-icon="check" | レ点 |
| data-icon="gear" | ギア |
| data-icon="refresh" | 再読込 |
| data-icon="forward" | 前進 |
| data-icon="back" | 後退 |
| data-icon="grid" | グリッド |
| data-icon="star" | 星 |
| data-icon="alert" | アラート |
| data-icon="info" | びっくりマーク |
| data-icon="home" | 家 |
| data-icon="search" | 虫眼鏡 |
data-iconposはアイコンの表示場所を設定できます。
| bottom | テキストより下 |
|---|---|
| left | テキストに対して左側 |
| notext | テキスト無しで、アイコンだけを表示 |
| right | テキストに対して右側 |
| top | テキストよりも上 |
前回の記事でjQueryMobileでのリスト表示について書きましたが、さらにこのリスト表示のデザインをカスタマイズすることが出来ます。
jQueryMobileでは一つのリストタグの中に２つのリンクを持たせると、
スタイルを自動で２つに分けてくれます。
<ul data-role="listview">
<li>
<a href="#">メインのリンク</a>
<a href="#">サブリンク</a>
</li>
<li>
<a href="#">メインのリンク</a>
<a href="#">サブリンク</a>
</li>
<li>
<a href="#">メインのリンク</a>
<a href="#">サブリンク</a>
</li>
</ul>
jQueryMobileでは1つのリストの中に２つ以上のリンクを持たせることが出来るのですが、1つのリストに3つのリンクを持たせてるとこのようになります。
これは、デフォルトではｊQueryMobileがリストの中の最初と最後のリンクにしかスタイルをあててくれないためです。
真ん中のリンクについては自動でクラスが当たらないため、自分で書いてあげる必要があります。
<li>
<a href="#">メインのリンク</a>
<a href="#" class="ui-link-inherit">サブリンク：1</a>
<a href="#">サブリンク：2</a>
</li>
こんな風にちょっとTwitter風の画像付きリスト表示をしたいと思います。
<li>
<a href="#">
<img src="./images/no-image.gif" alt="hogehoge" width="50" height="50"/>
サブリンク：1</a>
<a href="#">サブリンク：2</a>
</li>
画像が左に寄りすぎていたり、画像とテキストの間に隙間が開きすぎていたりと色々と収まりが悪いですね。
jquery.mobile.min.cssを直接変更するのは、別のところに不具合が起きたら嫌なので今回はHTMLファイルに直接書こうと思います。
HTMLの修正は行いません。直接同一のHTMLにCSSの記述を追加してあげてください。
当然画像の大きさによって高さも変更になるでしょうが、デフォルトではmin-height: 60pxになっています。ここは自分でちょうどいい高さに変更してあげてください。後は書きのposition:absoluteをやめて、paddingを調整してあげてください。
<style>
.ui-li-has-thumb .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-thumb {
padding-left: 10px;
min-height: 50px;
}
.ui-li-thumb, .ui-li-icon {
position: inherit;
}
</style>
<li>
<a href="#">
<img src="./images/no-image.gif" alt="hogehoge" width="50" height="50"
class="ui-li-ico"/>
サブリンク：1
<span class="ui-li-count">3</span>
</a>
<a href="#">サブリンク：2</a>
</li>
なかなか カッコよく出来ましたね。
次回はナビゲーションメニューについてです。
更新は月曜日を予定しています。お楽しみに！
今回はjQueryMobile リスト表示についてです。前回までで簡単な文字の表示やリンク、ページ遷移について書きましたが、いよいよスマートフォンらしいレイアウトを作りたいと思います。
ulタグ、またはolタグに対して、data-role="listview"属性を付与してあげるだけでスタイルが自動で当たります。
さらに、リストで かつ リンクがある場合は自動で矢印も表示されます。
マークアップについては、contentの中身以外は前回と同じなので省略してあります。
<div class="content" data-role="content">
<h3>ベーシックなリスト:ul</h3>
<ul data-role="listview">
<li><a href="#">リンクあり</a></li>
<li>リンク無し</li>
</ul>
<br/>
<h3>ベーシックなリスト:ol</h3>
<ol data-role="listview">
<li><a href="#">リンクあり</a></li>
<li>リンク無し</li>
</ol>
</div>
さきほどは見出しタグで見た目を区切りましたが、liタグ中にもdata role=”divider”で区切ることが出来ます。
<div class="content" data-role="content">
<ul data-role="listview">
<li data-role="divider">リンク1</li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li data-role="divider">リンク2</li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
<li><a href="#">リンク</a></li>
</ul>
</div>
リストを下記マークアップのようにすると、リンクを作っていないのに、子要素のul、孫要素のulまでまるでリンクのようにページ遷移することが出来ます。
<div class="content" data-role="content">
<ul data-role="listview">
<li>親:li
<ul>
<li>子:li
<ul>
<li data-role="divider">以下 孫:li</li>
<li>孫:li(1)</li>
<li>孫:li(2)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
例えば入れ子になっているリストの要素数を入れたり、補足する文字列を入れたり、何かと使えそうなspan class=”ui-li-count”
<div class="content" data-role="content">
<ul data-role="listview">
<li>親:li
<ul>
<li>子:li<a href="#"><span class="ui-li-count">hogehoge</span></a>
<ul>
<li data-role="divider">以下 孫:li</li>
<li>孫:li(1)</li>
<li>孫:li(2)</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
リストの表示についてはもっとアレンジすることが出来るのですが、長くなってしまったのでまた次回！
次回はTwitter風のリスト表示にチャレンジします
jQueryMobileでスマートフォンサイトを作ろう！第2回目はリンクやページ遷移についてです。
jQueryMobileではページ遷移は大きく分けて２つあり、
ページ内リンクと別ページへの遷移です。
それではさっそく見てみましょう。
(なお、今回からマークアップはHTML5のみとなります。)
まずはページ内リンクについてです。前回作ったnew.htmlを複製して、下記のように書き換えてください。data-role=”page”と指定されたsectionタグで囲われた部分が1ページあたりの表示になります。
<!--first_page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>最初のページ</p>
<p><a href="#page2">2ページ目</a></p>
</div>
<footer data-role="footer"><h1>jQuery Mobileでスマホサイト</h1></footer>
</section>
<!--first_page --><!--second_page -->
<section id="page2" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>2ページ目</p>
</div>
<footer data-role="footer"><h1>jQuery Mobileでスマホサイト</h1> </footer>
</section>
<!--second_page -->
このDEMOのプレビューに関してはSafari、ChromeなどのHTML5対応ブラウザか、
スマートフォンから確認して下さい。(Firefoxからではなめらかな動きまで確認できません。)
先ほどのマークアップはページ内リンクについてですが、完全にページを分けたい時の方が明らかに多いはず。下記の例を参考にして下さい。
<!--first_page -->
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>最初のページ</p>
<p><a href="0907_3.html">別ページへ移動</a></p>
</div>
<footer data-role="footer"><h1>jQuery Mobileでスマホサイト</h1></footer>
</section>
<!--first_page -->
ページを分けてしまいたい時は単純にhrefの中身にURLを記述してあげるだけになります。
デフォルトではページ遷移のクリックを押した時の動きは右から左へのスライドアニメーションですが、この動きは自由に変更することが出来ます。
<a href="#page2" data-transition="fade">
フェードして2ページ目へ
</a>
ページ遷移のアニメーションを変更したい場合は、aタグに属性data-transitionを追加、変更してあげるだけ。
| スライド(横) | data-transition=”slide” |
|---|---|
| スライド(下から) | data-transition=”slideup” |
| スライド(上から) | data-transition=”slidedown” |
| ポップ | data-transition=”pop” |
| フェード | data-transition=”fade” |
| くるくる | data-transition=”flip” |
次回はリストの表示についての記事を書きたいと思います。
今回からシリーズでお届けします、jQueryMobileでスマートフォンサイトを作ろうです。
jQueryMobileをまずはダウンロードして設置しましょう。
jQueryMobileの本家サイトからダウンロードします。
本家サイトのDownloadページよりダウンロードします。
Zip File: jquery.mobile-1.0b2.zip (JavaScript, CSS, and images)
これをダウンロードします。ファイルの中身は
なお、この中にはJquery本体が用意されていませんので、ひとまずJquery本家サイトより最新版のJqueryをダウンロードしましょう。
Jquey本体をダウンロードするときもそうですが、特別な理由が無い限りは『min』と書いてあるものを使いましょう。これはMinifiedバージョン（jquery min）と言って、軽量化してあるファイルです。
軽量化してあるといっても、必要な機能は全て網羅した上で軽量化してあるので、Minifiedバージョンが一番使い勝手がよいのです。
Uncompressedはさらに自分でカスタマイズしたい時に使いますが、ファイルサイズを見ての通り、重たいのであまりオススメできません。やはりminと書いてあるファイルを使うのがよいでしょう。
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile</title>
<link rel="stylesheet" href="./jquery.mobile-1.0b2.min.css" />
<script src="./jquery-1.6.2.min.js"></script>
<script src="./jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
</body>
</html>
バージョンにそれぞれ差異はあったとしても、読み込みの順番としては
ひとまず何か表示してみましょう。HTML5と従来のXHTML1.0風のdivスタイルでのマークアップと２つ作成してみました。それぞれ比べてみて下さい。
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>HTML5</p>
</div>
<footer data-role="footer"><h1>jQuery Mobileでスマホサイト</h1></footer>
</section>
<div class="section" id="page1" data-role="page">
<div class="header" data-role="header"><h1>jQuery Mobile</h1></div>
<div class="content" data-role="content">
<p>XHTML風</p>
</div>
<div class="footer" data-role="footer"><h1>jQuery Mobileでスマホサイト</h1></div>
</div>
jQueryMobileは明確なマークアップ方法の指定がありません。従来のXHTML風のdivスタイルでのコーディングも、HTML5もどちらでもマークアップ出来ます。
data-roleとは、HTML5から追加された新しい属性で、idやclassのように自由に名前を付けられて、それに対してCSSのスタイルを当てることが出来ます。
jQueryMobileで主に使われるdata-roleは下記の通りです。下記６つを覚えれば jQueryMobile側でスマートフォンのようなスタイルを勝手にあててくれます。
| data-role=”page” | ページの指定 |
|---|---|
| data-role=”header” | ヘッダーの指定 |
| data-role=”content” | コンテンツ部分の指定 |
| data-role=”footer” | フッターの指定 |
| data-role=”listview” | リスト(liタグ)の指定 |
| data-role=”divider” | リストを分割するのに指定 |
最新版(2011/09/06)で作成したところ、jQueryMobileのヘルプ通りに作っても下記のようになりました。
jQueryMobileはバグが多いことでも有名なので、バージョンをだいぶ落として試します。
理由については後で書きますが、公式サイトからどんなに探しても見つかりません。以前このブログで書いた『jQueryMobileで即効iphoneサイト』が昔のバージョンを使っていまして、そちらを読み込んでみることに。
なお、jQuery本体は最新バージョンでかまいません。変更したのはjQueryMobileのみです。
(※後述しますが、旧バージョンは使わないで下さい)
<link rel="stylesheet" href="http://www.m-musicom.com/jq_mobile/js/jquery.mobile-1.0a3.min.css" />
<script src="./jquery-1.6.2.min.js"></script>
<script src="http://www.m-musicom.com/jq_mobile/js/jquery.mobile-1.0a3.min.js"></script>
jQueryMobileのバージョンを変更しただけで通常のスマートフォンサイズで表示されることが確認されました。最新版jQueryMobileはベータ版ですから、これはバグと言っていいかもしれません。
実は最新ベータ版以外のjQueryMobileからXSS脆弱性が発見され、最新ベータ版以外のバージョンは全て本家サイトからダウンロードすることはできません。
カイワレの大冒険-過去のjQuery Mobile使ってると、脆弱性が出たらしいので、試してみた
jQuery MobileのXSSについての解説
to-R-jQuery MobileにXSSの脆弱性が見つかったのでアルファ版からベータ版に変更する際の注意点
to-R様の記事によると、『ベータ版ではこれまで自動で付加されていたmeta viewportを手動で追加する必要があり』とのことで、先ほど書いたマークアップに追加設定が必要のようです。
先ほどのマークアップ(HTML5でもXHTML風でもどちらでも可)のhead内の
jQueryMobileの読み込み部分をこのように書き換えます。
<link rel="stylesheet" href="./jquery.mobile.min.css" />
<script src="./jquery-1.6.2.min.js"></script>
<script>
$(document).bind("mobileinit", function() {
$.mobile.page.prototype.options.addBackBtn = true;
});
</script>
<script src="./jquery.mobile.min.js"></script>
jQueryMobileの最新版はそのままに、さきほどの記述を追加することで正常に表示することが出来ました。
これでやっと一通りの設置の完了です。
XSSの脆弱性対策は後々に考えていきたいと思います。
使いやすさとその人気からサンプルも多く出回るjQueryMobileですが、旧バージョンのjQueryMobileは絶対に使わないようにすることをお勧めします。サンプルを公開しましたが、こちらは最新版(2011/09/06時点)で作成したものです。
サンプルダウンロード
私はオライリーのjQueryMobileを選択。XSSの脆弱性についてはふれられていません。が、jQueryMobileだけに絞ってあるので読みやすいです。英語に特に抵抗が無ければ比較的読みやすいです。