Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

8,410 views
8,267 views

Published on

QCon Tokyo 2012で使用した資料。2012年時点での、Webフロントエンド周りのトレンドを総括するような内容です。

0 Comments
34 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,410
On SlideShare
0
From Embeds
0
Number of Embeds
703
Actions
Shares
0
Downloads
99
Comments
0
Likes
34
Embeds 0
No embeds

No notes for slide

Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

  1. 1. WEBフロントエンド開発の 最新トレンド HTML5,モバイル,オフライン2012/4/17株式会社シーエー・モバイルWeb先端技術フェロー  ⽩白⽯石俊平
  2. 2. ⾃自⼰己紹介¨  ⽩白⽯石俊平と申します。¨  コミュニティhtml5j.org管理理⼈人(会員数4500名 超)¨  HTML5とか勉強会主催(毎⽉月⼀一回、100名を動員)¨  Google  API  Expert  (HTML5)¨  Microsoft  Most  Valuable  Professional  (IE9)¨  Twitter:  @Shumpei¨  著書:HTML5&API⼊入⾨門
  3. 3. HTML5のパワーが、多くの⼈人に認識識されつつある。
  4. 4. Nike Air Jordan 2012¨  最近はやりの、スクロールと連動した視差ス クロールをフル活⽤用したサイト
  5. 5. ChronoZoom¨  全宇宙史に関する様々なリソースを参照でき るWebアプリ
  6. 6. WebGL City¨  3Dで表現された都市空間を⾃自在に⾶飛び回れる デモ。
  7. 7. 開発者の関⼼心も⾮非常に⾼高まっている。
  8. 8. 2012年年中に、HTML5をモバイルアプリに統合しようと考えている開発者の割合 Appcelerator/IDC Mobile Developer Report, Q1 2012
  9. 9. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  消極的な理理由 ¤  iOS上ではFlashが動かない ¤  古いブラウザ(IE6-8)を考慮する必要がない
  10. 10. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る ¤  様々なデバイスに対応できる ¤  様々なスクリーンサイズに対応できる
  11. 11. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る n  オフラインWebアプリケーション n  デバイスの様々な機能にアクセス ¤  様々なスクリーンサイズに対応できる ¤  様々なデバイスに対応できる
  12. 12. オフラインWebアプリケーション¨  HTML/CSS/JavaScript/画像などの、Webアプリが必 要とするリソースを全てローカルにキャッシュすること で実現o  例例: Titanium Mobile API Document
  13. 13. アプリケーションキャッシュ¨  キャッシュマニフェストを作成し、html要素の manifest属性に指定することでオフライン化可能 hello.appcache CACHE MANIFEST! ! hello.html! hello.js! hello.css hello.html <!DOCTYPE html>! <html manifest="hello.appcache">! …! </html>!
  14. 14. オフラインWebアプリケーション¨  オフラインでも編集可能なWebアプリケー ションを作るには?¨  →ブラウザ内(ローカルで利利⽤用できる)デー タベースやファイルシステムを利利⽤用する。 ¤  Webアプリのデータの読み書きはローカルのデー タベースやファイルに対して⾏行行う ¤  オンライン時にサーバに送信する
  15. 15. オフラインWebアプリの典型的なアーキテクチャクライアント UI 同期 エン ジン ローカルストレージ
  16. 16. Indexed Database API¨  Indexed Database APIは、ブラウザに内蔵さ れたデータベース(デモ)。
  17. 17. Indexed Database APIとは?•  ブラウザ組み込みのキー・バリューストア•  RDBのテーブルにあたるものがオブジェクトストア•  JavaScriptオブジェクトをオブジェクトストアに対し てそのまま読み書きできる。
  18. 18. IndexedDBのコード例例¨  IndexedDBの使い勝⼿手はよくない。。 ¤  →jdb.jsというフレームワーク作りました!var tx =! db.transaction([Feed], IDBTransaction.READ_ONLY);!var feedStore = tx.objectStore(Feed);!var cursorReq = feedStore.openCursor();!cursorReq.onsuccess = function() {! var cursor = cursorReq.result;! if (!cursor) {! return;! }! var value = cursor.value;! cursor.continue();!};!cursorReq.onerror = function() {! …!};!
  19. 19. File API¨  Webアプリによるファイルの読み(書き)も 可能に(デモ)
  20. 20. File APIとは?¨  Webアプリからファイルを読み書きするため のAPI。¨  以下の3仕様からなる。 ¤  File API・・・ファイルの読み取りや基本的なイ ンターフェースの定義 ¤  File API:Writer・・・ファイルの書き出し ¤  File API:Systems and Directories・・・ファイ ルシステムとディレクトリ構造
  21. 21. File APIのコード例例¨  ファイルの読み取りは、ドラッグ&ドロップ かファイル選択ダイアログに限られている。element.ondrag = function(event) {! var files = event.dataTransfer.files;! var reader = new FileReader();! reader.onload = function() {! var result = reader.result;! …! };! reader.readAsText(files[0]);!};!
  22. 22. デバイスの様々な機能にアクセス¨  Geolocation APIによる位置情報へのアクセス (デモ)
  23. 23. Geolocation APIのコード例例navigator.geolocation.getCurrentPosition(function(pos) {! var coords = pos.coords;! var latitude = coords.latitude;! var longitude = coords.longitude;! …!});!
  24. 24. デバイスの様々な機能にアクセス¨  Device Orientation Eventにより、デバイ スの向きや傾きを検知する(デモ)
  25. 25. Device Orientation Eventのコード例例window.ondeviceorientation = function(event) {! var alpha = event.alpha;! var beta = event.beta;! var gamma = event.gamma;! …!};!
  26. 26. デバイスの様々な機能にアクセス¨  カメラやマイクからメディアデータを取り込 む(デモ)
  27. 27. getUserMedia()のコード例例<video id="v" autoplay></video>!var video = document.getElementById("v");!navigator.getUserMedia("video", function(stream) {! var url = URL.createObjectURL(stream);! video.src = url;!});!
  28. 28. デバイスの様々な機能にアクセス¨  他にも、以下のようなことを⾏行行えるようにな る ¤  ⾳音声によるテキスト⼊入⼒力力 ¤  温度度や光、近接センサーなど、各種センサーを扱 える ネイティブアプリとの機能差が どんどん縮⼩小していく! ¤  バイブレーションを実⾏行行できる ¤  アドレス帳やギャラリーからデータを取得できる ¤  バッテリーの状態にアクセスできる ¤  ネットワークの状態にアクセスできる
  29. 29. とはいえ、¨  デバイス間の実装にはかなりのバラつきがあ る
  30. 30. Core Mobile Web PlatformCommunity Group¨  FacebookによるモバイルWebの断⽚片化を解決 するW3Cコミュニティグループ
  31. 31. ringmark¨  http://rng.io
  32. 32. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る ¤  様々なスクリーンサイズに対応できる ¤  様々なデバイスに対応できる
  33. 33. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る ¤  様々なスクリーンサイズに対応できる ¤  様々なデバイスに対応できる
  34. 34. 様々なスクリーンサイズに対応できる¨  レスポンシブWebデザインにより、単⼀一の ソースコードで複数のスクリーンサイズに対 応できる
  35. 35. レスポンシブWebデザインの例例 GRAVITATE
  36. 36. レスポンシブWebデザインの例例 CREAN AIR WORKS
  37. 37. レスポンシブWebデザインで使われるテクニック¨  Fluid Grid・・・ピクセルではなく、パーセン ト指定により幅を決定する¨  Media Queries・・・デバイスの幅や⾼高さな ど、様々な条件に応じて、CSSを切切り替える 技術
  38. 38. レスポンシブWebデザインのサンプル¨  コンテンツの幅に応じて、ピクセル指定と% 指定を切切り替える事により、PCサイトも1 ソースで実現できる。
  39. 39. レスポンシブWebデザインのサンプル#wrapper { width: 100% }!#col-left { width: 100%; float: none; }!#col-right { width: 100%; float: none; }!!@media screen and (min-width: 768px) {! #col-left { width: 30%; float: left; }! #col-right { width: 70%; float: left; }!}!!@media screen and (min-width: 960px) {! #wrapper { width: 960px; }!}!
  40. 40. レスポンシブWebデザインは万能ではない¨  コンテンツや画像のファイルサイズがモバイ ルにとって⼤大きすぎ、パフォーマンスが劣劣化 することも。¨  画像をレスポンシブにするための⼯工夫や、ス クリーンサイズに合わせてコンテンツをサー バ側で切切り詰めるなどの対処が必要
  41. 41. WebApp Field Guide¨  オフライン対応、レスポンシブWebデザイン
  42. 42. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る ¤  様々なスクリーンサイズに対応できる ¤  様々なデバイスに対応できる
  43. 43. なぜこれほどまでにHTML5への関⼼心が⾼高まっているのか?¨  積極的な理理由 ¤  Webアプリでできることが増加の⼀一途を辿ってい る ¤  様々なスクリーンサイズに対応できる ¤  様々なデバイスに対応できる
  44. 44. HTML5のマルチプラットフォーム性が改めて注⽬目されている¨  例例:jQuery Mobileがサポートするプラット フォーム(Grade A) Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb), Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0, Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS (1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2, Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color 1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
  45. 45. jQuery Mobileとは¨  スマートフォン向けのWebサイト開発フレー ムワーク¨  現在のバージョンは1.1.0
  46. 46. jQuery Mobileの特徴¨  ネイティブアプリに近い操作感¨  テーマの切切り替えが可能¨  JavaScriptの知識識がなくてもそこそこ使える¨  jQueryに依存している¨  マルチプラットフォーム
  47. 47. ネイティブアプリに近い操作感¨  CSS/JavaScriptを駆使して、「ネイティブア プリに近い」操作感を実現する ¤  UIコンポーネント・・・フォーム要素やリストな ど、⽤用意されているコンポーネントがすべてブラ ウザネイティブのUIに近づけてあり、操作しやす い ¤  ページ遷移がなめらかなアニメーションで実現さ れる(画⾯面のリフレッシュが発⽣生しない)¨  jQuery Mobileのドキュメントがデモになって いる。
  48. 48. テーマの切切り替えが可能¨  jQuery Mobileは、CSSの切切り替えのみで⼤大幅 にUIを変更更することが可能。 ¤  ⾊色合いを変えるだけならば「スウォッチ」の変更更 だけで可能
  49. 49. JavaScriptの知識識がなくてもそこそこ使える¨  マークアップに特別な属性(data-*属性)を 加えていくだけで、簡単にスマートフォン対 応サイトを作成できる。
  50. 50. jQueryに依存している¨  jQueryに強く依存している。¨  バージョン1.1でjQuery1.7系に対応。¨  少し凝ったことをやるなら、jQueryの知識識が あったほうが良良い。
  51. 51. マルチプラットフォーム¨  デスクトップを含め、22のプラットフォーム に対して同様のユーザ体験を提供できる ¤  Android 2.1-4.0 ¤  iOS 3.2-5.0¨  プログレッシブ・エンハンスメントのアプ ローチにより、古いブラウザに対しても最低 限の情報提供は⾏行行える。
  52. 52. 実際にjQuery Mobileを触ってみましょう。
  53. 53. ボイラープレートコードを貼りつけてみる。(1/7)<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery Mobile Live Coding!</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script> </head> <body> <div id="top_page" data-role="page"> <div data-role="header"> <h1>jQuery Mobileをはじめよう!</h1> </div> <div data-role="content"> <p>ページの内容はここに書きます。</p> </div> <div data-role="footer"> <h4>フッター</h4> </div> </div> </body></html>
  54. 54. サブページを作ってみる(2/7) <div id="sub_page" data-role="page"> <div data-role="header"> <h1>こどもたち</h1> </div> <div data-role="content"> さぶぺーじです </div> <div data-role="footer"> <h4>フッター</h4> </div> </div><a href="#sub_page">こどもたち</a>
  55. 55. リンクをボタンに変えてみる(3/7)data-role="button"を要素に付与すると、⾒見見た⽬目がボタンに。
  56. 56. サブページのヘッダに、Homeボタンをつけてみる(4/7)<a href="#top_page">Home</a>class="ui-btn-right"
  57. 57. 画⾯面遷移を変更更してみる(5/7)data-transition="slideup" slide slideup slidedown pop fade flip turn flow
  58. 58. リストを作ってみる(6/7)<ul data-role="listview" class="children_list"> <li><a href="http://goo.gl/vcQd3">こうたろう</a></li> <li><a href="http://goo.gl/p8ltb">ちほ</a></li></ul>
  59. 59. テーマを変えてみる(7/7)data-theme="e"テーマはa-eの5種類。
  60. 60. jQuery Mobileを使⽤用したサイトは増加中¨  DODA、マイナビバイト、マイナビ派遣、じゃ らんnetなど、続々と利利⽤用事例例は増加中¨  jQuery Mobileを使った国内スマホサイトまと め¨  ⼤大⼿手によって採⽤用されていることからも、安 ⼼心して使えるフレームワーク。
  61. 61. Appcelerator/IDCの調査には続きがある。
  62. 62. アプリケーションをHTML5「のみ」で作ろうとする開発者はたった6% Appcelerator/IDC Mobile Developer Report, Q1 2012
  63. 63. まとめ¨  今年年モバイル上(のハイブリッドアプリ)で、 HTML5は爆発的に普及する! ¤  その際、jQuery Mobile、オフラインWebアプリ、 レスポンシブWebデザインなどが活⽤用される¨  2020年年には、アプリよりもWebが主流流になっ ているかも知れない?(59%がWebを選択) http://japan.cnet.com/news/business/35015489/

×