jQuery

これだけ覚えれば誰でも使えるjQuery Mobile

更新日:

jQueryMobileは、data-role属性とか、ちょっと見た感じでは、取っつきにくそうなのですが、いくつかのルールを覚えれば誰でも簡単にスマートフォンサイトを作成することができます。今日はjQueryMobileの基礎をご紹介したいと思います。

jQueryMobileの読み込み

1. jQueryMobileを利用するには、まずjQuryMobileを読み込まなくてはなりません。CDNを使う方法、ファイルをダウンロードして使う方法がありますが、とりあえず使うには、何も考えずにCDN(コンテンツデリバリネットワーク)を使いましょう。

2. サイトのヘッダー部分にjQueryMobileを利用するためのコードを記述します。6行目から9行目はおまじないだと思って何も考えずに記述して下さい。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title>タイトル名</title>
 <meta name="viewport" content="width=device-width,minimum-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
 <script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
 <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script>
 </head>

ページの作成

3.  jQueryMobileのページは<bory></body>内に、div要素で囲ったdata-role="page"を作成するだけです。このときにid名(任意)は忘れずに指定して下さい。

<body>
 <div data-role="page" id="page1">
 1ページ目です。
 </div>
 </body>

4. jQueryMobileは1つのファイルに複数のページを記述することを前提に作られています。ですので、別ページを作成するには、同じようにdiv要素で囲ってページを作成します。それぞれページを区別するために、id名が必要になります。

ページ間移動

5. ページ間を移動するには、<a href="#page2">のように、アンカータグで指定します。もう1ページを作成して、ページを移動してみます。

<body>
 <div data-role="page" id="page1">
 <p>1ページ目です。</p>
 <p><a href="#page2">2ページ目へ移動します</a></p>
 </div>
 <div data-role="page" id="page2">
 <p>2ページ目です</p>
 <p><a href="#page1">1ページ目へ移動します</a></p>
 </div>
 </body>

6. ブラウザで確認してみます。リンクをクリックすると画面が右から左へスライドして別ページを表示します。

別ファイルへのリンク

7. jQueryMobileはサイト内のページ移動にAjaxを利用しています。外部サイトへのリンクは、特に問題は生じないのですが、移動先が同じWebサイト内のファイルへのリンクの時は、注意が必要です。

8. 同じWebサイトの別ファイルへ移動するとき、移動先のファイルが複数ページに分かれていた場合、最初のページだけが読み込まれて、2ページ以降は読み込まれません。よって、移動先ページでリンク(内部リンク)が動作しないなどのトラブルが発生します。

9. この問題を回避するには、いくつかの方法があるのですが、とりあえず、a要素に『dara-rel="external"』を指定して下さい。これは、強制的に外部サイトへのリンクだと指定する方法です。これ以外の方法は後で覚えればいいと思います。

コンテンツとヘッダー、フッターの指定

10. jQueryMobileでは、各ページをヘッダー、フッターやコンテンツに分けることにより見栄えを良くすることが出来ます。これもdiv要素で囲って、data-role属性に『header』、『content』、『footer』を指定するだけです。それでは、1ページ目にヘッダー、コンテンツ、フッターを指定してみます。

<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>page1</h1>
</div>
<div data-role="content">
<p>1ページ目です。</p>
<p><a href="#page2">2ページ目へ移動します</a></p>
</div>
<div data-role="footer" style="text-align:center">
@2012 Winroad
</div>
</div>
<div data-role="page" id="page2">
<p>2ページ目です</p>
<p><a href="#page1">1ページ目へ移動します</a></p>
</div>
</body>

11. ブラウザで確認してみます。footer内の文字は、何も指定しなければ、左寄りで表示されますので、10行目でスタイルを指定して、中央寄りに指定しました。

ヘッダーやフッターの背景色の変更

12. デフォルトのヘッダーやフッターの背景色は黒ですので、背景色を変更したい場合は、data-themeを指定します。テーマのAが黒系、Bが青系、Eが黄色系、Cはグレイ系、Dは白系です。これ以外の背景色を使いたいときは、『jQueryMobileのテーマローダーで簡単テーマ作成』を参考にして、作成して下さい。

13. 統一感がないですが、実験ですので、1ページ目のheaderをB、contentをA、footerをEで指定してみます。

<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>page1</h1>
</div>
<div data-role="content" data-theme="a">
<p>1ページ目です。</p>
<p><a href="#page2">2ページ目へ移動します</a></p>
</div>
<div data-role="footer" data-theme="e" style="text-align:center">
@2012 Winroad
</div>
</div>

14. ブラウザで表示してみます。いやはや奇抜な配色ですが、背景色の指定方法は分かったと思います。

『Back』ボタンと『Home』アイコンの追加

