html5 クロスプラットフォームアプリ開発の現実解

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

04/12/2023 <2>

COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.

自己紹介

田中正裕（たなかまさひろ）[email protected]

大学 2 年生の時にアシアル株式会社を設立、そのまま代表取締役社長として今に至る。

もともと小学生の時にパソコンを触ったことがきっかけで、生きている時間の大半をプログラミングして過ごす。東京大学工学部を卒業、アシアルの事業に忙しくなったため同大学院を中退。

代表取締役社長として対外的な活動を行いつつ、各プロジェクトではコーディングやマネジメントなども担当。

04/12/2023


アシアル株式会社紹介

<3>

アシアル株式会社は、これまで培ってきたサーバーサイド技術をもとに、

HTML5 や JavaScript といったクライアント技術を高い次元で組み合わ

せ、優れたユーザーエクスペリエンスを持つアプリケーションを提案し

ます。

アシアルブログ

不定期で弊社エンジニアやデザイナーが興味のある技術テーマを配信します。

PHP プロ！

アシアルの創業事業である「 PHPプログラマーズマガジン」を引き継ぎ、 PHP プログラマーのためのコミュニティサイトとして運営しています。

企業サイト

弊社が開発・販売している各種製品やサービスへのリンク、スクールの情報などが掲載されています。

アシアル提供の Web サービス

04/12/2023


JavaScript

アシアルの技術ドメイン

<4>

UI/UX

インフラ

CSS3

Linux

PHP

MySQL

Symfony

Objective-CAndroid Java

HTML5

Node.js

クラウドIaaS

UI 設計

PhoneGapミドルレイヤー

サーバーレイヤー

インフラハードウェア

クライアントレイヤー

ユーザーエクスペリエンス

UI 設計からシステム構築まで、最先端の技術で幅広い経験がござい

ます

04/12/2023


JavaScript

アシアルの技術ドメイン

<5>

UI/UX

インフラ

CSS3

Linux

PHP

MySQL

Symfony

Objective-CAndroid Java

HTML5

Node.js

クラウドIaaS

UI 設計

PhoneGapミドルレイヤー

サーバーレイヤー

インフラハードウェア

クライアントレイヤー

ユーザーエクスペリエンス

本日のプレゼン範囲

UI 設計からシステム構築まで、最先端の技術で幅広い経験がござい

ます

04/12/2023


HTML5 で変わるアプリ体験

<6>

1. HTML5 とは？

HTML4 、 XHTML に続くバージョンアップ

タグの追加・整理だけでなく、 JavaScript API も

新たに用意

CSS や SVG 、 WebSocket などの周辺機能も広義の HTML5 に

含まれる

2. HTML5 のインパクト

ブラウザーが HTML5 に対応することで、リッチな表現力が

可能に

ユーザーインターフェースを刷新する能力を持つ

04/12/2023


モバイル分野で先行する 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


HTML5 とネイティブ

<8>

HTML5 からネイティブに移行した Facebook ネイティブから HTML5 に移行した Financial Times

“ 企業としての最大の失敗はネイティブアプリではなくHTML5 に賭けすぎたことです。時期尚早でした。”と話した。“ iOS アプリにしたら、利用者のフィードの消費が 2倍になりました。”

「 HTML5 は FT のビジネスを殺していない。ネイティブ環境にとどまるよりもよい結果となった」「アプリケーションのメンテナンスに要する作業が大幅に削減され、新機能の開発と実装がシンプルで簡単になった」

04/12/2023


どう選択するのか？

<9>

OS や端末の性能を最大限に発揮するためにはネイティブ形式が望ましい

クロスプラットフォーム性や開発体制の確保では HTML5形式が優位

開発の難易度

OS独自機能の活用

端末性能の発揮メンテナンス性

クロスプラットフォーム

HTML5 アプリ（ Web ）ネイティブアプリ

04/12/2023


HTML5 の Web アプリでは作れない機能の例

<10>

1. デバイスの特殊な機能を用いたい場合

Bluetooth通信

デバイス内のファイル読み書き

カメラ撮影

2. OS の機能を用いたい場合

プッシュ通信

GameCenter や Passbook などへの対応

ホーム画面のウィジェット

3. ハードウェア能力を最大限用いたい場合

高度なアニメーション（ 3D 、 OpenGL等）

