html5勉強会 20120423
Post on 22-Dec-2014
3.587 Views
Preview:
DESCRIPTION
TRANSCRIPT
東北デベロッパーズコミュニティ Sendai.html5 #1
HTML5概要とスマートフォン対応
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 Worklight
4
5
HTML5概要
HTML5とは?
WHATWG および W3C が、 HTML4 に代わる次世代の HTML
として策定を進めている HTML 仕様
以下の点を改良 –リッチなWebアプリケーションの実現
–セマンティックなマークアップの枠組みの提供
–高いアクセシビリティの実現
–高い互換性の実現
対象範囲 –狭義のHTML5: Canvas/Media/Drag&Drop/オフラインなどのコア仕様
–広義のHTML5: 上記に加え、Web Storage/Web Workers/File API/Web
Socketsなどの周辺仕様を含む
6
HTML5の基礎
最低限必要なのはDOCTYPE宣言のみ
7
<!DOCTYPE html>
<HTML>
<HEAD>
<title>HTML5サンプル</title>
<meta charset="UTF-8">
</HEAD>
<BODY>
<h1>HTML5サンプル</h1>
</BODY>
</HTML>
ブラウザに対してHTML5モードを指示
9
モバイルWeb
モバイルから始めるHTML5
PC(特に業務系)ではまだ採用の敷居が高い – IEを標準ブラウザとしている企業が多数
– IE8以前では、HTML5のほとんどの機能に未対応
モバイルでは主要プラットフォームがHTML5 Ready – iPhone/iPad
–Android
–(Windows8)
ただし、モバイル特有の事情を考慮する必要あり –対応している仕様の偏り
–Video/Audioの非互換など
10
Source: Wells Fargo Securities, January 23, 2012
“Fostering the People: The Shift to Engagement Apps”
2020年までには、世界で100億台
のモバイル機器が使用される
急成長するモバイル市場 インターネットに接続するデバイスの増加
台数
(百万
)
600
1200
0 2010 2011 2012 2013 2014 2015
WW ノートPC
WW タブレット
WW スマートフォン
WW PC
モバイルは新しいITの波
インターネットによってWebやeビジネス
の波が押し寄せたように、現在、モバイルによる新しい波が起きている
→全業種においてビジネス・チャンスに
11
7割のCIOがIT戦略の優先事項として 「モバイル」を回答
今後3~5年で最も重要視している先見的なプラン (複数回答可)
ビジネス・インテリジェンスおよび分析
仮想化
ビジネス・プロセス管理(BPM)
セルフサービス・ポータル
リスク管理とコンプライアンス
クラウド・コンピューティング
モバイル・ソリューション
コラボレーションおよびソーシャル・ネットワーキング
60%
66%
61%
48%
19%
70%
72%
34% グローバル
日本
出所: 2011 CIO Study, Q12:「今後3 ~ 5 年間で競争力を高めるために、どのような先見的なプランをお持ちですか?」 日本(n=206) , グローバル (n=3,018)
83%
74%
68%
60%
58%
61%
57%
55%
12
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.0
18
Application Cache Webアプリをオフラインで利用するために、リソースをクライアント側でキャッシュするためのしくみ
–HTML,CSS,JavaScript,イメージなどURL指定できる全リソースが対象
–フォールバックやイベント処理が可能
キャッシュ対象リソースはマニフェストファイルで指定 –更新チェックはマニフェストファイルのみを確認
19
http://dev.w3.org/html5/spec/offline.html
CACHE MANIFEST
# This is comment line
clock.html
clock.css
clock.js
<!DOCTYPE HTML>
<html manifest="clock.manifest">
<head>
<title>Clock</title>
<script src="clock.js"></script>
<link rel="stylesheet" href="clock.css">
</head>
<body>
<p>The time is: <output id="clock"></output></p>
</body>
</html>
[clock.manifest]
[clock.html]
Web Storage クライアント側でデータを永続化しておくためのストレージ
–シンプルなKey-Valueストレージ
–手軽に利用できる
–複雑・大量データを扱うのには不向き
Cookieとの違い –JavaScriptオブジェクトがそのまま格納できる
–自動的にサーバーに送信されない
–(仕様上は)サイズ制限がない
–有効期限という概念がない
用途によって2種類を使い分ける – localStorage
• Webサイトのオリジンごとに分離
• 永続期間は無制限
–sessionStorage • window(ブラウジングコンテキスト)と同じスコープを持ち、オリジンごとに分離
• windowが閉じられると削除される
20
http://dev.w3.org/html5/webstorage/
Geolocation API デバイスの位置情報を取得するためのAPI
–緯度、経度、標高およびその精度
–デバイスの進行方向/進行速度
–位置情報取得時刻
シンプルなAPI –現在位置を一度だけ取得
• getCurrentPosition(successCallback, errorCallback, options)
–位置情報を継続して監視 • watchPosition(successCallback, errorCallback, options)
• clearWatch(watchId)
–具体的な取得方法などは隠蔽されている(高レベルAPI)
21
http://dev.w3.org/geo/api/spec-source.html
function showMap(position) {
// (position.coords.latitude, position.coords.longitude)を中心にMap表示
}
// One-shot position request.
navigator.geolocation.getCurrentPosition(showMap);
Canvas
ブラウザ上でグラフィックスを自由に描画できる領域 –四角形、直線、円弧、ベジェ曲線
–画像
–グラデーション、影付け、重ね合わせ
–テキスト
–グラフィックス変形
–ピクセル操作による描画
描画コンテキストの保存/復元
画像データをURLとして取得 – toDataURL()によりbase64文字列に変換可能
22
http://dev.w3.org/html5/spec/the-canvas-element.html
Canvasサンプル
23
<!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>
Canvas: 参考情報
HTML5 Canvasのサンプル –http://sites.google.com/site/gorogoronyan/Home/html5-iroiro/javascript
–実用的な使い方のヒントとして
Ball Pool –http://mrdoob.com/projects/chromeexperiments/ball_pool/
–モバイルでも動作するインタラクティブな使い方のサンプルとして
24
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
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イベントハンドラがコールバックされる
26
http://dev.w3.org/csswg/css-device-adapt/#viewport-meta-element
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) + "%";
}
リモート・デバッグ: 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
Weinre実行例: コンソール
28
Weinre実行例: デバッグ
29
30
ハイブリッド・ アプリケーション
モバイル・アプリケーションの特徴と課題
様々な機種が混在
セキュリティ
開発生産性
アプリケーション管理
企業システムとの連携
スマートフォンやタブレット等多様なデバイス
- 異なる画面サイズ
- デバイス固有機能の提供
様々なOSが混在
iOS, Android, Blackberry, Windows Phone 等の複数プラットフォームが存在
• OSごとに異なる開発言語が必要
• デバイス固有機能に対するスキル
• デバイス毎にテストする負荷が高い
• 暗号化や認証の仕組み
• デバイスの紛失や盗難への対応
• アプリケーションが最新かどうか
• リモートからアプリケーションを無効化できるか
• エンタープライズ・システムとの統合
• マルチチャネル対応アプリケーションの構築
特徴 課題
端末管理
• デバイスの監視、管理
• デバイス上のソフトウェア更新、データ配布
モバイル・エンタープライズ・アプリケーション・プラットフォーム
(MEAP)
ソリューション
モバイル端末管理 (MDM)
31
モバイル・アプリケーションのトレンド
ネイティブ・ アプリケーション
Web アプリケーション
ハイブリッド・ アプリケーション
コードの大部分を再利用可能なWeb技術を使って開発。 デバイス依存の機能はネイティブ・コードで補完。
デバイス固有の機能を活用できるが、開発・テストの負荷が高い。
オープンな技術(HTML5, CSS, JavaScript)を使用。 開発生産性やポータビリティは高いが、デバイス特有の機能は使えない。
ユーザビリティ
セキュリティ
クロス・プラットフォーム 開発コスト
32
ハイブリッド・アプリケーションとは
Application
Stores File System
(on mobile
device)
Native Container
HTML, CSS, JavaScript
Mobile Operating System
Webアプリケーションと
ネイティブ・アプリケーションの組み合わせ 基本的にはHTML5、CSS、 JavaScriptを使用するが、
デバイスの機能にもアクセス可能
App StoreやAndroid Marketなどから アプリケーションをダウンロードし、モバイル・デバイス上にアプリケーションを保管する。
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-
name/
34
PhoneGap: 幅広いプラットフォームに対応
35
PhoneGap: プラグインの利用例
ネットワークの回線種別を判定
36 http://docs.phonegap.com/en/1.6.1/cordova_connection_connection.md.html#Connection
IBM Worklight : モバイル・アプリケーション・プラットフォーム
Build once. Run anywhere. – Android, iOS, Blackberry, Microsoft – スマートフォンとタブレット
標準ベース、エンタープライズ対応 – PhoneGap, Java – アプリケーション配布 – エンタープライズとの統合 – セキュリティー – スケーラビリティ – 管理
Build it today. Change it tomorrow. – アプリケーション・ライフサイクル管理 – 保守とアップデート
HTML5、ハイブリッド、ネイティブ・アプリケーションのための、オープンかつ先進的なモバイル・アプリケーション・プラットフォーム
37
Worklight Server 統合通知、ランタイム・スキニング、バージョン管理、セキュリティー、統合、配布
Worklight Console リアルタイム分析、および、モバイル・アプリケーションとインフラ管理のためのWebベースのコンソール
Worklight Studio コード再利用の最大化とデバイス毎の最適化を実現する包括的で拡張性に優れた開発環境
Worklight のコンポーネント
Worklight Runtime Components ネイティブのデバイス機能と連携可能な豊富なライブラリーとクライアントAPI ←
Tomcat or WAS 上で稼働
Eclipse ベース
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 page
39
Build and Deploy
すべてのコードをビルドしてデプロイ
ネィティブSDK用のプロジェクトを生成
アプリケーション(Webコード)をWorklight Serverへデプロイ 40
基本部分はcommonに、 差分を個別環境のフォルダへ
Worklight のハイブリッド・アプリケーション ネィティブ・アプリとしてインストール 例: – iOSに対しては、拡張子IPA のファイル
– Androidに対しては、拡張子APKのファイル
Apple AppStore やAndroid Marketにアップロード可能
Worklight Runtime Component はアプリの一部としてデプロイされ、HTML5コードを解釈可能
デバイス固有の機能への完全なアクセス(カメラ、GPSなど)
Web言語でコーディングし、ネィティブアプリとして実行
Worklight Runtime Component
Web Code
<!DOCTYPE html PUBLIC <html> <! - - created 2003-12-1 <head><title>XYZ</title </head> </body> </html>
Device APIs
デプロイされたネィティブアプリ
41
Worklightのアプリケーション・タイプ ネィティブアプリ
プラットフォーム固有。固有のスキルを必要とし、開発にはコストと時間がかかる。高いレベルのユーザーエクスペリエンスを実現できる。
Native
Application
Device APIs
1001010101011101001010010010101110100100110101010101001001001011110010011001010101001010101010010101010101010101010111111000001010101010101001001010101010101000111101010001111010100111010101111100101101111010001011001110
ハイブリッド(Mixed)
ユーザー固有のニーズを実現するネィティブコードでWebを拡張し、ユーザーエクスペリエンスを最大化。
Worklight Runtime
Web
Native
Device APIs
<!DOCTYPE html PUBLIC created 2003-12 </p> </body> </html>
10010101010111010010101010101010010010010111100100110010
ハイブリッド(Web)
ソースコードはWebとWorklightのライブラリを含み、ネィティブのシェル内で実行される。
Worklight Runtime
Web Code <!DOCTYPE html
PUBLIC
<html>
<! - - created 2003-12-1
<head><title>XYZ</title
</head>
</body>
</html>
Device APIs
Webアプリ
HTML5, JavaScript ,
CSS3で記述。高速かつローコストで開発可能だが、機能性はネィティブよりも劣る。
Mobile Browser
Web Code <!DOCTYPE html
PUBLIC
<html>
<! - - created 2003-12-
12 - -
<head><title>XYZ</title
>
</head>
<body>
</p>
</body>
</html>
42
ハイブリッド(Mixed)の利用イメージ
ハイブリッド(Mixed)
ユーザー固有のニーズを実現するネィティブコードでWebを拡張し、ユーザーエクスペリエンスを最大化。
Worklight Runtime
Web Native
Device APIs
<!DOCTYPE html PUBLIC created 2003-12 </p> </body> </html>
10010101010111010010101010101010010010010111100100110010
プラグイン(ドライバ) による拡張
Webとネィティブの 画面混在 Web
画面
ネィティブ 画面
Web 画面
共通のユーザーセッションとデータ
Web 画面
Worklight Client Runtime
Worklight Client Runtime
Worklight 標準
プラグイン
ユーザー 独自
プラグイン
ネィティブ機能の 呼出し
43
主要なライブラリ/ツールとの統合
Worklightは主要なHTML5ライブラリ/ツールと統合可能:
44
Worklightのランタイム・アーキテクチャ
Worklight Server
Authentication
JSON Translation
Server-side Application Code
Adapter Library
Client-side App Resources
Direct Update
Mobile Web Apps
Unified Push Notifications
Sta
ts A
gg
reg
ation
Device Runtime
Ap
plic
atio
n C
od
e
• Cross Platform Technology
• Security and Authentication
• Back-end Data Integration
• Post-deployment control and Diagnostics
45
サーバーサイド・アダプター
• Worklight Platformはアダプターを利用して様々なバックエンド・システムへの接続を実現
•アダプターの用途 •情報の取得
•アクション(ロジック)実行
•標準提供アダプター •SQL Adapter
•HTTP Adapter (RESTとSOAPに対応)
Query
Update data
Data/Result
as JSON
Invoke adapter
procedure
SQL WS
Worklight
HTTP
Response
1
2 3
4
46
柔軟なプッシュ通知のフレームワーク
同じアプケーションへの複数ユーザーログイン
同じバックエンドからの複数イベント・ソース
イベント・ソースとアプリケーション間での Many-to-many リレーションシップ
1つのアプリケーションで、複数のデバイスに対応
iOSとAndroidに共通のAPI
47
モバイル・アプリケーションのセキュリティ
アプリケーション・セキュリティ 堅固な認証・認可
企業のセキュリティ・プロセスの効率化
デバイス上のデータの保護
認証統合
フレームワーク
データ保護 レルム
デバイスidを併用
組織のサンドボックスとしてのシェル
コードの 難読化
SSLによる
サーバーの検証
実証済みのプラット
フォーム・セキュリティ
Jailbreak and malware detection
App authenticity
testing
Encrypted offline cache
Offline authentication
Secure challenge-
response on startup
Encrypted offline cache
Offline authentication
Secure challenge-
response on startup
Encrypted offline cache
Offline authentication
Jailbreak and malware detection
Secure challenge-
response on startup
Encrypted offline cache
Offline authentication
アプリケーションの真正性テスト
Jailbreakおよ
びマルウェアの検出
起動時の セキュア
チャレンジ-レスポンス
暗号化されたオフラインキャッシュ
オフライン 認証
強制セキュリティ・アップデート
リモート 無効化
直接 アップデート
48
Direct Update: Worklight Serverから更新版を直接配布
Worklight
Server
Worklight Runtime
パッケージされたリソース
1 ダウンロード
4 Webリソースを更新
App Store
Web
リソース
キャッシュされたリソース
1.初期のオフライン実行を可能にするため、Webリソースがア
プリケーション内にパッケージングされている
2.Webリソースはアプリケーショ
ンのキャッシュストレージに転送される
3.アプリケーションは更新を確認する • 起動時
• フォアグラウンドになった時
4.必要であればWebリソースをダウンロードして更新する
2 転送
3 更新を確認
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
top related