Androidアプリを作るのには、Javaの知識が必要？！いいえ、HTMLと少しのJavaScriptが使えればいいんです！HTML5/JavaScriptでAndroidアプリを作る方法を紹介します。

1. HTML5/JavaScriptで作るAndroidアプリ開発seminar 講師：酒徳峰章(クジラ飛行机)

2. HTML5/JSで作るAndroid開発セミナーアジェンダ (1) Androidについて Android開発の選択肢紹介 (2) HTML5/JavaScriptでAndroidアプリを作ることについて メリット・デメリットと使いどころ紹介 (3) アプリ制作の流れ プロジェクトの作り方から実行まで (4) サンプルの制作 (5) まとめ～今後のAndroidアプリについて

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

4. 講師について 酒徳 峰章 （クジラ飛行机） 経歴：不動産関連会社、Webサービス制作会社などを経て、独立。くじらはんど代表。 代表：日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」などのユニークなソフトを開発。日本語でかけるWIKI「KonaWiki」 年に2,3冊ずつ、プログラミングやもの作りの楽しさを伝える目的で技術書を執筆している。 受賞歴 2001年 オンラインソフト大賞入賞 2004年 未踏スーパークリエイター認定 2010年 OSS貢献者賞 受賞 ソフト企画 「くじらはんど」http://kujirahand.com 最近書いた本

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

6. はじめに…Androidについて質問 Androidについて質問 Android携帯やタブレットを使っている方は？ iPhoneやiPadを使っている方は？ iPhone/iPadとAndroidを両方持っている方？ 次に携帯を買うなら、Android携帯を買うという方は？

7. ちなみに・・・ 優秀な、Androidのエミュレータがあるので、Androidの実機が無くても開発可能 Androidを持って無い方も、家に帰ったらぜひ、試してみてください！！

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

9. Androidについて Googleが中心となって開発しているスマートフォンやタブレットPC向けのプラットフォーム Linuxをベースとしたモバイル用オープンソースのオペレーティングシステム(OS) 2009年7月の「HT-03A (HTC/docomo)」を皮切りに、現在では各キャリアから様々なAndroid端末が発売されている

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

11. Android端末->docomo Xperia (SO-01B) 2010年1月発売 日本にAndroidを普及させた立役者 かなり売れた Android 1.6->2.1->2.2 Android OS、現在の主流は、2.2/2.3だが、契約は2年縛り

12. Android端末->au IS01 au初のAndroid機。 Android1.6 意外と評判が良かった？この後、auがAndroidに力を入れるきっかけに。

13. Android端末-> au IS03 大々的にTVでCMが流れた Android 2.1 (のちに 2.2 にアップデート) これ以降の日本製端末はワンセグやお財布ケータイを搭載

14. Androidタブレット端末も… Android 3.0を搭載したタブレット端末が、今後多数発売される Sony Tablet/MOTOROLA XOOM/Samsung Galaxy TAB…

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

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

17. 自作Androidアプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか (1) Android Market 手軽に世界中に配信できる一番推奨する方法 (2) 独自のWebサイトで配信 各携帯キャリアもこの方法でもアプリを配信 世界中ではなく、特定の人だけが使うアプリも配信可能（例えば社内ツールなど） (3) SDカードで配布 イベントなどで特定の人の配布可能

18. Android Marketで世界に配信すること OSが無料というだけではない！！ Android Marketを使って、世界中にアプリを配信できる！ 個人でも世界と対等に戦える アプリのインストールが簡単 Apple App Storeよりも手続きが簡易、審査も最低限 Android Marketは課金可能なため Marketを備えないAndroid端末もある。

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

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

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

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

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

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

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

26. HTML5/JSでAndroid開発するメリット 開発効率が良いこと Javaよりも簡単、敷居が低い 開発効率が良い コンパイル作業が不要 Webブラウザで動作確認できる 画面レイアウトも柔軟 (CSS3が使える)

