TOOLS

ノンプログラマーでもアプリが作れる！プロジェクト作成編

thumb003

前回は、アプリ開発のプラットフォームについて書きましたが、今回は実際にテストプロジェクトを作成してシミュレータで確認するところまでやりたいと思います。
Cordovaのコマンドラインツールをインストールしたので、実際にターミナルでコマンドを実行していきます。
 

プロジェクトってそもそもなに？

 
その前にこれから出てくる専門的な用語についてと、全体的なイメージについて話したいと思います。
ここでいうプロジェクトとは、アプリを作ってくデータのことを指します。
 
Webでいうところの、indexファイルと同じ階層になるすべてのディレクトリやファイルと同じイメージです。
 
001
 
実際のアプリデータはパッケージ化して、アプリとして起動します。
このパッケージ化をビルドといって、Webでいうところのサーバーにあげるようなイメージでしょうか。
 

Cordovaでプロジェクトを作ってみよう！

 
それでは、実際にプロジェクトを作成しつつ構造についてお話ししたいと思います！
流れとしては、下記のようになります！
 

 

テストプロジェクトを作成する

 
まずはターミナルを起動します。
ターミナルを起動して、プロジェクトを作成するフォルダへ移動します。
プロジェクトはフォルダ１つ作成されるだけなので、基本的にはどこに作成しても大丈夫ですが、私はappという専用のフォルダを作り管理しています。
 
もしパスがわからなければ下記のように実行すると、今いるパスが表示されます。
 

pwd

 
ここから移動していきます。
 

cd /Users/[ユーザー名]/[任意]/app

 
次は、ここにCordovaコマンドを使ってプロジェクトを作成します。
今回はテストプロジェクトなので、testprojectという名前のプロジェクトを作成していきます。
 

cordova create "testproject" "com.testproject" "testproject" -d

 
上のコマンドの意味は、Cordova createがCordovaのプロジェクト作成コマンド、次の“testproject”がフォルダ名、“com.testproject”がBundle Identifier（アプリの識別子のようなもの）、最後の“testproject”がプロジェクト名です。最後についている-dは途中経過を表示させますという命令です。
 
002
 
これで/Users/[ユーザー名]/[任意]/[app]フォルダに、testprojectの名前のフォルダが追加されているかと思います。
その中を確認していきます。
 
testprojectというフォルダの中は下記のようになっているかと思います。
 
003
 
このwwwフォルダの中にWebview用のデータを入れます。
 
004
 
なんだか見覚えのあるディレクトリ名ですね。ほとんどWebと同じなんです。
なので、制作する時はテストサーバーなどでコーディングしてここに入れてビルドという流れが速いと思います。
 
他にplatformsというフォルダがありますが、ここにiOSとAndroid用のデータが入っていきます。
 

プラットフォームを追加する

 
先ほど記載した、platformsというフォルダにiOSとAndroid用のデータを入れるということなんですが、これらもターミナルで追加していきます。
現在のターミナルのフォルダの場所が/Users/[ユーザー名]/[任意]/[app]になっていると思うので、testprojectフォルダに移動します。
 

cd /Users/[ユーザー名]/[任意]/app/testproject/

 
そして、iOSのプラットフォームの追加は下記のようにコマンドを実行してください。
 

cordova platform add ios

 
Androidは下記のようなコマンドです。
 

cordova platform add android

 
ちなみに、ここで下記のように最後尾に@3.0.0などどかくことでバージョンを指定して追加することができます。
 
そうすると先ほどのtestprojectフォルダのplatformsに下記のようにデータが追加されています。
 
005
 
iosフォルダを見てみると、testproject.xcodeprojというファイルがあるかと思います。
 
006
 
このファイルのようにxcodeprojの拡張子のファイルがXcodeで編集するファイルです。
androidの場合はそのようなファイルはなく、Android Studioでandroidフォルダ内のファイルを編集していきます。
 
プラットフォームの追加なので、windowsやfirefoxosなども追加できます。
 

シミュレータで確認する

 
今度は、シミュレータ上で確認していきたいと思います。
iOSのシミュレータの起動コマンドは下記のようになります。
 

cordova emulate ios -d

 
上記コマンドを実行すると、ビルドも同時にされるのでつらつらと文字列が続いて、一番初めのビルドはちょっと時間がかかります。
 
ビルドが失敗していると、途中からBUILD FAILDの表示が赤く出ます。
ビルドが成功していると下記のように、** BUILD SUCCEEDED **という表示が出ると思います。
 
007
 
そうするとSimulatorアプリケーションが起動します。
 
次はAndroidのシミュレータを起動します。
 

cordova emulate android -d

 
またつらつらと文字列が続いていきます。iOSより時間がかかるような気もしますが、しばらく待ってください。
BUILD SUCCESSFULと表示されて、シミュレータが起動すればOKです！
 

最後に

 
これでテストプロジェクト作成と、シミュレータ上での起動、最初のビルドが完了です。
 
もしかしたら最初のビルドがエラーになるかもですが、そういう場合は何か必要なモジュールがないことが多いです。
 
なので環境構築の手順をもう一度見直して、必要なモジュールが足りてないかどうかと、バージョンが最新かどうかお確かめください！頑張ってください！
 
ここまで完了すれば、あとはアプリのコンテンツを作っていくことと、アプリリリース手順のみです。
 
iOSの場合は、プロジェクトの構造とアプリリリースの手順が少し複雑なので、次回からはそれらをまとめていきたいと思います！