はじめてのjQueryMobile      ~初級編~        2012.2.10     Ichiro Yamamoto           1
自己紹介               山本一郎(ヤマモトイチロウ)               会社:クラスメソッド株式会社               所属:開発部モバイルイニシアチブグループ(通称モバチブ)               仕事...
jQueryMobileって?   スマフォ向けWebサイトを   作るためのフレームワーク    ・無償。JavaScriptベース。jQueryと合わせて利用する。    ・HTML5に独自の属性を記述するだけの簡単コーディング。    ・...
jQueryMobile        まずは試してみよう               4
準備を整える ・jQuery & jQueryMobile  http://jquerymobile.com/download/ ・コーディングツール   デザイナーさん・・・ DreamWeaver など   エンジニアさん・・・ Eclip...
サンプルコード    MyMobileSite     img        thumbnail.png     practice1.html     practice2.html     index.html  サンプルコードは下記からダウン...
jQueryMobileを読み込むindex.html<!DOCTYPE html><html lang="ja"><head>   <meta charset="utf-8">   <title>MyMobileSite</title>   ...
ページの基本構成           3つの領域で1つのページを構成します。           <ヘッダーエリア>           ページタイトル、コントロールを配置する領域           <コンテンツエリア>           ...
ページの基本構成             index.html             <body>             <div data-role="page">                 <div data-role="head...
ページを追加する           index.html           <div data-role="page">                  <div data-role="header">                  ...
ページを遷移させる            index.html            <div data-role=“page” id=“page1”>                  <div data-role="header">    ...
ページを遷移させる2              index.html              <div data-role=“page” id=“page1”>                   <div data-role="header...
ページを遷移させる3             index.html             <div data-role=“page” id=“page1”>                  <div data-role="header"> ...
ページを遷移させる4             index.html             <div data-role=“page” id=“page1”>                  <div data-role="header"> ...
ボタンを作る              index.html              <div data-role=“page” id=“page1”>                   <div data-role="header">  ...
リストを作る1              practice.html              <div data-role="page" id="practice" data-add-back-btn="true">             ...
リストを作る2           practice.html            <div data-role="page" id="practice" data-add-back-btn="true">                 <...
リストを作る3            practice.html            <ul data-role="listview">                 <li><a href="#">                    ...
リストを作る4               practice.html               <ul data-role="listview">                    <li data-role="list-divider...
メニューを作る1              practice.html              <div data-role="footer" data-position="fixed">                  <div data...
メニューを作る2            practice.html             <div data-role="footer" data-position="fixed">                 <div data-rol...
見た目を変更する            practice.html             <div data-role="page" id="practice" data-add-back-btn="true">               ...
jQueryMobile           ここまでのおさらい   HTML要素に data-role=“*”等の カスタムデータ   属性 を追加すると、jQueryMobileが 特定の役割   (見た目や振る舞い)を自動的に 与えてくれ...
jQueryMobile     もうちょいアプリっぽく        してみよう               24
jQueryMobile        jQMxTwitterAPI               25
TwitterAPIでJSONデータを取得する                     practice2.html                     <script>                     //初期処理        ...
HTML側の下準備する            practice2.html             <div data-role="header" data-theme="b">                  <h1>jQM x Twitt...
取得データからリストアイテムを生成するpractice2.html      //コールバック関数      function resultHandler(data){ //         alert(data.results[0].text...
プレビューとデバッグ            正しく処理が実行されていれば、左のようにつぶや            きが表示されると思います。もし何も出てこなかっ            たり、意図しない動作になってしまった時は、下記       ...
あとがき  今回は、jQueryMobileに興味がある方に向けに、基礎的な内容  にフォーカスしてご紹介しました。jQueryMobileには、まだま  だ多数のコンポーネントが用意されています。ネットや書籍にも  情報は充実していますので、...
付録jQueryMobile公式http://jquerymobile.com/jQueryMobile Galleryhttp://www.jqmgallery.com/jQueryMobile日本語リファレンスhttp://dev.scre...
32
Upcoming SlideShare
Loading in …5
×

はじめてのjQueryMobile(初級編)

6,677 views

Published on

2012年2月10日、クラスメソッド株式会社で行われたモバイルアプリケーションミーティングで使ったセミナー資料です。jQueryMobile入門向け内容です。

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,677
On SlideShare
0
From Embeds
0
Number of Embeds
1,505
Actions
Shares
0
Downloads
36
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

