HTML5(JAGAT)

スマートフォン向けサイト制作のポイントと
HTML5の可能性を理解する
∼今後のトレンドの大本命
「HTML5でWebアプリケーション化」
について∼
株式会社エル・カミノ・リアル
代表取締役木寺祥友

1995年（Javaに出会った）

 日本初のJavaプロジェクト
 HotJava上で動く

サイバーモールアプレット制作
 ジェームスゴスリングなど

Javaの発案者などに取材
 「Javaを創った人々」執筆
 Write once run anywhere
 と言っても端末の９５％は
Windows

El Camino Real CONFIDENTIAL

2001年（携帯にJavaが載った）

 １月２８日携帯Java

NTTドコモ503i発売
 「今すぐできるiアプリ」
執筆
 NTTドコモ504i
iアプリ
共通プラットフォーム化
２００アプリ提供
 MIDPに継承


2011年

 「アンドロイド・ジャパン」
 インプレスから６月発売予定
 木寺祥友、20年で５冊目
 ６冊目、ダイヤモンド社
 「夢をかなえるスマートフォン」
 「もしドラ」→「夢スマ」
 バックエンドもJava
 プライベートクラウド
 スケーラビリティに強いJava
 オープンガバメントクラウドの
顧問
 政府のIT


iPhoneとAndroidの開発コンセプトの違い

 iPhoneは電話のできるiPod
 Androidはクラウドのフロントエンド
 インターネットサービスをモバイルにも･･･
 インターネットカンパニーとハードウェアカンパニーの違い
 Apple、サービスはただ同然でハードでもうける
 最近はAppストアでの有料アプリの売上(30%)を重視
 コンテンツプロバイダー
 Googleはひたすら検索の機会を増したい
 最近は無料アプリに広告
 広告業者
 Windows Phone7 ディスクトップPCの遺産を継承する


アプリ制作の今後

 iPhoneアプリからAndroidアプリへ
 複数機種への対応が迫られる
 フロントとバックの振り分けが必要
 アプリからWebアプリへ
 本命はHTML5
 アプリライクなWebサイトが登場
 フィナンシャルタイムスはWebアプリへ変更
 フェイスブックもWebサイトはHTML5対応へ
 通知、ウィジェットなどはアプリ開発
 iアプリから携帯サイトへ
 １０年前の日本の現状
 歴史は二度繰り返す
 組み込みアプリはそのままAndroidで開発
 OSとして使うような、HTML5でできないアプリもある