15. 前のページやTOPページへ戻るのに、いちいちリンクを作成するのは面倒ですので、ヘッダー部分に『Back』ボタンと『Home』アイコンを作成したいと思います。2ページ目にもヘッダー、コンテンツ、フッターを作成します。

16. 2ページ目のヘッダーに『Back』ボタンを表示するためには、data-role="page"の後に下記のコードを追加します。

data-add-back-btn="true"

17. 『Back』ボタンの表記を日本語にするには、さらに下記コードを追加します。

data-back-btn-text="戻る"

18. 次に『Home』アイコンを右側に表示するためには、下記コードを追加します。アイコンの中に名前を表示したい場合は、data-iconpos="notext"の部分を削除して下さい。ヘッダー部分が狭くなるので、私はアイコンのみの表示にしてあります。

<a href="/" data-icon="home" data-iconpos="notext" class="ui-btn-right">ホーム</a>

アンカーリンクをボタンにする

19. 次は、アンカーリンクをボタンに変更してみましょう。これもものすごく簡単です。data-role属性に"button"を指定するだけです。ボタンの横にアイコンを表示するのも、data-icon属性を指定するだけです。

<a href="#page2" data-role="button" data-icon="arrow-r">2ページ目へ移動します</a>

ナビゲーションバーを表示する

20. ヘッダーの下にナビゲーションバーを表示してみます。これは、data-role属性に"navbar"を指定することで、可能です。ナビゲーションバーにもスウォッチ(data-theme)を指定することが出来ます。1行に5つまで表示することが出来ます。

<nav data-role="navbar">
 <ul>
 <li><a href="#" data-theme="a">A</a></li>
 <li><a href="#" data-theme="b">B</a></li>
 <li><a href="#" data-theme="c">C</a></li>
 <li><a href="#" data-theme="d">D</a></li>
 <li><a href="#" data-theme="e">E</a></li>
 </ul>
 </nav>

リストを表示する

21. リストは、ul要素にdata-role属性の"listview"を指定します。リンクリストの初期アイコンは右矢印ですが、これを変更するには、li要素にdata-icon属性を指定します。尚、アイコン名に"false"を指定するとアイコンは表示されません。リストを階層分けするには、data-role属性に"list-divider"を指定します。

22. それでは、ここまでのコードを下記に記述しておきます。参考にして下さい。

<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>page1</h1>
<nav data-role="navbar">
<ul>
<li><a href="#" data-theme="a">A</a></li>
<li><a href="#" data-theme="b">B</a></li>
<li><a href="#" data-theme="c">C</a></li>
<li><a href="#" data-theme="d">D</a></li>
<li><a href="#" data-theme="e">E</a></li>
</ul>
</nav>
</div>
<div data-role="content" data-theme="b">
<p>1ページ目です。</p>
<a href="#page2" data-role="button" data-icon="arrow-r">2ページ目へ移動します</a>
</div>
<div data-role="footer" data-theme="b" style="text-align:center">
@2012 Winroad
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="戻る">
<div data-role="header" data-theme="e">
<h1>page2</h1>
<a href="/" data-icon="home" data-iconpos="notext" class="ui-btn-right">ホーム</a>
</div>
<div data-role="content" data-theme="e">
<p>2ページ目です。</p>
<a href="#page1" data-role="button" data-icon="arrow-l">1ページ目へ移動します</a><br>
<ul data-role="listview">
<li data-role="list-divider">グループA</li>
<li data-icon="home"><a href="#">ホーム</a></li>
<li data-icon="gear"><a href="#">設定</a></li>
<li data-icon="false"><a href="#">アイコン無し</a></li>
<li data-role="list-divider">グループB</li>
<li><a href="#">リンク4</a></li>
<li><a href="#">リンク5</a></li>
</ul>
</div>
<div data-role="footer" data-theme="e" style="text-align:center">
@2012 Winroad
</div>
</div>
</body>

23. ブラウザで確認してみましょう。

テキスト入力ボックス

24. テキスト入力ボックスは、label要素とinput要素をdata-role属性の"fieldcontain"で囲むことでjQueryMobileは最適なテキストボックスを作成します。

<div data-role="fieldcontain">
 <label for="textinput">テキスト入力</label>
 <input type="text" name="textinput" id="textinput">
 </div>

25. 尚、input要素のtype属性に指定することでいろいろな入力ボックスを作ることが出来ます。尚、下記の入力キーボードの指定は、プラットフォームによりますので、携帯の機種によっては、適用されません。

  • type="search"
    入力ボックスの左側に虫眼鏡アイコンが表示されます。
  • type="password"
    パスワード入力ボックスを作ることが出来ます。
  • type="number"
    入力キーボードが自動的に数値に適したものになる数値入力ボックスがを作ることが出来ます。
  • type="email"
    入力キーボードが自動的にアドレス入力に適したものになります。
  • type="url"
    入力キーボードが自動的にURL入力に適したものになります。
  • type="tel"
    入力キーボードが自動的に電話番号入力に適したものになります。
  • type="time"
    入力キーボードが自動的に時刻入力に適したものになります。
  • type="date"
    入力キーボードが自動的に日付入力に適したものになります。
  • type="month"
    入力キーボードが自動的に年月入力に適したものになります。
  • type="datetime"
    入力キーボードが自動的に日時入力に適したものになります。

