MonacaでNuxt.jsを使って開発する方法

アプリケーション
2019.06.08

Monacaというウェブサービスを利用して、これまでいくつかアプリを作ってきました。cordovaによって拡張されたJavaScriptとhtml、cssを使って、まさにウェブサイトを作るようにしてアプリを作ることが出来ます。

Monacaを使えば、ウェブ上でコーディングからビルドまですべてを行なうことも出来ますが、Monaca CLI を使えばローカルでコーディングを行うことも可能です。この記事では、ローカルでコーディングするスタイルで、話を進めたいと思います。

Monacaでアプリを開発する場合、Onsen UI というフレームワークを使用したテンプレートが用意されていて、それを元に制作するのが一般的な流れのようですが、今回はOnsen UI 以外のフレームワークを使い、さらに Nuxt.jsを利用して開発する方法を探っていきたいと思います。

MonacaでNuxt.jsを使う

これまでVue CLIで開発することが多かったのですが、最近はNuxt.jsを積極的に使っています。Nuxt.jsには規約という縛りがあるのですが、これが良い方向に作用して設計＆制作をとてもシンプルに保ってくれます。過去のコードを追いかける際にも、規約のお陰で構造の把握がとてもしやすいのです。

是非ともMonacaでもNuxt.jsを使いたいわけですが、あいにくMonacaにはNuxt.jsを使って開発するテンプレートや事例は用意されていませんし、OnsenUI以外のフレームワークを使う方法についても情報がありません。

今回は、MonacaでNuxt.js＋他のフレームワークを使う方法について試行錯誤した情報を共有したいと思います。

MonacaでNuxt.jsを使う手順

まだ制作の途中ですが、うまくいった手順を紹介いたします。
（どこかで詰んだら、消すかも知れませんがw）

まずは普通にNuxtのプロジェクトをつくる。

僕の開発環境については以下のとおりです。

  • Windows10 Pro
  • VS Code

別の環境の場合は、適宜読み替えて下さい。

まずは、普通にNuxt.jsプロジェクトを作ります。

npx create-nuxt-app hogehoge
  • Project nameはお好きなプロジェクト名をどうぞ
  • Project descriptionは分かりやすい説明文をどうぞ
  • custom server frameworkはnoneを選択してください
  • custom UI frameworkはお好きなフレームワークをどうぞ！
  • rendering modeはSingle Page Appを選択してください
  • axios moduleは必要に応じて選択してください

以降の項目はお好みで。

Monaca CLI をインストールする

Monaca CLIは、Monacaアプリをローカルで開発するときに使用するコマンドラインツールです。 以下のようにnpmでインストールします。

npm install -g monaca

インストールが完了したら、monacaにログインします。

monaca login

Monacaアカウントのメールアドレスとパスワードを入力してログインしておきます。一度ログインしておけば、ログアウトするまでログイン状態が維持されます。

プロジェクトをMonacaで使用できるよう初期化する

先程作ったプロジェクトのディレクトリで、以下のコマンドを実行してください。

monaca init

いくつか質問されますが、必要に応じて回答してください。初期化が行われて、Monacaでの開発に必要なリソースがプロジェクトに追加されます。

wwwというフォルダが追加されますが、この中にあるファイルが主にアプリに表示されることになります。www/components には、Monacaの重要ファイルが含まれていますので、消したりしないよう気をつけてください。

このwwwフォルダの中に、「 _nuxt 」というフォルダを作ってください。この「 www/_nuxt 」内にビルド後のファイルを入れる予定です。

NuxtプロジェクトをMonacaの仕様に合わせて設定する

nuxt.config.js を以下のように書き換えます。
※書き換え・追加が必要な部分のみを抜き出して記述しています。

export default {
  // SSRはしないのでspaで
  mode: 'spa',
  head: {
    // Monaca用cssのタグをヘッダに挿入する
    link: [
      { rel: 'stylesheet', href: 'components/loader.css' }
    ],
    // Monaca用スクリプトのタグをヘッダに挿入する
    script: [
      { src: 'components/loader.js' }
    ]
  },
  build: {
    extend(config, ctx) {
      // 各ファイルが相対リンクされるよう変更する
      if (!ctx.isDev) {
        config.output.publicPath = '_nuxt/'
      }
    }
  },
  router: {
    // ルーティングをハッシュモードにする
    mode: 'hash'
  }
}

components/loader.js を読み込むことで、cordovaやそのプラグインが使用できるようになるようです。

Monacaは www フォルダの内容が表示される仕様になっていますので、ビルドしたファイルをこのフォルダに移動してやる必要があります。いちいち手作業で移動するのも手間なので、package.jsonを以下のように書き換えて自動化します。
※変更が必要な部分のみ抜き出して書いてます
※筆者の完了はWindowsです。xcopy以降は環境に合わせて適宜書き換えてください。

{
    "scripts": {
        "generate": "nuxt generate && rmdir www\\_nuxt /s /q && xcopy dist www /e /q /y && rmdir dist /s /q"
    }
}

npm run generate すると、ビルドが行われ、生成されたファイルがwwwフォルダに移動します。

Monacaにアップロードする

プロジェクトファイル全体をMonacaにアップロードします。

monaca upload

Monacaに新しいプロジェクトとして追加されます。初めてのアップロードの際に、タイトルや説明文などを順に尋ねられますので、入力してください。念のため、Monacaにプロジェクトが追加されたのを確認してください。

Manacaにアップロードされる対象ファイルは、「.monacaignore」ファイルでカスタマイズすることが出来ます。 アプリに必要のないファイルが含まれないよう、以下のような条件にしてみました。

/.monaca/*
!/.monaca/project_info.json
/platforms
.DS_Store
*.swp
.vscode/
typings/
/node_modules
.git
/test
/src
/.nuxt
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
jest.config.js
npm-debug.log
nuxt.config.js

初期設定の中に「node_modules」がありましたが、これでは「node_modures」と名の付くディレクトリすべてがアップロードされません。ビルド後のディレクトリにも同名のディレクトリが生成され、そのディレクトリはアップロードが必要ですので、先頭にスラッシュを追加して「/node_midules」とし、ルートの同名ディレクトリのみを除外するよう変更してあります。

cordovaプラグインの追加

corvovaプラグインの追加は、MonacaのクラウドIDEから行います。

cordovaプラグインをインポートする際は、githubからzipファイルをダウンロードしたものをアップロードする方が良さそうです。URLやパッケージ名の指定でインポートしたところ、有効なプラグインとして表示されているにも関わらずインポートされませんでした。zipファイルのアップロードを行ったところうまくいきました。

追加した後に monaca download してローカルに同期します。プラグインの情報が設定ファイルに記述された状態に更新されます。

デバッグ作業は、 npm run generate でトランスパイルした後、monaca debug でスマホのmonacaデバッガ上でするもよし、MonacaクラウドIDE上で実際にアプリをビルドしてテストするもよしです。

思ったよりも簡単に、Nuxt.jsを使ったMonacaアプリ開発環境を作ることが出来ました。

コメント

タイトルとURLをコピーしました