1. HTML5クロスプラットフォームアプリ開発の現実解
アシアル株式会社 田中正裕

2. 自己紹介
田中正裕 （たなかまさひろ）
masahiro@asial.co.jp
大学2年生の時にアシアル株式会社を設立、そのまま
代表取締役社長として今に至る。
もともと小学生の時にパソコンを触ったことがきっか
けで、生きている時間の大半をプログラミングして過
ごす。東京大学工学部を卒業、アシアルの事業に忙し
くなったため同大学院を中退。
代表取締役社長として対外的な活動を行いつつ、各プ
ロジェクトではコーディングやマネジメントなども担
当。
2013/1/7 2

3. アシアル株式会社 紹介
アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、
HTML5やJavaScriptといったクライアント技術を高い次元で組み合わせ、
優れたユーザーエクスペリエンスを持つアプリケーションを提案します。
アシアル提供のWebサービス
アシアルブログ PHPプロ！ 企業サイト
不定期で弊社エンジニアやデザイ アシアルの創業事業である「PHPプ 弊社が開発・販売している各種製品
ナーが興味のある技術テーマを配信 ログラマーズマガジン」を引き継ぎ、 やサービスへのリンク、スクールの
します。 PHPプログラマーのためのコミュニ 情報などが掲載されています。
ティサイトとして運営しています。
2013/1/7 <3>

4. アシアルの技術ドメイン
UI/UX
ユーザー
UI設計
エクスペリエンス
HTML5 CSS3
クライアント Objective-C
レイヤー Android Java
JavaScript
ミドルレイヤー Symfony PhoneGap
サーバーレイヤー PHP Node.js
UI設計からシ
ステム構築ま
MySQL で、最先端の
インフラ 技術で幅広い
ハードウェア 経験がござい
Linux
クラウド ます
IaaS
インフラ
2013/1/7 <4>

5. アシアルの技術ドメイン
UI/UX
ユーザー
UI設計
エクスペリエンス
HTML5 CSS3
クライアント Objective-C
本日のプレゼン範囲 Android Java
レイヤー
JavaScript
ミドルレイヤー Symfony PhoneGap
サーバーレイヤー PHP Node.js
UI設計からシ
ステム構築ま
MySQL で、最先端の
インフラ 技術で幅広い
ハードウェア 経験がござい
Linux
クラウド ます
IaaS
インフラ
2013/1/7 <5>

6. HTML5で変わるアプリ体験
1. HTML5とは？
 HTML4、XHTMLに続くバージョンアップ
 タグの追加・整理だけでなく、JavaScript APIも
新たに用意
 CSSやSVG、WebSocketなどの周辺機能も広義のHTML5に
含まれる
2. HTML5のインパクト
 ブラウザーがHTML5に対応することで、リッチな表現力が可能に
 ユーザーインターフェースを刷新する能力を持つ
2013/1/7 <6>

7. モバイル分野で先行するHTML5
1. スマートデバイス分野ではHTML5がすでにスタンダード
 iOS/AndroidブラウザーのWebKitエンジンは早くからサポート
2. 一方、PC向けWebサイトのHTML5対応はこれから
 Internet Explorer 10で本格的にサポート
 Firefox、Chrome、Safariは
早い段階でHTML5対応
CSS3だけで作成した「ドラえもん」 日本におけるブラウザーシェア
shopdd.blog51.fc2.com/blog-entry-932.html 2012年11月
2013/1/7 <7>

8. HTML5とネイティブ
“企業としての最大の失敗はネイ
ティブアプリではなくHTML5に
賭けすぎたことです。時期尚早
でした。”と話した。“iOSアプリ
にしたら、利用者のフィードの
消費が2倍になりました。”
「HTML5はFTのビジネスを殺し
ていない。ネイティブ環境にと
どまるよりもよい結果となっ
た」「アプリケーションのメン
テナンスに要する作業が大幅に
削減され、新機能の開発と実装
がシンプルで簡単になった」
HTML5からネイティブに移行したFacebook ネイティブからHTML5に移行したFinancial Times
2013/1/7 <8>

9. どう選択するのか？
開発の難易度
クロスプラットフォーム OS独自機能の活用
メンテナンス性 端末性能の発揮
HTML5アプリ（Web） ネイティブアプリ
 OSや端末の性能を最大限に発揮するためにはネイティブ形式が望ましい
 クロスプラットフォーム性や開発体制の確保ではHTML5形式が優位
2013/1/7 <9>

10. HTML5のWebアプリでは作れない機能の例
1. デバイスの特殊な機能を用いたい場合
 Bluetooth通信
 デバイス内のファイル読み書き
 カメラ撮影