ラジオボタンとチェックボックス

26. ラジオボタンは、input要素にtype="radio"を指定した選択肢群を、filedsetで囲むことで作成することが出来ます。ラジオボタン群のラベルはレジェンド要素で設定します。尚、ラジオボタングループを横に並べる場合は、fieldset要素にdata-type="horizontal"を指定します。

<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>ラジオボタン</legend>
<label for="radio1">radio1</label>
<input type="radio" name="radio" id="radio1" >
<label for="radio2">radio2</label>
<input type="radio" name="radio" id="radio2" >
<label for="radio3">radio3</label>
<input type="radio" name="radio" id="radio3" >
</fieldset>
</div>

27. チェックボックスも基本的にラジオボタンと変わりません。チェックボックスもラジオボタンと同様に横に並べることが出来ますが、中の文字数等により1行で表示されない可能性があります。デザイン的にこだわりがないのであれば、縦に並べることをお奨めします。

<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>チェックボックス</legend>
<label for="ck1">checkbox1</label>
<input type="checkbox" name="ck1" id="ck1" >
<label for="ck2">checkbox2</label>
<input type="checkbox" name="ck2" id="ck2" >
<label for="ck3">checkbox3</label>
<input type="checkbox" name="ck3" id="ck3" >
<label for="ck4">checkbox4</label>
<input type="checkbox" name="ck4" id="ck4" >
</fieldset>
</div>

28. それでは、ブラウザで確認してみましょう。

29. 最後に本日作成したHTMLファイルの全コードを下記に表示しておきます。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル名</title>
<meta name="viewport" content="width=device-width,minimum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>page1</h1>
<nav data-role="navbar">
<ul>
<li><a href="#" data-theme="a">A</a></li>
<li><a href="#" data-theme="b">B</a></li>
<li><a href="#" data-theme="c">C</a></li>
<li><a href="#" data-theme="d">D</a></li>
<li><a href="#" data-theme="e">E</a></li>
</ul>
</nav>
</div>
<div data-role="content" data-theme="b">
<p>1ページ目です。</p>
<a href="#page2" data-role="button" data-icon="arrow-r">2ページ目へ移動します</a>
<div data-role="fieldcontain">
<label for="textinput">テキスト入力</label>
<input type="text" name="textinput" id="textinput">
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>ラジオボタン</legend>
<label for="radio1">radio1</label>
<input type="radio" name="radio" id="radio1" >
<label for="radio2">radio2</label>
<input type="radio" name="radio" id="radio2" >
<label for="radio3">radio3</label>
<input type="radio" name="radio" id="radio3" >
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>チェックボックス</legend>
<label for="ck1">checkbox1</label>
<input type="checkbox" name="ck1" id="ck1" >
<label for="ck2">checkbox2</label>
<input type="checkbox" name="ck2" id="ck2" >
<label for="ck3">checkbox3</label>
<input type="checkbox" name="ck3" id="ck3" >
<label for="ck4">checkbox4</label>
<input type="checkbox" name="ck4" id="ck4" >
</fieldset>
</div>
</div>
<div data-role="footer" data-theme="b" style="text-align:center">
@2012 Winroad
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true" data-back-btn-text="戻る">
<div data-role="header" data-theme="e">
<h1>page2</h1>
<a href="/" data-icon="home" data-iconpos="notext" class="ui-btn-right">ホーム</a>
</div>
<div data-role="content" data-theme="e">
<p>2ページ目です。</p>
<a href="#page1" data-role="button" data-icon="arrow-l">1ページ目へ移動します</a><br>
<ul data-role="listview">
<li data-role="list-divider">グループA</li>
<li data-icon="home"><a href="#">ホーム</a></li>
<li data-icon="gear"><a href="#">設定</a></li>
<li data-icon="false"><a href="#">アイコン無し</a></li>
<li data-role="list-divider">グループB</li>
<li><a href="#">リンク4</a></li>
<li><a href="#">リンク5</a></li>
</ul>
</div>
<div data-role="footer" data-theme="e" style="text-align:center">
@2012 Winroad
</div>
</div>
</body>
</html>

jQueryMobileは、今回紹介した以外に、たくさんの機能があります。今回これでサイトを作成してみて、これ以上の事がやりたくなったら、本格的に勉強して下さい。このサイトがjQueryMobileを使う足がかりになっていただければ幸いです。本日は以上です。

-jQuery
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.