フェイスブックのHTML5画面(10月からHTML5に変更）


HTML5登場

 スマートフォンはiPhoneもAndroidもHTML5対応
 iPhone
 Android
 Windows Phone7は時期IE9モバイルで対応予定
 究極のクロスプラットフォーム
 HTML5はWindowsはIE9から対応
 オフラインストレージが未実装
 JavaScriptのマルチスレッド機能を提供するWeb
Workersが未実装
 CSS3のいくつかがIE 9製品候補版では未実装
 サン・マイクロシステムズが開発したHotJavaの再来
 アプリの買い切りからWebアプリの月額課金へ
 月額課金への足がかり
 コンテンツプロバイダーがiモードで成功できたのは月額課金


HTML5の主な機能

 接続性（Web Sockets、Server-Sent Eventsなど）
 CSS3およびスタイリング（CSS3、Web Open Fonts
Formatなど）
 デバイスへのアクセス（位置情報の取得など）
 3Dおよび画面効果（WebGL、CSSの3D機能など）
 マルチメディア（Audio/Videoタグなど）
 性能向上や機能統合（Web Workers、XHR2など）
 セマンティクス（Microdataなど）
 オフライン＆ストレージ（App Cache、ローカルストレー
ジ、IndexedDBなど）


接続性

 接続性
 リアルタイムWeb
 チャット画面など
 Web Sockets
 （現時点のスマートフォンでは対応していない）
 Server-Sent Events
 iPhone、Android対応


CSS3およびスタイリング

 CSS3およびスタイリング
 CSS3の機能（画像、文字など）
 シャドウ（影）、半透明、回転、アニメーション、角丸
 グラデーション、リフレクション（湖面に映る影）
 マルチカラムレイアウト
 Web Open Font Format
 Firefox 3.6以降でサポートが決まっていますが、現時点では
Safari、Opera、Google Chromeなどのサポートは未定
 SVG
 （Scalable Vector Graphics：可変ベクトル画像表示）
 iPhone、iPadでは対応
 Androidでは3.0から対応


デバイスへのアクセス

 デバイスへのアクセス
 位置情報の取得
 Map
 マウスイベント
 マウスの座標
 カメラ
 カメラの起動


3Dおよび画面効果

 3Dおよび画面効果
 WebGL
 ブラウザで3Dグラフィクス表示を可能にする標準仕様。言語的に
は JavaScript で挙動を記述する。
 CSSの3D機能
 JavaScriptを使わないで3Dレンダリングが可能


マルチメディア

 Flashに頼らなくても高品質な動画が再生可能
 マルチメディア
 Audioタグ
 Firefox 3.6：WAVE
 Opera 10.5： WAVE
 Safari 4：MP3, WAVE,AAC
 Chrome 4：MP3,AAC
 iPhone、iPad、Androidは MP3, WAVE,AAC全てに対応
 Videoタグ
 iPhone、iPad、Android共にMPEG-4、H.264に対応


性能向上や機能統合

 性能向上や機能統合
 Web Workers
 JavaScriptにおいてマルチスレッド・プログラミングを可能に
するもの
 JavaScriptをバックグラウンドで走らせる仕組み
 iPhone、iPad、Android未対応
 XHR2
 XML HTTP Request Level2では、異なるドメインに接続し
通信する事ができる
 クロスドキュメントメッセージング
 複数のウィンドウ間でメッセージを送受信する仕組み


セマンティクス

 セマンティクス
 つながりのあるWeb
 Microdata
 aside、コンテンツの重み付け
 section、セクション毎にまとめる
 hgroup、タイトル、サブタイトルがあったりなかったりを解消


オフライン＆ストレージ

 オフライン＆ストレージ
 App Cache
 オフラインでのWebアプリケーションが可能
 ローカルストレージ
 Webブラウザ側のJavaScriptでSQLデータベースを利用でき
る。これによって、ネットワーク環境がなくても単独で動作する
オフラインWebアプリケーションの作成が可能。Webアプリを
また一歩デスクトップアプリに近づける。
 IndexedDB
 クライアントサイドのデータ保持にSQLを採用しないで、もっと
シンプルで高速なモデル。こうした要望に答えるAPIが
IndexedDB
 ドラック＆ドロップ（スマートフォンでは必要ない）

 モバイルサービスの市場
2008 2009 2010 2011 2012 2013 2014
モバイルソリューション 3,122億円 3,144億円 3,746億円 4,396億円 5,330億円 6,566億円 7,207億円
モバイルコンテンツ 4,144億円 4,302億円 4,432億円 4,531億円 4,568億円 4,586億円 4,606億円
モバイル広告 877億円 1,112億円 1,346億円 1,587億円 1,814億円 2,022億円 2,231億円
モバイル決済 366億円 443億円 539億円 660億円 786億円 905億円 1,008億円

 モバイルコンテンツ市場の伸び悩みと
モバイルソリューション市場の拡大
8,000億円
7,200億円
6,400億円
5,600億円
モバイルソリューション 4,800億円
モバイルコンテンツ 4,000億円
モバイル広告
モバイル決済 3,200億円
2,400億円
1,600億円
800億円
0億円
2008 2009 2010 2011 2012 2013 2014
野村総合研究所調べ


感想、お問い合わせ

kidera@ecreal.co.jp


HTML5(JAGAT)

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a HTML5(JAGAT)

Semelhante a HTML5(JAGAT) (20)

Mais de 一般社団法人メディア事業開発会議

Mais de 一般社団法人メディア事業開発会議 (20)

Último

Último (12)

HTML5(JAGAT)