開発事例に学ぶHtml5アプリのポイント

開発事例に学ぶHTML5アプリのポイント

アシアル株式会社代表取締役社長田中正裕

URL : http://www.asial.co.jp/ │ Copyright © 2012 Asial Corporation. All Rights Reserved. │ 2012/7/2 ｜ 1

講師紹介

大学2年生の時にアシアル株式会社を設立、そのまま代表取締

役社長として今に至る。

もともと小学生の時にパソコンを触ったことがきっかけで、

生きている時間の大半をプログラミングして過ごす。東京大
FB: massie.massie.massie
Twitter: @massie 学工学部を卒業、アシアルの事業に忙しくなったため同大学

院を中退。

代表取締役社長として対外的な活動を行いつつ、各プロジェ

クトではコーディングやマネジメントなども担当。


HTML5再まとめ

• HTML5は現在広く普及しているHTML4に新しい機能を取り込んだもの。

• HTML5で制作したとしても、新機能を用いない限りHTML4と同様。

• PCではIE6～8のHTML5対応が十分でないため、まだ普及していない。対

して、スマートフォン向けブラウザではHTML5が利用可能。

• まだW3Cによる策定段階であり、今後仕様が変更される可能性がある。

（今使えているのは、各ブラウザーが先行して対応しているため）


HTML5はウェブの共通プラットフォーム


複数プラットフォーム対応が課題に

iOS、Android、Webアプリ、バックエンドと
様々なテクノロジーを組み合わせる必要がある。

