PAGE TOP


Androidアプリ開発 PhoneGapによる開発環境と実機での実行のメモ

2017年6月20日Android

PhoneGap概要

PhoneGapとはオープンソースのフレームワークでこれを使うと、JavascriptやHTML5を使って、Android・iOSアプリを作ることができます。ネイティブアプリではなく、ハイブリットアプリとか言われてるやつです。基本的には、普通のアプリと同じですが、イメージとしては、アプリ内のブラウザに、WEBアブリを表示しているようなものです。なので、過去にWEBサイトに、javascriptでゲームを作った方などは、少し編集してアプリとして公開できるかもしれません。Adobe PhoneGapというものがありますが、これをPCにインストールすると、プロジェクトの新規作成・削除や、WEBブラウザでデバックすることができますが、一部、うまく動いてない部分もあったので、正直、いらないかなと思ったので、デバックは実機で行い、こちらはアンインストールしました。今回は、Windows7 64bitで製作しました。

開発環境を整える

①まずはNode.jsをインストールする。

npm install -g phongap

②Android SDK tools が必要な為、Android Studio2.3.3をインストールする。(SDKがセットになったものをインストールする。)
ただ、この時点では、このバージョンのパッケージでは、削除されたフォルダがあり、PhoneGapコマンドを使うと、Androidに関連したコマンドだけ正常にうごかない。理由は、Android Studio2.3.3では、C:\Users\sumidai\AppData\Local\Android\sdk\tools 下にあるtamplats ディレクトリがまるごと消去されているためである。
その為、前のバージョンのコマンドツール
tools_r25.2.3-windows.zip だけインストールして、その中からtemplatesフォルダまるごとコピーし、それを補う必要がある。

③CordovaがAndroid版をビルドできるようにパスを通します。システムの環境変数の設定が必要。

C:\Users\sumidai\AppData\Local\Android\sdk\tools
C:\Users\sumidai\AppData\Local\Android\sdk\platform-tools

プロジェクトを作る

まずは、node.jsのコマンドより、アプリを作るフォルダに移動します。私の場合は、C:\phonegape　というフォルダを作り、その配下に、アプリを起きました。
C:\phonegape\ に移動し、下記のコマンドで、新しいプロジェクトを作ります。
phonegap create [プロジェクト名]

phonegap create test_01

反映されます。このあたりは適当で…
デフォルトで、helloworldと既にあるので、そのまま次に進んでください。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
</head>

<body>
    


<div class="app">

<h1>Test 01</h1>


<div id="deviceready" class="blink">


Hello World

        </div>



    </div>



    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22cordova.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22js%2Findex.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>

</html>

Hello Worldを実機で表示する

index.htmlの編集が終わったら、ビルドとでバックを行います。C:\phonegap\test_01\で、下記のコマンドで行いますが、その前に、実機を通信用のケーブルでPCと接続しておく必要があります。実機の方も開発モードにしておいてください。

phonegap run android

このコマンドは、ビルドとデバックを同時に行うようです。

 

また他にも下記のような、コマンドがあるようですが、今のところ利用していません。特に、エミュレータでの起動は、Eclipseやandroid studioでも実機ほど早くないので、ストレスがたまるので、今後も使うことはないと思いますが…

プロジェクトをビルドする。

phonegap build test_01

エミュレータを実行する

phonegap emulate test_01

リリース

こちらもAndroid Studioで開発するのと同様に、ビルドしたときに、作成されるapkファイルをgoogleplayにアップロードすることで、リリースできます。今回の場合だと、C:\phonegap\test_01\platforms\android\build\outputs\apk\app-debug.apk にあります。また、公開とはいかなくても、自分用又は、友達用にリリースしたい場合は、WEBサーバー又は、クラウドでファイルを共有して、スマフォでダウンロードして、実行してもらえば、スマフォにインストールすることができます。