はじめてのjQueryMobile（初級編）

はじめてのjQueryMobile
～初級編～
2012.2.10
Ichiro Yamamoto

1

自己紹介

山本一郎（ヤマモトイチロウ）
会社：クラスメソッド株式会社
所属：開発部モバイルイニシアチブグループ（通称モバチブ）
仕事：UIデザイン／ディレクション全般（たまに実装）

最近書いてるのでちょっと宣伝・・・

Flash BuilderでiOSアプリを作る（シーズン１）
【第1回】『Apple iOS Developer Programへの登録（前編）』
【第2回】『Apple iOS Developer Programへの登録（後編）』
【第3回】『証明書ファイルの作成（Mac編）』

記事はクラスメソッド開発部のブログで・・・
http://dev.classmethod.jp/author/yamamoto/

2

jQueryMobileって？

スマフォ向けWebサイトを
作るためのフレームワーク
・無償。JavaScriptベース。jQueryと合わせて利用する。
・HTML5に独自の属性を記述するだけの簡単コーディング。
・最初からタッチ操作向けのパーツが色々と揃っている。
・幅広いプラットフォーム／ウェブブラウザで動作する。
・PCやタブレットで見てもそれらしい見栄えと振る舞い。

Mobile Graded Browser Support jQueryMobile Gallery
http://jquerymobile.com/gbs/ http://www.jqmgallery.com/

3

jQueryMobile

まずは試してみよう

4

準備を整える

・jQuery ＆ jQueryMobile
http://jquerymobile.com/download/

・コーディングツール
デザイナーさん・・・ DreamWeaver など
エンジニアさん・・・ Eclipse + Aptana など
職人さん・・・・・・テキストエディタなど

・ウェブブラウザ
Safariがおすすめ。 PC上でプレビューしながら開発していきます。
※Chromeを使用する場合はちょっとした小細工が必要です。
http://www.finefinefine.jp/web/jquery/kiji861/

※実機で動作確認をする際は、WWW上にウェブサーバーを用意しましょう。

5

サンプルコード

MyMobileSite
img
thumbnail.png
practice1.html
practice2.html
index.html

サンプルコードは下記からダウンロードできます。
http://dev.classmethod.jp/etc/first-meet-jqm/

6

jQueryMobileを読み込む
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>MyMobileSite</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-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.0/jquery.mobile-1.0.min.js"></script>
</head>

headタグ内に jQuery と jQueryMobile を読み込みます。
読み込み方には「外部参照」と「内部参照」の２つがありますが、今回はお手軽な「外部参照」を

使ってみましょう。このスニペットは jQueryMobileの公式サイトで公開されています。

jQueryMobile は jQuery のプラグインとして動作するから、
jQuery→jQueryMobileの順で読み込んでおこう。

7

ページの基本構成

３つの領域で１つのページを構成します。

＜ヘッダーエリア＞
ページタイトル、コントロールを配置する領域

＜コンテンツエリア＞
文章や画像など、コンテンツの配置にする領域

＜フッターエリア＞
メニューを配置するための領域

なんだかiPhoneアプリの画面レイアウトに良く似てますね。
必要に応じてヘッダーやフッターは取り除くことも出来るよ。

8

ページの基本構成
index.html
<body>
<div data-role="page">
<div data-role="header">
<h1>ヘッダーエリア</h1>
</div>
<div data-role="content">
<h2>コンテンツエリア</ h2 >
<p>Lorem Ipsum is simply dummy text of the… </p>
</div>
<div data-role=“footer”>
<h4>フッターエリア</h4>
</div>
</div>
</body>

divタグの属性に data-role =“要素名”を追加するだけで、
jQueryMobileがそれぞれの領域に役割を持たせてくれます。

9

ページを追加する
index.html
<div data-role="page">
</div>
</div>
<div data-role="footer" >
</div>
</div>
<div data-role="page"> 丸っと複製
</div>
</div>
</div>
</div>

１つのHTMLの中に複数のページを持たせることが出来るんだね。

10

ページを遷移させる
index.html
<div data-role=“page” id=“page1”>
<h1>ページ１</h1>
</div>
<a href=“#page2”>次ページ</a>
</div>
</div>
</div>
<div data-role="page“ id=“page2”>
<h1>ページ２</h1>
</div>
<h2>This is second page!</ h2 >