ポインターによる高速演算など

｢フラグシップアプリはネイティブアプリが使われる可能性が高い｣

04/12/2023


HTML5 の Web アプリでは作れない機能の例

<11>

1. デバイスの特殊な機能を用いたい場合

Bluetooth通信

デバイス内のファイル読み書き

カメラ撮影

2. OS の機能を用いたい場合

プッシュ通信

GameCenter や Passbook などへの対応

ホーム画面のウィジェット

3. ハードウェア能力を最大限用いたい場合

高度なアニメーション（ 3D 、 OpenGL等）

ポインターによる高速演算など無理いける

04/12/2023


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

<12>

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

開発言語 HTML5 と JavaScript Objective-C や Java

機能Web ブラウザーが備える

機能のみ利用可能端末や OS が持つすべての

機能を利用可能

開発環境通常の Web 開発環境

エディタ、 Dreamweaver等Xcode や Eclipse といった OS

ごとの開発環境

クロスプラットフォーム○

同じ JavaScript コードを流用可

×開発言語自体が異なる

実行速度△

Web ブラウザーが実行エンジン

◎OS が直接実行する

オフライン対応×

キャッシュを用いて一部オフライン対応も可能

◎端末内にプログラムが配置

アプリの配布方法Web サイトにアクセス

マーケットへの登録は不可マーケットの登録が原則

メンテナンス方法サーバーから配信するため常に最新状態をキープ可能

アップデートのたびにマーケット登録。更新はユーザー次第

04/12/2023


HTML5 でネイティブ形式のアプリを実現するハイブリッドアプリ

<13>

1. HTML5 アプリの開発技術でネイティブ形式のアプリを実現する手法

2. OS の独自機能や端末性能などを HTML5 アプリから補うことが可能

開発の難易度

OS独自機能の活用

端末性能の発揮メンテナンス性

クロスプラットフォーム

HTML5 アプリ（ Web ）ネイティブアプリハイブリッドアプリ

もう一つの選択肢：ハイブリッドアプリ

04/12/2023


ハイブリッドアプリの例

<14>

クックパッド Wikipedia Linked-In

多くの iOS/Android アプリがハイブリッドアプリとしてリリース

ハイブリッドアプリ開発のためのオープンソース製品も充実してきた

04/12/2023


ネイティブコード

ハイブリッドアプリの仕組み

<15>

HTML5/JavaScript/CSS3

ハイブリッドアプリのパッケージ内

サーバーとの通信はAjax の技術を応用

GPS

カメラ

連絡帳など

Web アプリではアクセスできない各種ネイティブAPI を実行できる

04/12/2023


ハイブリッドアプリの特徴

<16>

HTML5 アプリハイブリッドアプリネイティブアプリ

開発言語 HTML5 と JavaScript Objective-C や Java

機能 Web ブラウザーが備える機能のみ利用可能

JavaScript からネイティブの機能を

呼び出せる

端末や OS が持つすべての機能を利用可能

開発環境通常の Web 開発環境

エディタ、 Dreamweaver等

Xcode や Eclipse といった OS ごとの開発環境（ Monaca でブラウザだけで環境構築も可能）

クロスプラットフォーム ○同じ JavaScript コードを流用可

×開発言語自体が異なる

実行速度△

Web ブラウザーが実行エンジン

○ソースコードを端末上に保

存することが可能

◎OS が直接実行する

オフライン対応×

キャッシュを用いて一部オフライン対応も可能

◎端末内にプログラムが配置

アプリの配布方法 Web サイトにアクセスマーケットへの登録は不可

マーケットの登録が原則

メンテナンス方法サーバーから配信するため常に最新状態をキープ可能

ネイティブ部分はマーケット経由の更新。 HTML5 部分は任意のタイミングで更

新可能

アップデートのたびにマーケット登録。更新はユー

ザー次第

04/12/2023


アシアルの HTML5 に対する取り組み

<17>

PhoneGap の OSS貢献やコミュニティサイト運営

HTML5 アプリ開発／システム構築（ Web アプリ・ハイブリッドアプリ）

ハイブリッドアプリ開発環境 : Monaca

HTML5研修・セミナー

04/12/2023

ご静聴ありがとうございました

<18>

html5 クロスプラットフォームアプリ開発の現実解

Documents