Androidアプリ Webアプリバックエンド
iOSアプリ
(PC・モバイル）アプリ

言語 Objecive-C Java HTML5/JavaScript PHP/Ruby/Java

フレームワーク Cocoa Touch Android FW AJAX, Flashなどさまざま

特徴カメラやセンサーなどを活用可能ブラウザ上で動作サーバー側で動作


エンジニアの必要スキルも増える一方

技術の進歩にフロントとバックエンドより効率的な
キャッチアップ技術の両方を理解開発手法の選択

Obj-C言語の HTML5/JS/CSS
人気度グラフ
出典: www.tiobe.com

PHP/Ruby/Python


HTML5を用いることで、全プラットフォームを対象にできる

サーバーから
アプリを配信


PC向けHTML5事例


アシアルWebサイトの特徴

• サイトリニューアルにあわせて、HTML5で
いちから開発を開始。

• HTML5/CSS3/JavaScriptによる
アニメーションをふんだんに使用

• Webフォントを用いてテキスト化を検討。

• モバイル版はレスポンシブレイアウトを採用することで、様々な画面サイズと解像
度に対応。


HTML5制作にあたって

【HTML5を用いた制作】
• HTML5向けのコーディング自体は、特に苦労する事は
なかった。
• asideやsection等のタグが用意されたことで、文書の
構造化が進んだ。

【CSS3を用いた制作】
• サイトの随所にて、CSS3の機能を活用しながらUXを
高めた。
• CSSアニメーションについては、ブラウザ依存も含め
て苦労が多かった。

【JavaScriptを用いた制作】
• 既存のライブラリをそのまま活用できた（jQuery等）。
• historyのpushStateを用いてAJAXを用いた履歴対応
（http://www.asial.co.jp/works/）


CSS3アニメーションにおける課題

• CSSアニメーションを直接記述した場合、動的コンテンツの対応が難しい。

– 今回はjQueryをセレクターとして用いてCSSアニメーションを直接記述する方針とした。

• いくつか残るブラウザ依存

– ベンダープリフィックス（webkit-やmozilla-等）の対応のため、Modernizrを活用

– iPadではGPUを生かすために3D系のプロパティを使用

– Firefoxのアニメーション解釈にバグ

– CSSマーキーはOperaとSafariのみ対応


Webフォントについて

• サーバーからフォントデータをダウンロードし、描画する仕組み。

• Webフォントを使うことで、インストールされていない高品質なフォントも表示で
きる。

インターネット経由
でダウンロード

サーバー上の
フォントデータ

ブラウザ上に描画


Webフォントを用いた課題

① フォントの表示品質が低い

• ブラウザによっては、表示が想定した品質にならなかった。

• フォント品質の問題ではなく、ブラウザ内臓のレンダリングエンジンの問題。

② フォントデータが重く、表示にタイムラグが発生する

• フォントプラス（webfont.fontplus.jp）の場合、動的コンテンツを表示したい場合は

後から使用文字をダウンロードするため、さらにタイムラグの要因となる。

• ただしデータのキャッシュがライセンス上禁止されているため、特に日本語フォン

トをストレスなく表示することは困難。


ウェブフォントを用いた際の表示

Mac Chrome Win Chrome

Win Firefox Win IE9

非対応ブラウザへの配慮

• HTML5に非対応のブラウザについては、左図
のように警告メッセージを表示

• 現在のWebサイト訪問者のうちHTML5非対応
ブラウザの割合は8%

ブラウザバージョン
1 Chrome 19.0.1084.56 26.58%
2 Internet Explorer 8 13.95%
4 Firefox 13.0.1 9.96%
5 Firefox 12 6.98%
6 Chrome 19.0.1084.52 4.37%
7 Firefox 13 4.28%
9 Safari 534.57.2 3.09%
その他 13.8%


レスポンシブレイアウト

• 画面幅に応じてCSSを選択

• HTML5とJavaScriptは同一にす
ることで、メンテナンス性が向
上

• 今週中にリリースいたします
（実際の弊社Webサイトにて）


Monacaプラットフォーム

• HTML5向けスマートフォン向け開発プラットフォーム

• JavaScriptライブラリとしてExt.JS 4を活用

• ファイルアップロードやライブプレビューの部分でHTML5を活用


HTML5を用いたファイルアップロード機能

• HTML5のFileReaderを用いて、ドラッグ＆
ドロップでファイルアップロードを実現

• 複数ファイルのアップロードが可能

• ディレクトリのアップロードには非対応
（Chromeであれば可能）


HTML5のチーム構成検討

HTML5の開発ノウハウが十分ではないため、インタラクション部分を担当する
UX（ユーザーエクスペリエンス）エンジニアと、サーバーサイドエンジニアの
担当を分けて実装を進めた。

PM兼
ビジュアルデザイナー

プロダクト
マネージャー

ビジュアル
デザイン補佐
Obj-C/Java サーバーサイドエ
UXエンジニア
エンジニアンジニア

UX サーバーサイドビジュアル
エンジニアエンジニアエンジニア補佐
デザイナー

アシアルWebサイト Monaca


モバイル向けHTML5事例


ネイティブ？HTML5？

特にモバイルアプリ開発の際に、iPhoneとAndroidの2バージョンを作成するコスト負担
の大きさからHTML5を選択するケースが増えている

• アプリはブラウザ上で動作 • アプリはOS上で直接動作
• クライアント言語はHTML5/JavaScript • クライアント言語はOSにより異なる

Java Objective-C

ネイティブアプリ

Webアプリ


ネイティブアプリとHTML5 Webアプリの比較

HTML5 ネイティブ実装

 学習曲線が低い  端末性能をフルに活用

 最大のデベロッパーコミュニティ  スムーズな画面遷移
メリット
 豊富なエコシステム  プッシュ通信・高度なネットワーク

 オープンな業界標準  アプリマーケットでの販売

 Webブラウザが中心  高い学習コスト

デメリット  低い拡張性  OSごとに異なる言語・FW

 スムーズな画面遷移が苦手  制作日数の増加


モバイルアプリは作り方に種類がある

モバイルアプリ

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

monaca
JAVA Objective-C C# / VB


HTML5以外の選択肢

CORONA SDK


技術マップ

高速化・リッチなUIのためには、ハードウェアレイヤーに近い技術を選択する必要があ
る。その場合、クロスプラットフォーム性が低下する

デザイナーフレンドリー
学習コスト低

HTML5
Monaca

ハードウェアクロス
指向プラットフォーム

Unity
CORONA
Titanium

Java
Obj-C

エンジニアリング指向


事例: au one ニュースEX

ハイブリッドアプリとして構築
• コンテンツはすべてHTML5で配信
• プッシュ通信やキャッシュ機能などは、ネイティブ機能を活用

KDDI社のAndroid端末にプリインストール
• 端末により挙動が異なる「フラグメンテーション」問題の解決が主目的であった
• Webアプリとして、iPhone版もリリース（内部のロジックは同じ）

Webサーバーアプリ内部処理

HTML5で配信内蔵アプリに最適化
HTML5
データブラウザ
ベース

プッシュ通信


名刺管理 Eightアプリ

• iPhoneとAndroid（※今後リリース予定）に対応し

たクロスプラットフォームアプリ

• HTML5＋PhoneGapで構築

• 無料でアカウント登録できますので、是非ダウン

ロードしてお試しください

→App Storeにて「名刺管理 Eight」で検索


ハイブリッド型開発の特徴

本アプリではHTML5とネイティブ機能の両方を活用

ツールバー
（ネイティブ）

アプリ内部
（HTML5/JS）

アクションシート
（ネイティブ）

本アプリの内部構造

本アプリはHTML5/JavaScript/CSS3ですべての処理が完結。

ただし、画面遷移やツールバーの表示部分画面表示を担当
に、独自開発のネイティブコンポーネント
表示モジュールを使用。 HTML5/CSS3

それにより、スムーズな画面遷移を実現。 Zepto.js ビジネスロジック
を記述
JavaScript

WebViewとネイティブ間を通信画面の遷移や
ツールバー/
PhoneGap フッターを制御
PGプラグイン
JSON形式でネイティブ
通信コンポーネン
ト
WebView

Monacaフレームワーク
ローカル
ストレージ
HTML5とネイティ
サーバーAPI ブ部分の連携アプリ本体
オフライン用
データを格納


ハイブリッド型アプリ開発で得たノウハウ（抜粋）

• HTML5の制約
– ネイティブモジュールを組み合わせることで、ほぼすべて解決可能
– とはいえ、実際にはカメラ以外でネイティブを頼る部分は特になかった

• 機種依存問題
– 最新のCSS3機能については、iPhoneとAndroidの差異が大きい
例）3Dアニメーション機能はAndroidには無いなど
– 基本的に最新バージョンのOSの方がクセが少ない
– HTML5やJavaScriptで機種依存問題は基本的に発生しない。CSS3については、まだ不安定
な部分もあり。

• ユーザーエクスペリエンス
– position:fixedがフルに使えないiOS4系とAndroidでは対応に苦労
→そのためネイティブでツールバー等を表示するプラグインを自社開発
– HTML5だけだと画面遷移がモッサリする可能性が高い
– 用いるCSS3のプロパティによりスムーズさが大きく異なる事もある


ネイティブと比べたHTML5の優位性

【クロスプラットフォーム】
• HTML5/JavaScriptの割合が高いほど、クロスプラットフォーム性が高い。
• 必要に応じてネイティブで機能を用意すれば、ネイティブと比べた遜色はない。

【向いていないアプリ】
• リアルタイム処理が要求されるアプリ
• 独自のユーザーインターフェースを搭載したいアプリ
例：3Dゲームやバックグラウンドで実行するアプリなど

【フラグメンテーション問題】
• 特にAndroidでは、ネイティブアプリのフラグメンテーション問題は深刻
ネイティブで作成すると、未対応関数や想定外の挙動により強制終了してしまう
• HTML5アプリはCSS3解釈を除いて、大きく問題になることは少ない
強制終了が発生することは非常に稀。CSS定義やHTMLタグを工夫することで回避可能。


HTML5アプリ開発の成功秘訣

• iOSとAndroidの両方に対応した画面UI設計

– クロスプラットフォームのアプリ開発では、ネイティブアプリのUIをiPhoneとAndroidのど
ちらに合わせるべきか、事前判断が必要
– 一部のHTML5との互換性のないウィジェット（ドラムピッカー等）は別の方法で代替

• さまざまな種類のデバイスへの対応

– 画面サイズ（縦横比）が異なる端末への対応が厄介
– 画面デザインの段階で、正方～16:9までの端末サイズを想定しておく必要あり

• サポートOSの決定

– OSバージョンごとに細かいHTML5の実装仕様やバグがある状況
– 特にAndroidでは、開発におけるリファレンス端末を選定する
– 最新のOS・端末に向けて開発リソースを集中する


Monacaプラットフォームの紹介


構築経験をオープンに: Monacaプラットフォーム

• HTML5とネイティブを組み合わせたハイブリッドアプリ開発向けプラットフォーム

• クラウド上にすべての機能を統合し、だれでもアプリ開発ができる環境を提供

• 開発したアプリはApp StoreやGoogle Playなどの各種マーケットへの公開が可能

対応ブラウザ
対応デバイス

対応OS


Monacaの制作環境

ボタン一発で現在のアプリをAndroid/iOS
ネイティブ形式に変換

HTML5/CSS/JavaScript
を用いた画面設計＋ロジック記述

実際のアプリの動きがブラウザ内で再現

デバッガーで動かした際の
JavaScriptエラーなどがログとして出力


Monacaの特徴

Webアプリ制作のように、コード＆デバッグが可能です

IDEでコード編集

すぐにデバッガで動作確認


Monacaロードマップ

Monacaのコンセプトである「誰でも簡単にアプリ開発ができること」を見据え、機能実装に励んで参ります。
正式リリースにつきましても、下記のリリース時期を照らし合わせて公表いたします。

• ネイティブUIの統合
– 先ほど説明したネイティブUIコンポーネントについて、Monaca IDEにてレイアウトができ
る機能をリリースします（超近日中）。

• 独自ネイティブモジュールの開発
– Objective-CやJavaで作成されたモジュールをMonacaアプリに取り込めるような仕組みを実
装予定です。


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


開発事例に学ぶHtml5アプリのポイント

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Viewers also liked

Viewers also liked (19)

Similar to 開発事例に学ぶHtml5アプリのポイント

Similar to 開発事例に学ぶHtml5アプリのポイント (20)

More from Monaca

More from Monaca (20)

開発事例に学ぶHtml5アプリのポイント