遷移したいページに id=“ページID”を追加して、そのIDへの
アンカーリンクを張るだけでページ遷移が出来上がりました。

11

ページを遷移させる２
index.html
<h1>ページ１</h1>
</div>
<a href=“#page2” >次ページ</a>
</div>
</div>
</div>
<div data-role="page“ id=“page2” data-add-back-btn="true">
<h1>ページ２</h1>
</div>
<h2>This is second page!</ h2 >

遷移先のページに data-add-back-btn=“true”の属性を追記
したら自動的にヘッダーに Backボタンが表示されました。

12

ページを遷移させる3
index.html
<h1>ページ１</h1>
</div>
<a href=“practice.html”>練習ページ</a>
</div>
</div>
</div>
<h1>ページ２</h1>

参照先に別ファイルを指定して動的に読み込むこともできます。
イメージは index.html に別ファイルが取り込まれる感じです。

13

ページを遷移させる４
index.html
<h1>ページ１</h1>
</div>
<a href=“practice.html” data-ajax=“false”>練習ページ</a>
</div>
</div>
</div>
<h1>ページ２</h1>

もし全く独立したHTMLファイルへ遷移したい場合は、
data-ajax=“false”で非同期処理を切る必要があります。

14

ボタンを作る
index.html
<h1>ページ１</h1>
</div>
<a href=“#page2” data-role=“button”>次ページ</a>
<a href=“practice.html” data-role=“button”>練習ページ</a>
</div>
</div>
</div>
<h1>ページ２</h1>

<a>タグに data-role=“button” を追記してボタンとしての
役割を与えてみました。それらしい見た目に変わってますね。

15

リストを作る１
practice.html
<div data-role="page" id="practice" data-add-back-btn="true">
<h1>練習ページ</h1>
</div>
<ul data-role="listview">
<li><h3>リストアイテム</h3></li>
</ul>
</div>
</div>

ulタグに data-role=“listview”を追記するとこんな感じに。
※ olタグ（番号付きリスト）にも使えます。

16

リストを作る２
practice.html
</div>
<li><a href="#"><h3>リストアイテム</h3></a></li>
</ul>
</div>
</div>

さらに aタグで括るとリンク付リストに早変わり。
それっぽいアイコンまで付いてきました。

17

リストを作る３
practice.html
<li><a href="#">
<img src="img/thumbnail.png"/>
<h3>リストアイテム</h3>
<p>ディスクリプション</p>
</a></li>
<li><a href="#">
</a></li>
<li><a href="#">
</a></li>
</ul>

さらに imgタグを加えるとサムネイル画像が付きました。
pタグを加えると説明文エリアが追加されます。

18

リストを作る４
practice.html
<li data-role="list-divider">カテゴリA</li>
<li><a href="#">
</a></li>
<li><a href="#">
</a></li>
<li data-role="list-divider">カテゴリB</li>
<li><a href="#">

data-role=“list-divider”を与えたliタグを挿入すると・・・
それらはリスト内では区切りとして表現されます。

19

メニューを作る１
practice.html
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li><a href="#">メニュー１</a></li>
<li><a href="#">メニュー２</a></li>
<li><a href="#">メニュー３</a></li>
</ul>
</div>
</div>

フッター内のdivタグに data-role=“navbar”を与えると、
メニューとして扱われます。アイテムはulタグ＋liタグでOK。

20

メニューを作る２
practice.html
<div data-role="footer" data-position="fixed">
<ul>
<li><a data-icon=“home” href=“#” >ホーム</a></li>
<li><a data-icon=“search” href=“#” >検索</a></li>
<li><a data-icon=“star” href=“#” >お気に入り</a></li>
</ul>
</div>
</div>

aタグに data-icon=“アイコン名”でアイコンが追加されます。
アイコンは18種類ほどデフォルトで用意されています。

21

見た目を変更する
practice.html
<div data-role="header" data-theme="b">
</div>
<div data-role="content" data-theme="d">
<ul data-role="listview" data-divider-theme="c">

・・・中略・・・

<div data-role="footer" data-position="fixed" data-theme="b">
<ul>
<li><a data-icon="home" href="#" >ホーム</a></li>
<li><a data-icon="search" href="#" >検索</a></li>
<li><a data-icon="star" href="#" >お気に入り</a></li>
</ul>
</div>

各要素に data-theme=“スウォッチ名”で見た目が変ります。
デフォルトテーマには5種類のスウォッチが用意されています。

