• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
今から学ぶ!jQuery Mobile!
 

今から学ぶ!jQuery Mobile!

on

  • 1,151 views

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

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

Statistics

Views

Total Views
1,151
Views on SlideShare
1,147
Embed Views
4

Actions

Likes
1
Downloads
4
Comments
0

2 Embeds 4

https://twitter.com 3
http://www.google.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    今から学ぶ!jQuery Mobile! 今から学ぶ!jQuery Mobile! Presentation Transcript

    • 〒 880-0811 宮崎県宮崎市錦町 1-10 宮崎グリーンスフィア壱番館 5階 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 日本、すごく低い。 けどこれから伸びてくることは明白。 スマフォの構築は必須! jQuery Mobile Android OS
    • なぜ 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 ご清聴ありがとうございました。