HTML5/JavaScript で作るAndroid アプリ開発 seminar

講師：酒徳峰章 ( クジラ飛行机 )

HTML5/JS で作る Android 開発セミナーアジェンダ• (1) Android について

– Android 開発の選択肢紹介• (2) HTML5/JavaScript で Android アプリを作ることについて

– メリット・デメリットと使いどころ紹介• (3) アプリ制作の流れ

– プロジェクトの作り方から実行まで• (4) サンプルの制作• (5) まとめ～今後の Android アプリについて

(1) ANDROIDアプリの作り方を覚える(2) 家に帰ってすぐ１つ作ることができる(3) 明日、作ったアプリを友達に自慢

このセミナーの目標

講師について• 酒徳　峰章　（クジラ飛行机）

– 経歴：不動産関連会社、Webサービス制作会社などを経て、独立。くじらはんど代表。– 代表：日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」などのユニークなソフトを開発。日本語でかける

WIKI 「 KonaWiki 」– 年に 2,3 冊ずつ、プログラミングやもの作りの楽しさを伝える目的で技術書を執筆している。– 受賞歴

• 2001 年　オンラインソフト大賞入賞• 2004 年　未踏スーパークリエイター認定• 2010 年　OSS 貢献者賞　受賞

• ソフト企画　「くじらはんど」http://kujirahand.com 最近書いた本

ANDROIDや開発環境について話題のスマートフォン、 Android についてAndroid の開発環境について紹介

はじめに…Android について質問

• Android について質問– Android 携帯やタブレットを使っている方は？– iPhone や iPad を使っている方は？– iPhone/iPad と Android を両方持っている方？

– 次に携帯を買うなら、 Android 携帯を買うという方は？

ちなみに・・・• 優秀な、 Android のエミュレータがあるので、 Android の実機が無くても開発可能

• Android を持って無い方も、家に帰ったらぜひ、試してみてください！！

はじめに…Android について質問

• 技術スキルについて質問– 既に Android で開発をしたことがある方は？– Java/C 言語 /PHP などプログラミング経験がある方？– HTML/JavaScript/CSS が一通り使える方は？

Android について• Google が中心となって開発しているスマートフォンやタブレット PC 向けのプラットフォーム• Linux をベースとしたモバイル用オープンソースのオペレーティングシステム (OS)

• 2009 年 7 月の「 HT-03A (HTC/docomo) 」を皮切りに、現在では各キャリアから様々な Android 端末が発売されている

Android 端末→ docomo HT-03A

• 2009 年 5 月：記念すべき日本の第一号端末• Android1.5 ( 後に 1.6 に )• 傾きセンサー /GPS/ 動画再生など基本的な機能を備える• とは言え・・・– 電池パック × ２個とおまけあり• スマートフォンは電池持ちが悪い ?

– タッチの精度が…

Android 端末→ docomo Xperia (SO-01B)

• 2010 年 1 月発売• 日本に Android を普及させた立役者• かなり売れた• Android 1.6→2.1→2.2– Android OS 、現在の主流は、 2.2/2.3 だが、契約は 2 年縛り

Android 端末→ au IS01

• au 初の Android 機。• Android1.6• 意外と評判が良かった？この後、 au が

Android に力を入れるきっかけに。

Android 端末→ au IS03

• 大々的に TV で CM が流れた• Android 2.1 ( のちに 2.2 にアップデート )

• これ以降の日本製端末はワンセグやお財布ケータイを搭載

Android タブレット端末も…• Android 3.0 を搭載したタブレット端末が、今後多数発売される

• Sony Tablet/MOTOROLA XOOM/Samsung Galaxy TAB…

Android特有の問題も• iPhone/iPad と違ってさまざまな端末がある• 開発者は多様性の問題に対処する必要がある– 画面サイズ（標準の画面の向き）– 機種依存の機能–ハードウェアの差異（特にセンサー類の）– Android OS バージョンの問題 • OS 1.5/1.6 の端末もまだ残っている、フル Flash対応は

2.2 以降に対応

2011 年 スマートフォン世界シェア予測

Android 39.5%iOS(iPhone) 15.7%Blackberry 14.9%Other 29.9%

AndroidiOS(iPhone)BlackberryOther

