jQuery を使って動的で高品質なウェブサイトを構築する方法を解説しています。なるべく動くサンプルコードを記載しています。
jQuery 入門jQuery 入門
jQuery の使い方
jQuery の基礎
jQuery モバイル
jQuery UI
サンプルのテーマ変更

jQuery の拡張
関連サイト
サイト情報
ホーム > jQuery Mobile 入門 > jQuery Mobile の基本的な使い方

jQuery Mobile の基本的な使い方

スポンサーリンク

スマートフォン上のブラウザは、PC 向けのウェブサイトを表示することを基本として設計されているので、 デフォルトでは文字が小さくなる、リンクをクリックしにくいなどの問題が発生します。

そのためにモバイルユーザーが、あなたのウェブサイトを訪れることを想定した場合、スマートフォン上のブラウザでも文字が読みやすくなるように、 そして必要なリンクをクリックしやすくなるような工夫をしなければなりません。

また、使用感としてネイティブ・モバイル・アプリに近く実装できれば、ネイティブアプリの開発ではなく HTML によるアプリケーションの開発にフォーカスするのもよいかもしれません。

ここでは jQuery Mobile を利用して簡単なウェブサイトを作成する事を通して、jQuery Mobile の基本的な利用方法を学びましょう。

尚、この記事では jQuery Mobile 1.1.0 を利用することを想定しています。

» jQuery Mobile 1.3 を使うテンプレート

jQuery Mobile の基本的な使い方

ではさっそく、コードから見てみましょう。

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width">
  <meta charset="UTF-8">
  <title>jQuery Mobile デモ 1</title>
  <link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
  <div data-role="header"><h1>jQuery Mobile デモ</h1></div>
  <div data-role="content">
    <p>Page 1</p>
  </div>
  <div data-role="footer">&copy; keicode.com</div>
</div>
</body>
</html>

この結果、次のように表示されます。スクリーンショットは Android 2.3.3 上の標準ブラウザで表示しています。

jQuery Mobile の基本的な使い方

横向きだと次のようになります。

jQuery Mobile の基本的な使い方

まだ有用なところは見えていないと思いますが、とりあえずここまでのコードを説明します。

jQuery Mobile の取り込み

ヘッダー部で jQuery Mobile 1.1.0 の CSS と必要な JavaScript を取り込んでいます。

  <link rel="stylesheet" 
    href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
  <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

ダウンロードしてあなたのウェブサイトから配信することも可能です。

これを書いている時点 2012年5月では jQuery Mobile の安定版の最新バージョンは 1.1.0。上の取り込み方法は jQuery Mobile サイトで紹介されている推奨方法です。

実際に利用する場合は jQuery Mobile のサイトを確認して、推奨方法で取り込むとよいでしょう。

尚、本記事はバージョン 1.1.0 を利用するものとして記述していますから、異なるバージョンを利用すれば違う方法で利用する可能性があります。

Viewport と Charset の指定

Viewport についてはデバイス幅を指定しています。

<meta name="viewport" content="width=device-width">

詳細は次の記事を参考にしてください。

» 携帯サイト画面に対応する Viewport

文字コードについては、HTML5 式の方法で指定しています。

<meta charset="UTF-8">

これだけなので簡単ですね。

ページの内容

以上で、ページを記述する土台ができました。この上で body 部内にページを記述していけば OK です。

ページを表しているのは次の部分です。

<div id="page1" data-role="page">
<div data-role="header"><h1>jQuery Mobile デモ</h1></div>
<div data-role="content"> <p>Page 1</p> </div>
<div data-role="footer">&copy; keicode.com</div>
</div>

data-role="page" という属性付きの div タグでページを作ります

その中に div 要素でそれぞれ「ヘッダー部」「コンテンツ」「フッター部」を作っていますが、 ポイントは data-role の指定です。

それぞれ data-role を header、content、footer と指定します。

このようにページを作ると、勝手に上で見ていただいたような "モバイル向けページ" になります。

... といっても、「なんでこれがモバイル向けなんだ?」と思う人も多いと思います。 jQuery Mobile の強みはもう少し使ってみないと分からないと思いますので、ぜひ関連記事もお読みくださいませ。

スポンサーリンク
ホーム > jQuery Mobile 入門 > jQuery Mobile の基本的な使い方
小山圭介 著者
小山 圭介
4/15/1973生
米国在住のソフトウェアエンジニア。ITコンサルタント.. »プロフィール
スポンサーリンク

© 2011-2013 Keisuke Oyama jQuery 入門