企画者が押さえておきたいHtml5アプリ開発の要点

企画者が押さえておきたい
HTML5アプリ開発の要点
アシアル株式会社代表取締役社長田中正裕

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

アシアル株式会社について

革新的なアイディアと確かな技術力をもとに、インターネット社会において新たな価値を
創造する

Webシステムモバイルアプソフトウェア事メディア・教育
構築リ構築業事業
スピーディで高パフォー AndroidやiOSといったエンジニアをサポートす最新ノウハウ、テクノロ
マンスな開発。モバイルデバイス。る製品サービスの展開。ジーをお客様にご紹介。
 PHP言語が中心  iPhone/Androidアプ  JpGraph  PHPスクール
 高トラフィックサイリ  SSLモバイル  PHPプロ！・ブログ
ト  自社開発のアプリも  ionCube  書籍展開
 技術コンサルティン多数
グ


アシアルの取り組み

HTML5/CSS3/JavaScriptによるモバイルソリューション提供を中心に、
クラウド技術とオープンソーステクノロジーにフォーカスしています

HTML5を用いたスマートフォン/タブレット
モバイルアプリ開発開発プラットフォームオープンソース支援


講師紹介

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

役社長として今に至る。

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

生きている時間の大半をプログラミングして過ごす。東京大

学工学部を卒業、アシアルの事業に忙しくなったため同大学

院を中退。

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


本セミナーの内容

• HTML5アプリの時代背景

– すべてのデバイスがモバイル化され、アプリが主役になりつつある時代に向けて

HTML5の担う役割と目的について説明します

• HTML5時代の開発手法

– HTML5だけでなく、モバイルの世界には様々な開発プラットフォームが登場しています。

それらの特徴について紹介します

• Monacaのテクノロジー紹介

– 弊社が現在開発を進めているクラウドサービスMonacaの紹介と、その目的を紹介します


HTML5アプリの時代背景


すべてのデバイスがモバイル化される時代へ

世界的な潮流として、一気にスマートフォンの波が押し寄せている。
特に新興国では、初めての「コンピュータ」としてスマホ／タブレットが第一の選択肢
に。


アプリが主役の時代へ

メール・iモードWebに変わり、アプリがプラットフォームの主役に。

キャリア提供のプラットフォーマー提供の
ランディングページアプリマーケット


さまざまなプラットフォーム


Windows 8で全PCタブレット化

• 今冬リリース予定のWindows 8では、WOA
（Windows On ARM）と呼ばれるタブレット端末専用バージョンがリリース予定
• WOAでは、AndroidやiOSと同じARM CPUに対応
（これまではIntel製CPUのみ対応）
• これにより、Androidタブレットと同じ価格・スペックのWindows 8タブレットが登
場する見込み
タブレットの本格的な
普及のカギを握るのがWindows 8。

• タブレット、ノートパソコン、デスクトップで同じOSが動作。
• 今後はWindows PhoneもWindows 8ベースに。


クラウド時代の主役もアプリケーション

マルチプラットフォームが当然の時代へ。
クラウドを活用することで、すべてのデバイスで共通のコンテンツ配信が可能に。

サーバーインフラと
その上で動作するバックエンドアプリ


クラウドはClient/Serverコンピューティング

旧来のC/Sコンピューティングと異なる点は、
クライアント側が「アプリ」となりマルチプラットフォームとなることと、
その通信にウェブ技術が用いられること。

iOSアプリ
Obj-C

Web技術
サーバー上の
Androidアプリバックエンド
Java アプリ

Webアプリ HTML5
HTML5/JS

クライアントはマルチプラットフォーム vs. サーバーはシングルプラットフォーム


HTML5の特徴

• より多様なコンテンツをブラウザで配信できるように

– 動画やオーディオなど、従来は外部アプリに頼っていたコンテンツ再生を標準
化
– モバイル端末でのコンテンツ配信を提供

• リッチアプリケーションを可能にするために

– クライアント・リッチな機能実現のために、JavaScript言語を拡張
– 3Dグラフィックやアニメーションなどの表現力が向上

• Semantic Web、ワンソース・マルチユースを推進するために

– テレビや家電など、より多くの種類のデバイスがインターネットに接続される
– 特定のベンダーに左右されないオープンなプラットフォーム


なぜHTML5なのか？

クラウド対応アプリの標準言語

• RIA（Rich Internet Application）開発の目的で登場した
Adobe AIRやSilverlightの機能を包括

• 様々な開発ツールがHTML5をサポート

既存Webプラットフォームからの移行が容易

• これまでのHTML（HTML4、XHTML）を拡張した技術
• ウェブサイト開発、Webデザインの経験を比較的流用しやすい


