Cordova開発環境の構築-PART2

ここまでのあらすじ

HTML5でスマホ向けのネイティブアプリが作れるCordovaに一目惚れしたので、使い方を研究します。
PART1を見に行く

スポンサードリンク
↓ 記事の続きはこちらから

Cordovaがインストールされているか確認

前回の記事の最後にやるべきでしたが、Cordovaのインストールが無事に完了したら、それを確認する為にバージョンを確認します。

確認したところ5.1.1らしいです。
そういう訳でこの備忘録はCordova5.1.1についての記事となります。
バージョン違いによる差異はご容赦ください。
ここでバージョンが表示されない場合は、管理者権限でインストールしていない等の理由で導入に失敗しているものと思われます(体験談)

インストール手順を見なおしてみてください。

プロジェクトを作成する

Cドライブ直下にCordovaのプロジェクトをもりもり作られても若干困るので、
c:\cordovaという、いかにもcordova専用なディレクトリを作りました。
もしこの備忘録を読んで、Cordovaをインストールしてみようという方の中に、
cdとかlsとかdirとかいう言葉にピンとこない場合は、コマンドプロンプトなり、ターミナルなりの使い方を調べてから先に進むべきです(´・3・`)

cordovaのcreateコマンドを解説

  • プロジェクトを管理するディレクトリ名
  • 識別子
  • アプリ名

引数に-dを加えると、やっている事を逐次報告してくれるようです。
npmは-gだったので、若干ややこしいか・3・

プロジェクトの作成が完了したら、cdコマンドでプロジェクトのディレクトリに移動します。
(今回は\cordova\test01)

識別子について

Javaでパッケージ(同じプログラムに関連するデータの集まり)のディレクトリ構成を決める時のルールがこんな感じで、Android等のディレクトリ構成の思想にも継承されているようです。
他のデベロッパ(個人なり団体なりの開発グループ単位)と被らないように、自分達を示すドメインをドット(.)で区切って逆から読むのが一般的らしい。
その最後尾に、自分がつくったアプリ同士の置き場が被らないように、違う名前を加える感じです。

つまり今回の例だと、私ならcom.presentcall.test01になります(`・ω・´)

「example.com」は、URLやドメインの例として使っても良いと、正式に定められている予約ドメインです。
存在するかもしれないし、しないかもしれないものを適当に書いたら問題に発展しかねないので、example.comを使う訳ですな。

デバイスの追加と削除

プロジェクトのディレクトリに移動している状態なら、dirコマンドなりlsコマンドなりで、

  • config.xml
  • hooks
  • platforms
  • plugins

といったファイルやらディレクトリが存在しているはずです。

作成済みプロジェクトを確認するコマンドを入力します。

Installed platforms(インストールされたデバイス)は空欄で、
Available platforms(利用できるデバイス)には、名前くらいは聞いた事ありそうなのがごろごろしています。

注目すべきなのは、Available platformsにiOSが表示されるのはMac版だけだった点です。
逆にWindows系のアプリを作成できるのはWindows版だけのようです。

最終的にそのプラットフォームのアプリとしてビルドしないといけない事を考えると、当然と言えば当然かもしれませんが。

ひとまずandroid環境を追加してみる事に。

追加できるデバイスは先ほどの確認で、Available platformsに入っているデバイスです。
この表記をplatform add に続けて書けば追加されます。

削除する場合はaddの部分を、removeに変えます。

serveとブラウザで動作確認

開発マシンのブラウザを使って動作確認を行う場合は下記のコマンドを使います。
(デバイスを追加せずに行うと失敗したので、何か作っておく)

すると下記のようなメッセージと共に
Static file server running or port 8000
テスト用のURLが提示されます。
http://localhost:8000
(例です。環境や設定によって変動するかも?)

localhostとは、どこかに存在するサイトの名前ではなくて、要は自分自身という事です。

アクセスしてみると、画像のようなページが表示されます。
(もし他に同じポート番号を利用するソフトを動かしていると、正しく表示されないかもしれません。余計なソフトは終了してから試すのが良いと思います。)

cordovaをserveで起動した状態

デバイス一覧の中で、追加したデバイスだけがリンクになっています。
これをクリックすると、プロジェクトディレクトリのwwwディレクトリ内のテンプレート(html)が表示されます。

プロジェクト作成直後のHTMLデータは、Cordovaのロゴが表示されるサンプルとなっています。

cordovaサンプルの起動に成功

このhtmlをテキストエディタで確認すると、cordova.jsという、wwwディレクトリ直下には実在しないファイルを読み込もうとしている事がわかります。

ブラウザ側で挙動を確認すると、http://localhost:8000/{デバイス名}/www/cordova.jsというファイルが存在しているかのような挙動を行います。

ブラウザでcordova.jsのソースを表示させてみると、実行しているプラットフォームの名称がコメント表記されている等、内容を動的に変化させているのがわかります。

この仕組みでデバイス毎の違いを吸収しているのかもしれません。

そのような理由から、serveコマンドで提示されたURLではなく、wwwディレクトリのindex.htmlを直にブラウザで表示させると不都合が起きます。
cordova.jsが読み込まれなくなってしまう為、正しい挙動を行わなくなります。

要注意ですね・3・

ひとまずwwwディレクトリ内のhtmlを改変する事でアプリを作成できると判明しました。

チェックが終わったら、コマンドプロンプト(ターミナル)にCtrl + c のキー入力を行って、serveモードを終了させます。

なお、serveコマンド実行時の状態でファイル内容が固定されるようです。

ソースコードの修正などを行って内容を確認したい場合は、一度終了させてから、再度serveコマンドを入力しなおす必要があります。

ブラウザのリロードだけを行っても、修正前の古いデータを読み込みにいってしまい意味がありません。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください