〒 880-0811宮崎県宮崎市錦町 1-10 宮崎グリーンスフィア壱番館５階TEL:0985-23-3362( 代表 )FAX:0985-22-8580

©aratana Inc.

今から学ぶ！ jQueryMobile ！フロントエンドエンジニアチーム：高見

株式会社アラタナ

2013/09/10

とりあえず……

©aratana Inc. 2

自己紹介します

自己紹介

3

高見　和也（ Takami Kazuya ）

Twitter@miiitaka

Facebook@miiitaka

株式会社アラタナサービス開発部：フロントエンドエンジニアチームリーダー

PHP や JavaScript とかスクリプト系言語好き。最近は jQuery と WordPress がかわいくて仕方ない。

Aratana24h （ http://24h.aratana.jp/ ）で SEO 対策の記事とか書いてます。いいね！されると喜びます。

宮崎 Android 協会／ GDG 九州のグループにいます。

I love jQuery Mobile ！

©aratana Inc. 4

jQuery Mobile でおしゃれスマフォサイトを構築しよう！

今からでもまったく遅くない！

スマートフォンの普及率

©aratana Inc. 5

http://www.thinkwithgoogle.com/mobileplanet/ja/

Google Our Mobile Planet

日本、すごく低い。

けどこれから伸びてくることは明白。

スマフォの構築は必須！

jQueryMobile

AndroidOS

なぜ jQuery Mobile ？

©aratana Inc. 6

主要なデバイスのほとんどで動作する。（ Android は 2.1 から対応）

HTML5 の標準マークアップに属性追加でネイティブアプリ風 UI が実現できる。

jQuery との相性が良い。 jQuery の知識がそのまま使える。

情報量が多い。

テンプレートや素材もネット上にたくさん準備してある。

Version も上がっている。現在は、 1.4.0 アルファ版が出てる。安定版は 1.3.2 。

高見が jQuery が好き。

<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 になったら

入れ替え

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”>

テーマがレイアウト・スウォッチがカラバリ。

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 効果になる。

jQuery Mobile でのサイト作成 – リスト編

©aratana Inc. 10

data-role=“listview” でネイティブアプリのようなリスト表示

サムネイル画像が表示できる（ 80×80 ）

フィルタがとても便利！プログラム書かずに設置できる魅力。

アイコンもたくさん準備してあります。

カウンタバブルもできる。いいね！

jQuery Mobile でのサイト作成 – その他色々

©aratana Inc. 11

その他、機能充実！これは使わない手はないでしょう？

ナビゲーションとか。

開閉パネルとか。

・アコーディオンパネル

・段組／グリッドレイアウトが CSS なしで組め

る

・フォーム要素も豊富！

・ローディング処理もできる！

jQuery Mobile のイベントトリガー

©aratana Inc. 12

ページ読み込み・ページ移動時（特定ページも可）

タップ時

スワイプ時

スクロール時

端末を縦横回転させた時

画面レイアウトの変更（開閉パネル動作時やフィルタリングも該当）

などなど

オーサリングツール・ IDE

©aratana Inc. 13

Codiqa

jQuery Mobile のオフィシャルにあります。

ドラッグ＆ドロップで簡単にモックアップ作

成できます。

ソースコードももちろん吐き出してくれる。

すてき。

Dreamweaver CS5.5~6.0

jQuery Mobile Widget がついています。

これまた比較的簡単に作成できます。

男は黙ってテキスト

エディタ！

ARATANA × Google

©aratana Inc. 14

ご清聴ありがとうございました。