ionic
WebComponents
nuxt.js

Nuxt.jsで、Ionic v4 betaをつかってみる

ちょっと私事があって乗り遅れた感ありますが、Ionic v4 beta版がリリースされました。

https://blog.ionicframework.com/announcing-ionic-4-beta/

※まだbeta版で、正式リリースはされておりません。正式リリースまでに仕様変更が行われる可能性は十分にありますので、ご留意ください。

で、せっかくIonic v4からはWeb Componentsベースとなり、すべてのJavaScriptフレームワーク・・・といいますか、No Framework環境も含めてIonicのUIコンポーネントを使えるようになりましたので、Nuxt.jsでの使い方をご紹介します。

なお、本記事はVue.js/Nuxt.jsを知っており、Node.jsなどはインストール済みの方を対象としております。

また、 https://github.com/rdlabo/ionic-nuxt.js でコミット履歴ふくめ公開しておりますので、不明点などありましたらこちらのレポジトリをご確認ください。

Nuxt.jsインストール

Nuxt.jsは、Vue CLIをつかって操作しますので、まずVue.jsをインストールします。

$ npm install -g vue-cli

実行後、私の環境では、

npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)

と出たのですが、この警告は「npm packageの名前が変更されてますよ」というものですので気にしなくて大丈夫です。

続いて、Vue CLIを使って、Nuxt.jsのスターターパッケージを展開し、npm iを実行します。 ionic-nuxt はフォルダ名となりますので、適宜変更するようにしてください。

$ vue init nuxt-community/starter-template ionic-nuxt && cd ionic-nuxt && npm i

途中で質問されますが、すべてEnterを押して進めてください。インストールが完了して、$ npm run dev で起動すると、以下のような画面がでてきます。

スクリーンショット 2018-07-29 15.59.54.png

なお、エラーでるときは利用しようとしているポートがすでに利用中の可能性がありますので、 https://nuxtjs.org/faq/host-port/ を確認して利用するポート番号を別のものに変更ください。

Ionicを利用する(環境作成)



Ionic v4では Not using Angular? Ionic can also be used directly from a CDN using a simple script include! としていて、Angular以外のユースケースではCDNからの利用を推奨しているので、CDN経由に利用します。

Nuxt.jsの設定ファイルは nuxt.config.js にありますので、そこに以下を追記します。


module.exports = {
/*
** Headers of the page
*/

head: {
title: 'ionic-nuxt',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
+ script: [
+ { src: 'https://unpkg.com/@ionic/core@latest/dist/ionic.js' }
+ ],
},

scriptを追加することでCDN経由でIonicを取得します。

また、Nuxt.jsはServer Side Renderを行いますが、IonicはLazy LoadingでComponentsを取得するために、このままだとエラーがでます。そのため、 @skatejs/ssr を使ってエラーを抑制します。


$ npm i @skatejs/ssr

を入れたあと、 plugins/webcomponents.js を作成して、以下を記述します。

import Vue from 'vue'

// Render web components server-side
if(!process.browser) {
// Avoid HTMLElement is not defined on server-side
global.HTMLElement = () => {};
// Avoid customElements is not defined on server-side
global.customElements = { define: () => {} };
// Require skatejs/ssr/register only on server side
require('@skatejs/ssr/register')
}

// Vue must ignore custom components that aren't Vue Components
Vue.config.ignoredElements = [/^ion-/];

また、このpluginを読み込むために、nuxt.config.jsに以下を追記します。


script: [
{ src: 'https://unpkg.com/@ionic/core@latest/dist/ionic.js' }
],
},
+ plugins: ['~/plugins/webcomponents.js'],

これで準備完了です。

Ionicを利用する(実践)

では、実際にテンプレートでIonicのComponentsを使っていきましょう。まず、Ionicは位置計算などのためにbodyよりも下位階層をion-appでくくる必要があるので、layouts/default.vueを以下のように書き換えます。

(なぜか描画計算がうまくいかなかったので、ion-pageに高さ100%のCSSを追記します)

<template>

<ion-app>
<nuxt/>
</ion-app>
</template>

<style>
ion-page {
height:100%;
}
</style>

続いて、トップページを指定しているpages/index.vueを、すべて以下のように書き換えます。


<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
The world is your oyster.
<p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>
</ion-content>
</ion-page>
</template>

これで、Ionic v4のstarterテンプレートと同等のものができました。

markdown-mark.png

試しに、ボタンをクリックしたらToastで通知が行われるUIを作成します。

pages/index.vueに、以下のように追記します。

<template>

<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
The world is your oyster.
<p>If you get lost, the <a target="_blank" href="https://ionicframework.com/docs">docs</a> will be your guide.</p>

+ <ion-button @click="presentToast">start Toast</ion-button>
</ion-content>
+ <ion-toast-controller></ion-toast-controller>
</ion-page>
</template>

+ <script>
+ export default {
+ methods: {
+ async presentToast() {
+ const toastController = document.querySelector('ion-toast-controller');
+ await toastController.componentOnReady();
+
+ const toast = await toastController.create({
+ message: 'Your settings have been saved.',
+ duration: 200000
+ });
+ return await toast.present();
+ }
+ }
+ }
+ </script>

ion-buttonを追加し、@clickでクリックイベントを設定しています。また、空のion-toast-controllerを追加し、イベントが発生したらToastのDOMを生成できるようにします。

clockイベントは、methodとして登録しておきます。ion-toast-controllerをquerySelectorで取得し、そこにToastを描画します。

markdown-mark.png

これで、Toastイベントを設定することができました。

実装してみての感想

v4はWebComponentsベースとなり「他のフレームワークでも使えるようになった」だけで「Angularと同等に使えるようになった」わけではなく、Ionic teamはAngularにおいてはより使いやすくなる@ionic/angularというラッパーを用意しておりますので、特段の理由がない限りはIonic v4を利用するのはAngular上で構築するのがおすすめになると思います。

ただ、例えば「アラートボタンだけを使いたい」「モバイル向けI/Fの一部を使いたい」などのニーズには柔軟に応えることができるようになったようにも感じます。

まだbeta版ですので正式リリースは先となりますが、ぜひ興味ある方はさわってみてください。

また、末尾となりますが、Consoleのエラー抑制で悩んでいるときに解決策を教えてくださった 果物リンさん( https://twitter.com/FruitRiin )ありがとうございました。

それでは、また。