zyyx inc. data for interop

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

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

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

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

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

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

2,790万台

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

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

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

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

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

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

– Java（Android）

– .NET(Windows)

copyright(C) ZYYX Inc. All rights reserved.

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

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

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

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

れる機能を実装できる

copyright(C) ZYYX Inc. All rights reserved.

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

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

メリット

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

デメリット

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

HTML5とは？

14

HTML５

SVG Math MLWeb GL

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

狭義でのHTML5

JavaScript API

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

CSS3

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

広義でのHTML5

copyright(C) ZYYX Inc. All rights reserved.

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

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

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

copyright(C) ZYYX Inc. All rights reserved.

メリット

デメリット

HTML5アプリの実際

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

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

copyright(C) ZYYX Inc. All rights reserved.

HTML5の普及

Webの表現技術

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

WebOSへの潮流

copyright(C) ZYYX Inc. All rights reserved.

DTPとePub

放送と通信

新聞とWeb

SmartTV

電子新聞電子書籍

PCと通信タブレット

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

copyright(C) ZYYX Inc. All rights reserved.

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

新聞業界

TV放送映画業界 音楽業界

IT会社

デザイン制作会社

数値

印刷出版

TV番組

音楽映画

プロダクション

YouTube

映像制作会社

業界ベンダー

データメディア新聞

雑誌書籍

ビッグデータ

ドキュメント動画

音声

テキスト

ラジオ

ラジオ放送

IT業界

SNS BLOGWEB

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

必要なスキル

copyright(C) ZYYX Inc. All rights reserved.

コラボレーション

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

開発規模とコスト

copyright(C) ZYYX Inc. All rights reserved.

ひとりで作る

せいぜい数人

数万円（自費）

せいぜい数百万

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

人材

copyright(C) ZYYX Inc. All rights reserved.

でも、スピード命

ともかく人材不足

業界の方向性

copyright(C) ZYYX Inc. All rights reserved.

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

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

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

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

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

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

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

ダイナミックアプリとは

copyright(C) ZYYX Inc. All rights reserved.

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

いいとこ取り

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

いいとこ取り

copyright(C) ZYYX Inc. All rights reserved.

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

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

メリット

ネイティブ

HTML5

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

copyright(C) ZYYX Inc. All rights reserved.

OS: iOS,Android

Base Native Application

HTML5 Application

javascript library

HTML5 Application

HTML5 Application

HTML5 Application

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

copyright(C) ZYYX Inc. All rights reserved.

QRリーダー

カメラ サウンド 動画

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

課金 通知 広告

電話帳

１１のJavascriptAPI

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

copyright(C) ZYYX Inc. All rights reserved.

ダイナミックアプリとは

������ ����!�'-#��+.���������+.���(�%�*�+.�������� �������<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'���

copyright(C) ZYYX Inc. All rights reserved.

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

copyright(C) ZYYX Inc. All rights reserved.

OS: iOS,Android

Base Native Application

HTML5 Application

javascript library

HTML5 Application

HTML5 Application

HTML5 Application

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

copyright(C) ZYYX Inc. All rights reserved.

OS: iOS,Android

Base Native Application

HTML5 Application

javascript library

javascript library

Base Native Application

<dynamicapp.js>

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

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

ライセンス

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

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

商用ライセンス

copyright(C) ZYYX Inc. All rights reserved.

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

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

copyright(C) ZYYX Inc. All rights reserved.

提供時期

2012年　8月 Dynamic app library

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

WindowsPhone版対応予定

copyright(C) ZYYX Inc. All rights reserved.