Html5 javascript android seminar
This presentation is the property of its rightful owner.
Sponsored Links
1 / 77

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


  • 101 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

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

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) 明日、作ったアプリを友達に自慢


Html5 javascript android seminar

講師について

  • 酒徳 峰章 (クジラ飛行机)

    • 経歴:不動産関連会社、Webサービス制作会社などを経て、独立。くじらはんど代表。

    • 代表:日本語プログラミング言語「なでしこ」、テキスト音楽「サクラ」などのユニークなソフトを開発。日本語でかけるWIKI「KonaWiki」

    • 年に2,3冊ずつ、プログラミングやもの作りの楽しさを伝える目的で技術書を執筆している。

    • 受賞歴

      • 2001年 オンラインソフト大賞入賞

      • 2004年 未踏スーパークリエイター認定

      • 2010年 OSS貢献者賞 受賞

  • ソフト企画 「くじらはんど」http://kujirahand.com

最近書いた本


Android

話題のスマートフォン、Androidについて

Androidの開発環境について紹介

Androidや開発環境について


Android1

はじめに…Androidについて質問

  • Androidについて質問

    • Android携帯やタブレットを使っている方は?

    • iPhoneやiPadを使っている方は?

    • iPhone/iPadとAndroidを両方持っている方?

    • 次に携帯を買うなら、Android携帯を買うという方は?


Html5 javascript android seminar

ちなみに・・・

  • 優秀な、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以降に対応


Html5 javascript android seminar

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


Android6

自作Androidアプリの配布方法苦労して作ったアプリどのようにして使ってもらえるか

  • (1) Android Market

    • 手軽に世界中に配信できる一番推奨する方法

  • (2) 独自のWebサイトで配信

    • 各携帯キャリアもこの方法でもアプリを配信

    • 世界中ではなく、特定の人だけが使うアプリも配信可能(例えば社内ツールなど)

  • (3) SDカードで配布

    • イベントなどで特定の人の配布可能


Android market

Android Marketで世界に配信すること

  • OSが無料というだけではない!!

  • Android Marketを使って、世界中にアプリを配信できる!

    • 個人でも世界と対等に戦える

    • アプリのインストールが簡単

    • Apple App Storeよりも手続きが簡易、審査も最低限

Android Marketは課金可能なため

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


Android7

どのようにしてAndroidの開発ができるのか?

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 javascript android

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

