こんにちは、フロントエンドの初心者のYちゃんです。スマートフォン向けのアプリケーションを作るために、自分の使えるフレームワークであるVueやNuxtを使ってやろうと思っていろいろ調べていると、Cordovaというフレームワークでアプリケーションを作れるというのを知って、いろいろ試したんですが、いろいろ詰まったので備忘録的に書き記しておこうと思います。
開発環境
私はWindowsでもろもろをやる変態エンジニアなのでいろいろ詰まってた感はあります。
- Windows 10 Pro Insider Preview 2004 Build 20190.1000(変態なのでInsider Previewerですがあまり気にしないでくださいw 普通のWindowsで十分だと思いますw)
- Android Studio Ver 4.0.1
- とりあえずインストールするだけでOK
- Node.js v12.18.2
- yarn 1.22.4
- Git for Windows 2.27.0
- Windows上で軽くUnixコマンドを扱うために入れています。
package.json内なんかでUnixコマンドを使うことがあるためです。なお、これはインストール時の設定によって変わるので、使えるようにしている場合とそれ以外の場合とで二通り紹介します。
- Windows上で軽くUnixコマンドを扱うために入れています。
そもそもなぜNuxt + Vue + Cordova?
Vue + Cordovaでええやん、と思う人は結構いると思うんですが、私自身フロントエンド初心者で東京都 新型コロナウイルス感染症対策サイトからフロントエンドを触り始めたので、扱えるフレームワークがNuxtとVue(とVuetify)なのです。調べれば解決するでしょうがVue単体を切り離して使う方法がわからないですし、自分の中でVueを使うならNuxtとセットという固定概念が出来てしまっているということでNuxt + Vue + Cordovaという選択肢に行き着いたのです。
開発開始
Gradleのインストール(設置)
Gradleというオープンソースのビルド自動化ツールを導入しておく必要があります。Android Studioが入っている時点で導入されているというお話があったんですが、結局わからなかったのでマニュアルインストールします。
Gradleは6.6が最新版なんですが、2020/08/22現在、最新版をインストールしても後のビルドの段階では6.5を使っているようなので、別に6.5でいいと思います。なので、今回は6.5をインストールしていきます。
ここにアクセスすると直接6.5のバイナリが落とせます。落とせたら、zipなので普通に開いてあげます。
この、gradle-6.5をそのままCドライブ直下にコピーしちゃいましょう。(Gradleの公式ドキュメントにはそう書いてあったので別にいいはず)
パスを通さなければなりませんが、次の章でまとめてやります。
環境変数の設定
Windowsなので、環境変数がいろいろめんどくさいです(Linuxなんかと違ってexportなんかが使えないので)。とりあえず[スタートボタン]->[設定]->[システム]->[詳細情報]から関連設定の[システムの詳細設定]を開き、一番下の[環境変数]まで行きましょう。そこまでいけば環境変数を設定できます。わからなければ、ここら辺の記事はいろんなところにたくさんあるので、ここでは解説しません...
編集するのはユーザー環境変数です。
まずは先ほどCドライブ直下に配置したgradleのパスを通します。
ユーザー環境変数のPathの中に入り、未使用の部分をダブルクリックするか右上の新規ボタンよりPathを追加していきます。
C:\gradle-6.5\binを追加してあげればよいです。
つぎにJDKのパスを通します。Android Studioをインストールした時点でJDKも同時にインストールしてくれるので、特に何もなければそれを使いましょう。学生はOracleからJDKを落とすのが難しいのでありがたい限りです。
それではAndroid Studioの設定からJDKのパスを取得しましょう。何もプロジェクトを作っていなければ右下の[Configure]->[Default Project Structure...]から、
すでにプロジェクトを作っていて、上のような初期画面が開かない場合は[File]->[Other Settings]->[Default Project Structure...]から、
以下の画面にアクセスできます。
この中のJDK locationをコピーします。
Gradleの時と同じようPathを追加していきます。
ここで注意ですが、先ほどコピーしたものを貼り付けるだけでなく、"\bin"を付け加えてください。でなければちゃんとパスが通りません。
以下の図、した二つの欄のようにできていれば、OKを押し、大本の環境変数画面もOKを押しましょう。コマンドプロンプトなどから"gradle -v"コマンドと"java -version"コマンドを叩き、それぞれが動けば大丈夫です。
GradleとJDKのパスを通すだけではありません。一つ設定しなければならない環境変数があります。ANDROID_HOMEです。先ほどのAndroid StudioのDefault Project Stractureに戻りましょう。まずはここのAndroid SDK locationをコピーします。
そして今度はユーザーの環境変数枠の中の[新規]ボタンより、環境変数を設定していきましょう。以下のようにすれば大丈夫です。(今回はそのまま貼り付ければ大丈夫です)OKを押して設定しましょう。
これにて環境変数の設定は終了です。この環境変数が設定できているかを確認するのはCordovaが動くかどうかなので今のところは確認できません...一応環境変数に関するウィンドウとコマンドプロンプトなどはすべて閉じておきましょう。(反映されないことがあるので)
Nuxtプロジェクトの作成
では、Nuxtプロジェクトを作っていきます。あれ、Cordovaのプロジェクトじゃないの？と思うかもしれませんが、それは後で作ります。
yarn create nuxt-app <project name>
まぁここはNuxtの公式ドキュメントにも書いてありますし、特に困ることはなさそうですね。
そのあとの設定は自由でいいですが、一つだけ注意点があって、Rendering modeはSPAにしましょう。Universalにして、SSGでも動くんですが、SPAのほうが事故らないはずです(axiosとか使ってる場合は特に...?私は初心者なのでまだ事故ったことがまだない...)。まぁ、あとからnuxt.config.js内のmodeを書き換えれるので結局どっちを選んでもあんまり変わりませんが...w
今回はプロジェクトネームをcordova-testとしました。
無事に生成できれば、cdしてプロジェクトディレクトリに入りましょう。
nuxt.config.jsを手直しする
題の通りです。nuxt.config.jsに以下のものを足したり、書き換えたりします。
-
headの中にscript: [{ src: "cordova.js" }]を足す
linkの下にでも足しておきましょう。これによってcordovaで動作します。
-
buildの中にpublicPath: "/nuxt/"を足す
cordovaが_nuxtというディレクトリを認識できない(正確には_を認識できない)ので、それに対応するために書き換えます。
-
routerを新設し、mode: "hash"を足す
routerという項目がデフォルトではないので付け加えてあげます。この設定はよくわからないんですが、/index.htmlが開かれないようにするためのよう...?いずれにせよcordovaにとって悪影響を及ぼすから変えなければならないようです。buildの下にでも入れておいてあげましょう。
-
modeをspaにする
プロジェクト作成の時点でSPAを選択している人は不要です。また、俺は/私はSSGで行くんや！って人は別にuniversalでもいいと思います。(確認した限りだと動くには動くようなので...どんな問題があるかは私にはわからないのでお勧めはしないです...)
これで一通り手直しは終わりました。
package.jsonのscriptを手直しする
generateコマンドの修正とcordova-run-androidのようなコマンドを作ります。
まずはgenerateの修正から。
"generate": "nuxt generate && rm app/www/* -r && cp dist/* app/www/ -r && replace '/nuxt/' 'nuxt/' app/www -r"
appディレクトリはCordovaのものです。後で作ります。なお、app以外のディレクトリで作成した場合はすべて別の名前に書き換えてください。
コマンドを解説していきます。nuxt generateはごく普通の、NuxtでHTMLやJSなんかを生成するコマンドです。
次のrm app/www/* -r&& cp dist/* app/www/ -rでは、cordovaプロジェクトのディレクトリにあるwwwというHTMLやCSS、JS、画像ファイルといったものを入れておくディレクトリの中身をいったん全削除し、先ほどのnuxt generateでdistディレクトリ内に生成されたものと入れ替えています。
最後にreplace '/nuxt/' 'nuxt/' app/www -rでは、Cordovaはルートディレクトリの都合上、/nuxt/が使えないので、nuxt/に置き換えています。
なお、これはGit for WindowsでUnixコマンドを使えるようになっている人向けのコマンドです。Linuxなどでも使用可能な形になっています。では、次にWindows標準コマンドを使ったバージョンを貼っておきます。
"generate-by-windows": "nuxt generate && del /s /q app\\www\\* && xcopy /e dist\\ app\\www && replace '/nuxt/' 'nuxt/' app/www -r"
generate-by-windowsとしましたが、これを使う場合は普通のgenerateコマンドとは分けたほうがいいです。(windowsでしか使えないコマンドをいれているわけなので)
なお、どちらにも出てくるreplaceコマンドについてですが、これは
yarn add replace
でプロジェクト自体にくっつけるか、
yarn global add replace
でグローバルに埋め込むかすれば使えます。個人的にはプロジェクト自体にくっつけたほうが、ほかの環境に移った時なんかは楽だと思います。
次にcordova-run-androidコマンドです。
WindowsなのでAndroidのコマンドのみ追加しますが、Mac使ってiOS版もビルドするのであれば、androidの部分をiosに変えてあげればいいです。
"cordova-run-android": "cd app && cordova build android && cordova run android"
これを実行するだけでビルドから実機(orエミュレータ)での実行まで自動でできるようになります。
修正はここまでです、いよいよビルドに向かいます...!
Cordovaプロジェクトの作成
さて、ようやくCordovaプロジェクト作成の区域に入りました。
まずは、Cordovaをインストールしましょう。
yarn global add cordova
これでcordovaコマンドを実行できるようになりました。
次に、Nuxtプロジェクトのルートで以下を実行しましょう。
cordova create app <識別子> <application name>
識別子ってなに？って思うかもしれませんが、Androidアプリを日常的に作っている人とかならわかるかもしれません。逆引きドメイン スタイル識別子というやつです。もっと？？？となるかもしれませんが、com.example.helloworldみたいな、ドメインを逆にした感じのやつです。実在するものでなくてもいいようです。ストアにアプリ申請するときなんかに使われます(数百万とあるアプリを識別し、同一の識別子を持つことがないようにする...データ保管のディレクトリ名に使われたりするので...)
何も決まっていなければ適当でいい気がします。(あんまり適当なこと言えないけど...w)
ディレクトリは確実に指定しないといけないようですが、識別子やアプリ名は何も指定しないと、それぞれio.cordova.hellocordova、HelloCordovaになるようです。
今回は、ディレクトリはappで固定、識別子はcom.example.cordova_test、アプリ名はcordova-testにしてみます。(確か識別子に-は使えない...)
あっさりと終ります。それでは、appディレクトリにcdして、platformを追加しましょう。今回はAndroidのみやります。
これでビルド準備が整いました...!
いざ、ビルド...!
Nuxtプロジェクトのルートに戻ります。そこで、さっき設定を変更したyarn generate(or yarn generate-by-windows)とyarn cordova-run-androidを実行していきます。
実機で実行したい場合は、yarn cordova-run-androidを実行する前にでもデバッグモードをオンにしたスマホをUSBでつないであげるとよいでしょう。
上の画像がちょうどそうですが、runしてもエミュレータも実機もなかった場合は失敗して終わります(apkはあるのであとは実機に流し込むだけです)
まとめ
いかがでしょうか。ネット上で2つほど記事を見かけ、参考にして試してみようと思っていたところ、案外詰まった(javaとかgradleとかもろもろ)ので、自分が見て後で環境を再構築できるように書き残しました。ほかの方の参考にもなれば。
ところでNuxt + Vue + Cordovaの組み合わせ、かなり便利なのでちょっと推していきたいです。(開発環境ではNuxtで自動リロード/ビルド等があり、そしてCordovaでアプリ化できるというのがかなり良い)
おまけ
実際にアプリをインストールしてみました。Vuetify Logoは何があったんだろう...w
問題点(追記)
今のままの状態だとCordovaのプラグインを使用することができません。これを解決する必要があります。