みなさん、こんにちは！
前回は、Phonegap/Cordovaの概要について記述しました。
(前回記事はこちら⇒【Phonegap/Cordova 入門01】そもそもPhonegapってなに？)
今回は、Phonegapの開発環境を整えていきます。環境構築はかなり楽な部類かと思います。(ローカルビルド環境を作るのでない限り)
手順概要としては以下の通りです。
- Node.jsをインストール
- npmでPhonegapをインストール
まずは、Node.jsを入手しましょう。
本家サイトからダウンロードできます。
各人のOSに合わせたものをダウンロードします。私はWindowsっこなので、Windows InstallerのLTS(Recommended For Most User)というものを選択しました。
ダウンロードが完了したら、ファイルを実行してインストーラを起動します。
Windows版をダウンロードしたならmsiかexeファイルなので、ダブルクリックでokです。
後は、表示されるインストールガイドに従って進めていけば問題ないはずです…
Node.jsのインストールが完了したら、今度はPhonegapのインストールを行います。
Windowsの場合、コマンドプロンプト(スタート⇒cmdと打てばokです)を立ち上げて、
を入力、Enterします。たぶん、きっと、エラーなくインストールできるはずです。
以上で、Phonegap開発環境が整いました。早い！簡単！
それでは！Phonegapの世界に踏み出しましょう！
さて、早速新規プロジェクトを作成します。作成のためのコマンドは以下の通りです。
[shell] phonegap create (プロジェクト名)[/shell]とりあえず、何がしかのPhonegapプロジェクトを作ってみましょう。my_sampleというサンプルプロジェクトを作ってみます。作成するフォルダはお好きな所で。私の場合は、C:/Users/Document/PhonegapApps/ のようなフォルダを作ってそこに納めています。
[shell]phonegap create my_sample[/shell]これでもう動くプロジェクトができています。
カレントディレクトリに、my_sample というフォルダが作成されていますので、中身を見てみます。きっと下記のようなファイル/フォルダが生成されていると思います。
ここで、とりあえず重要なファイル/フォルダは、wwwというフォルダと、config.xmlです。config.xmlは、アプリ名やアプリで使用するプラグイン等を記述するためのxmlです。別の回で説明する予定ですが、Phonegap Buildというサービスを使用してビルドを行う場合は、必ずここにプラグインを書きます。ローカルビルドの場合は不要かもしれません。(私はいつもPhonegap Buildなんでなんとも…)
で、wwwというフォルダ以下にソースコード類が納められます。さらにwwwに移動しましょう。
www直下に、index.htmlというファイルがありますね。これがデフォルト起動するページです。ブラウザで見てみましょう。
はい。謎のロボとPHONEGAPの文字が表示されたページが見れると思います。このページは、
- index.html
- js/index.js
- css/index.css
によって記述されています。はい。よくあるWebページと同じですね。.htmlに構造を、css/*.cssで見た目を、js/*.jsで動作を記述します。もちろん、javascriptは、用途によってさらにフォルダ分けしても良いですし、とにかく自由です。
それでは、次に、実機でどんな見た目になっているのか確認してみましょう。
実機デバッグを行うには、Phonegap Developerというアプリを対象の端末にインストールしておく必要があります。Androidなら、PlayストアでPhonegapとかって検索するとすぐに見つかります。
端末側でアプリのインストールが完了したら、今度はPC側でコマンドプロンプトを開き、プロジェクトルート(今回の例だと、my_sample)に移動し、
[shell]phonegap serve[/shell]
とコマンドを打ちます。すると、画面にIPアドレスが表示され、待機モードになります。
今度は、スマホで側で先ほどインストールしたPhonegap Developerアプリを開き、コマンドプロンプトに表示されているアドレスをポート番号も含めて入力します。この時、PCとスマホは、同じ無線ネットワーク上に存在する必要があります。ここ注意です！
入力が完了したら、Connectみたいなボタンを押下すると、PC側にアプリから繋ぎに来ます。失敗、みたいなメッセージが出たら、PCとスマホが同一ネットワークに接続しているか、IPアドレスの入力間違いはないか、などを確認して、再度Connectします。ネットワークも、IPも正しいのに何故か失敗することもありますが、2,3回トライすれば成功することも多いです。
接続に成功すると、アプリ側には先ほど見たロボットとPHONEGAPの文字が表示され、PC側のコンソールにはログがたくさん出ている、みたいな状態になると思います。
これで実機での動作確認ができます。
開発の手順としては、
- ソース書いていく
- ブラウザで動作確認を行う
- 実機デバッグする
という感じですね。はい。
今回はここまでです。次回は、やっとソースコードを修正していきますよ！
次の記事はこちら⇒【Phonegap/Cordova 入門03】ボタン押下でHello,Worldするアプリを作る
