zyyx inc. data for interop

HTML5アプリとネイティブアプリの融合

株式会社ジークス2012/06/13

copyright(C) ZYYX Inc. All rights reserved.

モバイルマーケットの現状と可能性Chapter.1


ハードウェア販売推移からみたモバイルマーケットの拡大

(出典：MM総研調査 2012.3）copyright(C) ZYYX Inc. All rights reserved.

スマートフォンの出荷台数推移

2,790万台

ネイティブアプリケーションマーケットの状況と予測


0

100

200

300

400

500

82.2139.9

205.8279.3

362.3

441.7

2011 2012 2013 2014 2015 2016

億円

矢野経済研究所推計（2012.3）

日本国内のスマートフォンアプリ市場規模予測

HTML5アプリ　VS　ネイティブアプリChapter.2


モバイルコンテンツ構築をおこなうための技術

• Webサイトの場合– HTML、CSS、JS、Flash

• HTML5アプリ（Webアプリ）の場合– HTML5（XHTML/JS/CSS）

• ネイティブアプリの場合– Objective C（iOS）

– Java（Android）

– .NET(Windows)


ネイティブで開発する理由

• 幅広いハードウェアーリソースへのアクセス

• OSがもつAPIなどへのアクセス• 他のアプリケーションとの連携•通知が可能

•パフォーマンスが要求される機能、細かい動きが必要とさ

れる機能を実装できる


ネイティブアプリのメリット・デメリット

• アプリマーケットの機能を使える• カメラやICなどの外部リソースが使える• アイコンが自動的に登録される• プッシュ型の情報配信が出来る

メリット

• アプリマーケットへの申請が必要• iOS/Android/WindowsなどOS毎の開発費用/期間が必要• 機種ごとにテストをする必要がある

デメリット


HTML5アプリとは?• HTML5で構築するアプリケーション• アプリケーションはWebブラウザ上で動作• URLにて、アクセス、ダウンロード。


HTML5とは？

14

HTML５

SVG Math MLWeb GL

・セマンティックなタグ・マルチメディアに対応したタグ・Form要素の強化など

狭義でのHTML5

JavaScript API

・ローカルへのデータ保存・マルチスレッド（バックグランド処理）・ローカルファイルの読み書き・双方向通信・ドラッグ＆ドロップなど

CSS3

・環境に依存しないフォント　→ WEBフォント・アニメーション処理・段組みレイアウト・角丸表示やテキストの装飾・文字の縦書きなど

広義でのHTML5


HTML５アプリのメリット/デメリット

• クロスデバイス対応が容易• コンテンツ、ロジック、デザインの分離が可能• アプリマーケットへの申請等が不要• アプリの入れ替えが容易

• 構築にはHTML5の知識が必要• 各々のスマートフォンへの対応ノウハウが必要• ハードウェアリソースへのアクセスの制限• コンテンツ課金に独自のシステムが必要


メリット

デメリット

HTML5アプリの実際

・解像度やハードウェアリソースの違いにより、動作が変わってくる・W3Cの勧告通りの実装がされていない　（特定のハードでのみ動かない関数もあり）・画面のトランジッションなどが、機種によって動作が違うため、CSSの機能が場合によっては使えない場合もある。特にandroidの場合。・マルチタッチの動作が機種によって違う。（最新のUIの構築が厳しい場合がある）などなど。。。。

デバイス対応がたいへんワンソースって言うけど


HTML5の普及

Webの表現技術

アプリケーション開発技術

WebOSへの潮流


DTPとePub

放送と通信

新聞とWeb

SmartTV

電子新聞電子書籍

PCと通信タブレット

HTML5がデジタルコンバージェンスを加速する


HTML5がデジタルコンバージェンスを加速する

新聞業界

TV放送映画業界音楽業界

IT会社

デザイン制作会社

数値

印刷出版

TV番組

音楽映画

プロダクション

YouTube

映像制作会社

業界ベンダー

データメディア新聞

雑誌書籍

ビッグデータ

ドキュメント動画

音声

テキスト

ラジオ

ラジオ放送

IT業界

SNS BLOGWEB


スマホアプリ開発の現場Chapter.4


必要なスキル


コラボレーション

クリエイティブエンジニアリング

開発規模とコスト


ひとりで作る

せいぜい数人

数万円（自費）

せいぜい数百万

これまでのシステム開発規模ではないでも、お客様からのニーズは高い

人材


でも、スピード命

ともかく人材不足

業界の方向性


これまでの技術でそこそこ作れる早く作れる

エンジニアでなくても作れる

HTML、Javascriptが使えれば、ネイティブアプリが作れる！

HTML5アプリとネイティブアプリの融合Chapter.3


ネイティブアプリとHTML５アプリの融合


HTML5アプリネイティブアプリ

ダイナミックアプリジークスで命名（商標登録済み）

ダイナミックアプリとは


HTML5アプリとネイティブアプリの

いいとこ取り

ジークスならではのエッセンス！！

いいとこ取り


メリット• アプリマーケットの機能を使える• カメラやICなどの外部リソースが使える• アイコンが自動的に登録される• プッシュ型の情報配信が出来る

• クロスデバイス対応が容易• コンテンツ、ロジック、デザインの分離が可能• アプリの入れ替えが容易

メリット

ネイティブ

HTML5

ダイナミックアプリのアーキテクチャー


OS: iOS,Android

Base Native Application

HTML5 Application

javascript library

HTML5 Application

HTML5 Application

HTML5 Application

ダイナミックアプリライブラリー


QRリーダー

カメラサウンド動画

ファイルキャッシュ暗号化

課金通知広告

電話帳

１１のJavascriptAPI

ダイナミックアプリChapter.4


ダイナミックアプリとは

�� !�'-#��+.��+.��(�%�*�+.�� <N�DJ7V5LR4��1��4f3(.� �)$+bk&�UV=�<+NS?CG6<[h4ie,'2^YJT�OU�8+'�^Y�5@LC�D�PVBFV<.!!2:<D,<I�E4Wm.pq&0'��

01 ��,/"&)��

01�+.�,/"�1%1$�

�5LR\.r`/:VBVA4a*%,"+#�5LR/dHSEj&.\c/o]1go4X %,"+#0'��

��<N�DMV�>KT@Dn��CG6<.sl&-�5LR9�;QV4Z_&0'��


ダイナミックアプリの特徴


OS: iOS,Android


HTML5 Application

javascript library

HTML5 Application

HTML5 Application

HTML5 Application

ダイナミックアプリの提供形態


OS: iOS,Android


HTML5 Application

javascript library

javascript library


<dynamicapp.js>

Xcodeのテンプレート Eclipseのプラグイン

そのままビルドができる、ひな形で提供

ライセンス

オープンソース（GPL v3を予定）

デュアルライセンスを予定

商用ライセンス


外部ライブラリの組み込み

日本独自の様々なライブラリにぜひ取り組んでいきましょう！


提供時期

2012年　8月 Dynamic app library

Version 1.0を公開予定商用ライセンス提供開始

WindowsPhone版対応予定


zyyx inc. data for interop

Business