質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

Q&A

0回答

641閲覧

firebase functionsが機能しない原因はなんでしょうか?

kon124

総合スコア9

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

0グッド

0クリップ

投稿2019/09/18 05:25

編集2022/01/12 10:55

前提・実現したいこと

firebaseとVuecliを用いてwebアプリを製作しています。
TwitterでOGP画像をシェアするものです。

以下を参考にしています。
「Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう」を実際に作ってみる

functionで動的に<head>を書き換えたいのですがうまくいきません。
今は、想定のURL(.../result/:id)に手打ちでアクセスしてもメタタグが確認できない(Chromeの検証)状況です。
コンソールにエラーは出ません。

また、私のシステムでは"/s/:id"にページ遷移するようにしています。
その際functions"s"が呼び出され、"/result/:id"に飛ばしてくれるはずですが、うまく機能しません。

できない原因は何が考えられるのでしょうか?

該当のソースコード

#functions/index.js const functions = require("firebase-functions"); const express = require("express"); const app = express(); const admin = require("firebase-admin"); admin.initializeApp(functions.config().firebase); const db = admin.firestore(); const url = "https://OOOOO.firebaseapp.com"; const site_name = "私のアプリ"; const title = "私のアプリ"; const meta_description = "私のアプリです"; const meta_keywords = ["私のアプリ"]; const og_description = "私のアプリです"; const og_image_width = 1200; const og_image_height = 630; const fb_appid = ""; const tw_description = "私のアプリです"; const tw_site = "https://OOOOO.firebaseapp.com"; const tw_creator = ""; const genHtml = (image_url, id) => ` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>${title}</title> <meta name="description" content="${meta_description}"> <meta name="keywords" content="${meta_keywords.join(",")}"> <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="website"> <meta property="og:url" content="${url}"> <meta property="og:title" content="${title}"> <meta property="og:site_name" content="${site_name}"> <meta property="og:description" content="${og_description}"> <meta property="og:image" content="${image_url}"> <meta property="og:image:width" content="${og_image_width}"> <meta property="og:image:height" content="${og_image_height}"> <meta property="fb:app_id" content="${fb_appid}"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="${title}"> <meta name="twitter:description" content="${tw_description}"> <meta name="twitter:image" content="${url}"> <meta name="twitter:site" content="${tw_site}"> <meta name="twitter:creator" content="${tw_creator}"> </head> <body> <script> location.href = '/result/${id}'; </script> </body> </html> `; app.get("s/:id", (req, res) => { const id = req.params.id; // eslint-disable-next-line promise/catch-or-return db.collection("cards") .doc(id) .get() .then(result => { // eslint-disable-next-line promise/always-return if (!result.exists) { res.status(404).send("404 Not Exist"); } else { const data = result.data(); const html = genHtml(data.imageurl); res.set("cache-control", "public, max-age=600, s-maxage=600"); res.send(html); } }); }); exports.s = functions.https.onRequest(app);
#firebase.json 内容一部省略 "hosting": { "public": "dist", "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], "rewrites": [ { "source": "/s/**", "function": "s" }, { "source": "**", "destination": "/index.html" } ] }
#vueAPPのrouter.js export default new Router({ mode: "history", base: process.env.BASE_URL, routes: [ { path: "/result/:id", name: "result", component: Result }, 省略

お願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問