自作 Android アプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか

• (1) Android Market– 手軽に世界中に配信できる一番推奨する方法

• (2) 独自の Web サイトで配信– 各携帯キャリアもこの方法でもアプリを配信– 世界中ではなく、特定の人だけが使うアプリも配信可能（例えば社内ツールなど）

• (3) SDカードで配布– イベントなどで特定の人の配布可能

Android Market で世界に配信すること• OS が無料というだけではない！！• Android Market を使って、世界中にアプリを配信できる！

– 個人でも世界と対等に戦える– アプリのインストールが簡単– Apple App Storeよりも手続きが簡易、審査も最低限 Android Market は課金可能なため

Market を備えない Android 端末もある。

ANDROID開発の選択肢どのようにして Android の開発ができるのか？

Java + Eclipse → 標準開発環境• Android の標準開発スタイル• Java と Android SDK を利用して開発• Java を使うので、当然、 Java の知識が必要となる• 開発環境はすべて無料

Adobe Flash/Flex を使った開発• Adobe Flash や Flash Builder といったツールを利用して開発する• Android 2.2 以降に対応• 初回起動の際、 AIR ランタイムのインストールを求められる• Flash を使って Android アプリが作れるのが魅力、既存の Flashコンテンツも少しの修正で動く。• 開発環境は有償

Mono for Android を使った開発• Microsoft .NET を利用した開発環境• C# や F# を使って Android開発が可能• 開発環境は有償

HTML5+JavaScript を使った開発• HTML5 や JavaScript を使って、 Androidアプリを開発可能• オープンソースの実装がいくつか存在する（ PhoneGap/Titanium/jsWaffle ）• HTML5 で開発するので、プログラマーでなくても、デザイナーや日曜プログラマでも参戦可能。• 開発環境はすべて無料

(Titanium は一部有償 )

HTML5/JAVASCRIPT＋ ANDROID

このセミナーの中心話題となる HTML5/JS + Android の開発について

HTML5/JS で Android 開発するメリット• Web 技術 (HTML/CSS/JavaScript) である–学習コストが低いこと（既に慣れ親しんでる）　–情報量が多い／開発手法が確立されている– 　支援ツール（ HTML エディタ）や　　　　　　 JavaScript ライブラリなどが豊富

HTML5/JS で Android 開発するメリット• 開発効率が良いこと– Javaよりも簡単、敷居が低い– 開発効率が良い

• コンパイル作業が不要• Web ブラウザで動作確認できる

– 画面レイアウトも柔軟 (CSS3 が使える )

HTML5/JS で Android 開発するデメリット• Javaよりも動作速度が遅い

