html5 javascript android seminar
Download
Skip this Video
Download Presentation
HTML5/JavaScript で作る Android アプリ開発 seminar

Loading in 2 Seconds...

play fullscreen
1 / 77

HTML5/JavaScript で作る Android アプリ開発 seminar - PowerPoint PPT Presentation


  • 146 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' HTML5/JavaScript で作る Android アプリ開発 seminar' - gigi


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html5 javascript android seminar

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

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

html5 js android
HTML5/JSで作るAndroid開発セミナーアジェンダ
  • (1) Androidについて
    • Android開発の選択肢紹介
  • (2) HTML5/JavaScriptでAndroidアプリを作ることについて
    • メリット・デメリットと使いどころ紹介
  • (3) アプリ制作の流れ
    • プロジェクトの作り方から実行まで
  • (4) サンプルの制作
  • (5) まとめ~今後のAndroidアプリについて
1 android 2 3
このセミナーの目標(1) Androidアプリの作り方を覚える(2) 家に帰ってすぐ1つ作ることができる(3) 明日、作ったアプリを友達に自慢
slide4
講師について
  • 酒徳 峰章 (クジラ飛行机)
    • 経歴:不動産関連会社、Webサービス制作会社などを経て、独立。くじらはんど代表。
    • 代表:日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」などのユニークなソフトを開発。日本語でかけるWIKI「KonaWiki」
    • 年に2,3冊ずつ、プログラミングやもの作りの楽しさを伝える目的で技術書を執筆している。
    • 受賞歴
      • 2001年 オンラインソフト大賞入賞
      • 2004年 未踏スーパークリエイター認定
      • 2010年 OSS貢献者賞 受賞
  • ソフト企画 「くじらはんど」http://kujirahand.com

最近書いた本

android1
はじめに…Androidについて質問
  • Androidについて質問
    • Android携帯やタブレットを使っている方は?
    • iPhoneやiPadを使っている方は?
    • iPhone/iPadとAndroidを両方持っている方?
    • 次に携帯を買うなら、Android携帯を買うという方は?
slide7
ちなみに・・・
  • 優秀な、Androidのエミュレータがあるので、Androidの実機が無くても開発可能
  • Androidを持って無い方も、家に帰ったらぜひ、試してみてください!!
android2
はじめに…Androidについて質問
  • 技術スキルについて質問
    • 既にAndroidで開発をしたことがある方は?
    • Java/C言語/PHPなどプログラミング経験がある方?
    • HTML/JavaScript/CSSが一通り使える方は?
android3
Androidについて
  • Googleが中心となって開発しているスマートフォンやタブレットPC向けのプラットフォーム
  • Linuxをベースとしたモバイル用オープンソースのオペレーティングシステム(OS)
  • 2009年7月の「HT-03A (HTC/docomo)」を皮切りに、現在では各キャリアから様々なAndroid端末が発売されている
android docomo ht 03a
Android端末→docomo HT-03A
  • 2009年5月:記念すべき日本の第一号端末
  • Android1.5 (後に1.6に)
  • 傾きセンサー/GPS/動画再生など基本的な機能を備える
  • とは言え・・・
    • 電池パック×2個とおまけあり
      • スマートフォンは電池持ちが悪い?
    • タッチの精度が…
android docomo xperia so 01b
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
Android端末→au IS01
  • au初のAndroid機。
  • Android1.6
  • 意外と評判が良かった?この後、auがAndroidに力を入れるきっかけに。
android au is03
Android端末→ au IS03
  • 大々的にTVでCMが流れた
  • Android 2.1 (のちに 2.2 にアップデート)
  • これ以降の日本製端末はワンセグやお財布ケータイを搭載
android4
Androidタブレット端末も…
  • Android 3.0を搭載したタブレット端末が、今後多数発売される
      • Sony Tablet/MOTOROLA XOOM/Samsung Galaxy TAB…
