Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Html5勉強会 20120423
Ähnlich wie Html5勉強会 20120423 (20)
Mehr von Nobuhiro Sue
Mehr von Nobuhiro Sue (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
Html5勉強会 20120423
- 1. 東北デベロッパーズコミュニティ Sendai.html5 #1 HTML5概要とスマートフォン対応 2012年 4月 23日 日本アイ・ビー・エム株式会社 ソフトウェア事業 WebSphere事業部 須江 信洋(nsue@jp.ibm.com)
- 2. 自己紹介 須江 信洋（すえ のぶひろ） –日本IBMにてミドルウェアのテクニカルセールスを担当 • 2000年頃からJavaEE関連の仕事 • 今年からモバイル関連製品も担当 –Twitter: @nobusue –http://www.facebook.com/profile.php?id=732337788 コミュニティ活動 –Groovyコミュニティ(JGGUG)サポートスタッフ • 「プログラミングGROOVY」執筆チーム • 「Groovy イン・アクション」翻訳チーム –日本Javaユーザーグループ(JJUG)幹事 –その他 • SCM BootCamp • 「継続的デリバリー」読書会 2
- 3. はじめに 今日の資料は書籍やWebの情報を参考に作成したものです。より 詳しい(正確な)情報はこちらの情報源などをご参照いただくことを おすすめします。 「Google API Expertが解説するHTML5ガイドブック」 –http://www.amazon.co.jp/dp/4844329278 Googleグループ: html5-developers-jp –https://groups.google.com/group/html5-developers-jp –白石さん主催、最新情報が日々届きます HTML5.jp –http://www.html5.jp/ –羽田野さん主催、仕様書の翻訳などが充実 3
- 4. Agenda HTML5概要 モバイルWeb ハイブリッド・アプリケーション –PhoneGap / Apache Cordova –IBM Worklight 4
- 5. HTML5概要 5
- 6. HTML5とは？ WHATWG および W3C が、 HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 以下の点を改良 –リッチなWebアプリケーションの実現 –セマンティックなマークアップの枠組みの提供 –高いアクセシビリティの実現 –高い互換性の実現 対象範囲 –狭義のHTML5: Canvas/Media/Drag&Drop/オフラインなどのコア仕様 –広義のHTML5: 上記に加え、Web Storage/Web Workers/File API/Web Socketsなどの周辺仕様を含む 6
- 7. HTML5の基礎 最低限必要なのはDOCTYPE宣言のみ ブラウザに対して <!DOCTYPE html> HTML5モードを指示 <HTML> <HEAD> <title>HTML5サンプル</title> <meta charset="UTF-8"> </HEAD> <BODY> <h1>HTML5サンプル</h1> </BODY> </HTML> 7
- 9. モバイルWeb 9
- 10. モバイルから始めるHTML5 PC（特に業務系）ではまだ採用の敷居が高い –IEを標準ブラウザとしている企業が多数 –IE8以前では、HTML5のほとんどの機能に未対応 モバイルでは主要プラットフォームがHTML5 Ready –iPhone/iPad –Android –(Windows8) ただし、モバイル特有の事情を考慮する必要あり –対応している仕様の偏り –Video/Audioの非互換など 10
- 11. 急成長するモバイル市場 モバイルは新しいＩＴの波 インターネットに接続するデバイスの増加 1200 WW タブレット WW ノートPC WW PC WW スマートフォン 台数 (百万) 600 0 2010 2011 2012 2013 2014 2015 Source: Wells Fargo Securities, January 23, 2012 “Fostering the People: The Shift to Engagement Apps” インターネットによってWebやeビジネス の波が押し寄せたように、現在、モバイ 2020年までには、世界で100億台 ルによる新しい波が起きている のモバイル機器が使用される →全業種においてビジネス・チャンスに 11
- 12. 7割のCIOがIT戦略の優先事項として 「モバイル」を回答 今後3～5年で最も重要視している先見的なプラン (複数回答可) 83% ビジネス・インテリジェンスおよび分析 66% 74% モバイル・ソリューション 72% 68% 仮想化 61% クラウド・コンピューティング 60% 70% 60% ビジネス・プロセス管理(BPM) 48% 58% リスク管理とコンプライアンス 61% 57% セルフサービス・ポータル 19% コラボレーションおよびソーシャル・ネットワーキング 55% グローバル 34% 日本 出所: 2011 CIO Study, Q12:「今後3 ～ 5 年間で競争力を高めるために、どのような先見的なプランをお持ちですか？」 日本(n=206) , グローバル (n=3,018) 12
- 13. HTML5対応状況詳細(1/5) http://mobilehtml5.org/ 13
- 18. モバイルで使える機能を中心に概要紹介 Application Cache Web Storage Geolocation Canvas Viewport definition XMLHttpRequest 2.0 18
- 19. http://dev.w3.org/html5/spec/offline.html Application Cache Webアプリをオフラインで利用するために、リソースをクライアント 側でキャッシュするためのしくみ –HTML,CSS,JavaScript,イメージなどURL指定できる全リソースが対象 –フォールバックやイベント処理が可能 キャッシュ対象リソースはマニフェストファイルで指定 –更新チェックはマニフェストファイルのみを確認 [clock.html] [clock.manifest] <!DOCTYPE HTML> <html manifest="clock.manifest"> CACHE MANIFEST <head> <title>Clock</title> # This is comment line <script src="clock.js"></script> <link rel="stylesheet" href="clock.css"> clock.html </head> clock.css <body> clock.js <p>The time is: <output id="clock"></output></p> </body> 19 </html>
- 20. http://dev.w3.org/html5/webstorage/ Web Storage クライアント側でデータを永続化しておくためのストレージ –シンプルなKey-Valueストレージ –手軽に利用できる –複雑・大量データを扱うのには不向き Cookieとの違い –JavaScriptオブジェクトがそのまま格納できる –自動的にサーバーに送信されない –(仕様上は)サイズ制限がない –有効期限という概念がない 用途によって2種類を使い分ける –localStorage • Webサイトのオリジンごとに分離 • 永続期間は無制限 –sessionStorage • window(ブラウジングコンテキスト)と同じスコープを持ち、オリジンごとに分離 • windowが閉じられると削除される 20
- 21. http://dev.w3.org/geo/api/spec-source.html Geolocation API デバイスの位置情報を取得するためのAPI –緯度、経度、標高およびその精度 –デバイスの進行方向／進行速度 –位置情報取得時刻 シンプルなAPI –現在位置を一度だけ取得 • getCurrentPosition(successCallback, errorCallback, options) –位置情報を継続して監視 • watchPosition(successCallback, errorCallback, options) • clearWatch(watchId) –具体的な取得方法などは隠蔽されている(高レベルAPI) function showMap(position) { // (position.coords.latitude, position.coords.longitude)を中心にMap表示 } // One-shot position request. navigator.geolocation.getCurrentPosition(showMap); 21
- 22. http://dev.w3.org/html5/spec/the-canvas-element.html Canvas ブラウザ上でグラフィックスを自由に描画できる領域 –四角形、直線、円弧、ベジェ曲線 –画像 –グラデーション、影付け、重ね合わせ –テキスト –グラフィックス変形 –ピクセル操作による描画 描画コンテキストの保存／復元 画像データをURLとして取得 –toDataURL()によりbase64文字列に変換可能 22
- 23. Canvasサンプル <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Hello Canvas</title> <script>//<![CDATA[ function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.fillRect(20, 20, 80, 40); // 四角(塗りつぶしあり) ctx.strokeRect(120, 20, 80, 40); // 四角(塗りつぶしなし) ctx.arc(70, 150, 60, 0, Math.PI*2, false); // 円 var message = '文字も書けます'; ctx.font = "bold 18px 'MS P Gothic'"; var textWidth = ctx.measureText(message).width; ctx.fillStyle = "black"; ctx.textBaseline = "top"; ctx.fillText(message, 0, 220); ctx.stroke(); } //]]></script> </head> <body onload="draw()"> <canvas id="canvas" width="300" height="300"></canvas> </body> </html> 23
- 24. Canvas: 参考情報 HTML5 Canvasのサンプル –http://sites.google.com/site/gorogoronyan/Home/html5-iroiro/javascript –実用的な使い方のヒントとして Ball Pool –http://mrdoob.com/projects/chromeexperiments/ball_pool/ –モバイルでも動作するインタラクティブな使い方のサンプルとして 24
- 25. http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-element Viewport definition ブラウザの表示サイズを制御 –コンテンツの横幅／縦幅 –初期倍率／最少倍率／最大倍率 –拡大縮小の可否 <meta name=“viewport” …>で指定 –コンテンツ内容に合わせてviewportを最適化 • http://www.mdn.co.jp/di/articles/2434/?page=8 viewport以外のiOS系固有のチューニングについてはこちら –iPhone 3G DevWiki -画面表示関係 • http://wiki.sohaya.com/index.php/%E7%94%BB%E9%9D%A2%E8%A1%A8%E7%A 4%BA%E9%96%A2%E4%BF%82 25
- 26. http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-element XMLHttpRequest 2.0 クロスオリジンのリクエスト送信が可能に –送信先サーバーの許可が必要 • Cross-Origin Resource Sharingに準拠 • http://dvcs.w3.org/hg/cors/raw-file/tip/Overview.html 文字列以外も送信可能に –Blob / Document / FormData 進捗状況がモニター可能に –uploadプロパティが追加された –ダウンロード・アップロードの両方で進捗状況に応じたイベントが捕捉可能 • 進捗があるたびにonpregressイベントハンドラがコールバックされる var xhrObj = new XMLHttpRequest(); xhrObj.upload.addEventListener("progress", progressFunction, false); function progressFunction(evt){ var percentageDiv = document.getElementById("percentageCalc"); percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%"; } 26
- 27. リモート・デバッグ: Weinre モバイルWeb開発(特に実機デバッグ)を効率的に行うためのツール リモートから、FirebugやGoogle Dev Toolのような操作が可能 – DOM/CSSインスペクタとオンザフライ編集 – JavaScriptコンソール – ブレークポイント設定とステップ実行 PhoneGap(改めApache Cordova)のサブプロジェクト – ドキュメントとバイナリ • http://people.apache.org/~pmuellr/weinre/ – ソース • https://github.com/apache/incubator-cordova-weinre 使い方など – スマホの開発が超絶楽に！ weinreでスマートフォンをPCでリモートデバッグ！ • http://css-eblog.com/tools/weinre.html – スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre • http://blog.alt-scape.com/archives/423 27
- 30. ハイブリッド・ アプリケーション 30
- 31. モバイル・アプリケーションの特徴と課題 課題 ソリューション 特徴 開発生産性 様々な機種が混在 • OSごとに異なる開発言語が必要 • デバイス固有機能に対するスキル • デバイス毎にテストする負荷が高い スマートフォンやタブレット等多様なデバイス モバイル・エンタープラ - 異なる画面サイズ - デバイス固有機能の提供 アプリケーション管理 イズ・アプリケーション・ プラットフォーム • アプリケーションが最新かどうか (MEAP) 様々なOSが混在 • リモートからアプリケーションを無効化できるか iOS, Android, Blackberry, Windows Phone 等の複数プラットフォームが存在 企業システムとの連携 • エンタープライズ・システムとの統合 • マルチチャネル対応アプリケーションの構築 モバイル端末管理 セキュリティ (MDM) • 暗号化や認証の仕組み • デバイスの紛失や盗難への対応 端末管理 • デバイスの監視、管理 31 • デバイス上のソフトウェア更新、データ配布
- 32. モバイル・アプリケーションのトレンド Web ネイティブ・ アプリケーション アプリケーション オープンな技術(HTML5, デバイス固有の機能を活 CSS, JavaScript)を使用。 用できるが、開発・テストの 開発生産性やポータビリ 負荷が高い。 ティは高いが、デバイス特 有の機能は使えない。 ハイブリッド・ アプリケーション コードの大部分を再利用可能なWeb技術を使って開発。 デバイス依存の機能はネイティブ・コードで補完。 クロス・プラットフォーム 開発コスト ユーザビリティ 32 セキュリティ
- 33. ハイブリッド・アプリケーションとは Webアプリケーションと ネイティブ・アプリケー Application File System ションの組み合わせ Stores (on mobile device) 基本的にはHTML5、CSS、 Native Container JavaScriptを使用するが、 デバイスの機能にもア HTML, CSS, JavaScript クセス可能 App StoreやAndroid Marketなどから アプリケーションをダウンロードし、モバイ ル・デバイス上にアプリケーションを保管 Mobile Operating System する。 33
- 34. PhoneGap (Apache Cordova) ハイブリッド・アプリケーションのプラットフォーム –http://phonegap.com/ –http://incubator.apache.org/cordova/ Webブラウザ＋プラグイン –Webコード(HTML/CSS/JS)はWebブラウザコンポーネント上で実行 • トランスコードソリューションではなく、実行時もWebコードのまま –WebコードからJavaScript経由でネィティブコードを実行可能(プラグイン) –標準プラグインが豊富に存在し、独自拡張も可能 歴史的経緯 –PhoneGapを開発していたNitobiがAdobeに買収される –PhoneGapのコアをApache Callbackプロジェクトに移管 –Apache CallbackプロジェクトがApache Cordovaプロジェクトに改名 • Apache CordovaにはAdobe以外にもIBM/RIM/Microsoftなどが協力 • PhoneGapはApache Cordovaの1ディストリビューションという位置づけに • http://phonegap.com/2012/03/19/phonegap-cordova-and-what%E2%80%99s-in-a- 34 name/
- 36. PhoneGap: プラグインの利用例 ネットワークの回線種別を判定 36 http://docs.phonegap.com/en/1.6.1/cordova_connection_connection.md.html#Connection
- 37. IBM Worklight : モバイル・アプリケーション・プラットフォーム Build once. Run anywhere. HTML5、ハイブリッド、ネ – Android, iOS, Blackberry, Microsoft – スマートフォンとタブレット イティブ・アプリケーション のための、オープンかつ 標準ベース、エンタープライズ対応 – PhoneGap, Java 先進的なモバイル・アプ – – アプリケーション配布 エンタープライズとの統合 リケーション・プラット – – セキュリティー スケーラビリティ フォーム – 管理 Build it today. Change it tomorrow. – アプリケーション・ライフサイクル管理 – 保守とアップデート 37
- 38. Worklight のコンポーネント Worklight Studio Eclipse ベース コード再利用の最大化とデバイス毎の最適化を実現する包 括的で拡張性に優れた開発環境 Worklight ServerTomcat or WAS 上で稼働 統合通知、ランタイム・スキニング、バージョン管理、セキュ リティー、統合、配布 Worklight Runtime Components ネイティブのデバイス機能と連携可能な豊富なライブラリー ← とクライアントAPI Worklight Console リアルタイム分析、および、モバイル・アプリケーションとイン フラ管理のためのWebベースのコンソール 38
- 39. サポートする環境(Environment) 様々なタイプのプラットフォームに 対応 モバイル – iPhone – iPad – Android – BlackBerry – Windows Phone – Mobile web app デスクトップ – Windows 7 and Vista(ガジェット) – Adobe AIR – Mac OS Dashboard Web アプリケーション – Facebook – iGoogle – Embedded web page 39
- 40. Build and Deploy 基本部分は commonに、 差分を個別 環境のフォル ダへ すべてのコードをビルドしてデプロイ ネィティブSDK用のプロジェクトを生成 アプリケーション(Webコード)をWorklight Serverへデプロイ 40
- 41. Worklight のハイブリッド・アプリケーション ネィティブ・アプリとしてインストール 例: – iOSに対しては、拡張子IPA のファイ Worklight Runtime Component ル – Androidに対しては、拡張子APKの デプロイされ ファイル Web Code たネィティブ アプリ Apple AppStore やAndroid <!DOCTYPE html PUBLIC Marketにアップロード可能 <html> <! - - created 2003-12-1 Worklight Runtime Component <head><title>XYZ</title はアプリの一部としてデプロイされ、 </head> </body> HTML5コードを解釈可能 </html> デバイス固有の機能への完全なア クセス(カメラ、GPSなど) Web言語でコーディングし、ネィティ ブアプリとして実行 Device APIs 41
- 42. Worklightのアプリケーション・タイプ Webアプリ ハイブリッド(Web) ハイブリッド(Mixed) ネィティブアプリ HTML5, JavaScript , ソースコードはWebと ユーザー固有のニー プラットフォーム固有。 CSS3で記述。高速か Worklightのライブラリ ズを実現するネィティ 固有のスキルを必要 つローコストで開発可 を含み、ネィティブの ブコードでWebを拡張 とし、開発にはコストと 能だが、機能性はネィ シェル内で実行される。 し、ユーザーエクスペ 時間がかかる。高いレ ティブよりも劣る。 リエンスを最大化。 ベルのユーザーエク スペリエンスを実現で きる。 Mobile Browser Worklight Runtime Worklight Runtime Native Application 1001010101011101001010 Web Code Web 0100101011101001001101 0101010100100100101111 Web Code <!DOCTYPE html Native <!DOCTY 1001010 0010011001010101001010 PUBLIC PE html 1010111 1010100101010101010101 <!DOCTYPE html <html> 0100101 PUBLIC 0101011111100000101010 PUBLIC <! - - created 2003-12-1 0101010 created <html> <head><title>XYZ</title 1010010 1010101001001010101010 2003-12 <! - - created 2003-12- </head> 0100101 1010001111010100011110 </p> 12 - - 1110010 </body> </body> 1010011101010111110010 <head><title>XYZ</title </html> 0110010 > </html> 1101111010001011001110 </head> <body> </p> </body> </html> Device APIs Device APIs Device APIs 42
- 43. ハイブリッド(Mixed)の利用イメージ ハイブリッド(Mixed) Webとネィティブの ユーザー固有のニー ネィティ 画面混在 Web ブ Web ズを実現するネィティ 画面 画面 ブコードでWebを拡張 画面 し、ユーザーエクスペ リエンスを最大化。 共通のユーザーセッションとデータ Worklight Client Runtime Worklight Runtime Web Native <!DOCTY 1001010 PE html 1010111 PUBLIC created 0100101 0101010 Web プラグイン(ドライバ) 2003-12 1010010 </p> </body> 0100101 1110010 0110010 画面 による拡張 </html> ネィティブ機能の Worklight Client Runtime 呼出し Device APIs Worklight ユーザー 標準 独自 プラグイン プラグイン 43
- 44. 主要なライブラリ/ツールとの統合 Worklightは主要なHTML5ライブラリ/ツールと統合可能: 44
- 45. Worklightのランタイム・アーキテクチャ Worklight Server Device Runtime Application Code Server-side Client-side Application Code App Resources • Cross Platform Technology Stats Aggregation JSON Translation Direct Update Mobile • Security and Authentication Web Apps Authentication • Back-end Data Integration Unified Push • Post-deployment control Adapter Library Notifications and Diagnostics 45
- 46. サーバーサイド・アダプター • Worklight Platformはアダプターを利 用して様々なバックエンド・システム への接続を実現 Query Response Update 2 3 data • アダプターの用途 SQL WS HTTP • 情報の取得 Worklight • アクション(ロジック)実行 1 Invoke Data/Result adapter procedure as JSON 4 • 標準提供アダプター • SQL Adapter • HTTP Adapter (RESTとSOAPに対応) 46
- 47. 柔軟なプッシュ通知のフレームワーク iOSとAndroidに共通のAPI 1つのアプリケーションで、複数のデバイスに 対応 イベント・ソースとアプリケーション間での Many-to-many リレーションシップ 同じバックエンドからの複数イベント・ソース 同じアプケーションへの複数ユーザーログイン 47
- 48. モバイル・アプリケーションのセキュリティ デバイス上のデータの保護 強制セキュリティ・アップデート 起動時の Secure リモート 直接 暗号化され Encrypted オフライン Offline セキュア challenge- 無効化 アップデート たオフライン offline cache 認証 authentication チャレンジ-レス response on キャッシュ ポンス startup 企業のセキュリティ・プロセスの効率化 アプリケー App Jailbreak and Jailbreakおよ ションの真正 authenticity びマルウェア malware 性テスト testing の検出 detection 組織のサン ドボックスと してのシェル 堅固な認証・認可 アプリケーション・セキュリティ 認証統合 実証済みの データ保護 デバイスidを SSLによる フレームワー プラット コードの ク レルム 併用 サーバーの フォーム・セ 難読化 検証 キュリティ 48
- 49. Direct Update: Worklight Serverから更新 版を直接配布 1.初期のオフライン実行を可能 にするため、Webリソースがア Worklight Runtime プリケーション内にパッケージ 1 ダウンロード ングされている パッケージされ たリソース 2.Webリソースはアプリケーショ App Store ンのキャッシュストレージに転 2 転送 送される 3 更新を確認 3.アプリケーションは更新を確認 する キャッシュされ • 起動時 Worklight Web たリソース • フォアグラウンドになった時 Server リソース 4.必要であればWebリソースを 4 Webリソー ダウンロードして更新する スを更新 49
- 50. PhoneGap(Cordova)とIBM Worklightの比較 PhoneGap Worklight PhoneGapプラグイン ネィティブ連携 PhoneGapプラグイン +Worklightプラグイン 通常は不要 PhoneGapスキル 必要 プラグイン開発時のみ必要 プラットフォーム毎にソースを アプリ単位で複数プラットフォーム クロスプラットフォーム対応 管理 のソース管理を共通化 改ざん・覗き見防止 セキュリティ機能 なし 暗号化ストレージ 認証フレームワーク XMLHttpRequestなどを利用 バックエンド連携 アダプター して独自に開発 Direct Update アプリケーション更新 再インストール (Webコードの部分のみ更新) 監視・分析 なし 管理コンソール 商用サポート なし あり 50
- 51. まとめ モバイル・デバイスは急成長中のプラットフォーム HTML5はモバイルから始めよう モバイル・アプリケーションの課題解決にはハイブリッド・アプリ ケーションによるアプローチが有効 –開発生産性、保守性、クロス・プラットフォーム対応 ただし、エンタープライズ・システムへの適用にはほかにも課題が –セキュリティ（デバイスレベル／アプリケーションレベル） –バックエンドシステム連携 IBM Worklightは、これらの課題を解決するMEAP(Mobile Enterprise Application Platform) –PhoneGap(Apache Cordova)ベースだが、PhoneGapを知らなくてもOK –PhoneGapプラグインが使える 51