html5 クロスプラットフォームアプリ開発の現実解
TRANSCRIPT
HTML5 クロスプラットフォームアプリ開発の現実解アシアル株式会社 田中正裕
04/12/2023 <2>
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
自己紹介
田中正裕 (たなかまさひろ)[email protected]
大学 2 年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。
もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす。東京大学工学部を卒業、アシアルの事業に忙しくなったため同大学院を中退。
代表取締役社長として対外的な活動を行いつつ、各プロジェクトではコーディングやマネジメントなども担当。
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
アシアル株式会社 紹介
<3>
アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、
HTML5 や JavaScript といったクライアント技術を高い次元で組み合わ
せ、優れたユーザーエクスペリエンスを持つアプリケーションを提案し
ます。
アシアルブログ
不定期で弊社エンジニアやデザイナーが興味のある技術テーマを配信します。
PHP プロ!
アシアルの創業事業である「 PHPプログラマーズマガジン」を引き継ぎ、 PHP プログラマーのためのコミュニティサイトとして運営しています。
企業サイト
弊社が開発・販売している各種製品やサービスへのリンク、スクールの情報などが掲載されています。
アシアル提供の Web サービス
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
JavaScript
アシアルの技術ドメイン
<4>
UI/UX
インフラ
CSS3
Linux
PHP
MySQL
Symfony
Objective-CAndroid Java
HTML5
Node.js
クラウドIaaS
UI 設計
PhoneGapミドルレイヤー
サーバーレイヤー
インフラハードウェア
クライアントレイヤー
ユーザーエクスペリエンス
UI 設計からシステム構築まで、最先端の技術で幅広い経験がござい
ます
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
JavaScript
アシアルの技術ドメイン
<5>
UI/UX
インフラ
CSS3
Linux
PHP
MySQL
Symfony
Objective-CAndroid Java
HTML5
Node.js
クラウドIaaS
UI 設計
PhoneGapミドルレイヤー
サーバーレイヤー
インフラハードウェア
クライアントレイヤー
ユーザーエクスペリエンス
本日のプレゼン範囲
UI 設計からシステム構築まで、最先端の技術で幅広い経験がござい
ます
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 で変わるアプリ体験
<6>
1. HTML5 とは?
HTML4 、 XHTML に続くバージョンアップ
タグの追加・整理だけでなく、 JavaScript API も
新たに用意
CSS や SVG 、 WebSocket などの周辺機能も広義の HTML5 に
含まれる
2. HTML5 のインパクト
ブラウザーが HTML5 に対応することで、リッチな表現力が
可能に
ユーザーインターフェースを刷新する能力を持つ
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
モバイル分野で先行する HTML5
<7>
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 月
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 とネイティブ
<8>
HTML5 からネイティブに移行した Facebook ネイティブから HTML5 に移行した Financial Times
“ 企業としての最大の失敗はネイティブアプリではなくHTML5 に賭けすぎたことです。時期尚早でした。”と話した。“ iOS アプリにしたら、利用者のフィードの消費が 2倍になりました。”
「 HTML5 は FT のビジネスを殺していない。ネイティブ環境にとどまるよりもよい結果となった」「アプリケーションのメンテナンスに要する作業が大幅に削減され、新機能の開発と実装がシンプルで簡単になった」
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
どう選択するのか?
<9>
OS や端末の性能を最大限に発揮するためにはネイティブ形式が望ましい
クロスプラットフォーム性や開発体制の確保では HTML5形式が優位
開発の難易度
OS独自機能の活用
端末性能の発揮メンテナンス性
クロスプラットフォーム
HTML5 アプリ( Web ) ネイティブアプリ
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 の Web アプリでは作れない機能の例
<10>
1. デバイスの特殊な機能を用いたい場合
Bluetooth通信
デバイス内のファイル読み書き
カメラ撮影
2. OS の機能を用いたい場合
プッシュ通信
GameCenter や Passbook などへの対応
ホーム画面のウィジェット
3. ハードウェア能力を最大限用いたい場合
高度なアニメーション( 3D 、 OpenGL等)
ポインターによる高速演算など
「フラグシップ アプリはネイティブアプリが使われる可能性が高い」
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 の Web アプリでは作れない機能の例
<11>
1. デバイスの特殊な機能を用いたい場合
Bluetooth通信
デバイス内のファイル読み書き
カメラ撮影
2. OS の機能を用いたい場合
プッシュ通信
GameCenter や Passbook などへの対応
ホーム画面のウィジェット
3. ハードウェア能力を最大限用いたい場合
高度なアニメーション( 3D 、 OpenGL等)
ポインターによる高速演算など無理 いける
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 アプリとネイティブアプリの違い
<12>
HTML5 アプリ ネイティブアプリ
開発言語 HTML5 と JavaScript Objective-C や Java
機能Web ブラウザーが備える
機能のみ利用可能端末や OS が持つすべての
機能を利用可能
開発環境通常の Web 開発環境
エディタ、 Dreamweaver等Xcode や Eclipse といった OS
ごとの開発環境
クロスプラットフォーム○
同じ JavaScript コードを流用可
×開発言語自体が異なる
実行速度△
Web ブラウザーが実行エンジン
◎OS が直接実行する
オフライン対応×
キャッシュを用いて一部オフライン対応も可能
◎端末内にプログラムが配置
アプリの配布方法Web サイトにアクセス
マーケットへの登録は不可マーケットの登録が原則
メンテナンス方法サーバーから配信するため常に最新状態をキープ可能
アップデートのたびにマーケット登録。更新はユーザー次第
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
HTML5 でネイティブ形式のアプリを実現するハイブリッドアプリ
<13>
1. HTML5 アプリの開発技術でネイティブ形式のアプリを実現する手法
2. OS の独自機能や端末性能などを HTML5 アプリから補うことが可能
開発の難易度
OS独自機能の活用
端末性能の発揮メンテナンス性
クロスプラットフォーム
HTML5 アプリ( Web ) ネイティブアプリ ハイブリッドアプリ
もう一つの選択肢:ハイブリッドアプリ
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
ハイブリッドアプリの例
<14>
クックパッド Wikipedia Linked-In
多くの iOS/Android アプリがハイブリッドアプリとしてリリース
ハイブリッドアプリ開発のためのオープンソース製品も充実してきた
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
ネイティブコード
ハイブリッドアプリの仕組み
<15>
HTML5/JavaScript/CSS3
ハイブリッドアプリのパッケージ内
サーバーとの通信はAjax の技術を応用
GPS
カメラ
連絡帳など
Web アプリではアクセスできない各種ネイティブAPI を実行できる
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
ハイブリッドアプリの特徴
<16>
HTML5 アプリ ハイブリッドアプリ ネイティブアプリ
開発言語 HTML5 と JavaScript Objective-C や Java
機能 Web ブラウザーが備える機能のみ利用可能
JavaScript からネイティブの機能を
呼び出せる
端末や OS が持つすべての機能を利用可能
開発環境通常の Web 開発環境
エディタ、 Dreamweaver等
Xcode や Eclipse といった OS ごとの開発環境( Monaca でブラウザだけで環境構築も可能)
クロスプラットフォーム ○同じ JavaScript コードを流用可
×開発言語自体が異なる
実行速度△
Web ブラウザーが実行エンジン
○ソースコードを端末上に保
存することが可能
◎OS が直接実行する
オフライン対応×
キャッシュを用いて一部オフライン対応も可能
◎端末内にプログラムが配置
アプリの配布方法 Web サイトにアクセスマーケットへの登録は不可
マーケットの登録が原則
メンテナンス方法サーバーから配信するため常に最新状態をキープ可能
ネイティブ部分はマーケット経由の更新。 HTML5 部分は任意のタイミングで更
新可能
アップデートのたびにマーケット登録。更新はユー
ザー次第
04/12/2023
COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.
アシアルの HTML5 に対する取り組み
<17>
PhoneGap の OSS貢献やコミュニティサイト運営
HTML5 アプリ開発/システム構築( Web アプリ・ハイブリッドアプリ)
ハイブリッドアプリ開発環境 : Monaca
HTML5研修・セミナー
04/12/2023
ご静聴ありがとうございました
<18>