2021年4月25日日曜日

Nuxt.jsとFirebaseを使ってみた。

今はC言語(C++)で組み込みをやっているので、ここ数年のWeb系開発は全く分かりません。

すごいですね。Javascriptでサーバアプリも作るんだ、僕の中ではJQueryで止まってた。
そこでNuxt.jsとFirebaseを使って作ってみました。

環境作成や使い方は、ネットで皆さんが丁寧にまとめてくれているので、助かりました。

  • Nuxt.jsはComponents(画面や画面の共通化)とStore(処理)とPage(componentsの組み合わせ)で大抵のことはできる。
  • Nuxt.jsのComponentsで使用するTemplateはBootstrap Vueを使えばデザインが苦手な自分でもそれなりにできた。
  • データベースはFirebaseのfirestoreを使用した。RDBよりシンプルでいいね。昔Unix(OS)で標準されていたBerkeley DBをよく使っていたので思い出して楽だった。
  • ユーザ管理はFirebaseのAuthenticationを使用した。認証から管理まで提供してくれて、あとは固有の情報をFirestoreで持てばいいだけ。


まだ完成はしてないけど3年くらいweb系から離れている、おじさんでもできそうです。





2021年3月10日水曜日

【備忘録】Nuxt.jsで無限スクロール

 
vue-infinite-loadingを使って無限スクロール

  • yarn add vue-infinite-loading
  • plugin/infiniteloading.js

        import Vue from 'vue'
        import InfiniteLoading from 'vue-infinite-loading'
        Vue.component('infinite-loading', InfiniteLoading)

  • nuxt.config.js
    plugins: [{ src: '~/plugins/infiniteloading', ssr: false }]

  • vue
    <template>

    <div class="infinite-scroll">
    <ul class="infinite-scroll-list">
    <li class="infinite-scroll-list-item" v-for="i in this.count" :key="i">scroll {{ i }}</li>
    </ul>
    <infinite-loading
    ref="infiniteLoading"
    spinner="spiral"
    @infinite="infiniteHandler">
    <div slot="no-results"/>
    </infinite-loading>
    </div>
    </template>
    <script>
    export default {
    name: 'InfiniteScroll',
    data() {
    return {
    count: 20
    }
    },
    methods: {
    infiniteHandler() {
    setTimeout(() => {
    this.count += 20
    this.$refs.infiniteLoading.stateChanger.loaded()
    }, 1000)
    }
    }
    }
    </script>


https://qiita.com/yakiniku0220/items/1b2e960a09a9f085820e

2021年3月8日月曜日

【備忘録】vue.jsでreload

this.router.push()で同じページにredirectできない。代わりにrouter.go()でreloadする。
this.rouer.go({path:/}); 

2021年3月7日日曜日

【備忘録】Nuxt.jsで変数のグローバル化

Nuxt.jsで変数をグローバル化する方法。pluginで初期設定しinject()すれば使えるようになる。

定義:
export default (context, inject) => {

  const $global = {

    firebase: firebase,

  }

  inject('global', $global);

}

参照:
this.$global.firebase



2021年3月6日土曜日

【備忘録】Nuxt.jsで別storeのaction呼び出しと参照方法

Nuxt.jsでstoreを共通化したいとき、storeから別storeのactionやdataを参照方法。

async login({commit, dispatch, getters, rootState}) {

await dispatch('Test/login', null, { root: true });

const u = rootState.Test.id;

return true;

}

2021年3月3日水曜日

【備忘録】Firebaseのemulatorsを使う

いろいろ試してやっとFirestoreがemulatorsに向いてくれたのでメモ。
https://www.memory-lovers.blog/entry/2021/01/17/232930

firebase --version
9.5.0

firebase.jsでemulatorsの設定を追加する。

import firebase from 'firebase'
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: ,
      authDomain:,
      projectId:,
      storageBucket:,
      messagingSenderId:,
      appId: ,
      measurementId: ,
    }
  )

  // Emulatorの有効化
  if (process.env.NODE_ENV != "production") {
    // Authentication用の設定
    firebase.auth().useEmulator("http://localhost:9099/");
    
    // Cloud Functions用の設定
    const functions = firebase.app().functions("asia-northeast1");
    functions.useEmulator("localhost", 5001);

    // Firestore用の設定
    firebase.firestore().settings({ host: "localhost:8080", ssl: false });
  }
}

export default firebase

2021年2月28日日曜日

IFTTTかzapierか悩んだけど

 Twitterから自分あてのツイートを取得するのにIFTTTかzapierを使って、Firebaseのfunctionをキックしようと思ったけど、Freeプランだとタスク数が少ないしツイートを取得するだけに有料も勿体ないから、固定料金ですむさくらインターネットのVPSを契約した。

Twitter以外も連携するなら使ってもよかったがツイートの取得が目的なので安く済むVPSにした。