2. OSの機能を用いたい場合
 プッシュ通信
 GameCenterやPassbookなどへの対応
 ホーム画面のウィジェット
3. ハードウェア能力を最大限用いたい場合
 高度なアニメーション（3D、OpenGL等）
 ポインターによる高速演算など
｢フラグシップ｣アプリはネイティブアプリが使われる可能性が高い
2013/1/7 <10>

11. HTML5のWebアプリでは作れない機能の例
1. デバイスの特殊な機能を用いたい場合
 Bluetooth通信
 デバイス内のファイル読み書き
 カメラ撮影
2. OSの機能を用いたい場合
 プッシュ通信
 GameCenterやPassbookなどへの対応
 ホーム画面のウィジェット
3. ハードウェア能力を最大限用いたい場合
 高度なアニメーション（3D、OpenGL等）
無理
 ポインターによる高速演算など
いける
2013/1/7 <11>

12. HTML5アプリとネイティブアプリの違い
HTML5アプリ ネイティブアプリ
開発言語 HTML5とJavaScript Objective-CやJava
Webブラウザーが備える 端末やOSが持つすべての
機能
機能のみ利用可能 機能を利用可能
通常のWeb開発環境 XcodeやEclipseといったOSごと
開発環境
エディタ、Dreamweaver等 の開発環境
○ ×
クロスプラットフォーム
同じJavaScriptコードを流用可 開発言語自体が異なる
△ ◎
実行速度
Webブラウザーが実行エンジン OSが直接実行する
×
◎
オフライン対応 キャッシュを用いて一部オフラ
端末内にプログラムが配置
イン対応も可能
Webサイトにアクセス
アプリの配布方法 マーケットの登録が原則
マーケットへの登録は不可
サーバーから配信するため アップデートのたびにマーケッ
メンテナンス方法
常に最新状態をキープ可能 ト登録。更新はユーザー次第
2013/1/7 <12>

13. HTML5でネイティブ形式のアプリを実現するハイブリッドアプリ
もう一つの選択肢：ハイブリッドアプリ
開発の難易度
クロスプラットフォーム OS独自機能の活用
メンテナンス性 端末性能の発揮
HTML5アプリ（Web） ネイティブアプリ ハイブリッドアプリ
1. HTML5アプリの開発技術でネイティブ形式のアプリを実現する手
法
2. OSの独自機能や端末性能などをHTML5アプリから補うことが可能
2013/1/7 <13>

14. ハイブリッドアプリの例
多くのiOS/Androidアプリがハイブリッドアプリとしてリリース
クックパッド Wikipedia Linked-In
ハイブリッドアプリ開発のための
オープンソース製品も充実してきた
2013/1/7 <14>

15. ハイブリッドアプリの仕組み
GPS HTML5/JavaScript/CSS3
ネイティブコード
ハイブリッドアプリのパッケージ内
サーバーとの通信は
カメラ Webアプリではアクセスで Ajaxの技術を応用
きない各種ネイティブAPI
を実行できる
連絡帳など
2013/1/7 <15>

16. ハイブリッドアプリの特徴
HTML5アプリ ハイブリッドアプリ ネイティブアプリ
開発言語 HTML5とJavaScript Objective-CやJava
JavaScriptから
Webブラウザーが備える 端末やOSが持つすべての
機能 ネイティブの機能を
機能のみ利用可能 機能を利用可能
呼び出せる
通常のWeb開発環境 XcodeやEclipseといったOSごとの開発環境
開発環境
エディタ、Dreamweaver等 （Monacaでブラウザだけで環境構築も可能）
○ ×
クロスプラットフォーム
同じJavaScriptコードを流用可 開発言語自体が異なる
△ ○
◎
実行速度 Webブラウザーが実行エン ソースコードを端末上に保
OSが直接実行する
ジン 存することが可能
×
◎
オフライン対応 キャッシュを用いて一部オ
端末内にプログラムが配置
フライン対応も可能
Webサイトにアクセス
アプリの配布方法 マーケットの登録が原則
マーケットへの登録は不可
ネイティブ部分はマーケッ
アップデートのたびにマー
サーバーから配信するため ト経由の更新。HTML5部分
メンテナンス方法 ケット登録。更新はユー
常に最新状態をキープ可能 は任意のタイミングで更新
ザー次第
可能
2013/1/7 <16>

17. アシアルのHTML5に対する取り組み
HTML5研修・セミナー
ハイブリッドアプリ開発
環境: Monaca
PhoneGapのOSS貢献
やコミュニティサイト運営
HTML5アプリ開発／システム構築
（Webアプリ・ハイブリッドアプリ）
2013/1/7 <17>

18. ご静聴ありがとうございました
2013/1/7 <18>