crodova開発環境を構築してマルチプラットフォームアプリを作る

2015年あたりに自社サービスのスマートフォンアプリをApache Cordovaで作っていて最近そのアプリを久しぶりにアップデートする機会があったので昔の記憶を辿りながら構築方法をメモ。
cordovaを拡張して作られているionicというさらに便利なフレームワークもあるんですが今回はあえてcordova単体での記事とします。
まずはcordova環境を作ってブラウザで確認するところまで。マシンはiosのビルドも行うので必然的にmac。

2015年当時では

* モバイルアプリ開発フレームワーク cordova
* UIフレームワーク onsenui
* タスクランナー grunt

上記のような組み合わせでios, androidアプリを実装してました、懐かしい！
onsenuiも当時はangularJsにしか対応してなかったような記憶がありますが今はangularはもちろんreact, vueでも開発できるようになってるようですね。
gruntは流石にもう使わないとしてもonsenuiなどはすごく進化してるようなのでこちらは新しくしらべてそのうち記事にできたらなあと思ったり。

cordovaをインストール

$ npm install -g cordova

$ cordova info
Collecting Data...


Node version: v11.1.0

Cordova version: 8.1.1

Config.xml file:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.sjisjis.cordova" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>cordova-project</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="dev@cordova.apache.org" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="^7.1.4" />
    <engine name="ios" spec="^4.5.5" />
    <engine name="browser" spec="^5.0.4" />
</widget>


Plugins:

cordova-plugin-whitelist

Android platform:

Available Android targets:
----------
id: 1 or "android-23"
     Name: Android 6.0
     Type: Platform
     API level: 23
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : no ABIs.
----------
id: 2 or "android-24"
     Name: Android 7.0
     Type: Platform
     API level: 24
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : android-tv/x86, default/arm64-v8a, default/armeabi-v7a, default/x86, default/x86_64
----------
id: 3 or "android-25"
     Name: Android 7.1.1
     Type: Platform
     API level: 25
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in, AndroidWearRound, AndroidWearRound360x360, AndroidWearRound400x400, AndroidWearRound480x480, AndroidWearRoundChin320x290, AndroidWearRoundChin320x300, AndroidWearRoundChin360x325, AndroidWearRoundChin360x326, AndroidWearRoundChin360x330, AndroidWearSquare, AndroidWearSquare240x240, AndroidWearSquare320x320, AndroidWearRound, AndroidWearRound360x360, AndroidWearRound400x400, AndroidWearRound480x480, AndroidWearRoundChin320x290, AndroidWearRoundChin320x300, AndroidWearRoundChin360x325, AndroidWearRoundChin360x326, AndroidWearRoundChin360x330, AndroidWearSquare, AndroidWearSquare240x240, AndroidWearSquare320x320
 Tag/ABIs : android-tv/x86, android-wear/armeabi-v7a, android-wear/x86
----------
id: 4 or "android-26"
     Name: Android 8.0.0
     Type: Platform
     API level: 26
     Revision: 2
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : no ABIs.
----------
id: 5 or "android-27"
     Name: Android 8.1.0
     Type: Platform
     API level: 27
     Revision: 3
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : no ABIs.
----------
id: 6 or "android-28"
     Name: Android 9
     Type: Platform
     API level: 28
     Revision: 6
     Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
 Tag/ABIs : no ABIs.



iOS platform:

Xcode 10.1
Build version 10B61

cordovaのブロジェクトを作成

# id -> com.sjisjis.cordova 
# app-> アプリ名
# cordova-project ->　プロジェクトのディレクトリ名
$ cordova create app  com.sjisjis.cordova cordova-project

cordovaでios, android, browserのプラットフォームを追加

$ cordova platforms add ios android browser

$ cordova platforms ls
Installed platforms:
  android 7.1.4
  browser 5.0.4
  ios 4.5.5
Available platforms:
  osx ~4.0.1
  windows ~6.0.0

ブラウザで確認

$ cordova run browser
startPage = index.html
Static file server running @ http://localhost:8001/index.html
CTRL + C to shut down
304 /index.html
304 /css/index.css
304 /cordova.js
304 /js/index.js
304 /img/logo.png
304 /cordova_plugins.js

これをやるだけでlocalhostで以下のような画面が立ち上がります。

f:id:sjisjis:20190119232137p:plain — cordova

cordova-project/www/index.html を変更すれば画面を編集できます。 ios, androidの実機やエミュレータで動作させるのも比較的簡単に出来ますが少し癖があったりもするので次の記事で詳しく書いていこうと思います。

better done than better said

困ったときに調べた結果

crodova開発環境を構築してマルチプラットフォームアプリを作る