Module 1: Creating a Cordova Project（和訳）
ステップ
Node.jsのバージョン確認
1.最新バージョンのNode.jsがシステムにインストールされていることを確認して下さい。
(メモ) 本記事では
v12.10.0で進めます👍
$ node -v v12.10.0
Cordovaのインストール
2.Macの場合は[ターミナル]を、Windowsの場合は[コマンドウィンドウ]を開いてください。
次に、Cordova CLIをインストールするために以下のコマンドを実行します。
$ npm install -g cordova
Macの場合は以下を実行
$ sudo npm install -g cordova
既にCordovaをインストール済みの場合は、最新バージョンにアップデートして下さい。
$ npm update -g cordova
または
$ sudo npm update -g cordova
作業ディレクトリの準備
3.作業するディレクトリに移動しておいて下さい
(メモ) 本記事では
study-cordovaを作業用ディレクトリとして進めます。👍
Cordovaプロジェクトの作成
4.Cordova CLIを使用して、workshopディレクトリにWorkshopという名でCordovaプロジェクトを作成しましょう。
$ cordova create workshop com.yourname.workshop Workshop
(メモ) 実行するとworkshopが作成される。
Cordovaプロジェクトへ移動
5.プロジェクトのディレクトリに移動します。
$ cd workshop
iOS/Androidプラットフォームの追加(任意)
6.iOSプラットフォームのサポートを追加します。
$ cordova platforms add ios
Using cordova-fetch for cordova-ios@~4.5.1
Adding ios project...
Creating Cordova project for the iOS platform:
Path: platforms/ios
Package: com.yourname.workshop
Name: Workshop
iOS project created with cordova-ios@4.5.5
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Failed to restore plugin "cordova-plugin-whitelist" from config.xml. You might need to try adding it again. Error: Failed to fetch plugin cordova-plugin-whitelist@1.3.4 via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Failed to get absolute path to installed module
--save flag or autosave detected
Saving ios@~4.5.5 into config.xml file ...
7.Androidプラットフォームのサポートを追加します。
$ cordova platforms add android
Using cordova-fetch for cordova-android@~6.3.0
Adding android project...
Creating Cordova project for the Android platform:
Path: platforms/android
Package: com.yourname.workshop
Name: Workshop
Activity: MainActivity
Android target: android-26
Subproject Path: CordovaLib
Android project created with cordova-android@6.3.0
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Failed to restore plugin "cordova-plugin-whitelist" from config.xml. You might need to try adding it again. Error: Failed to fetch plugin cordova-plugin-whitelist@1.3.4 via registry.
Probably this is either a connection problem, or plugin spec is incorrect.
Check your connection and plugin name/version/URL.
Failed to get absolute path to installed module
--save flag or autosave detected
Saving android@~6.3.0 into config.xml file ...
プラグインの追加
8.workshopディレクトリで、以下のコマンドを実行して基本的なプラグインを追加してください。
$ cordova plugin add cordova-plugin-device Installing "cordova-plugin-device" for android Installing "cordova-plugin-device" for ios Adding cordova-plugin-device to package.json Saved plugin info for "cordova-plugin-device" to config.xml
$ cordova plugin add cordova-plugin-console Installing "cordova-plugin-console" for android Installing "cordova-plugin-console" for ios Plugin doesn't support this project's cordova-ios version. cordova-ios: 4.5.5, failed version requirement: <4.5.0 Skipping 'cordova-plugin-console' for ios Adding cordova-plugin-console to package.json Saved plugin info for "cordova-plugin-console" to config.xml
なんかスキップされてるけど無視でok
workshopディレクトリの構造について
9.workshop配下の構造について説明しておきますね。
wwwディレクトリは、HTML/JavaScriptアプリをコーディングする場所です。index.htmlファイルをブラウザで開くと、Cordova CLIによって生成されたデフォルトアプリが確認できます。(メモ) 開くとこんな感じ
platformsディレクトリは、Cordovaがアプリをそれぞれのプラットフォーム用にビルドした成果物が格納される場所です。このディレクトリに格納されるもの（ビルド成果物)は、Cordova CLIによって自動で生成されます。このディレクトリ内のファイルを編集することはありません。config.xmlではアプリ情報(name, author等)が記述されるファイルです。