HTML5/JavaScript+Android


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 といったツールを使う)


  • Html5 javascript android seminar

    開発環境別の特徴

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


    Html5 javascript android seminar

    開発環境別の特徴

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


    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の機能で、メールソフトやバーコードスキャナーアプリと連携


    Jswaffle2

    jsWaffle でどんなアプリが作れるのか?

    jsWaffleで作られたアプリ紹介


    Html5 javascript android seminar

    ガジェットなど

    • ストップウォッチ

    • 「StopWatch-シンプル」(Android Market登録済み)


    Html5 javascript android seminar

    ガジェットなど

    • 時計、電卓などのガジェットなど

    • 画像を差し替えれば、いろいろなバージョンが!


    Html5 javascript android seminar

    辞書やデータベース

    • データベースやローカルストレージの利用

    • 「最小英和辞典」(4万語:6MB辞書) (Android Market登録済み)


    Html5 javascript android seminar

    ゲームなど

    • パズル、クイズ、落ちモノ系などサクサク動く


    Html5 javascript android seminar

    DEMO


    Html5 javascript android seminar

    10分の休憩


    Html5 javascript android seminar

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

    開発環境の準備


    Html5 javascript android seminar

    準備する開発ツール

    • 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 で動作無料(オープンソース)


    Html5 javascript android seminar

    インストールの手順

    • 1.Android SDK Tools をインストール

      • セットアップを実行すると最新のSDKがインストールされる

    • 2.Aptana をインストール

      • AptanaにADTプラグインを導入

      • Android SDKのパスを設定

    • 3.jsWaffleをインストール

    • 3つのツールをインストールすることになるので若干面倒に感じるものの、手順自体は単純。

    • より詳しい手順は、右のURLを参照。

    • http://goo.gl/whSEH


    Html5 javascript android seminar

    インストールで分かりづらい部分

    • ソフトをインストールして終わりではない

    • Aptanaをインストールしてから

    • ADTプラグインのインストール

    • Android SDKをAptanaに設定するところ

    • エミュレータ

      • 画面サイズやOSを指定して作成する必要

    • Android端末のUSBドライバのインストール


    Android8

    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 がある

    • これが、アプリケーションのメインファイルとなるので、自由に書き換えて作る


    Html5 javascript android seminar

    (4) 実行する

    • ツールバーにある[Debug]ボタンをクリック


    5 index html

    (5)index.html を編集する

    • Aptanaの「/assets/www」フォルダに、メインファイルのindex.html がある

    • このとき、wwwフォルダに、他のHTMLファイルや画像、MP3、CSS/JSなどを配置すれば、

    • リンクしたり、表示したり、再生したりすることが可能


    Html5 javascript android seminar

    開発の手順を実際に!

    • 手順確認

    • Index.htmlを書き換えて実行

    • 画像を配置してみる


    Html5 javascript android seminar

    HTML5で作ったページがそのままアプリになるだけでも魅力ですが、

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

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

    |||| サンプルアプリの製作


    Html5 javascript android seminar

    サンプル~「動く絵本」制作

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

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

    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 ブラウザで動作確認できます!


    Html5 javascript android seminar

    (4) 実機をつないで実行!

    • [Debug As > Android Application]を実行!


    Html5 javascript android seminar

    開発の手順を実際に!

    • プロジェクト作成

    • 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.”と入力すると続きが出るので選ぶだけ

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

    メソッドが利用可能。


    Html5 javascript android seminar

    機能の記述例1

    • 端末を振ったら何かをするコード

    • 端末を振ったら表示ページを移動する場合

    droid.watchShake(function(){

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

    });

    droid.watchShake(function(){

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

    location.href = “index.html”;

    });


    Html5 javascript android seminar

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

    }

    });


    Html5 javascript android seminar

    (7) 地図の起動ボタンを書く

    • droid.startIntent()コマンドで、ほかのAndroidアプリを起動できる。例えば、「geo:緯度,経度」でマップアプリで地図を表示可能!!

    • 散歩アプリに地図表示リンクを追加

    <p>

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

     東京タワーを見る

    </button>

    </p>


    Html5 javascript android seminar

    コードを実際に見てみよう!

    • シェイクで音楽再生

    • Androidメニューの作成

    • マップ起動ボタン


    Jswaffle3

    jsWaffleについての資料

    • (1) jsWaffleのマニュアル

      • jsWaffleのWebサイトのAPIリファレンス

    • (2) 生成したAndroidプロジェクトに、「/assets/www/jsWaffle.sdoc」というファイル

    • (3) 書籍「HTML5/JavaScriptで作るAndroidアプリ開発ガイドブック」毎日コミュニケーション刊


    Html5 javascript android seminar

    テンプレートデモを活用しよう!

    • jsWaffleには、まだまだたくさん機能がある

    • デフォルトテンプレートを見ることで、様々な機能が紹介されている。

      • 実現方法のソースコードを見ることも出来る。

    Demo!


    Html5 javascript android seminar

    HTML5/JavaScriptで作るAndroidアプリ開発について

    まとめ


    Android html5 js

    Androidアプリの製作はHTML5/JSで簡単になる

    • jsWaffle などのフレームワークを使うと、Javaの知識がなくても、Androidアプリが作れる


    Html5 js java

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


    Android9

    Androidアプリを作ろう!

    • これからまだまだAndroidが増える

    • 2011年3月時点のアプリの数

      • iPhone の AppStore 33万本

      • Android Market 20万本

        • AppStoreに比べAndroid Marketは参入が容易であることを考えると、単純に、まだまだ少なく今後、大幅に増えるはず

    vs


    Html5 javascript android seminar

    アプリはアイデア勝負の時代に!!

    • 既にいろいろなアプリがあるが、アイデア次第でまだまだヒットのチャンスがたくさん

    • 特に、Webの技術(HTML5/JavaScript)でアプリを作るのは…

      • 技術習得のロス時間がない

      • HTML(あるいはHTMLエディタ)さえ知っていれば作れる

      • HTML 5/JavaScriptは、 Javaアプリよりも、表現力があり、柔軟性が高い


    1 android 2 31

    このセミナーの目標・・・覚えていますか?

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


    Html5 javascript android seminar

    参考書籍


    Html5 javascript android seminar

    終わり。お疲れ様でした!


  • Login