‘JavaScript’ カテゴリーのアーカイブ

FirestoreのServerTimestampさん

有能!

サーバー側で採時するので集計対象の抽出などに安心して使用できます。
これのおかげで必要なデータ取得数を大幅に削減できています。
Firestoreだとデータ取得数は速度や効率だけでなく課金に直結しますしね。

管理画面でデータを時系列に並べたりするのにも便利なのでドキュメント登録時には必ず入れておいたほうが良いくらいの有能さです。

Webでは

import firebase from '~/plugins/firebase'

payload.createdAt = firebase.firestore.FieldValue.serverTimestamp()
await db.collection('コレクション名').add(payload)

(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail

Firestoreのセキュリティルールのこと

バックエンドをFirebaseでSPAのシステムを作る場合、データを守る砦はデータベース(今回はFirestore)のセキュリティルールです。
Authenticationのログイン情報とFirestore上のユーザー情報を紐付けし権限によりドキュメントへのアクセスを制限するなど、適切な設定しなければなりません。

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

これは「ログインしているユーザーはフルアクセス」という最低限設定しておくべきルールです。開発中はお世話になりました。
しかし最終的にはもっとこまかく制限をかける必要がありますから、それを前提にデータ構造を設計しておいたほうが良いです。

例として今回作ったシステムのデータ構造とセキュリティルールの一部について解説します。

(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail

Nuxt.js 悩み解決の小ネタ集

ここ1ヶ月程Nuxt.js + FirebaseでSPAのシステムを作っていました。

短期構築がご要望でリアルタイム性が求められる内容。Firebaseに向いていると判断、提案したところ技術構成は自由にやらせていただけることになりました。
別件で一昨年末あたりからずっとバックエンドはLaravel、フロントエンドは素のVue.js + Vuex + Vue Routerで開発やってるんですが、PWA化したほうがよさそうだったこともあってNuxt.js(以降Nuxt)使ってみようかなってことで採用。

Nuxt、便利ですね。特にプラグインとミドルウェアが素敵!

Firebase(今回使用したのはAuthentication、Firestore、Hosting、Functions)との相性もバッチリでした。

ですが初めてということもありいろいろと悩んだりもするわけで…
それらをどう解決したか?の小ネタ集です(というか今回の落とし所、かな)

(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail

Nuxt.jsのbuild時にconsole.logを削除する

小ネタ集を書いていて分けておいたほうがよさそうだと思ったヤツ、その2。

nuxt buildでproductionビルドするときにconsole.logが削除されると良くないです?
良いですよね?なのでminifyを行うモジュールにはそういう機能が載っているようです。

Nuxt.jsのproduction時にconsole.logを削除する – くらげになりたい。

との情報を見つけました。ありがたい!

ですが、デフォルトのterser-webpack-pluginではなくuglifyjs-webpack-pluginに差し替えて実現されているとのこと。
この情報をもとに調査・実験をすすめたところterserのままでも可能でしたのでnuxt.config.jsのbuildの該当箇所を提示します(“nuxt”: “^2.4.0”)

(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail

Vuexのモジュールから他のモジュールのメソッドを呼ぶには

muraveです。ごぶさたしております。

Nuxt.jsとかVue.jsの小ネタをまとめて書こうと思ったのですが、これは分けておいたほうがいいかな?と思ったので先に書いておきます。

Vuexのモジュールによる名前空間は処理を分割管理するのに便利です。

モジュール | Vuex

ですが、他のモジュールのメソッド(action, mutation)を呼ぶことができない(と思っていた)ので、不便に感じつつルートであるindex.jsに共通処理を集めたりなどしていました。が、先日、呼び出し方法に気づきました。

(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail

Serverless未経験おじさんのfaultline導入記

実験用に自分のメアドで新しくAWSのアカウント作ろうと思ったら存在してました、muraveです。事務所引っ越す前の住所になってたので5年以上放置してた模様。

実験にはお安めのVPSを使うことが多いのですが、Serverlessという波にのるためにAWSを使わざるをえないのです。というか faultline を使いたい!

サーバーレスアーキテクチャなエラートラッキングツール faultline

きっかけは『PHPカンファレンス福岡2017』です。その時のスライド動画もきてました

コレだ! と思いましたね。

だいたい、今はまともなメールを送信するのも面倒じゃないですか?

某メール送信サービスを使おうと思ったこともあったのですが、エラーメール送信するには「利用者」の契約が必要とのことで、不特定多数の利用者が想定されるサービスでは使えません。そもそもエラー通知をメールで欲しいわけでもなく、今もメールから Slack に連携しています。

faultline は運用コストが低く(手間的にもマネー的にも)、そしてなによりクライアントの JavaScript についても利用できることに魅力を感じます。

faultline-jsを使ってJavaScriptのエラートラッキングにfaultlineを利用する

前置きが長くなってしまいました。これからが本番。導入について、主にどこで引っかかったか、です。
(さらに…)

Facebooktwittergoogle_pluslinkedintumblrmail