鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

safari vuerity.jsのフォームバリデーションでボタンが常に活性化されてしまう

でも、クローズされているけど、よく読んでみよう。

[Bug Report] Problem with form validation in Safari · Issue #2907 · vuetifyjs/vuetify · GitHub


自分のsafariのバージョンは
バージョン10.0 (12602.1.50.0.10)だったんだけど・・

vuexを使ってlocalstorageへ保存する

要件は

コンポーネントA,Bがあり、コンポーネントBが設定画面とします。
コンポーネントBの保存ボタンを押すと、storeに格納されて
コンポーネントAでも保存した値が参照できるようにしたい。
保存ボタンではローカルストレージに格納する

こうするといいかも

main.jsの中のbeforeCreateの中で、storeのmutationを呼び出して、localStorageから読み出す。
コンポーネントBのmountedメソッドの中で、storeのstateを参照して自身のプロパティとして保存する
コンポーネントAのcomputedメソッドの中でstoreのstateを参照する

https://www.mikestreety.co.uk/blog/vue-js-using-localstorage-with-the-vuex-store


さて、やってみましょう。

vuexのインストール

npm install vuex --save

Storeの作成

storeディレクトリを掘りstore.jsを作成する

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    repeatInterval: 15
  },
  mutations: {
    setRepeatInterval (state, repeatInterval) {
      state.repeatInterval = repeatInterval
      localStorage.setItem('store', JSON.stringify(state))
    },
    initializeStore (state) {
      if (localStorage.getItem('store')) {
        this.replaceState(Object.assign(state, JSON.parse(localStorage.getItem('store'))))
      } 
    }
  }
})

main.jsの編集

起動時に読み込むエントリーポイントはAppコンポーネントから行うと
見通しも良さそう?!
main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'
import { store } from './store/store.js'

Vue.use(Vuetify)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  store: store,
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  beforeCreate () {
    this.$store.commit('initializeStore')
  }
})

設定用コンポーネントの定義(抜粋)

<template>
    <v-text-field ref="input" v-model="repeatInterval"><{{repeatInterval}}</v-text-field>
</template>

<script>
export default {
  name: 'ogura',
  created () {
  },
  data () {
    return {
      repeatInterval: null
    }
  },
  methods: {
    update () {
      this.$store.commit('setRepeatInterval', this.$refs.input.value)
    }
  },
  mounted () {
    this.repeatInterval = this.$store.state.repeatInterval
  }
}
</script>

vuetifyjsのレイアウトのexampleソースを見る

App.vueのサンプルソースが見たい!
のにどこ行けばあるのか彷徨ってしまったが。
docsに格納されていた

docs/examples/layouts at master · vuetifyjs/docs · GitHub

Vueでマテリアルデザイン

今度はこれにチャレンジしてみよう。
またまた百人一首アプリをこれで動かす。
vuetifyjs.com

既存vueのPWAプロジェクトをvuetify化する

vue-cliのPWAテンプレートから作った既存プロジェクトをvuetify化してみる。

ライブラリインストール

package.jsonにも追加して欲しいのでsaveオプションをつけてみる。

npm install --save vuetify

main.jsの編集

ドキュメントに従い、main.jsを編集する

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'

Vue.use(Vuetify)

アイコンの登録など

index.htmlのheadに追記する

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">

App.vue を編集

<template>
  <div id="app">
    <header>
      <span>Vue.js PWA</span>
    </header>
    <main>
      <img src="./assets/logo.png" alt="Vue.js PWA">
      <router-view></router-view>
    </main>
  </div>
</template>
<template>
  <v-app>
    <v-toolbar app><v-toolbar-title>{{ title }}</v-toolbar-title></v-toolbar>
    <v-content>
      <v-container fluid>
        <v-layout row justify-center>
          <img src="./assets/logo.png"/>
        </v-layout>
        <v-layout row justify-center>
          <router-view></router-view>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app>
      <v-spacer></v-spacer>
      <div>© dokechin{{ new Date().getFullYear() }}</div>
    </v-footer>
  </v-app>
</template>

Hello.vue を編集

<template>
  <div class="ogura">
    <h1>{{ title }}</h1>
    <h2>{{ fuda }}</h2>
    <button id="next" v-on:click="nextFuda" :disabled="index == 99">読み上げ</button>
    <button id="again" v-on:click="read">もう一度</button>
  </div>
</template>
<template>
  <div class="ogura">
    <v-layout row justify-center>
      <h2>{{ fuda }}</h2>
    </v-layout>
    <v-btn large id="next" v-on:click="nextFuda" :disabled="index == 99">読み上げ</v-btn>
    <v-btn large id="again" v-on:click="read">もう一度</v-btn>
  </div>
</template>

そんな感じで動きました

以上、ハマらずに、動かすことができました。
vuetifyjsにはいっぱい部品もあるようなので使わない手はないかも。

vueでマテリアルデザイン

まだまだ、vue.jsを使いこなせていない感が半端ないので、百人一首アプリを改造して、
もっと遊ぼうと思う。

ボタンが小さいしカッコ悪いのでそこから着手してみようと思います

https://medium.com/codingthesmartway-com-blog/using-material-design-with-vue-js-2-a938eac53112

百人一首読み上げアプリをvue-cli PWAにしてみる

vue-cliのpwaのテンプレートで作るだけなので特に変わったことはしていませんが。
実運用はhttps化しなくてはいけないのでそこは苦労しました。

小倉という名前にしてみました。

ogura


PWAの長所ランチャーに組み込めるというところに着目してトライしました。

アプリ用のアイコンを一括して作りたい

1つの画像から任意のアイコンを一括して作ってくれるコマンド(Webアプリ)が欲しい。

vue-cli(PWA)のアイコンフォルダには以下のファイルが格納されているので
これらを一括して作成したい。

f:id:kechiya:20180115075417p:plain

favicongeneratorというアプリ

realfavicongenerator.net


結構惜しい感じ、少しファイルが足りない。
以下のファイルが作成されるので
種類は揃っているようなので、サイズを変えればいいだけか。

f:id:kechiya:20180115080539p:plain