Quasar を使ってちょっとしたモバイルアプリを作ってみる。(1/2)

目的

復旧・復興支援制度データベースの内容（
https://www.r-assistance.go.jp/blob/ssdb-apidoc/API-common_spec.html
）を表示するアプリを Quasar 0.14 （
http://quasar-framework.org
）を使って作ってみる。

準備

node, npm をインストールしておく
https://nodejs.org/ja/

XCode があればなお可。

Vue の知識
https://jp.vuejs.org
https://qiita.com/Satachito/items/7c393513bf42ea3d1ebd

Quasar のインストール

$ npm install -g quasar-cli

アプリの雛形の作成

$ quasar init <folder_name>
$ cd <folder_name>
$ npm i

開発用のサービス

上記で作成したアプリを 8080 ポートでサービスする。

$ quasar dev

サービスが開始する。（自動的にブラウザが開いて、サービスされた localhost:8080 を読み込んでくれる）

Xcode があれば、Simulator の safari で localhost:8080 にアクセスしてみる。

API にアクセスして返ってきたJSONを表示してみる。

復旧・復興支援制度データベース API のアドレス。

http://api.r-assistance.go.jp/v2/supports.json?appkey=0


以下のファイルがコンポーネントがユーザーに見えるコンポーネント。

<folder_name>/src/components/Hello.vue

とりあえずこれを編集してみる。

src/components/Hello.vue

<template>
  <q-layout
    ref="layout"
    view="lHh Lpr fff"
    :left-class="{'bg-grey-2': true}"
  >
    <q-toolbar slot="header" class="glossy">
      <q-toolbar-title>
        復旧・復興支援制度データベース
        <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
      </q-toolbar-title>
    </q-toolbar>

    <div class="layout-padding non-selectable no-pointer-events">
        {{ m }}
    </div>
  </q-layout>
</template>

<script>
import {
  QLayout,
  QToolbar,
  QToolbarTitle
} from 'quasar'

export default {
  name: 'index',
  components: {
    QLayout,
    QToolbar,
    QToolbarTitle
  },
  data () {
    return { m: {} }
  },
  created () {
    fetch('http://api.r-assistance.go.jp/v2/supports.json?appkey=0').then(
      p => p.json()
    ).then(
      p => { this.m = p }
    ).catch(
      err => alert(err)
    )
  }
}
</script>

Xcode があれば、Simulator の safari で localhost:8080 にアクセスしてみる。

少しアプリらしくしてみる。

左側にドロワーを置きマスターディテールの形にしてみる。

src/components 以下に Root.vue と Detail.vue を作成して、router.js でルーティングする。

src/components/Root.vue

<template>
    <h1>←ドロワーから、見たい制度を選んでください。</h1>
</template>

src/components/Detail.vue

<template>
    <div>
        <h3>{{ $store.state.json.supports[ $route.params.idx ].name }}</h3>
        {{ $store.state.json.supports[ $route.params.idx ].summary }}
        <br>
        <br>
        {{ $store.state.json.supports[ $route.params.idx ].general_info }}
    </div>
</template>

src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

function load (component) {
  return () => import(`@/${component}.vue`)
}

export default new VueRouter({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),

  routes: [
    { path: '/', component: load('Root') },
    { path: '/detail/:idx', component: load('Detail') },

    // Always leave this last one
    { path: '*', component: load('Error404') } // Not found
  ]
})

App.vue の中でドロワーを置いて、内容をメニューにしてみる。

src/App.vue

<template>
  <div id="q-app" >
    <q-layout ref="layout" view="lHh Lpr fff" :left-class="{'bg-grey-2': true}">

      <q-toolbar slot="header" class="glossy">
        <q-btn flat @click="$refs.layout.toggleLeft()">
          <q-icon name="menu" />
        </q-btn>
        <q-toolbar-title>
          復旧・復興支援制度データベース
          <div slot="subtitle">Running on Quasar v{{$q.version}}</div>
        </q-toolbar-title>
      </q-toolbar>

      <div slot="left">
        <div v-for="( w, i ) in $store.state.json.supports" :key='i'>
          <q-side-link item :to="'/detail/' + i">
            <q-item-main :label="w.name" />
          </q-side-link>
        </div>
      </div>

      <router-view />

    </q-layout>
  </div>
</template>

<script>

import {
  QLayout,
  QToolbar,
  QToolbarTitle,
  QBtn,
  QIcon,
  QList,
  QSideLink,
  QItemMain
} from 'quasar'

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default {
  name: 'index',
  components: {
    QLayout,
    QToolbar,
    QToolbarTitle,
    QBtn,
    QIcon,
    QList,
    QSideLink,
    QItemMain
  },
  store: new Vuex.Store({
    state: { json: { supports: [] } },
    mutations: {
      json: (state, payload) => { state.json = payload.json }
    }
  }),
  created () {
    fetch('http://api.r-assistance.go.jp/v2/supports.json?appkey=0').then(
      p => p.json()
    ).then(
      p => this.$store.commit('json', { json: p })
    ).catch(
      err => alert(err)
    )
  }
}
</script>

Quasar を使ってちょっとしたモバイルアプリを作ってみる。(2/2)に続く