27. HTML5/JSでAndroid開発するデメリット Javaよりも動作速度が遅い 端末の実行速度は日進月歩。気にする程ではない しかし、画面を頻繁に書き換えるアクションゲーム、複雑な科学計算(たとえば、リアルタイムに音声合成を行う楽器アプリ）などは苦しい 最新の Android API に未対応の可能性もある どうしても必要なら、拡張プラグインで拡張可能だが、拡張プラグインの作成には、Javaの知識が必要

28. HTML5/JavaScriptで開発する方法 (１) Webアプリ Webブラウザからアプリにアクセスして使う (２) ハイブリッドアプリ HTML5/JavaScriptで作り、Androidのネイティブアプリに変換する。（jsWaffle や PhoneGap といったツールを使う）

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

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

31. jsWaffle のメリット HTML5 と AndroidAPIの組み合わせなので自由度が高い

32. jsWaffleで使える機能 ストレージ機能 SDカードや端末内部のメモリへのアクセス データベース機能 Androidに搭載されているSQLiteデータベース マルチメディア機能 カメラ／ビデオ／音声の、撮影や再生 各種センサーの機能 傾きセンサー、GPS、画面タッチ ネットワーク機能 ファイルやデータのダウンロードや、Web APIへアクセス 画面描画の機能 HTML5/CSS3の描画機能を利用可能 他のアプリとの連携機能 Androidの機能で、メールソフトやバーコードスキャナーアプリと連携

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

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

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

36. 辞書やデータベース データベースやローカルストレージの利用 「最小英和辞典」(4万語:6MB辞書) (Android Market登録済み)

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

38. DEMO

39. 10分の休憩

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

41. 準備する開発ツール 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 で動作無料（オープンソース）

42. インストールの手順 1.Android SDK Tools をインストール セットアップを実行すると最新のSDKがインストールされる 2.Aptana をインストール AptanaにADTプラグインを導入 Android SDKのパスを設定 3.jsWaffleをインストール ３つのツールをインストールすることになるので若干面倒に感じるものの、手順自体は単純。 より詳しい手順は、右のURLを参照。 http://goo.gl/whSEH

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

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

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

46. (2)Aptanaでプロジェクトを読み込む (2-1) メニューから Android Project を選択 (2-2)既存ソースから作成 [Create project from existing source]をチェックし、 Locationに手順(1)で作ったプロジェクトパスを指定する

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

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

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

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

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

52. サンプル～「動く絵本」制作 端末を振ると、音楽が流れる！ ★完成品は、以下からダウンロード可能★ http://goo.gl/6aIAx

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

56. (3-2) 絵本4枚ページを作成する もちろん、HTML ですからWeb ブラウザで動作確認できます！

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

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

59. (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); } });

60. “droid.”から始まるメソッドは？ Android固有の機能を定義したもの Aptana には、JavaScript の補完機能がある “dorid.”と入力すると続きが出るので選ぶだけ 各種センサーやストレージ操作のための メソッドが利用可能。

61. 機能の記述例1 端末を振ったら何かをするコード 端末を振ったら表示ページを移動する場合 droid.watchShake(function(){ // ここに振ったときの処理を記述 }); droid.watchShake(function(){ // ここに振ったときの処理を記述 location.href = “index.html”; });

62. 機能の記述例2 サウンドファイルを再生するコード ボタンクリックでサウンド再生する場合 droid.playSound(“file:///android_asset/www/ファイル名”, 繰り返し指定); <button onclick=“play()”>再生</button> <script> function play() { droid.playSound(“file:///android_asset/www/test.mp3”,false); } </script>

63. (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; } });

64. (7) 地図の起動ボタンを書く droid.startIntent()コマンドで、ほかのAndroidアプリを起動できる。例えば、「geo:緯度,経度」でマップアプリで地図を表示可能！！ 散歩アプリに地図表示リンクを追加 <p> <button onclick="droid.startIntent('geo:35.658883,139.745407')"> 東京タワーを見る </button> </p>

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

66. jsWaffleについての資料 (1) jsWaffleのマニュアル jsWaffleのWebサイトのAPIリファレンス (2) 生成したAndroidプロジェクトに、「/assets/www/jsWaffle.sdoc」というファイル (3) 書籍「HTML5/JavaScriptで作るAndroidアプリ開発ガイドブック」毎日コミュニケーション刊

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

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

69. Androidアプリの製作はHTML5/JSで簡単になる jsWaffle などのフレームワークを使うと、Javaの知識がなくても、Androidアプリが作れる

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

71. Androidアプリを作ろう！ これからまだまだAndroidが増える 2011年3月時点のアプリの数 iPhone の AppStore 33万本 Android Market 20万本 AppStoreに比べAndroid Marketは参入が容易であることを考えると、単純に、まだまだ少なく今後、大幅に増えるはず vs

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

73. (1) Androidアプリの作り方を覚える(2) 家に帰ってすぐ１つ作ることができる(3) 明日、作ったアプリを友達に自慢 このセミナーの目標・・・覚えていますか？

74. 参考書籍

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