ict era+abc 2012東北講演

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

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

2012年10月20日アシアル株式会社斉藤勝也


お話しする内容

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

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

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


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

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

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

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

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

ます。主な事業ドメイン


自己紹介

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

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

アシアル HP より


HTML5 とは？


HTML5 は HTML の最新バージョン

HTML にバージョンがある

HTML1.0HTML2.01995 年

HTML3.21997 年

HTML4.01997 年～

XHTML1.02000 年

HTML5.0

2008 年ドラフト2014 年正式勧告予

定


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 対応

率が大幅に向上。

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

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

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


ネイティブ？ HTML5 ？

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

ネイティブアプリ

• アプリはブラウザ上で動作• クライアント言語は HTML5/JavaScript

Java Objective-C

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

v.s.

Web アプリ


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

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

メリット

デメリット

学習曲線が低い

クロスプラットフォーム

豊富なエコシステム

オープンな業界標準

Web ブラウザの枠を超えられない

スムーズな動きが苦手

端末性能をフルに活用

スムーズな画面遷移

プッシュ通信・高度なネットワーク

アプリマーケットでの販売

高い学習コスト

OSごとに異なる言語・ FW

制作日数の増加


ハイブリッドアプリ


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


iPhone Android

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

HTML 、CSS 、 javascript




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


iPhone Android

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




Web アプリを作る知識＋ α でアプリが作れる！

ネイティブの機能も使える！アプリのソースコードも一つで OK！


ハイブリッドアプリと 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


開発に必要な知識

HTML （ HTML5 ）

Web サイトの制作に使われます。 Monaca では、 HTML の最新バージョンである HTML5 に対応し

ています。そのため、様々な HTML5 の機能を使って画面を設計することができます。

CSS （ CSS3 ）

HTML が画面の設計書であるのに対して、 CSS はその HTML にデザインを適用します。最新の

CSS3 では簡単なアニメーションなども表現することができるようになりました。

JavaScript

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

記述します。

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


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

対応ブラウザ


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

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

Android と iOS に対応

ライブプレビュー

エディター内蔵

ブラウザーベース

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


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

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

IDE 上でデバッグ


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

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

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

もしくはデバッガーから

直接インストールiOS版はOTA Distributionに対応(Wireless AdHoc)


名刺管理 Eight アプリ

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

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

• HTML5＋ PhoneGap で構築

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

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

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

https://www.youtube.com/watch?v=SdEru3cnhd4&feature=player_embedded


ありがとうございました

ict era+abc 2012東北講演

Documents