Cordovaでハイブリッドのテンプレ作るまでまとめ(Cordova+OnsenUI+vue.js)

最近職場の人間と余暇を使ってサービス作りをしているのですが、そこで低コストに素早いリリースをするためには、という観点で色々検証しています

なぜCordova＋OnsenUI＋vue.js？

余暇でのサービス作りですのでiOS, androidで別々のリソースは割けない、かつソリューション自体にお金をかけたくない…です
というわけでまずはマルチプラットフォームの実現方法としてCordovaを採択しました

あとはどんだけ楽してUI作るかという話なのですが、今作ろうとしているものの見えている要件はそこまで複雑ではありません、Javascriptを書くにあたりAngularかReactかという議論はあれどもどちらもそこそこ学習コストがかかります
あとでメンバを追加することを考えると学習コストがかかるソリューションはあまり得策ではありません

というわけで適当に作れるOnsenUIと学習コストを少なくするべくvue.jsの組み合わせで作り始めています
もちろん作る過程で要件が複雑化した際にはReactへの切替も検討しますが、今のところはこれで十分なはず

どうやってテンプレを作るか

Facebookの開発者登録は必要ですが、何も考えないで下記を実行すればFacebookへのログイン機能を備えたテンプレが作成できます(node)
FacebookのAPP_IDとかの割り出しについてはここあたりを参照すれば良いでしょう

$ npm install -g vue-cli
$ vue init OnsenUI/vue-cordova-webpack my-project
$ cd my-project
$ npm install
$ cordova plugin add cordova-plugin-facebook4 --save --variable APP_ID="１２３４５６７８９０" --variable APP_NAME="your_app_name"
$ cordova platform add ios
$ cordova platform add android
$ npm run build
$ cordova prepare

vue.jsを取り扱うためのvue-cliを使ってCordova用のテンプレを引っ張ってきてそのテンプレ上でプラグインの追加、各プラットフォームの追加を行います
その後、Javascriptのビルドを実施して、Cordova用にファイルの配置を行っています

gitignoreの設定

gitignoreは下記のように設定しました

.DS_Store
node_modules/
/dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# iOS
platforms/ios/build/
platforms/ios/www/
platforms/ios/cordova/console.log
*.xcuserdatad

# android
platforms/android/assets/www
platforms/android/bin
platforms/android/gen
platforms/android/local.properties
platforms/android/ant-build
platforms/android/ant-gen
platforms/android/CordovaLib/ant-build
platforms/android/CordovaLib/ant-gen
platforms/android/CordovaLib/bin
platforms/android/CordovaLib/gen
platforms/android/CordovaLib/local.properties

plugins/

# res
resources/signing

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln

補足

npmを使うためにnodeを使いますが、バージョンが入り乱れているので、バージョンは使い分けを行っておいた方が良いでしょう
nvmやnodebrewなどを使うと幸せになれるかもしれません