ページ

2019年2月2日土曜日

Cordovaでアプリ作成

これまでにCordovaの開発環境の準備をしてきましたので、まずは基本中の基本操作をしてサンプルアプリを作成してみます。構築メモはこちらから。

1. プロジェクト作成

cordova createコマンドでプロジェクトを作成します。

$ cordova create firstsample com.example.firstsample FirstSample -d
Using detached cordova-create
Creating a new cordova project.
Copying assets."

firstsample … ディレクトリ
com.example.firstsample … 逆引きドメインスタイル識別子
FirstSample … タイトル

現バージョン(8.1.2)では以下のようなフォルダ構成ができます。

$ ls -og --group-directories-first
total 5
drwxr-xr-x 1 0 Feb 2 20:18 hooks
drwxr-xr-x 1 0 Feb 2 20:18 platforms
drwxr-xr-x 1 0 Feb 2 20:18 plugins
drwxr-xr-x 1 0 Feb 2 20:18 res
drwxr-xr-x 1 0 Feb 2 20:18 www
-rw-r--r-- 1 991 Feb 2 20:18 config.xml
-rw-r--r-- 1 373 Feb 2 20:18 package.json

次にプラットフォームを追加します。私はAndroidしか使わないのでとりあえずそれだけ。

$ cordova platform add android

$ cordova platform ls
Installed platforms:
 android 7.1.4
Available platforms:
 browser ~5.0.1
 ios ~4.5.4
 osx ~4.0.1
 windows ~6.0.0

ここまでで最低限の準備はOKですかね。


2. Visual Studio Codeで使う

先ほど作ったプロジェクトフォルダをVSCodeで開きます。


左端のアクティビティバーのデバッグボタンをクリックします。
左上で「デバッグ」の構成が選択できますので、ここで歯車アイコンをクリックして「Cordova」を選択します。


当面はブラウザで作業を行いますので「Simulate Android in browser」を選択します。
デバッグ開始を行うと以下のようにブラウザが起動し初期画面が表示されました。


これであとはコードを加えて作っていく感じですね。