はじめてのjQueryMobile(初級編)

  1. 1. はじめてのjQueryMobile ~初級編~ 2012.2.10 Ichiro Yamamoto 1
  2. 2. 自己紹介 山本一郎(ヤマモトイチロウ) 会社:クラスメソッド株式会社 所属:開発部モバイルイニシアチブグループ(通称モバチブ) 仕事:UIデザイン/ディレクション全般(たまに実装)最近書いてるのでちょっと宣伝・・・ Flash BuilderでiOSアプリを作る(シーズン1) 【第1回】『Apple iOS Developer Programへの登録(前編)』 【第2回】『Apple iOS Developer Programへの登録(後編)』 【第3回】『証明書ファイルの作成(Mac編)』記事はクラスメソッド開発部のブログで・・・http://dev.classmethod.jp/author/yamamoto/ 2
  3. 3. jQueryMobileって? スマフォ向けWebサイトを 作るためのフレームワーク ・無償。JavaScriptベース。jQueryと合わせて利用する。 ・HTML5に独自の属性を記述するだけの簡単コーディング。 ・最初からタッチ操作向けのパーツが色々と揃っている。 ・幅広いプラットフォーム/ウェブブラウザで動作する。 ・PCやタブレットで見てもそれらしい見栄えと振る舞い。 Mobile Graded Browser Support jQueryMobile Gallery http://jquerymobile.com/gbs/ http://www.jqmgallery.com/ 3
  4. 4. jQueryMobile まずは試してみよう 4
  5. 5. 準備を整える ・jQuery & jQueryMobile http://jquerymobile.com/download/ ・コーディングツール デザイナーさん・・・ DreamWeaver など エンジニアさん・・・ Eclipse + Aptana など 職人さん・・・・・・ テキストエディタ など ・ウェブブラウザ Safariがおすすめ。 PC上でプレビューしながら開発していきます。 ※Chromeを使用する場合はちょっとした小細工が必要です。 http://www.finefinefine.jp/web/jquery/kiji861/ ※実機で動作確認をする際は、WWW上にウェブサーバーを用意しましょう。 5
  6. 6. サンプルコード MyMobileSite img thumbnail.png practice1.html practice2.html index.html サンプルコードは下記からダウンロードできます。 http://dev.classmethod.jp/etc/first-meet-jqm/ 6
  7. 7. 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 を読み込みます。読み込み方には「外部参照」と「内部参照」の2つがありますが、今回はお手軽な「外部参照」を使ってみましょう。このスニペットは jQueryMobileの公式サイトで公開されています。 jQueryMobile は jQuery のプラグインとして動作するから、 jQuery→jQueryMobileの順で読み込んでおこう。 7
  8. 8. ページの基本構成 3つの領域で1つのページを構成します。 <ヘッダーエリア> ページタイトル、コントロールを配置する領域 <コンテンツエリア> 文章や画像など、コンテンツの配置にする領域 <フッターエリア> メニューを配置するための領域 なんだかiPhoneアプリの画面レイアウトに良く似てますね。 必要に応じてヘッダーやフッターは取り除くことも出来るよ。 8
  9. 9. ページの基本構成 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
  10. 10. ページを追加する index.html <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> <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> 1つのHTMLの中に複数のページを持たせることが出来るんだね。 10
  11. 11. ページを遷移させる index.html <div data-role=“page” id=“page1”> <div data-role="header"> <h1>ページ1</h1> </div> <div data-role="content"> <h2>コンテンツエリア</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> <a href=“#page2”>次ページ</a> </div> <div data-role="footer" > <h4>フッターエリア</h4> </div> </div> <div data-role="page“ id=“page2”> <div data-role="header"> <h1>ページ2</h1> </div> <div data-role="content"> <h2>This is second page!</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> 遷移したいページに id=“ページID”を追加して、そのIDへの アンカーリンクを張るだけでページ遷移が出来上がりました。 11
  12. 12. ページを遷移させる2 index.html <div data-role=“page” id=“page1”> <div data-role="header"> <h1>ページ1</h1> </div> <div data-role="content"> <h2>コンテンツエリア</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> <a href=“#page2” >次ページ</a> </div> <div data-role="footer" > <h4>フッターエリア</h4> </div> </div> <div data-role="page“ id=“page2” data-add-back-btn="true"> <div data-role="header"> <h1>ページ2</h1> </div> <div data-role="content"> <h2>This is second page!</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> 遷移先のページに data-add-back-btn=“true”の属性を追記 したら自動的にヘッダーに Backボタン が表示されました。 12
  13. 13. ページを遷移させる3 index.html <div data-role=“page” id=“page1”> <div data-role="header"> <h1>ページ1</h1> </div> <div data-role="content"> <h2>コンテンツエリア</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> <a href=“#page2” >次ページ</a> <a href=“practice.html”>練習ページ</a> </div> <div data-role="footer" > <h4>フッターエリア</h4> </div> </div> <div data-role="page“ id=“page2” data-add-back-btn="true"> <div data-role="header"> <h1>ページ2</h1> 参照先に別ファイルを指定して動的に読み込むこともできます。 イメージは index.html に別ファイルが取り込まれる 感じです。 13
  14. 14. ページを遷移させる4 index.html <div data-role=“page” id=“page1”> <div data-role="header"> <h1>ページ1</h1> </div> <div data-role="content"> <h2>コンテンツエリア</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> <a href=“#page2” >次ページ</a> <a href=“practice.html” data-ajax=“false”>練習ページ</a> </div> <div data-role="footer" > <h4>フッターエリア</h4> </div> </div> <div data-role="page“ id=“page2” data-add-back-btn="true"> <div data-role="header"> <h1>ページ2</h1> もし全く独立したHTMLファイルへ遷移したい場合は、 data-ajax=“false”で非同期処理を切る必要があります。 14
  15. 15. ボタンを作る index.html <div data-role=“page” id=“page1”> <div data-role="header"> <h1>ページ1</h1> </div> <div data-role="content"> <h2>コンテンツエリア</ h2 > <p>Lorem Ipsum is simply dummy text of the… </p> <a href=“#page2” data-role=“button”>次ページ</a> <a href=“practice.html” data-role=“button”>練習ページ</a> </div> <div data-role="footer" > <h4>フッターエリア</h4> </div> </div> <div data-role="page“ id=“page2” data-add-back-btn="true"> <div data-role="header"> <h1>ページ2</h1> <a>タグに data-role=“button” を追記してボタンとしての 役割を与えてみました。それらしい見た目に変わってますね。 15
  16. 16. リストを作る1 practice.html <div data-role="page" id="practice" data-add-back-btn="true"> <div data-role="header"> <h1>練習ページ</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><h3>リストアイテム</h3></li> <li><h3>リストアイテム</h3></li> <li><h3>リストアイテム</h3></li> </ul> </div> </div> ulタグに data-role=“listview”を追記するとこんな感じに。 ※ olタグ(番号付きリスト)にも使えます。 16
  17. 17. リストを作る2 practice.html <div data-role="page" id="practice" data-add-back-btn="true"> <div data-role="header"> <h1>練習ページ</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#"><h3>リストアイテム</h3></a></li> <li><a href="#"><h3>リストアイテム</h3></a></li> <li><a href="#"><h3>リストアイテム</h3></a></li> </ul> </div> </div> さらに aタグで括るとリンク付リスト に早変わり。 それっぽいアイコンまで付いてきました。 17
  18. 18. リストを作る3 practice.html <ul data-role="listview"> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> </a></li> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> </a></li> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> </a></li> </ul> さらに imgタグを加えるとサムネイル画像 が付きました。 pタグを加えると説明文エリア が追加されます。 18
  19. 19. リストを作る4 practice.html <ul data-role="listview"> <li data-role="list-divider">カテゴリA</li> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> </a></li> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> </a></li> <li data-role="list-divider">カテゴリB</li> <li><a href="#"> <img src="img/thumbnail.png"/> <h3>リストアイテム</h3> <p>ディスクリプション</p> data-role=“list-divider”を与えたliタグを挿入すると・・・ それらはリスト内では 区切り として表現されます。 19
  20. 20. メニューを作る1 practice.html <div data-role="footer" data-position="fixed"> <div data-role="navbar" > <ul> <li><a href="#">メニュー1</a></li> <li><a href="#">メニュー2</a></li> <li><a href="#">メニュー3</a></li> </ul> </div> </div> フッター内のdivタグに data-role=“navbar”を与えると、 メニューとして扱われます。アイテムはulタグ+liタグでOK。 20
  21. 21. メニューを作る2 practice.html <div data-role="footer" data-position="fixed"> <div data-role="navbar" > <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
  22. 22. 見た目を変更する practice.html <div data-role="page" id="practice" data-add-back-btn="true"> <div data-role="header" data-theme="b"> <h1>練習ページ</h1> </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"> <div data-role="navbar" > <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
  23. 23. jQueryMobile ここまでのおさらい HTML要素に data-role=“*”等の カスタムデータ 属性 を追加すると、jQueryMobileが 特定の役割 (見た目や振る舞い)を自動的に 与えてくれる。 1ファイル内に複数ページ を持たせること出来る。 画面遷移時のトランジションも自動的についてくる。 テーマやアイコンも最初からある程度用意されている ので、簡単にそれらしい見栄えを得ることができる。 23
  24. 24. jQueryMobile もうちょいアプリっぽく してみよう 24
  25. 25. jQueryMobile jQMxTwitterAPI 25
  26. 26. 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
  27. 27. 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"> <!--ここにJSでアイテムを生成--> </ul> </div> <div data-role="footer" data-position="fixed" data-theme="b"> <div data-role="navbar" > <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
  28. 28. 取得データからリストアイテムを生成する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
  29. 29. プレビューとデバッグ 正しく処理が実行されていれば、左のようにつぶや きが表示されると思います。もし何も出てこなかっ たり、意図しない動作になってしまった時は、下記 のデバッグツール等を活用して、書いたスクリプト を見直してみるといいかもしれません。 Firebug http://getfirebug.com/ Google Chrome Developer Tools http://code.google.com/intl/ja/chrome/devtools/ 上手く動いた時ってやっぱり嬉しいですよね! 29
  30. 30. あとがき 今回は、jQueryMobileに興味がある方に向けに、基礎的な内容 にフォーカスしてご紹介しました。jQueryMobileには、まだま だ多数のコンポーネントが用意されています。ネットや書籍にも 情報は充実していますので、これを機会に始めてみて頂けたら嬉 しいです。 山本 30
  31. 31. 付録jQueryMobile公式http://jquerymobile.com/jQueryMobile Galleryhttp://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
  32. 32. 32

×