v-bind: (省略形は:)内で文字列を連結したいときはこれまで+でがんばってつっくけてたけど、テンプレートリテラルを使えることに気づいた。環境はVue CLI 3。
before
<img :src="img" :alt='format.title + "テンプレート" + index'>
after
<img :src="img"
:alt='`${format.title}テンプレート ${index}`'></li>${}の分は増えるけど、クオーテーションを閉じたり、開いたり面倒なのがなくせる。
場合によるけど文章内にいくつか変数を使う場合に便利かも。
バックティック文字「`」(日本語キーボードだとShift + @)だけでは無理で、外側をシングルorダブルクオーテーションで囲む必要がある
だめ
:alt=`${nanika}`おｋ
:alt="`${nanika}`"v-bindについては下記公式
jp.vuejs.org
Python3.6で使えるようになったf-stringと一緒に、良い感じに使いこなしたい。
note.nkmk.me
ユーザー側からFirebase Functionsの関数を実行する際、そのユーザーの認証情報を使って処理をしたい。
たとえば、決済とかで。最近はAmazon Primeビデオでエウレカセブンを見直してます。
最初HTTPリクエストにトークンなどをつけて、firebase-adminを使って自分で認証するのかと思ったら専用のがすでに用意されてた。
Firebase作ってる人すごい。
詳細はこのページ。アプリからとありデフォルト表示はiOSになってて焦ったけどWEBアプリも対応してる。
Call functions from your app | Firebase
functions.https.onCallを使う。dataにはリクエストされたdata、context.authには認証情報などが入る。
const functions = require('firebase-functions')
exports.auhTest = functions.https.onCall((data, context) => {
// context.authにいろいろ入ってるので使う（下記）
// ログインしてない場合はcontext.auth === undefined
// ほか使えそうなのはcontext.headersぐらいかも
return {ok: 'ok'}
});context.authをダンプしてみると下記のような感じだった。Firebase AuthのIDの他、メールアドレスなども入っている。
Firestoreに保存するにはこれだけあれば十分そう。
context.auth
{
"uid": "{firebase authのuid}",
"token": {
"iss": "https://securetoken.google.com/{プロジェクト名}",
"name": "なまえ",
"picture": "{ユーザーのアバター画像のURL}",
"aud": "{プロジェクト名}",
"auth_time": 15345239,
"user_id": "{firebase authのuid}",
"sub": "{firebase authのuid}",
"iat": 1541566511,
"exp": 1541570111,
"email": "{ユーザーのメールアドレス}",
"email_verified": true,
"firebase": {
"identities": {
"google.com": [
"{GoogleのIDっぽい数字}"
],
"email": [
"{ユーザーのメールアドレス}"
]
},
"sign_in_provider": "google.com"
},
"uid": "{firebase authのuid}"
}
}
Vue.jsのmethodsで作ったはこんな感じ。これをボタンとかに仕込んで実行した。
関数の実行URLはFirebase側で勝手に取ってくれる？ので設定はいらない。
// firebaseの初期設定は省略
methods : {
authTest: function(){
const auth = firebase.functions().httpsCallable('authTest')
auth({text: 'test'}).then(function(result) {
console.log(result)
}).catch(err => {
console.error(err)
})
}
}ちょーべんり
Vue CLI 3でのindex.htmlはVueのテンプレートシンタックスは使えませんが、webpackのものは使えます。アニメのからくりサーカスでしろがねが林原めぐみでびっくりしましたが文句なしのクオリティでした。
主に使うのは環境変数になると思いますが、下記のような書き方になります。
表示
<%= process.env.VAR_NAME %>
その他のJavaScript（if、forなど）
<% if (process.env.CAYENNE && process.env.AOYAMA) { %>
うわぁ頑張ろう
<% } %>詳しくは下記
cli.vuejs.org
今回、本番環境でのみAnalyticsなどを挿入しているGoogle Tag Managerのタグを出し、その他の環境（開発、ステージング）の時は検索除けを入れておくというのをしたかった。
下記の感じで動いた。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<% if (process.env.VUE_APP_MODE==='production') { %>
<!-- Google Tag Manager -->
<!-- 省略-->
<!-- End Google Tag Manager -->
<% } else { %>
<meta name="robots" content="noindex, nofollow" />
<% } %>
<!-- 省略 -->
GTMやGoogle AnalyticsでIP制限もできそうだけど、モバイル回線は除くの難しいし、そもそもタグが入ってなければ確実。
でもGTMでアプリの動作に必要なもの読み込んでる場合は使えないかも。
Vue.jsとFirebaseのアプリで環境切り替えについてや、NODE_ENVではなく、なぜ自分で定義したVUE_APP_MODEを使うのか詳しくは下記記事。
