Firestoreに一括で更新を行う
やりたいこと
Firestoreにて、複数のドキュメントに対して一括で更新を行いたい。
バッチ書き込みを利用
.batch()で生成したオブジェクトにupdateしたいパスとオブジェクトをガンガン足していく。batch.commit()したタイミングで一括実行される。
import firebase from 'firebase/app' import firestore from '@/firebase/firebase' ... const batch = firestore.batch() cardList.forEach(card => { const cardRef = firestore.collection('card').doc(card.id) batch.update(cardRef, { index: card.newIndex }) }) batch.commit()
参考
Vue.Draggableのメモ
Vue.Draggableパッケージをinstall
$ npm install --save vuedraggable
使用したいコンポーネントで呼び出す
<template> <div class="board-task-contents" > <draggable> <div v-for="i in 20" :key = "`${i}`" class="task-card"> <h3>番号： {{ i }}</h3> <p>タスク詳細内容</p> </div> </draggable> </div> </template> <script> import draggable from 'vuedraggable' export default { name: 'TaskList', components: { draggable }, ...
PWA化したvueアプリでスマホのドラッグにも対応している◎
(補足)
- アニメーションつけたい
v-bindオプションで
animationを指定 - スクロールができなくなる時の対処
v-bindオプションで
delayを指定
<draggable v-bind:options="{ animation: 200, //アニメーション delay: 50 //スクロール防止（長押しでソート） }" >...
参考記事
Vueプロジェクトにeslintを導入
[:contens]
eslint関連のパッケージをインポート
package.jsonに以下を追加
{ ... "husky": "^4.2.5", "lint-staged": "^10.2.2", ... "eslint-config-standard": "^14.1.0", "eslint-plugin-import": "^2.18.2", "eslint-plugin-node": "^10.0.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.1", "vue-eslint-parser": "^6.0.4" ... }
.eslintrc.jsの作成
$ touch .eslintrc.js
module.exports = { root: true, parser: 'vue-eslint-parser', parserOptions: { ecmaVersion: 2018, parser: 'babel-eslint', sourceType: 'module' }, extends: ['standard'], plugins: [ 'vue' ], rules: { 'vue/html-indent': ['error', 2] // 2 spaces for html indent } }
eslintの実行
nodeのバージョンを10.移行にしないと動かないのであげた
$ nodebrew use v12.10.0
$ npm run lint
色いろエラーを吐いてくれた
/// 1:22 error Extra semicolon semi 2:35 error Extra semicolon semi 3:47 error Extra semicolon semi 5:19 error Extra semicolon semi 8:1 error Expected indentation of 2 spaces but found 4 indent 8:40 error Unexpected trailing comma comma-dangle 9:2 error Extra semicolon semi 12:1 error Expected indentation of 2 spaces but found 4 indent 13:1 error Expected indentation of 2 spaces but found 4 indent 14:3 error Extra semicolon semi 16:22 error Extra semicolon semi 16:23 error Newline required at end of file but not found eol-last ✖ 17 problems (17 errors, 0 warnings) 17 errors and 0 warnings potentially fixable with the `--fix` option.
コミット時にルール通りに修正するようにする
package.jsonを修正
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "eslint --ext .js,.vue src --config .eslintrc.js --fix"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,vue}": [
"eslint --fix",
"git add"
]
},
コミット時に自動で修正してくれた。
参考記事
vue-routerの追加実装
vue-routerの追加
$ npm install --save-dev vue-router
rouoter用のindex.jsを作成
src/router配下にindex.jsを作成
import Vue from 'vue'; import VueRouter from 'vue-router'; import HelloWorld from '../components/HelloWorld'; Vue.use(VueRouter); const routes = [ { path: '/', component: HelloWorld }, ]; const router = new VueRouter({ routes, mode: 'history' }); export default router;
main.jsにrouterを追記
import Vue from 'vue' import App from './App.vue' + import router from './router' import vuetify from './plugins/vuetify'; import './registerServiceWorker' Vue.config.productionTip = false new Vue({ vuetify, + router, render: h => h(App) }).$mount('#app')
App.vueで<router-view>に書き換え
<v-content> + <router-view/> </v-content>
直接、
変わらず、画面が表示されたのでおk。
参考記事
VuetifyとPWAで色々やったときの備忘録
とりあえず
Vueプロジェクトの作成
$ vue create the-simplist
Vuetify、PWAの準備
$ vue add vuetify $ vue add pwa
manifest.jsonの追加
/publics配下にmanifest.jsonを追加
{
"name": "the-simplist",
"short_name": "the-simplist",
"icons": [
{
"src": "./img/icons/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./img/icons/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"background_color": "#000000",
"theme_color": "#4DBA87"
}
firebaseにデプロイ
$ firebase init
上記コマンドを実行後、以下の手順で進む。
- Hostingを選択
- Use an existing projectを選択
- 対象プロジェクト名を選択
- What do you want to use as your public directory? distと回答
- Configure as a single-page app (rewrite all urls to /index.html)? Yesと回答 ✔ Firebase initialization complete! とでてきたら完了
ワークフォルダでビルド実行
$ npm run build
firebaseへデプロイ実行
$ firebase deploy
動作確認
スマホからアクセスしてみた。
ホーム画面追加のダイアログ
ホーム画面のアイコン
PWAで起動している画面
PWA化されたサイトの画面
ネィティブっぽくていいかんじ。
ERROR Error: spawn yarn ENOENTの対応
vue createしたら発生
事象
ERROR Error: spawn yarn ENOENT
Error: spawn yarn ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:232:19)
at onErrorNT (internal/child_process.js:407:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
対応方針
vuercファイルを確認する
> car ~/.vuerc
packageManagerの設定がyarnになっている場合はnpmに書き換える
再度、vue create したらエラーは起きなくなった。
> vue create the-simplist
参考記事
VueプロジェクトのPWA化作業
VueCLIの用意
VueCLIが用意できていなかったので
npm install -g @vue/cli
既存のVueプロジェクトをPWA化
vue add @vue/pwawを実行
-> % vue add @vue/pwa 📦 Installing @vue/cli-plugin-pwa... + @vue/cli-plugin-pwa@4.3.1 added 63 packages from 23 contributors, removed 902 packages, updated 1 package, moved 41 packages and audited 1992 packages in 24.967s 32 packages are looking for funding run `npm fund` for details found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully installed plugin: @vue/cli-plugin-pwa 🚀 Invoking generator for @vue/cli-plugin-pwa... 📦 Installing additional dependencies... added 1 package from 1 contributor and audited 1993 packages in 13.669s 32 packages are looking for funding run `npm fund` for details found 100 vulnerabilities (76 low, 9 moderate, 14 high, 1 critical) run `npm audit fix` to fix them, or `npm audit` for details ✔ Successfully invoked generator for plugin: @vue/cli-plugin-pwa
色々追加してくれた。
manifest.jsonの作成
/publics配下にmanifest.jsonを作成
{ "name": "the-simplist", "short_name": "the-simplist", "icons": [ { "src": "./img/icons/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "./img/icons/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], "start_url": "././index.html", "display": "standalone", "background_color": "#000000", "theme_color": "#4DBA87" }
index.htmlのhead要素に、manifestの参照を追加
<link rel="manifest" href="/public/manifest.json" />
動作確認で以下エラーがでた。 そもそもwebpackでvueプロジェクトを作成していたのでpwaで作り直してみる
Manifest: Line: 1, column: 1, Syntax error.
