CodeZine(コードジン)

特集ページ一覧

「jQuery Mobile」を活用したスマートフォンサイト作成(前編)

「jQuery プラグイン」の利用(13)

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2013/02/28 14:00
目次

jQuery Mobile 1.2.0の変更点

 2012年10月にjQuery Mobile 1.2.0が公開されました。1.2.0の変更点は以下のとおりです。

表3 jQuery Mobile 1.2.0の主な変更点
変更点 説明
ポップアップウィジェット追加 半透明背景上にダイアログのようなものが表示される。
ダイアログと違い、画面外をタップするとポップアップは消える
jQueryサポートバージョン変更 新たに1.8.xをサポートし、1.6.x以前のバージョンはサポート外に
リストの機能増強 リストを自動で頭文字ごとに割り振って並べてくれる機能や、
折りたたみ表示が可能に
controlgroupsのアイコン大型化 小さくてタップしづらかったアイコンが大型化。小型にも設定可能

 最も大きな変更はjQueryサポートバージョン変更で、UIとしてはポップアップウィジェットの追加です。次回後編では今回の変更で一番特徴的なポップアップウィジェットの使い方についても紹介します。

jQuery Mobile 1.3.0 の変更点

  jQuery Mobileの最新バージョンは1.3.0で、2013年2月20日公開されました。1.3.0の主な変更点は、パネルウィジェットの追加です。Facebookなどで用いられている、両サイドからアイコンパネルをスライド表示させることができます。また、横に長いテーブルを画面の幅に応じて縦表示できるなど、画面幅に応じて見やすい表示ができるようになります。その他、スライダースイッチのハンドル部分を2つにして、数値の範囲を指定させることも可能です。jQuery1.9.x、2.0.0(現在β版公開中)もこのバージョンからサポートされます。1.3.0の変更点の詳細や新機能の使い方も次回後編で紹介します。

ヘッダー・フッダーの付いたスマートフォンサイトの作成例

 それでは実際に、ごく簡単なスマートフォンサイトを作成してみましょう。まずは、ヘッダー・フッダーのコンポーネントのみを用いたサイトを作成してみます。今回はAndroid 4.0スマートフォンで実際に表示させました。

図2 jQuery Mobileサンプル(1)画面
図2 jQuery Mobileサンプル(1)画面

 なお、jQuery Mobileは先述のとおりパソコンのブラウザでの表示も対応していますので、パソコンで見るとこうした形になります。

図3 パソコンで見たjQuery Mobileサンプル(1)画面
図3 パソコンで見たjQuery Mobileサンプル(1)画面

 サンプルサイトのスクリプトを以下に示します。

[リスト1]サンプルの表示(jQuery_Mobile_sample1.html)
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />

<!--1.スマートフォン画面での表示方法指定-->
<mata name="viewport" content="width=device-width,initial-scale=1">

<title>jQuery Mobileサンプル</title>

<!--2.CSSの読み込み-->
<link rel="stylesheet" type="text/css" href="./mobile/jquery.mobile-1.2.0.min.css" />

<!--3.jQueryの読み込み-->
<script language="javascript" type="text/javascript" src="./Scripts/jquery-1.8.3.min.js"></script>

<!--4.jQuery Mobileの読み込み-->
<script language="javascript" type="text/javascript" src="./mobile/jquery.mobile-1.2.0.min.js"></script>

</head>

<body>
<!--5.ページの設定-->
<div data-role="page" data-theme="b">

<!--6.ヘッダーの設定-->
<div data-role="header" data-theme="b">
    <h1>jQuery Mobileサンプルページ</h1>
</div>

<!--7.ページ内容の設定-->
<div data-role="content">

    <h1>jQuery Mobile使用例</h1><p>
    jQuery Mobileを使用すると、スマートフォン向けサイトが簡単に作れます。</p>

</div>

<!--8.フッターの設定-->
<div data-role="footer" data-theme="b">
    <h3>Codezine</h3>
</div>

</div>
</body>
</html>

  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:jQuery UI/プラグインの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 健志(コバヤシ タケシ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5