Monacaの試用版(書籍についていたクーポン券)を使って、アプリを作ってみました。
一通り使ってみて、スマホアプリを作るなら、とてもお手軽なIDEだなーと思います。
この手のIDEのなかで一番スッと使えました。学習コストって低ければ低いほどいいですよね。
高校や大学の先生が教材に使ってるのも頷けます。
しかし、npmからインストールできる様々なライブラリが(試用版だからなのか)権限がなくて-gオプションでインストールできなかったので、その場合どうするのかシェアします。
package.jsonの中身
プロジェクトのトップレベルには、package.json
というファイルがあります。
そのファイルには、"scripts"という項目があります。
package.json
{
"name": "monaca-template-minimum",
"displayName": "Monaca Template Minimum",
"dependencies": {
"@mapbox/polyline": "^1.0.0",
"browserify": "^16.2.3",
"cordova-custom-config": "5.0.2",
"cordova-plugin-dialogs": "2.0.1",
"cordova-plugin-splashscreen": "5.0.1",
"cordova-plugin-vibration": "2.1.6",
"cordova-plugin-whitelist": "1.3.3",
"gtfs-realtime-bindings": "0.0.4",
"monaca-lib": "^3.1.0",
"monaca-plugin-backend": "2.0.1",
"monaca-plugin-monaca-core": "3.2.1",
"pg": "^7.7.1",
"request": "^2.88.0"
},
"scripts": {
"monaca:preview": "npm run dev",
"dev": "browser-sync start -s www/ --watch --port 8080 --ui-port 8081",
"build1": "browserify www/js/getVehicle.js > www/js/vehicle.js",
"build2": "browserify www/js/git-polyline.js > www/js/polyline.js",
"build3": "browserify www/js/getRouteInfo.js > www/js/route.js",
"build4": "browserify www/js/getAlert.js > www/js/alert.js"
},
"cordova": {
"plugins": {
"cordova-plugin-whitelist": {},
"cordova-plugin-splashscreen": {},
"cordova-custom-config": {},
"monaca-plugin-monaca-core": {},
"cordova-plugin-dialogs": {},
"cordova-plugin-vibration": {},
"monaca-plugin-backend": {}
}
},
"devDependencies": {
"browser-sync": "^2.26.3",
"cordova": "^7.1.0"
}
}
"scripts"にはbuild1などのコマンドが入っています。
build1など、エイリアスを作り、対応するコマンドを登録します。
"build1": "browserify www/js/getVehicle.js > www/js/vehicle.js"
Terminalを起動
monacaのブラウザ版IDE画面には、Preview Log、Debuggerタブの他に、Terminalというタブがあります。
Welcome to Monaca Terminal Console!
/project $ npm run build1
通常、
npm install -g browserify
browserify www/js/getVehicle.js -o www/js/vehicle.js
などとダイレクトにコマンドを使うところで
npm run {上記コマンド}
を使うと、グローバルにコマンドをインストールしたり実行する権限なくても動きます。