ICT ERA+ABC 2012東北講演

HTML5とMonacaで
ハイブリッドアプリ開発
2012年10月20日
アシアル株式会社斉藤勝也

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

お話しする内容

• WEBデザインというセッションではありますが、HTML5ってとか、開発ツールにつ
いてのお話しになります。

• というのも、弊社デザイナーの代打ちでやって参りましたので。

• よろしくお願いします。


アシアル株式会社会社紹介

2002年に創業したアシアル株式会社は、エンジニアリングでイ

ンターネットの成長を牽引することを目的といています。最新技

術を用いたサービス開発やコンサルティングを行なっています。

主な事業ドメイン
HTML5・ユーザーインターフェース Monaca（モバイル開発プラットフォーム） PHP・サーバーサイド技術


自己紹介

斉藤勝也
Monacaの開発マネージャー（ネイティブ側）

1985年生まれ。Web技術に興味を持ち、アシアル株式会社に入社。
大規模システム構築や、SNSサイトの開発に携わったのち、2012年4月よりMonacaチー
ムに加わる。

アシアルHPより

HTML5とは？


HTML5はHTMLの最新バージョン

HTMLにバージョンがある

HTML5.0
HTML2.0 HTML3.2 HTML4.0
HTML1.0
1995年 1997年 1997年～ 2008年ドラフト
2014年正式勧告予定

XHTML1.0
2000年


HTMLとW3C

HTMLの仕様を策定
http://www.w3.org

 W3Cの仕様に基づいてブラウザを開発
 独自機能実装し、W3Cに仕様をフィードバック

HTML5が注目された理由

Google社・Apple社がHTML5へ意欲的
 Google I/O というカンファレンスで大きな意気込みを語った

 Googleのスマートフォンサイトは大抵HTML5で実現されている

 ChromeのHTML5実装が早い

Adobe社・Apple社の動向
 Apple社 Mobile SafariにFlash導入を行わないことを正式決定

 Linux向け、Android向けFlashプレイヤーの開発を終了

 FlashはAndroid 4.1からは、サポートが行われなくなることが確定し、今後はHTML5制作ツールに注力。

FlashでできることをHTML5策定により補うという考え方がある
 HTML5ではFlashの代替となる以上のことが出来そう


モバイルで広がるHTML5


HTML5ブラウザシェア

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

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

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


ネイティブ？HTML5？

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

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

v.s. Java Objective-C

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

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

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

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

 クロスプラットフォーム  スムーズな画面遷移
メリット
 豊富なエコシステム  プッシュ通信・高度なネットワーク

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

 Webブラウザの枠を超えられない  高い学習コスト

デメリット  スムーズな動きが苦手  OSごとに異なる言語・FW

 制作日数の増加


ハイブリッドアプリ


ハイブリッドアプリとは？

iPhone Android

HTML、 HTML、 HTML、
CSS、 CSS、 CSS、
javascript javascript javascript

ハイブリッドアプリを実現するためのツールとして、PhoneGapというライ
ブラリが有名です。これを使うと、Webアプリの知識＋αでアプリを作り、
iPhone用、Android用のネイティブアプリとして実行できます。


ハイブリッドアプリとは？

iPhone Android

HTML、 HTML、 HTML、
CSS、 CSS、 CSS、
Webアプリを作る知識＋αでアプリが作れる！
javascript javascript javascript
ネイティブの機能も使える！
アプリのソースコードも一つでOK！
ハイブリッドアプリを実現するためのツールとして、PhoneGapというライ
ブラリが有名です。これを使うと、Webアプリの知識＋αでアプリを作り、
iPhone用、Android用のネイティブアプリとして実行できます。


ハイブリッドアプリとWebアプリの違い

※ 「#CEDEC2012 JavaScriptベースゲームエンジン徹底比較」より転載
http://www.slideshare.net/sidestepism/cedec2012-javascript


Monacaでハイブリッドアプリ開発


Monacaとは？

• ブラウザだけでAndroidとiOSに対応したアプリ開発プ
ラットフォーム
– XCodeやEclipseがインストールされていないPCでも開発
が可能

• プログラミング言語としてHTML5とJavaScriptを採用
– デザイナーの方には最適なソリューション

• App StoreやGoogle Playなどで公開可能
– 有料で販売することもできます
– マーケットを経由せずに配布することも可能です
http://monaca.mobi
• 現在パブリック・ベータとして無料で提供


開発に必要な知識

Monacaでは、HTML5とCSS3とJavaScriptの知識が必要です。とはいえ、難易度は他の言語と比
べてかなり低く、様々な入門書も存在します。ホームページ制作ソフトなどを用いると、これら
の知識がない中で開発することも可能です。

HTML（HTML5）
Webサイトの制作に使われます。Monacaでは、HTMLの最新バージョンであるHTML5に対応して
います。そのため、様々なHTML5の機能を使って画面を設計することができます。

CSS（CSS3）
HTMLが画面の設計書であるのに対して、CSSはそのHTMLにデザインを適用します。最新の
CSS3では簡単なアニメーションなども表現することができるようになりました。

JavaScript
ブラウザ上で動くプログラミング言語です。ボタンをタップしたり、データを表示する時の処理
を記述します。


Monacaなら開発環境はクラウド上に

対応ブラウザ


Monacaとは、
HTML5でクロスプラットフォームアプリが作れるプラットフォーム

バイナリーをビルドできる

ブラウザーベース

エディター内蔵

AndroidとiOSに対応
ライブプレビュー

デバッガーで
WebDAVで接続可能
リアルタイム開発


Monacaの特徴: SDKやコンパイルが不要！

コード
実機上のデバッガーで動作確認

IDE上でデバッグ

Monacaの特徴: リモートビルドでローカル環境も不要！

そのままAPKを
ダウンロード可

Android版ビルドは
デバッグとリリースの２種類

もしくは
iOS版はデバッガーから
OTA Distribution
に対応直接インストール
(Wireless AdHoc)

名刺管理 Eightアプリ

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

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

• HTML5＋PhoneGapで構築

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

ドしてお試しください

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


ありがとうございました


ICT ERA+ABC 2012東北講演

More Related Content

What's hot

Viewers also liked

Similar to ICT ERA+ABC 2012東北講演

More from Monaca

ICT ERA+ABC 2012東北講演