android5
Android特有の問題も
  • iPhone/iPadと違ってさまざまな端末がある
  • 開発者は多様性の問題に対処する必要がある
    • 画面サイズ(標準の画面の向き)
    • 機種依存の機能
    • ハードウェアの差異(特にセンサー類の)
    • Android OSバージョンの問題
      • OS 1.5/1.6の端末もまだ残っている、フルFlash対応は2.2以降に対応
android6
自作Androidアプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか自作Androidアプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか
  • (1) Android Market
    • 手軽に世界中に配信できる一番推奨する方法
  • (2) 独自のWebサイトで配信
    • 各携帯キャリアもこの方法でもアプリを配信
    • 世界中ではなく、特定の人だけが使うアプリも配信可能(例えば社内ツールなど)
  • (3) SDカードで配布
    • イベントなどで特定の人の配布可能
android market
Android Marketで世界に配信すること
  • OSが無料というだけではない!!
  • Android Marketを使って、世界中にアプリを配信できる!
    • 個人でも世界と対等に戦える
    • アプリのインストールが簡単
    • Apple App Storeよりも手続きが簡易、審査も最低限

Android Marketは課金可能なため

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

java eclipse
Java + Eclipse → 標準開発環境
  • Androidの標準開発スタイル
  • JavaとAndroid SDKを利用して開発
  • Javaを使うので、当然、Javaの知識が必要となる
  • 開発環境はすべて無料
adobe flash flex
Adobe Flash/Flexを使った開発
  • Adobe Flash や Flash Builderといったツールを利用して開発する
  • Android 2.2以降に対応
  • 初回起動の際、AIRランタイムのインストールを求められる
  • Flashを使ってAndroidアプリが作れるのが魅力、既存のFlashコンテンツも少しの修正で動く。
  • 開発環境は有償
mono for android
Mono for Androidを使った開発
  • Microsoft .NETを利用した開発環境
  • C#やF#を使ってAndroid開発が可能
  • 開発環境は有償
html5 javascript
HTML5+JavaScriptを使った開発
  • HTML5やJavaScriptを使って、Androidアプリを開発可能
  • オープンソースの実装がいくつか存在する(PhoneGap/Titanium/jsWaffle)
  • HTML5で開発するので、プログラマーでなくても、デザイナーや日曜プログラマでも参戦可能。
  • 開発環境はすべて無料(Titaniumは一部有償)
html5 js android1
HTML5/JSでAndroid開発するメリット
  • Web技術 (HTML/CSS/JavaScript)である
    • 学習コストが低いこと(既に慣れ親しんでる)
    • 情報量が多い/開発手法が確立されている
    • 支援ツール(HTMLエディタ)やJavaScriptライブラリなどが豊富
html5 js android2
HTML5/JSでAndroid開発するメリット
  • 開発効率が良いこと
    • Javaよりも簡単、敷居が低い
    • 開発効率が良い
      • コンパイル作業が不要
      • Webブラウザで動作確認できる
    • 画面レイアウトも柔軟 (CSS3が使える)
html5 js android3
HTML5/JSでAndroid開発するデメリット
  • Javaよりも動作速度が遅い
    • 端末の実行速度は日進月歩。気にする程ではない
    • しかし、画面を頻繁に書き換えるアクションゲーム、複雑な科学計算(たとえば、リアルタイムに音声合成を行う楽器アプリ)などは苦しい
  • 最新の Android API に未対応の可能性もある
    • どうしても必要なら、拡張プラグインで拡張可能だが、拡張プラグインの作成には、Javaの知識が必要
html5 javascript1
HTML5/JavaScriptで開発する方法
  • (1) Webアプリ
      • Webブラウザからアプリにアクセスして使う
  • (2) ハイブリッドアプリ
      • HTML5/JavaScriptで作り、Androidのネイティブアプリに変換する。(jsWaffle や PhoneGap といったツールを使う)
slide29
開発環境別の特徴

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

