〒 880-0811
宮崎県宮崎市錦町 1-10
宮崎グリーンスフィア壱番館
5階
TEL:0985-23-3362( 代表 )
FAX:0985-22-8580
©aratana Inc.
今から学ぶ! jQueryMobile !
フロント...
……とりあえず
©aratana Inc. 2
自己紹介します
自己紹介
3
高見 和也( Takami Kazuya )
Twitter@miiitaka
Facebook@miiitaka
株式会社アラタナ
サービス開発部:フロントエンドエンジニアチームリーダー
PHP や JavaScript とかス...
I love jQuery Mobile !
©aratana Inc. 4
jQuery Mobile でおしゃれ
スマフォサイトを構築しよう!
今からでもまったく遅くない!
スマートフォンの普及率
©aratana Inc. 5
http://www.thinkwithgoogle.com/mobileplanet/ja/
Google Our Mobile Planet
日本、すごく低い。
けどこれから伸びてくる...
なぜ jQuery Mobile ?
©aratana Inc. 6
主要なデバイスのほとんどで動作する。( Android は 2.1 から対応)
HTML5 の標準マークアップに属性追加でネイティブアプリ風 UI が実現できる。
jQuer...
<div class="jelly"
data-tama="3">
</div>
jQuery Mobile と HTML5
©aratana Inc. 7
HTML5 の独自データ属性を利用している。
data-*** 属性( XML 互換)...
jQuery Mobile でのサイト作成基本
©aratana Inc. 8
data-role で基本構成を定義
data-role (役割)でページ・ヘッダー・コンテンツ・フッターを構成。
<section data-role="page...
jQuery Mobile –でのサイト作成 エフェクト編
©aratana Inc. 9
data-transition でページ遷移エフェクト
data-transition でハイパリンクの画面切り替えをリッチに!
<section da...
jQuery Mobile –でのサイト作成 リスト編
©aratana Inc. 10
data-role=“listview” でネイティブアプリのようなリスト表示
サムネイル画像が表
示できる( 80×80 )
フィルタがとても便
利!プ...
jQuery Mobile –でのサイト作成 その他色々
©aratana Inc. 11
その他、機能充実!これは使わない手はないでしょう?
ナビゲーションとか
。
開閉パネルとか。
・アコーディオンパネル
・段組/グリッドレイアウトが CS...
jQuery Mobile のイベントトリガー
©aratana Inc. 12
ページ読み込み・ページ移動時(特定ページも可)
タップ時
スワイプ時
スクロール時
端末を縦横回転させた時
画面レイアウトの変更(開閉パネル動作時やフィルタリング...
オーサリングツール・ IDE
©aratana Inc. 13
Codiqa
jQuery Mobile のオフィシャルにあります。
ドラッグ&ドロップで簡単にモックアップ作成
できます。
ソースコードももちろん吐き出してくれる。
すてき。
D...
ARATANA × Google
©aratana Inc. 14
ご清聴ありがとうございました。
Upcoming SlideShare
Loading in …5
×

今から学ぶ!jQuery Mobile!

1,420 views

Published on

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

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,420
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

今から学ぶ!jQuery Mobile!

  1. 1. 〒 880-0811 宮崎県宮崎市錦町 1-10 宮崎グリーンスフィア壱番館 5階 TEL:0985-23-3362( 代表 ) FAX:0985-22-8580 ©aratana Inc. 今から学ぶ! jQueryMobile ! フロントエンドエンジニアチーム:高見 株式会社アラタナ 2013/09/10
  2. 2. ……とりあえず ©aratana Inc. 2 自己紹介します
  3. 3. 自己紹介 3 高見 和也( Takami Kazuya ) Twitter@miiitaka Facebook@miiitaka 株式会社アラタナ サービス開発部:フロントエンドエンジニアチームリーダー PHP や JavaScript とかスクリプト系言語好き。 最近は jQuery と WordPress がかわいくて仕方ない。 Aratana24h ( http://24h.aratana.jp/ )で SEO 対策の記事とか書いてます。 いいね!されると喜びます。 宮崎 Android 協会/ GDG 九州のグループにいます。
  4. 4. I love jQuery Mobile ! ©aratana Inc. 4 jQuery Mobile でおしゃれ スマフォサイトを構築しよう! 今からでもまったく遅くない!
  5. 5. スマートフォンの普及率 ©aratana Inc. 5 http://www.thinkwithgoogle.com/mobileplanet/ja/ Google Our Mobile Planet 日本、すごく低い。 けどこれから伸びてくることは明白。 スマフォの構築は必須! jQuery Mobile Android OS
  6. 6. なぜ jQuery Mobile ? ©aratana Inc. 6 主要なデバイスのほとんどで動作する。( Android は 2.1 から対応) HTML5 の標準マークアップに属性追加でネイティブアプリ風 UI が実現できる。 jQuery との相性が良い。 jQuery の知識がそのまま使える。 情報量が多い。 テンプレートや素材もネット上にたくさん準備してある。 Version も上がっている。現在は、 1.4.0 アルファ版が出てる。安定版は 1.3.2 。 高見が jQuery が好き。
  7. 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. 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. 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. 10. jQuery Mobile –でのサイト作成 リスト編 ©aratana Inc. 10 data-role=“listview” でネイティブアプリのようなリスト表示 サムネイル画像が表 示できる( 80×80 ) フィルタがとても便 利!プログラム書か ずに設置できる魅力 。 アイコンもたくさん 準備してあります。 カウンタバブルもで きる。いいね!
  11. 11. jQuery Mobile –でのサイト作成 その他色々 ©aratana Inc. 11 その他、機能充実!これは使わない手はないでしょう? ナビゲーションとか 。 開閉パネルとか。 ・アコーディオンパネル ・段組/グリッドレイアウトが CSS なしで組める ・フォーム要素も豊富! ・ローディング処理もできる!
  12. 12. jQuery Mobile のイベントトリガー ©aratana Inc. 12 ページ読み込み・ページ移動時(特定ページも可) タップ時 スワイプ時 スクロール時 端末を縦横回転させた時 画面レイアウトの変更(開閉パネル動作時やフィルタリングも該当) などなど
  13. 13. オーサリングツール・ IDE ©aratana Inc. 13 Codiqa jQuery Mobile のオフィシャルにあります。 ドラッグ&ドロップで簡単にモックアップ作成 できます。 ソースコードももちろん吐き出してくれる。 すてき。 Dreamweaver CS5.5~6.0 jQuery Mobile Widget がついています。 これまた比較的簡単に作成できます。 男は黙って テキスト エディタ!
  14. 14. ARATANA × Google ©aratana Inc. 14 ご清聴ありがとうございました。

×