2013/09/10 Webアプリ開発セミナー20分のプレゼンで使った資料

1. 〒 880-0811
宮崎県宮崎市錦町 1-10
宮崎グリーンスフィア壱番館
５階
TEL:0985-23-3362( 代表 )
FAX:0985-22-8580
©aratana Inc.
今から学ぶ！ jQueryMobile ！
フロントエンドエンジニアチーム：高見
株式会社アラタナ
2013/09/10

2. ……とりあえず
©aratana Inc. 2
自己紹介します

3. 自己紹介
3
高見 和也（ Takami Kazuya ）
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
サービス開発部：フロントエンドエンジニアチームリーダー
PHP や JavaScript とかスクリプト系言語好き。
最近は jQuery と WordPress がかわいくて仕方ない。
Aratana24h （ http://24h.aratana.jp/ ）で SEO 対策の記事とか書いてます。
いいね！されると喜びます。
宮崎 Android 協会／ GDG 九州のグループにいます。

4. I love jQuery Mobile ！
©aratana Inc. 4
jQuery Mobile でおしゃれ
スマフォサイトを構築しよう！
今からでもまったく遅くない！

5. スマートフォンの普及率
©aratana Inc. 5
http://www.thinkwithgoogle.com/mobileplanet/ja/
Google Our Mobile Planet
日本、すごく低い。
けどこれから伸びてくることは明白。
スマフォの構築は必須！
jQuery
Mobile
Android
OS

6. なぜ jQuery Mobile ？
©aratana Inc. 6
主要なデバイスのほとんどで動作する。（ Android は 2.1 から対応）
HTML5 の標準マークアップに属性追加でネイティブアプリ風 UI が実現できる。
jQuery との相性が良い。 jQuery の知識がそのまま使える。
情報量が多い。
テンプレートや素材もネット上にたくさん準備してある。
Version も上がっている。現在は、 1.4.0 アルファ版が出てる。安定版は 1.3.2 。
高見が jQuery が好き。

7. <div class="jelly"
data-tama="3">
</div>
jQuery Mobile と HTML5
©aratana Inc. 7
HTML5 の独自データ属性を利用している。
data-*** 属性（ XML 互換）でサイトに影響を与えずに独自の設定が可能。
<div class="droid"
data-droid-id="12345"
data-hp="30"
data-lv="2">
</div>
data-hp が 0 になっ
たら
入れ替え

8. jQuery Mobile でのサイト作成基本
©aratana Inc. 8
data-role で基本構成を定義
data-role （役割）でページ・ヘッダー・コンテンツ・フッターを構成。
<section data-role="page" data-title="sample">
<header data-role="header">
<h1>jQuery Mobile</h1>
</header>
<section data-role="content">
<p>Page content goes here.</p>
</section>
<footer data-role="footer">
<h4>Page Footer</h4>
</footer>
</section>
data-theme でテーマ・スウォッチを変更
<footer data-role=“footer” data-theme=“a”>
<footer data-role=“footer” data-theme=“b”>
<footer data-role=“footer” data-theme=“c”>
<footer data-role=“footer” data-theme=“d”>
<footer data-role=“footer” data-theme=“e”>
テーマがレイアウト・スウォッチがカラバリ。

9. jQuery Mobile –でのサイト作成 エフェクト編
©aratana Inc. 9
data-transition でページ遷移エフェクト
data-transition でハイパリンクの画面切り替えをリッチに！
<section data-role="content">
<p>
<a href="mobile.html" data-role="button" data-transition="slide">data-transition:slide</a>
<a href="mobile.html" data-role="button" data-transition="slideup">data-transition:slideup</a>
<a href="mobile.html" data-role="button" data-transition="slidedown">data-transition:slidedown</a>
<a href="mobile.html" data-role="button" data-transition="pop">data-transition:pop</a>
<a href="mobile.html" data-role="button" data-transition="fade">data-transition:fade</a>
<a href="mobile.html" data-role="button" data-transition="flip">data-transition:flip</a>
<a href="mobile.html" data-role="button" data-transition="turn">data-transition:turn</a>
<a href="mobile.html" data-role="button" data-transition="flow">data-transition:flow</a>
<a href="mobile.html" data-role="button" data-transition="none">data-transition:none</a>
</p>
</section>
【落とし穴】
3D CSS Transform サポート前提にしているので、 Android2 系は自動的
に fade 効果になる。

10. jQuery Mobile –でのサイト作成 リスト編
©aratana Inc. 10
data-role=“listview” でネイティブアプリのようなリスト表示
サムネイル画像が表
示できる（ 80×80 ）
フィルタがとても便
利！プログラム書か
ずに設置できる魅力
。
アイコンもたくさん
準備してあります。
カウンタバブルもで
きる。いいね！

11. jQuery Mobile –でのサイト作成 その他色々
©aratana Inc. 11
その他、機能充実！これは使わない手はないでしょう？
ナビゲーションとか
。
開閉パネルとか。
・アコーディオンパネル
・段組／グリッドレイアウトが CSS なしで組める
・フォーム要素も豊富！
・ローディング処理もできる！

12. jQuery Mobile のイベントトリガー
©aratana Inc. 12
ページ読み込み・ページ移動時（特定ページも可）
タップ時
スワイプ時
スクロール時
端末を縦横回転させた時
画面レイアウトの変更（開閉パネル動作時やフィルタリングも該当）
などなど

13. オーサリングツール・ IDE
©aratana Inc. 13
Codiqa
jQuery Mobile のオフィシャルにあります。
ドラッグ＆ドロップで簡単にモックアップ作成
できます。
ソースコードももちろん吐き出してくれる。
すてき。
Dreamweaver CS5.5~6.0
jQuery Mobile Widget がついています。
これまた比較的簡単に作成できます。
男は黙って
テキスト
エディタ！

14. ARATANA × Google
©aratana Inc. 14
ご清聴ありがとうございました。