slide30
開発環境別の特徴

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

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

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

jswaffle
jsWaffle のメリット
  • HTML5 と AndroidAPIの組み合わせなので自由度が高い
jswaffle1
jsWaffleで使える機能
  • ストレージ機能
    • SDカードや端末内部のメモリへのアクセス
  • データベース機能
    • Androidに搭載されているSQLiteデータベース
  • マルチメディア機能
    • カメラ/ビデオ/音声の、撮影や再生
  • 各種センサーの機能
    • 傾きセンサー、GPS、画面タッチ
  • ネットワーク機能
    • ファイルやデータのダウンロードや、Web APIへアクセス
  • 画面描画の機能
    • HTML5/CSS3の描画機能を利用可能
  • 他のアプリとの連携機能
    • Androidの機能で、メールソフトやバーコードスキャナーアプリと連携
slide35
ガジェットなど
  • ストップウォッチ
  • 「StopWatch-シンプル」(Android Market登録済み)
slide36
ガジェットなど
  • 時計、電卓などのガジェットなど
  • 画像を差し替えれば、いろいろなバージョンが!
slide37
辞書やデータベース
  • データベースやローカルストレージの利用
  • 「最小英和辞典」(4万語:6MB辞書) (Android Market登録済み)
slide38
ゲームなど
  • パズル、クイズ、落ちモノ系などサクサク動く
slide42
準備する開発ツール
  • 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 で動作無料(オープンソース)
slide43
インストールの手順
  • 1.Android SDK Tools をインストール
    • セットアップを実行すると最新のSDKがインストールされる
  • 2.Aptana をインストール
    • AptanaにADTプラグインを導入
    • Android SDKのパスを設定
  • 3.jsWaffleをインストール
  • 3つのツールをインストールすることになるので若干面倒に感じるものの、手順自体は単純。
  • より詳しい手順は、右のURLを参照。
  • http://goo.gl/whSEH
slide44
インストールで分かりづらい部分
  • ソフトをインストールして終わりではない
  • Aptanaをインストールしてから
  • ADTプラグインのインストール
  • Android SDKをAptanaに設定するところ
  • エミュレータ
    • 画面サイズやOSを指定して作成する必要
  • Android端末のUSBドライバのインストール
android8
jsWaffleを使ってAndroidアプリを作る時のワークフローを確認jsWaffleを使ってAndroidアプリを作る時のワークフローを確認Androidアプリ制作の流れ
1 jswaffle
(1) jsWaffleでプロジェクトを作成
  • jsWaffleを使って、Androidプロジェクトを作成する。プロジェクトの名前、パッケージ名、出力先を指定するだけ。
2 aptana
(2)Aptanaでプロジェクトを読み込む

(2-1) メニューから Android Project を選択

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

[Create project from existing source]をチェックし、

Locationに手順(1)で作ったプロジェクトパスを指定する

3 index html
(3)index.html を書き換える
  • Aptanaの「/assets/www」フォルダに、メインファイルのindex.html がある
  • これが、アプリケーションのメインファイルとなるので、自由に書き換えて作る
slide49
(4) 実行する
  • ツールバーにある[Debug]ボタンをクリック
5 index html
(5)index.html を編集する
  • Aptanaの「/assets/www」フォルダに、メインファイルのindex.html がある
  • このとき、wwwフォルダに、他のHTMLファイルや画像、MP3、CSS/JSなどを配置すれば、
  • リンクしたり、表示したり、再生したりすることが可能
slide51
開発の手順を実際に!
  • 手順確認
  • Index.htmlを書き換えて実行
  • 画像を配置してみる
slide52
HTML5で作ったページがそのままアプリになるだけでも魅力ですが、HTML5で作ったページがそのままアプリになるだけでも魅力ですが、

Androidの独自機能を加えたり、使い勝手を向上させたりして

実際にアプリを作る過程を解説

