Transcript 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
iOS(iPhone)
Blackberry
Other
Android
iOS(iPhone)
Blackberry
Other
39.5%
15.7%
14.9%
29.9%
自作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 と Android APIの組み合わせなので自由度が高い
jsWaffleで使える機能
•
ストレージ機能
–
•
データベース機能
–
•
ファイルやデータのダウンロードや、Web APIへアクセス
画面描画の機能
–
•
傾きセンサー、GPS、画面タッチ
ネットワーク機能
–
•
カメラ／ビデオ／音声の、撮影や再生
各種センサーの機能
–
•
Androidに搭載されているSQLiteデータベース
マルチメディア機能
–
•
SDカードや端末内部のメモリへのアクセス
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アプリを作る時のワークフローを確認
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を追加
<script type="text/javascript" src="jsWaffle.js"></script>
• 端末を振ったらサウンドを再生するJSコード
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には、まだまだた
くさん機能がある
• デフォルトテンプレートを
見ることで、様々な機能が
紹介されている。
– 実現方法のソースコードを
見ることも出来る。
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) 明日、作ったアプリを友達に自慢
参考書籍
終わり。お疲れ様でした！