– 端末の実行速度は日進月歩。気にする程ではない– しかし、画面を頻繁に書き換えるアクションゲーム、複雑な科学計算 ( たとえば、リアルタイムに音声合成を行う楽器アプリ）などは苦しい

• 最新の Android API に未対応の可能性もある– どうしても必要なら、拡張プラグインで拡張可能だが、拡張プラグインの作成には、 Java の知識が必要

HTML5/JavaScript で開発する方法• (１ ) Web アプリ

• Web ブラウザからアプリにアクセスして使う• ( ２ ) ハイブリッドアプリ

• HTML5/JavaScript で作り、 Android のネイティブアプリに変換する。（ jsWaffle や PhoneGap といったツールを使う）

開発環境別の特徴

※開発環境のできること、できないことを見極める必要がある

開発環境別の特徴

※開発環境のできること、できないことを見極める必要がある

HTML5 / JavaScript でハイブリッド開発• ここでは、 HTML5/JavaScript を、 Android のアプリに変換することができるツール「 jsWaffle 」を紹介

http://d.aoikujira.com/jsWaffle/

jsWaffle のメリット• HTML5 と Android API の組み合わせなので自由度が高い

jsWaffle で使える機能• ストレージ機能

– SDカードや端末内部のメモリへのアクセス• データベース機能

– Androidに搭載されているSQLiteデータベース• マルチメディア機能

– カメラ／ビデオ／音声の、撮影や再生• 各種センサーの機能

– 傾きセンサー、GPS、画面タッチ• ネットワーク機能

– ファイルやデータのダウンロードや、Web APIへアクセス• 画面描画の機能

– HTML5/CSS3の描画機能を利用可能• 他のアプリとの連携機能

– Androidの機能で、メールソフトやバーコードスキャナーアプリと連携

JSWAFFLEで作られたアプリ紹介jsWaffle でどんなアプリが作れるのか？

ガジェットなど• ストップウォッチ• 「 StopWatch-シンプル」 (Android Market登録済み )

ガジェットなど• 時計、電卓などのガジェットなど• 画像を差し替えれば、いろいろなバージョンが！

辞書やデータベース• データベースやローカルストレージの利用• 「最小英和辞典」 (4万語 :6MB辞書 )

(Android Market登録済み )

ゲームなど• パズル、クイズ、落ちモノ系などサクサク動く

DEMO

10分の休憩

開発環境の準備HTML5/JavaScript+ Android で開発を行うための準備

準備する開発ツール• HTML5/JS for Android 開発に必要なツール– Aptana Studio2 (or Eclipse)

• http://www.aptana.com/products/studio2– Android SDK Tools (+ ADT プラグイン )

• http://developer.android.com/sdk/index.html– jsWaffle for Android

• http://d.aoikujira.com/jsWaffle/

• いずれも、 Windows/Mac OS X/Linux で動作無料（オープンソース）

インストールの手順• 1.Android SDK Tools をインストール

– セットアップを実行すると最新の SDK がインストールされる• 2.Aptana をインストール

– Aptana に ADT プラグインを導入– Android SDK のパスを設定

• 3.jsWaffle をインストール• ３つのツールをインストールすることになるので若干面倒に感じるものの、手順自体は単純。• より詳しい手順は、右の URL を参照。

http://goo.gl/whSEH

インストールで分かりづらい部分• ソフトをインストールして終わりではない• Aptana をインストールしてから• ADT プラグインのインストール• Android SDK を Aptana に設定するところ• エミュレータ– 画面サイズや OS を指定して作成する必要

• Android 端末の USBドライバのインストール

ANDROIDアプリ制作の流れjsWaffle を使って Android アプリを作る時のワークフローを確認

(1) jsWaffle でプロジェクトを作成• jsWaffle を使って、 Android プロジェクトを作成する。プロジェクトの名前、パッケージ名、出力先を指定するだけ。

(2)Aptana でプロジェクトを読み込む(2-1) メニューから Android Project を選択

(2-2) 既存ソースから作成

[Create project from existing source] をチェックし、Location に手順 (1) で作ったプロジェクトパスを指定する

(3) index.html を書き換える• Aptana の「 /assets/www 」フォルダに、メインファイルの index.html がある• これが、アプリケーションのメインファイルとなるので、自由に書き換えて作る

(4) 実行する• ツールバーにある [Debug]ボタンをクリック

(5) index.html を編集する• Aptana の「 /assets/www 」フォルダに、メインファイルの index.html がある• このとき、 www フォルダに、他の HTML ファイルや画像、 MP3 、 CSS/JS などを配置すれば、• リンクしたり、表示したり、再生したりすることが可能

開発の手順を実際に！• 手順確認• Index.html を書き換えて実行• 画像を配置してみる

|||| サンプルアプリの製作HTML5 で作ったページがそのままアプリになるだけでも魅力ですが、Android の独自機能を加えたり、使い勝手を向上させたりして実際にアプリを作る過程を解説

サンプル～「動く絵本」制作

★完成品は、以下からダウンロード可能★http://goo.gl/6aIAx

端末を振ると、音楽が流れる！

(1) jsWaffle でプロジェクトを作成• (1) jsWaffle を使って、 Android プロジェクトを作成する。• (2) Aptana でプロジェクトを読み込む。

-[File > New > Android Project]-Create project from existing source

(2) 絵本の HTML を作る• プロジェクトの /assets/www フォルダの index.html がメインファイルとなるので編集する

(3) HTML の編集について• このとき、 HTML が得意なら、 Aptana で直接タグを編集することもできる• ただの HTML なので、 Adobe Dreamweaver などの Web ページ編集ソフトで

HTML を作成することも可能。

Dreamweaver で HTML を編集しているところ

(3-2) 絵本 4枚ページを作成する

もちろん、 HTML ですから Web ブラウザで動作確認できます！

(4) 実機をつないで実行！• [Debug As > Android Application] を実行！

開発の手順を実際に！• プロジェクト作成• Web ブラウザでプレビューしながら HTMLを作成• DreamWeaver などのツールで編集してみる• デバッグしてみる

(5) Android固有の機能を追加• HTML のヘッダに以下の JavaScript を追加

• 端末を振ったらサウンドを再生する JSコード<script type="text/javascript" src="jsWaffle.js"></script>

var player;droid.watchShake(function(){　 if (player == null) {　　 player = droid.playSound(　　　　 "file:///android_asset/www/res/beet.ogg", true);　 }});

“droid.” から始まるメソッドは？• Android固有の機能を定義したもの• Aptana には、 JavaScript の補完機能がある• “dorid.” と入力すると続きが出るので選ぶだけ

各種センサーやストレージ操作のためのメソッドが利用可能。

機能の記述例 1

• 端末を振ったら何かをするコード

• 端末を振ったら表示ページを移動する場合

droid.watchShake(function(){　　 // ここに振ったときの処理を記述});

droid.watchShake(function(){ // ここに振ったときの処理を記述 location.href = “index.html”; });

機能の記述例 2

• サウンドファイルを再生するコード

• ボタンクリックでサウンド再生する場合

droid.playSound(“file:///android_asset/www/ ファイル名” , 繰り返し指定 );

<button onclick=“play()”> 再生 </button><script> function play() { droid.playSound(“file:///android_asset/www/test.mp3”,false); }</script>

(6) Android固有の機能を追加 2

• Android Menu にサウンドの再生を登録するdroid.setMenuItem(0, true, "BGM", "ic_menu_play_clip", function(){ if (player == null) { player = droid.playSound( "file:///android_asset/www/res/beet.ogg", true); } else { player.stop(); player = nulll; } });

(7) 地図の起動ボタンを書く• droid.startIntent()コマンドで、ほかの Androidアプリを起動できる。例えば、「 geo:緯度 ,経度」でマップアプリで地図を表示可能！！

• 散歩アプリに地図表示リンクを追加

<p><button onclick="droid.startIntent('geo:35.658883,139.745407')">　　東京タワーを見る</button></p>

コードを実際に見てみよう！• シェイクで音楽再生• Android メニューの作成• マップ起動ボタン

jsWaffle についての資料• (1) jsWaffle のマニュアル– jsWaffle の Web サイトの API リファレンス

• (2) 生成した Android プロジェクトに、「 /assets/www/jsWaffle.sdoc 」というファイル

• (3) 書籍「 HTML5/JavaScript で作る Android アプリ開発ガイドブック」毎日コミュニケーション刊

テンプレートデモを活用しよう！• jsWaffle には、まだまだたくさん機能がある• デフォルトテンプレートを見ることで、様々な機能が紹介されている。– 実現方法のソースコードを見ることも出来る。

Demo!

まとめHTML5/JavaScript で作る Android アプリ開発について

Android アプリの製作はHTML5/JS で簡単になる

• jsWaffle などのフレームワークを使うと、Java の知識がなくても、 Android アプリが作れる

HTML5/JS の表現力でJava アプリを超えられる

Android アプリを作ろう！• これからまだまだ Android が増える• 2011 年 3 月時点のアプリの数– iPhone の AppStore 33万本– Android Market 20万本

– AppStore に比べ Android Market は参入が容易であることを考えると、単純に、まだまだ少なく今後、大幅に増えるはず

vs

アプリはアイデア勝負の時代に !!• 既にいろいろなアプリがあるが、アイデア次第でまだまだヒットのチャンスがたくさん• 特に、 Web の技術 (HTML5/JavaScript) でアプリを作るのは…– 技術習得のロス時間がない– HTML( あるいは HTML エディタ ) さえ知っていれば作れる– HTML 5/JavaScript は、 Java アプリよりも、表現力があり、柔軟性が高い

(1) ANDROIDアプリの作り方を覚える(2) 家に帰ってすぐ１つ作ることができる(3) 明日、作ったアプリを友達に自慢

このセミナーの目標・・・覚えていますか？

参考書籍

終わり。お疲れ様でした！