22

jQueryMobile

ここまでのおさらい
HTML要素に data-role=“＊”等のカスタムデータ
属性を追加すると、jQueryMobileが特定の役割
（見た目や振る舞い）を自動的に与えてくれる。

１ファイル内に複数ページを持たせること出来る。
画面遷移時のトランジションも自動的についてくる。

テーマやアイコンも最初からある程度用意されている
ので、簡単にそれらしい見栄えを得ることができる。

23

jQueryMobile

もうちょいアプリっぽく
してみよう

24

jQueryMobile

jQMｘTwitterAPI

25

TwitterAPIでJSONデータを取得する
practice2.html
<script>
//初期処理
$(function(){
var url = "http://search.twitter.com/search.json?callback=?";
var request = {q:"jQueryMobile", lang:"ja", rpp:50};
$.getJSON(url, request, resultHandler);
});

//コールバック関数
function resultHandler(data){
alert(data.results[0].text);
}
アラートで取得できたか確認
</script>

データの取得はjQueryの getJSON() 関数を利用しています。
TwitterAPI：http://usy.jp/twitter/index.php?Twitter%20API

26

HTML側の下準備する
practice2.html
<div data-role="header" data-theme="b">
<h1>jQM x TwitterAPI</h1>
</div>
<div data-role="content" data-theme="d">
<ul id="tweetList" data-role="listview" data-divider-theme="c">



</ul>
</div>
<div data-role="footer" data-position="fixed" data-theme="b">
<ul>
<li><a data-icon="home" href="#" >ホーム</a></li>
<li><a data-icon="search" href="#" >検索</a></li>
<li><a data-icon="star" href="#" >お気に入り</a></li>
</ul>

jsからアクセスできるよう要素(ulタグ）に予めユニークなID を
付けておきましょう。リストの中身はjsで動的に生成します。

27

取得データからリストアイテムを生成する
practice2.html
//コールバック関数
function resultHandler(data){
// alert(data.results[0].text); リスト生成関数をデータ取得後に実行
createListItem(data);
}
データ長ぶんだけ以下の処理を繰り返す
//リスト生成関数
function createListItem(data){
for(var i=0; i < data.results.length; i++){ ul内に挿入するHTML文字列を生成
var li = "<li>";
li += "<img width='100%' height='100%' src='"+data.results[i].profile_image_url+"'/>";
li += "<h3>"+data.results[i].text+"</h3>";
li += "<p>"+data.results[i].from_user+"</p>"; ul内に生成したHTML文字列を挿入
li += "</li>";
$("#tweetList").append(li);
};
$("#tweetList").listview("refresh"); 最後にulをリフレッシュ（再描画）する
};
</script>

データ取得→HTML生成＆挿入→HTML再描画という流れです。
jQuery速習講座：http://ascii.jp/elem/000/000/498/498710/

28

プレビューとデバッグ

正しく処理が実行されていれば、左のようにつぶや
きが表示されると思います。もし何も出てこなかっ
たり、意図しない動作になってしまった時は、下記
のデバッグツール等を活用して、書いたスクリプト
を見直してみるといいかもしれません。

Firebug
http://getfirebug.com/

Google Chrome Developer Tools
http://code.google.com/intl/ja/chrome/devtools/

上手く動いた時ってやっぱり嬉しいですよね！

29

あとがき

今回は、jQueryMobileに興味がある方に向けに、基礎的な内容

にフォーカスしてご紹介しました。jQueryMobileには、まだま

だ多数のコンポーネントが用意されています。ネットや書籍にも

情報は充実していますので、これを機会に始めてみて頂けたら嬉

しいです。

山本

30

付録
jQueryMobile公式
http://jquerymobile.com/

jQueryMobile Gallery
http://www.jqmgallery.com/

jQueryMobile日本語リファレンス
http://dev.screw-axis.com/doc/jquery_mobile/

jQuery日本語リファレンス
http://semooh.jp/jquery/

TwitterAPI Documentation（英語）
https://dev.twitter.com/docs

31

はじめてのjQueryMobile（初級編）

Recomendados

Recomendados

Más contenido relacionado

Similar a はじめてのjQueryMobile（初級編）

Similar a はじめてのjQueryMobile（初級編） (20)

Último

Último (7)

はじめてのjQueryMobile（初級編）