HTML5/JavaScriptで作るAndroidアプリ開発seminar
Download as pptx, pdf37 likes40,082 views
Androidアプリを作るのには、Javaの知識が必要？！いいえ、HTMLと少しのJavaScriptが使えればいいんです！HTML5/JavaScriptでAndroidアプリを作る方法を紹介します。
![(2)Aptanaでプロジェクトを読み込む(2-1) メニューから Android Project を選択(2-2)既存ソースから作成[Create project from existing source]をチェックし、Locationに手順(1)で作ったプロジェクトパスを指定する](https://image.slidesharecdn.com/android-html5-haihu-110521074305-phpapp02/85/HTML5-JavaScript-Android-seminar-46-320.jpg)
![(4) 実行するツールバーにある[Debug]ボタンをクリック](https://image.slidesharecdn.com/android-html5-haihu-110521074305-phpapp02/85/HTML5-JavaScript-Android-seminar-48-320.jpg)
![(1) jsWaffleでプロジェクトを作成(1) jsWaffleを使って、Androidプロジェクトを作成する。(2) Aptana でプロジェクトを読み込む。[File > New > Android Project]](https://image.slidesharecdn.com/android-html5-haihu-110521074305-phpapp02/85/HTML5-JavaScript-Android-seminar-53-320.jpg)
![(4) 実機をつないで実行！[Debug As > Android Application]を実行！](https://image.slidesharecdn.com/android-html5-haihu-110521074305-phpapp02/85/HTML5-JavaScript-Android-seminar-57-320.jpg)
HTML5/JavaScriptで作るAndroidアプリ開発seminar
- 2. HTML5/JSで作るAndroid開発セミナーアジェンダ(1) AndroidについてAndroid開発の選択肢紹介(2) HTML5/JavaScriptでAndroidアプリを作ることについてメリット・デメリットと使いどころ紹介(3) アプリ制作の流れプロジェクトの作り方から実行まで(4) サンプルの制作(5) まとめ～今後のAndroidアプリについて
- 3. (1) Androidアプリの作り方を覚える(2) 家に帰ってすぐ１つ作ることができる(3) 明日、作ったアプリを友達に自慢このセミナーの目標
- 11. Android端末->docomo Xperia (SO-01B)2010年1月発売日本にAndroidを普及させた立役者かなり売れたAndroid 1.6->2.1->2.2Android OS、現在の主流は、2.2/2.3だが、契約は2年縛り
- 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以降に対応
- 17. 自作Androidアプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか(1) Android Market手軽に世界中に配信できる一番推奨する方法(2) 独自のWebサイトで配信各携帯キャリアもこの方法でもアプリを配信世界中ではなく、特定の人だけが使うアプリも配信可能（例えば社内ツールなど）(3) SDカードで配布イベントなどで特定の人の配布可能
- 18. Android Marketで世界に配信することOSが無料というだけではない！！Android Marketを使って、世界中にアプリを配信できる！個人でも世界と対等に戦えるアプリのインストールが簡単Apple App Storeよりも手続きが簡易、審査も最低限Android Marketは課金可能なためMarketを備えない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開発が可能開発環境は有償
- 27. HTML5/JSでAndroid開発するデメリットJavaよりも動作速度が遅い端末の実行速度は日進月歩。気にする程ではないしかし、画面を頻繁に書き換えるアクションゲーム、複雑な科学計算(たとえば、リアルタイムに音声合成を行う楽器アプリ）などは苦しい最新の Android API に未対応の可能性もあるどうしても必要なら、拡張プラグインで拡張可能だが、拡張プラグインの作成には、Javaの知識が必要
- 28. HTML5/JavaScriptで開発する方法(１) WebアプリWebブラウザからアプリにアクセスして使う(２) ハイブリッドアプリHTML5/JavaScriptで作り、Androidのネイティブアプリに変換する。（jsWaffle や PhoneGap といったツールを使う）
- 30. HTML5 / JavaScript でハイブリッド開発ここでは、HTML5/JavaScriptを、Androidのアプリに変換することができるツール「jsWaffle」を紹介http://d.aoikujira.com/jsWaffle/
- 31. jsWaffle のメリットHTML5 と AndroidAPIの組み合わせなので自由度が高い
- 38. DEMO
- 39. 10分の休憩
- 41. 準備する開発ツールHTML5/JS for Android 開発に必要なツールAptana Studio2 (or Eclipse)http://www.aptana.com/products/studio2Android SDK Tools (+ ADTプラグイン)http://developer.android.com/sdk/index.htmljsWaffle for Androidhttp://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
- 46. (2)Aptanaでプロジェクトを読み込む(2-1) メニューから Android Project を選択(2-2)既存ソースから作成[Create project from existing source]をチェックし、Locationに手順(1)で作ったプロジェクトパスを指定する
- 53. (1) jsWaffleでプロジェクトを作成(1) jsWaffleを使って、Androidプロジェクトを作成する。(2) Aptana でプロジェクトを読み込む。[File > New > Android Project]
- 54. Create project from existing source(2) 絵本のHTMLを作るプロジェクトの/assets/wwwフォルダのindex.html がメインファイルとなるので編集する
- 56. (3-2) 絵本4枚ページを作成するもちろん、HTML ですからWeb ブラウザで動作確認できます！
- 57. (4) 実機をつないで実行！[Debug As > Android Application]を実行！
- 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); }});
- 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固有の機能を追加2Android 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; } });
- 66. jsWaffleについての資料(1) jsWaffleのマニュアルjsWaffleのWebサイトのAPIリファレンス(2) 生成したAndroidプロジェクトに、「/assets/www/jsWaffle.sdoc」というファイル(3) 書籍「HTML5/JavaScriptで作るAndroidアプリ開発ガイドブック」毎日コミュニケーション刊
- 67. テンプレートデモを活用しよう！jsWaffleには、まだまだたくさん機能があるデフォルトテンプレートを見ることで、様々な機能が紹介されている。実現方法のソースコードを見ることも出来る。Demo!
- 71. Androidアプリを作ろう！これからまだまだAndroidが増える2011年3月時点のアプリの数iPhone の AppStore 33万本Android Market 20万本AppStoreに比べAndroid Marketは参入が容易であることを考えると、単純に、まだまだ少なく今後、大幅に増えるはずvs
- 73. (1) Androidアプリの作り方を覚える(2) 家に帰ってすぐ１つ作ることができる(3) 明日、作ったアプリを友達に自慢このセミナーの目標・・・覚えていますか？
- 74. 参考書籍
- 75. 終わり。お疲れ様でした！