Html5勉強会 20120423
Upcoming SlideShare
Loading in...5
×
 

Html5勉強会 20120423

on

  • 3,978 views

 

Statistics

Views

Total Views
3,978
Views on SlideShare
3,958
Embed Views
20

Actions

Likes
4
Downloads
51
Comments
0

5 Embeds 20

https://twimg0-a.akamaihd.net 7
https://twitter.com 6
http://a0.twimg.com 5
https://si0.twimg.com 1
http://s.deeeki.com 1

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

Html5勉強会 20120423 Html5勉強会 20120423 Presentation Transcript

  • 東北デベロッパーズコミュニティ Sendai.html5 #1HTML5概要とスマートフォン対応 2012年 4月 23日 日本アイ・ビー・エム株式会社 ソフトウェア事業 WebSphere事業部 須江 信洋(nsue@jp.ibm.com)
  • 自己紹介 須江 信洋(すえ のぶひろ) –日本IBMにてミドルウェアのテクニカルセールスを担当 • 2000年頃からJavaEE関連の仕事 • 今年からモバイル関連製品も担当 –Twitter: @nobusue –http://www.facebook.com/profile.php?id=732337788 コミュニティ活動 –Groovyコミュニティ(JGGUG)サポートスタッフ • 「プログラミングGROOVY」執筆チーム • 「Groovy イン・アクション」翻訳チーム –日本Javaユーザーグループ(JJUG)幹事 –その他 • SCM BootCamp • 「継続的デリバリー」読書会2
  • はじめに 今日の資料は書籍や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
  • AgendaHTML5概要モバイルWebハイブリッド・アプリケーション –PhoneGap / Apache Cordova –IBM Worklight4
  • HTML5概要5
  • HTML5とは? WHATWG および W3C が、 HTML4 に代わる次世代の HTML として策定を進めている HTML 仕様 以下の点を改良 –リッチなWebアプリケーションの実現 –セマンティックなマークアップの枠組みの提供 –高いアクセシビリティの実現 –高い互換性の実現 対象範囲 –狭義のHTML5: Canvas/Media/Drag&Drop/オフラインなどのコア仕様 –広義のHTML5: 上記に加え、Web Storage/Web Workers/File API/Web Socketsなどの周辺仕様を含む6
  • HTML5の基礎 最低限必要なのはDOCTYPE宣言のみ ブラウザに対して <!DOCTYPE html> HTML5モードを指示 <HTML> <HEAD> <title>HTML5サンプル</title> <meta charset="UTF-8"> </HEAD> <BODY> <h1>HTML5サンプル</h1> </BODY> </HTML>7
  • HTML5対応状況 http://caniuse.com/#cats=CSS,HTML5,JS_API8
  • モバイルWeb9
  • モバイルから始めるHTML5 PC(特に業務系)ではまだ採用の敷居が高い –IEを標準ブラウザとしている企業が多数 –IE8以前では、HTML5のほとんどの機能に未対応 モバイルでは主要プラットフォームがHTML5 Ready –iPhone/iPad –Android –(Windows8) ただし、モバイル特有の事情を考慮する必要あり –対応している仕様の偏り –Video/Audioの非互換など10
  • 急成長するモバイル市場 モバイルは新しいITの波 インターネットに接続するデバイスの増加 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
  • 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
  • HTML5対応状況詳細(1/5) http://mobilehtml5.org/13
  • HTML5対応状況詳細(2/5)14
  • HTML5対応状況詳細(3/5)15
  • HTML5対応状況詳細(4/5)16
  • HTML5対応状況詳細(5/5)17
  • モバイルで使える機能を中心に概要紹介Application CacheWeb StorageGeolocationCanvasViewport definitionXMLHttpRequest 2.018
  • http://dev.w3.org/html5/spec/offline.htmlApplication 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>
  • http://dev.w3.org/html5/webstorage/Web Storage クライアント側でデータを永続化しておくためのストレージ –シンプルなKey-Valueストレージ –手軽に利用できる –複雑・大量データを扱うのには不向き Cookieとの違い –JavaScriptオブジェクトがそのまま格納できる –自動的にサーバーに送信されない –(仕様上は)サイズ制限がない –有効期限という概念がない 用途によって2種類を使い分ける –localStorage • Webサイトのオリジンごとに分離 • 永続期間は無制限 –sessionStorage • window(ブラウジングコンテキスト)と同じスコープを持ち、オリジンごとに分離 • windowが閉じられると削除される20
  • http://dev.w3.org/geo/api/spec-source.htmlGeolocation 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
  • http://dev.w3.org/html5/spec/the-canvas-element.htmlCanvas ブラウザ上でグラフィックスを自由に描画できる領域 –四角形、直線、円弧、ベジェ曲線 –画像 –グラデーション、影付け、重ね合わせ –テキスト –グラフィックス変形 –ピクセル操作による描画 描画コンテキストの保存/復元 画像データをURLとして取得 –toDataURL()によりbase64文字列に変換可能22
  • 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
  • Canvas: 参考情報 HTML5 Canvasのサンプル –http://sites.google.com/site/gorogoronyan/Home/html5-iroiro/javascript –実用的な使い方のヒントとして Ball Pool –http://mrdoob.com/projects/chromeexperiments/ball_pool/ –モバイルでも動作するインタラクティブな使い方のサンプルとして24
  • http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-elementViewport 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%8225
  • http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-elementXMLHttpRequest 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
  • リモート・デバッグ: 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/42327
  • Weinre実行例: コンソール28
  • Weinre実行例: デバッグ29
  • ハイブリッド・ アプリケーション30
  • モバイル・アプリケーションの特徴と課題 課題 ソリューション 特徴 開発生産性 様々な機種が混在 • OSごとに異なる開発言語が必要 • デバイス固有機能に対するスキル • デバイス毎にテストする負荷が高いスマートフォンやタブレット等多様なデバイス モバイル・エンタープラ- 異なる画面サイズ- デバイス固有機能の提供 アプリケーション管理 イズ・アプリケーション・ プラットフォーム • アプリケーションが最新かどうか (MEAP) 様々なOSが混在 • リモートからアプリケーションを無効化できるかiOS, Android, Blackberry, Windows Phone等の複数プラットフォームが存在 企業システムとの連携 • エンタープライズ・システムとの統合 • マルチチャネル対応アプリケーションの構築 モバイル端末管理 セキュリティ (MDM) • 暗号化や認証の仕組み • デバイスの紛失や盗難への対応 端末管理 • デバイスの監視、管理 31 • デバイス上のソフトウェア更新、データ配布
  • モバイル・アプリケーションのトレンド Web ネイティブ・ アプリケーション アプリケーション オープンな技術(HTML5, デバイス固有の機能を活 CSS, JavaScript)を使用。 用できるが、開発・テストの 開発生産性やポータビリ 負荷が高い。 ティは高いが、デバイス特 有の機能は使えない。 ハイブリッド・ アプリケーション コードの大部分を再利用可能なWeb技術を使って開発。 デバイス依存の機能はネイティブ・コードで補完。 クロス・プラットフォーム 開発コスト ユーザビリティ32 セキュリティ
  • ハイブリッド・アプリケーションとは Webアプリケーションと ネイティブ・アプリケー Application File System ションの組み合わせ Stores (on mobile device) 基本的にはHTML5、CSS、 Native Container JavaScriptを使用するが、 デバイスの機能にもア HTML, CSS, JavaScript クセス可能App StoreやAndroid Marketなどからアプリケーションをダウンロードし、モバイル・デバイス上にアプリケーションを保管 Mobile Operating Systemする。33
  • 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/
  • PhoneGap: 幅広いプラットフォームに対応35
  • PhoneGap: プラグインの利用例 ネットワークの回線種別を判定36 http://docs.phonegap.com/en/1.6.1/cordova_connection_connection.md.html#Connection
  • IBM Worklight : モバイル・アプリケーション・プラットフォーム  Build once. Run anywhere. HTML5、ハイブリッド、ネ – Android, iOS, Blackberry, Microsoft – スマートフォンとタブレット イティブ・アプリケーション のための、オープンかつ  標準ベース、エンタープライズ対応 – PhoneGap, Java 先進的なモバイル・アプ – – アプリケーション配布 エンタープライズとの統合 リケーション・プラット – – セキュリティー スケーラビリティ フォーム – 管理  Build it today. Change it tomorrow. – アプリケーション・ライフサイクル管理 – 保守とアップデート37
  • Worklight のコンポーネント Worklight Studio Eclipse ベース コード再利用の最大化とデバイス毎の最適化を実現する包 括的で拡張性に優れた開発環境 Worklight ServerTomcat or WAS 上で稼働 統合通知、ランタイム・スキニング、バージョン管理、セキュ リティー、統合、配布 Worklight Runtime Components ネイティブのデバイス機能と連携可能な豊富なライブラリー ← とクライアントAPI Worklight Console リアルタイム分析、および、モバイル・アプリケーションとイン フラ管理のためのWebベースのコンソール38
  • サポートする環境(Environment)  様々なタイプのプラットフォームに 対応  モバイル – iPhone – iPad – Android – BlackBerry – Windows Phone – Mobile web app  デスクトップ – Windows 7 and Vista(ガジェット) – Adobe AIR – Mac OS Dashboard  Web アプリケーション – Facebook – iGoogle – Embedded web page39
  • Build and Deploy 基本部分は commonに、 差分を個別 環境のフォル ダへ すべてのコードをビルドしてデプロイ ネィティブSDK用のプロジェクトを生成 アプリケーション(Webコード)をWorklight Serverへデプロイ40
  • 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 APIs41
  • 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 APIs42
  • ハイブリッド(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
  • 主要なライブラリ/ツールとの統合 Worklightは主要なHTML5ライブラリ/ツールと統合可能:44
  • 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 Diagnostics45
  • サーバーサイド・アダプター • 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
  • 柔軟なプッシュ通知のフレームワーク iOSとAndroidに共通のAPI 1つのアプリケーションで、複数のデバイスに 対応 イベント・ソースとアプリケーション間での Many-to-many リレーションシップ 同じバックエンドからの複数イベント・ソース 同じアプケーションへの複数ユーザーログイン47
  • モバイル・アプリケーションのセキュリティ デバイス上のデータの保護 強制セキュリティ・アップデート 起動時の Secure リモート 直接 暗号化され Encrypted オフライン Offline セキュア challenge- 無効化 アップデート たオフライン offline cache 認証 authentication チャレンジ-レス response on キャッシュ ポンス startup 企業のセキュリティ・プロセスの効率化 アプリケー App Jailbreak and Jailbreakおよ ションの真正 authenticity びマルウェア malware 性テスト testing の検出 detection 組織のサン ドボックスと してのシェル 堅固な認証・認可 アプリケーション・セキュリティ 認証統合 実証済みの データ保護 デバイスidを SSLによる フレームワー プラット コードの ク レルム 併用 サーバーの フォーム・セ 難読化 検証 キュリティ48
  • Direct Update: Worklight Serverから更新版を直接配布 1.初期のオフライン実行を可能 にするため、Webリソースがア Worklight Runtime プリケーション内にパッケージ 1 ダウンロード ングされている パッケージされ たリソース 2.Webリソースはアプリケーショ App Store ンのキャッシュストレージに転 2 転送 送される 3 更新を確認 3.アプリケーションは更新を確認 する キャッシュされ • 起動時 Worklight Web たリソース • フォアグラウンドになった時 Server リソース 4.必要であればWebリソースを 4 Webリソー ダウンロードして更新する スを更新49
  • PhoneGap(Cordova)とIBM Worklightの比較 PhoneGap Worklight PhoneGapプラグイン ネィティブ連携 PhoneGapプラグイン +Worklightプラグイン 通常は不要 PhoneGapスキル 必要 プラグイン開発時のみ必要 プラットフォーム毎にソースを アプリ単位で複数プラットフォーム クロスプラットフォーム対応 管理 のソース管理を共通化 改ざん・覗き見防止 セキュリティ機能 なし 暗号化ストレージ 認証フレームワーク XMLHttpRequestなどを利用 バックエンド連携 アダプター して独自に開発 Direct Update アプリケーション更新 再インストール (Webコードの部分のみ更新) 監視・分析 なし 管理コンソール 商用サポート なし あり50
  • まとめ モバイル・デバイスは急成長中のプラットフォーム HTML5はモバイルから始めよう モバイル・アプリケーションの課題解決にはハイブリッド・アプリ ケーションによるアプローチが有効 –開発生産性、保守性、クロス・プラットフォーム対応 ただし、エンタープライズ・システムへの適用にはほかにも課題が –セキュリティ(デバイスレベル/アプリケーションレベル) –バックエンドシステム連携 IBM Worklightは、これらの課題を解決するMEAP(Mobile Enterprise Application Platform) –PhoneGap(Apache Cordova)ベースだが、PhoneGapを知らなくてもOK –PhoneGapプラグインが使える51