長野エンジニアライフ

東京から長野に移住しました。

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が作成される。 f:id:kawakeee:20201103220510p:plain

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 ...

(メモ) 実行するとworkshopディレクトリ配下に、platformsとpluginsディレクトが生成される。 f:id:kawakeee:20201103221748p:plain

プラグインの追加

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

(メモ)チュートリアルで指定しているプラグイン名は古いため、修正しています。

stackoverflow.com

workshopディレクトリの構造について

9.workshop配下の構造について説明しておきますね。

  • wwwディレクトリは、HTML/JavaScriptアプリをコーディングする場所です。index.htmlファイルをブラウザで開くと、Cordova CLIによって生成されたデフォルトアプリが確認できます。

    (メモ) 開くとこんな感じ
    f:id:kawakeee:20201103222934p:plain

  • platformsディレクトリは、Cordovaがアプリをそれぞれのプラットフォーム用にビルドした成果物が格納される場所です。このディレクトリに格納されるもの(ビルド成果物)は、Cordova CLIによって自動で生成されます。このディレクトリ内のファイルを編集することはありません。

  • 追加するプラグインpluginsディレクトリに格納されます。

  • config.xmlではアプリ情報(name, author等)が記述されるファイルです。

原文/参考記事

ccoenraets.github.io

次のチュートリアル

kawakeee.hatenablog.com