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

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アプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか自作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/JS+ Androidの開発について HTML5/JavaScript＋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 と AndroidAPIの組み合わせなので自由度が高い

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ドライバのインストール

jsWaffleを使ってAndroidアプリを作る時のワークフローを確認jsWaffleを使ってAndroidアプリを作る時のワークフローを確認 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などを配置すれば、 • リンクしたり、表示したり、再生したりすることが可能

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