【Phonegap/Cordova 入門02】 環境構築と実機で動作確認

みなさん、こんにちは!
前回は、Phonegap/Cordovaの概要について記述しました。
(前回記事はこちら⇒【Phonegap/Cordova 入門01】そもそもPhonegapってなに?)
今回は、Phonegapの開発環境を整えていきます。環境構築はかなり楽な部類かと思います。(ローカルビルド環境を作るのでない限り)
手順概要としては以下の通りです。

  1. Node.jsをインストール
  2. npmでPhonegapをインストール

 

まずは、Node.jsを入手しましょう。
本家サイトからダウンロードできます。

Node.js ダウンロードページ

各人のOSに合わせたものをダウンロードします。私はWindowsっこなので、Windows InstallerのLTS(Recommended For Most User)というものを選択しました。

ダウンロードが完了したら、ファイルを実行してインストーラを起動します。
Windows版をダウンロードしたならmsiかexeファイルなので、ダブルクリックでokです。
後は、表示されるインストールガイドに従って進めていけば問題ないはずです…
Node.jsのインストールが完了したら、今度はPhonegapのインストールを行います。
Windowsの場合、コマンドプロンプト(スタート⇒cmdと打てばokです)を立ち上げて、

npm install -g phonegap

を入力、Enterします。たぶん、きっと、エラーなくインストールできるはずです。
以上で、Phonegap開発環境が整いました。早い!簡単!
それでは!Phonegapの世界に踏み出しましょう!

さて、早速新規プロジェクトを作成します。作成のためのコマンドは以下の通りです。

phonegap create (プロジェクト名)

とりあえず、何がしかのPhonegapプロジェクトを作ってみましょう。my_sampleというサンプルプロジェクトを作ってみます。作成するフォルダはお好きな所で。私の場合は、C:/Users/Document/PhonegapApps/ のようなフォルダを作ってそこに納めています。

phonegap create my_sample

これでもう動くプロジェクトができています。
カレントディレクトリに、my_sample というフォルダが作成されていますので、中身を見てみます。きっと下記のようなファイル/フォルダが生成されていると思います。

mysample

ここで、とりあえず重要なファイル/フォルダは、wwwというフォルダと、config.xmlです。config.xmlは、アプリ名やアプリで使用するプラグイン等を記述するためのxmlです。別の回で説明する予定ですが、Phonegap Buildというサービスを使用してビルドを行う場合は、必ずここにプラグインを書きます。ローカルビルドの場合は不要かもしれません。(私はいつもPhonegap Buildなんでなんとも…)

で、wwwというフォルダ以下にソースコード類が納められます。さらにwwwに移動しましょう。

www直下に、index.htmlというファイルがありますね。これがデフォルト起動するページです。ブラウザで見てみましょう。

phonegap_index

はい。謎のロボとPHONEGAPの文字が表示されたページが見れると思います。このページは、

  • index.html
  • js/index.js
  • css/index.css

によって記述されています。はい。よくあるWebページと同じですね。.htmlに構造を、css/*.cssで見た目を、js/*.jsで動作を記述します。もちろん、javascriptは、用途によってさらにフォルダ分けしても良いですし、とにかく自由です。

それでは、次に、実機でどんな見た目になっているのか確認してみましょう。

実機デバッグを行うには、Phonegap Developerというアプリを対象の端末にインストールしておく必要があります。Androidなら、PlayストアでPhonegapとかって検索するとすぐに見つかります。
端末側でアプリのインストールが完了したら、今度はPC側でコマンドプロンプトを開き、プロジェクトルート(今回の例だと、my_sample)に移動し、

 

phonegap serve

とコマンドを打ちます。すると、画面にIPアドレスが表示され、待機モードになります。

serve

今度は、スマホで側で先ほどインストールしたPhonegap Developerアプリを開き、コマンドプロンプトに表示されているアドレスをポート番号も含めて入力します。この時、PCとスマホは、同じ無線ネットワーク上に存在する必要があります。ここ注意です!

入力が完了したら、Connectみたいなボタンを押下すると、PC側にアプリから繋ぎに来ます。失敗、みたいなメッセージが出たら、PCとスマホが同一ネットワークに接続しているか、IPアドレスの入力間違いはないか、などを確認して、再度Connectします。ネットワークも、IPも正しいのに何故か失敗することもありますが、2,3回トライすれば成功することも多いです。
接続に成功すると、アプリ側には先ほど見たロボットとPHONEGAPの文字が表示され、PC側のコンソールにはログがたくさん出ている、みたいな状態になると思います。

これで実機での動作確認ができます。

開発の手順としては、

  1. ソース書いていく
  2. ブラウザで動作確認を行う
  3. 実機デバッグする

という感じですね。はい。

今回はここまでです。次回は、やっとソースコードを修正していきますよ!

 

次の記事はこちら⇒【Phonegap/Cordova 入門03】ボタン押下でHello,Worldするアプリを作る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です