最新のHTML5ブラウザシェア

• モバイル（タブレット・スマートフォン）はほぼ100%。
• 今後、PC向けブラウザがInternet Explorer 9に置き換わるなかで、HTML5対応率が大
幅に向上。

デスクトップ環境におけるブラウザシェア（2012年5月）

モバイルにおけるブラウザシェア（2012年5月）

出典: http://www.netmarketshare.com/


まとめ

モバイル化の流れ

• 近い将来、すべてのオペレーティングシステムがモバイルOSに

• すべてのコンピューターは高速化し、手のひらサイズのデバイスに

モバイルブロードバンドの低価格化・ユビキタス化（話せていません）

• すべてのモバイルデバイスのインフラを支える4Gが普及

• 光ファイバー級の接続がモバイル端末でも可能に

クラウド・リッチクライアントの流れ

• 多様なモバイル機器に効率よくコンテンツを配信する技術が求められる

• その中核を担うのが、クラウド技術を活用したHTML5プラットフォーム


HTML5時代の開発手法


ネイティブ？Webアプリ？

実装モデルの違い。いずれもクラウド活用が必須

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

Java Objective-C

アプリケーションはサーバーとの相互
サーバーから一方的に配信コミュニケーションが可能

バックエンドはクラウド環境で稼働。

サーバー言語はPHP/Ruby/Perlなど
使用テクノロジーは同一。

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


HTML5エコシステム


様々な制約が付随するWebアプリ

ビジネスモデル上の制約

• マーケットにはネイティブアプリのみ提出可能
• Webアプリでは、アプリ流通チャネルの構築の難易度が高い

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

• カメラやGPSなどの端末機能の活用
• なめらかな画面遷移
• 統一されたルック＆フィール

プッシュ型サービスを提供できない

• ユーザーがWebサイトを訪問しない限りコンテンツ配信ができない


HTML5以外の選択肢

CORONA SDK


各テクノロジー比較

HTML5 Java,Obj-C Titanium Unity CORONA

HTML5/JavaScri Java
言語 JavaScript C#, JavaScript Lua
pt ・Obj-C

Android ◎ ◎（Java） △ ○ ○

iOS ◎ ◎（Obj-C） ○ ○ ○

実行速度 △ ◎ ○ ○ ○

拡張性 × ○ △ △ ×

開発効率 ○ △ △ ○ ○

学習コスト ◎ × × △ △

業務系 JavaScriptによる
最適な用途端末性能を駆使ゲーム開発ゲーム開発
コンテンツ系開発


技術マップ

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

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

HTML5

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

Unity
CORONA
Titanium

Java
Obj-C

エンジニアリング指向


エンジニアに対するスキルセットが課題

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

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

PHP/Ruby/Python

様々なテクノロジーが台頭するなかで、
よりオープンでコストパフォーマンスの高い
プラットフォームが選択の要件に


Monacaのテクノロジー紹介


HTML5によるハイブリッド型開発スタイルの提案

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

 最大のデベロッパーコミュニティ  スムーズな画面遷移

利点  豊富なエコシステム  プッシュ通信・高度なネットワーク

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

HTML5 ネイティブ実装

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

欠点  低い拡張性  OSごとに異なる言語・FW

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


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

ネイティブ機能で描画
Monacaアプリの例：三三社Eightアプリ

画面の中央部位はすべて
HTML5+JavaScript

画面遷移も
ネイティブ動作

ネイティブ機能の活用


実際のMonacaアプリの動作デモ


開発での苦労点

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

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

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

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

• サポートOSの決定

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


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

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

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

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

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

対応OS


Monacaの制作環境

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

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

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

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


Monacaロードマップ

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

現在取組中の提供機能
– 最新版のPhoneGapへの対応
• 現在0.9がベースのPhoneGapバージョンを、最新のバージョン（1.6ないし1.7）までアップグレード
いたします。
– バックエンド機能
• サーバーサイドの機能を拡充して参ります。
今後リリース予定の機能
– ネイティブUIの統合
• 先ほど説明したネイティブUIコンポーネントについて、Monaca IDEにてレイアウトができる機能を
実装予定です。
– 独自ネイティブモジュールの開発
• Objective-CやJavaで作成されたモジュールをMonacaアプリに取り込めるような仕組みを実装予定で
す。


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


企画者が押さえておきたいHtml5アプリ開発の要点

More Related Content

What's hot

Similar to 企画者が押さえておきたいHtml5アプリ開発の要点

More from Monaca

企画者が押さえておきたいHtml5アプリ開発の要点