• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2012年8月10日 勉強会
 

2012年8月10日 勉強会

on

  • 2,211 views

2012年8月10日バイドゥ株式会社プロダクト事業部勉強会の資料です

2012年8月10日バイドゥ株式会社プロダクト事業部勉強会の資料です

Statistics

Views

Total Views
2,211
Views on SlideShare
1,181
Embed Views
1,030

Actions

Likes
4
Downloads
0
Comments
0

2 Embeds 1,030

http://simeji.me 1025
http://webcache.googleusercontent.com 5

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    2012年8月10日 勉強会 2012年8月10日 勉強会 Presentation Transcript

    • Quick Start to jQuery Mobile ほとんどWeb Designing 8月号の記事内容紹介 JavaScriptが書けない残念なデザイナー 矢野りん2012年8月10日金曜日
    • トピックス • jQuery Mobile 基礎 • jQuery Mobileサイトギャラリー紹介 • jQuery Mobile プロコン • リソース集2012年8月10日金曜日
    • jQuery Mobile基礎 • jQMとは JavaScriptライブラリのモバイル専用版。よくつかうUIのイン タラクションとかUIのデザインが部品化してある。 • 使い方 jQMのサイトからDLしたjsファイルをサーバに展開して使う か、CDN(Contents Delivery Network)を参照してjQMサーバ から呼び出して使うこともできるよ。2012年8月10日金曜日
    • ゲット★ザ jQM • http://jquerymobile.com/download/2012年8月10日金曜日
    • jQMを読み込もうぜ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobileだっせ</title> <!-- jQuery Mobileの動作に必要なスタイル/ライブラリをインポート --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head>2012年8月10日金曜日
    • jQMページのコードはこんな感じ <body> <div data-role= page id= page> <div data-role= header > <h1>へっだ</h1> </div> B <div data-role= content > こんてんつ C A </div> <div data-role= footer > <h4>ふった</h4> </div> D </div> A:data-role(HTML5のCustom Data属性を使用)が </body> 指定されている要素内が1つのページになる B:ヘッダー(自動的にスタイルがついてみためヘッダーっぽくなる) C:コンテンツ(ヘッダとフッタにはさまれた見た目になる) D:フッター(みためヘッダーっぽくなる)2012年8月10日金曜日
    • 1つのHTMLに複数のページ? ふつうのHTML jQM .htmlファイル .htmlファイル 論理的なページA <div data-role= page id= pageA> 論理的なページ 論理的なページB <div data-role= page id= pageB> 論理的なページC <div data-role= page id= pageC> 論理的なページを1つのHTMLにまとめることでリクエストを減らし通信効率をあげる のが目的なんだ。でも、文書構造が大きいとそもそもデータが大きくなったりもするから 設計にはちゅういが必要なんだ2012年8月10日金曜日
    • 他人が作成したレンダリングサンプル2012年8月10日金曜日
    • UIパーツを作る <input type="submit" value="submit" /> <input type="reset" value="reset" /> <input type="image" value="image" /> <input type="button" value="button" /> <button>button要素</button> <a href="#" data-role="button">アンカータグ</a> 従来のHTMLで指定してもdata-role属性で 指定してもぜんぶおんなじボタンの見た目になる ※見た目は同じだがJS的な制限があったりと実装的 には同じ扱いにはならない2012年8月10日金曜日
    • スタイルのカスタマイズは? don t touch★ go ahead. edit.2012年8月10日金曜日
    • 色だけちょっと変えることも2012年8月10日金曜日
    • jQMサイトギャラリー http://www.jqmgallery.com/2012年8月10日金曜日
    • WordPressにも組み込めるとか • Multi Device Switcher http://wordpress.org/extend/plugins/multi-device- switcher/ のプラグインをWPに仕込んでユーザーエージェントをみてCSS を振り分ける作戦で組み込める。 • 他人が作成したsample http://meglog.net/jqm-sample/ ※WPtap mobile detectorというプラグインを使った例だそう ですがプラグインのサポートが終了していたので似たようなのを みつけました。2012年8月10日金曜日
    • jQM長所と短所 • イイネ! ‣ いわゆるスマホサイトを作るなら最速でローンチできそう(コンテンツさえ あればね) ‣ マルチプラットフォームの対応もおまかせ。 http://jquerymobile.com/gbs/ ‣ 横スライドとかページ回転とかよくあるインタラクションの組み込みが簡単 ‣ マルチなディスプレイ解像度に配慮した作りになっており、レスポンシブで も採用可能な気がする • イクナイネ! ‣ インタラクションが一部のAndroid でうんこちゃんのように遅い ‣ アプリ開発とかUIを細かくカスタマイズしたくなりそうな案件では逆に1か ら作った方がはやいかもしれないくらい、スタイルの構造が複雑である2012年8月10日金曜日
    • リソース集 • jQuery Mobile(本家) http://jquerymobile.com/ • jQuery Mobile Graded Browser Support(サポートしているブラウザリスト) http://jquerymobile.com/gbs/ • jQuery Mobile Gallery(jQMを採用しているサイト集) http://www.jqmgallery.com/ • ThemeRoller(CSSカスタマイズツール) http://jqueryui.com/themeroller/ • さんざん引き合いに出した他人の図の出典(@IT jQuery Mobile 入門) http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_index/index.html • jQuery採用サイト例 MBA mobile http://www.mba-multimedia.mobi/ Dungs Mobile mobile.dungs.com/en/home one little dream http://www.onelittledream.com/happycircus-timeline-cover.html ※雑誌掲載時はモバイル版があったらしいが今はなくなっている。なんでやー COTOHOGI http://cotohogi.com/sp/ SharksFrenzy http://m.sharksfrenzy.co.za/2012年8月10日金曜日