|||| サンプルアプリの製作
slide53
サンプル~「動く絵本」制作

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

★完成品は、以下からダウンロード可能★

http://goo.gl/6aIAx

1 jswaffle1
(1) jsWaffleでプロジェクトを作成
  • (1) jsWaffleを使って、Androidプロジェクトを作成する。
  • (2) Aptana でプロジェクトを読み込む。
  • [File > New > Android Project]
  • Create project from existing source
2 html
(2) 絵本のHTMLを作る
  • プロジェクトの/assets/wwwフォルダのindex.html がメインファイルとなるので編集する
3 html
(3) HTMLの編集について
  • このとき、HTMLが得意なら、Aptanaで直接タグを編集することもできる
  • ただのHTMLなので、Adobe DreamweaverなどのWebページ編集ソフトでHTMLを作成することも可能。

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

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

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

slide58
(4) 実機をつないで実行!
  • [Debug As > Android Application]を実行!
slide59
開発の手順を実際に!
  • プロジェクト作成
  • WebブラウザでプレビューしながらHTMLを作成
  • DreamWeaverなどのツールで編集してみる
  • デバッグしてみる
5 android
(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
“droid.”から始まるメソッドは?
  • Android固有の機能を定義したもの
  • Aptana には、JavaScript の補完機能がある
  • “dorid.”と入力すると続きが出るので選ぶだけ

各種センサーやストレージ操作のための

メソッドが利用可能。

slide62
機能の記述例1
  • 端末を振ったら何かをするコード
  • 端末を振ったら表示ページを移動する場合

droid.watchShake(function(){

// ここに振ったときの処理を記述

});

droid.watchShake(function(){

// ここに振ったときの処理を記述

location.href = “index.html”;

});

slide63
機能の記述例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
(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;

}

});

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

<p>

<button onclick="droid.startIntent(\'geo:35.658883,139.745407\')">

 東京タワーを見る

</button>

</p>

slide66
コードを実際に見てみよう!
  • シェイクで音楽再生
  • Androidメニューの作成
  • マップ起動ボタン
jswaffle3
jsWaffleについての資料
  • (1) jsWaffleのマニュアル
    • jsWaffleのWebサイトのAPIリファレンス
  • (2) 生成したAndroidプロジェクトに、「/assets/www/jsWaffle.sdoc」というファイル
  • (3) 書籍「HTML5/JavaScriptで作るAndroidアプリ開発ガイドブック」毎日コミュニケーション刊
slide68
テンプレートデモを活用しよう!
  • jsWaffleには、まだまだたくさん機能がある
  • デフォルトテンプレートを見ることで、様々な機能が紹介されている。
    • 実現方法のソースコードを見ることも出来る。

Demo!

android html5 js
Androidアプリの製作はHTML5/JSで簡単になる
  • jsWaffle などのフレームワークを使うと、Javaの知識がなくても、Androidアプリが作れる
android9
Androidアプリを作ろう!
  • これからまだまだAndroidが増える
  • 2011年3月時点のアプリの数
    • iPhone の AppStore 33万本
    • Android Market 20万本
        • AppStoreに比べAndroid Marketは参入が容易であることを考えると、単純に、まだまだ少なく今後、大幅に増えるはず

vs

slide73
アプリはアイデア勝負の時代に!!
  • 既にいろいろなアプリがあるが、アイデア次第でまだまだヒットのチャンスがたくさん
  • 特に、Webの技術(HTML5/JavaScript)でアプリを作るのは…
    • 技術習得のロス時間がない
    • HTML(あるいはHTMLエディタ)さえ知っていれば作れる
    • HTML 5/JavaScriptは、 Javaアプリよりも、表現力があり、柔軟性が高い
1 android 2 31
このセミナーの目標・・・覚えていますか?(1) Androidアプリの作り方を覚える(2) 家に帰ってすぐ1つ作ることができる(3) 明日、作ったアプリを友達に自慢
ad