「OGP」の記事 - Crieit

async mounted() {
  // マウントされたら、背景画像を読み込んで設定する
  this.setupBg().then();
}

// 背景画像の設定
private async setupBg() {
  const image = await this.getImage("/img/review_paple.png");
  this.configBg.image = image;
}

// 共通処理: 画像の読み込み
private async getImage(src: string): Promise {
  return new Promise((resolve, reject) => {
    const image = new window.Image();
    image.onload = () => resolve(image);
    image.src = src;
  });
}

これでできるのがこんな感じ。

でかい。。
CanvasのサイズをOGP画像のサイズ(1200x630)にしているもんね。。

画像を画面サイズにあわせる

ほんとはこんな感じにしたい。。

ので、Windowサイズの変更を検知して、CSSのscaleで調整してみる。

こんな感じ。

これでOK。Konva.jsの話に戻る

画像を加工する(サイズ変更)

次は書影を読み込んで、配置する部分。
書影は本ごとにサイズが違うので、加工が必要。。

こんな感じ。切り取りは、v-imageのcropを指定すればOK。

ここで若干ハマった。。

【ハマり1】cropとscaleを同時に指定するとうまくいかない。。

サイズを調整しようと、いろいろしていたときに、
スケールを変化させるscaleと切り取り処理のcropを同時に指定してみたけど、
あまりうまくいかず、cropのみで対応した。。

【ハマり2】computedだとうまくいかない。。

最初は、以下のような感じで、computedにしてたけど、
cropなど、配下のobjectが変わっても変更が反映されなかったので、
dataのconfigBookImgを用意する形にしてみた。

get configBookImg() {
  // 画像の読み込み
  const imageBook = await this.getImage("/img/notfound_paple.png");

  // v-imageのconfig
  const scale = BOOK_IMAGE_WIDTH / imageBook.width;
  return {
    image: imageBook,
    x: 48,  // 左上からの位置(x)
    y: 112, // 左上からの位置(y)
    width: BOOK_IMAGE_WIDTH,   // 画像のサイズ(横)
    height: BOOK_IMAGE_HEIGHT, // 画像のサイズ(縦)
    crop: {  // 切り取り処理
      x: 0,  // 切り取り位置(x)
      y: 0,　// 切り取り位置(y)
      width: imageBook.width,           // 切り取りサイズ(横)
      height: BOOK_IMAGE_HEIGHT / scale // 切り取りサイズ(縦)
    }
  };
}

画像を加工する(丸く切り取る)

次はこれ。ユーザのアイコン画像。

もともとは、こんな四角い画像だけど、アイコンっぽく丸く切り取りたい。

チュートリアルを見てみると、v-groupを使うとできるっぽい。

v-groupのclipFuncを使うと、Canvaを操作できるようで、
CanvasRenderingContext2Dのarcを使って、丸く切り取り。

注意点は、原点がCanvas(v-stage)の左上であること。
画像の左上が原点だと思っていたので、全然切り取られなかった。。

1行の文字を表示する(省略あり)

画像はここまで。次は文字。本のタイトルを表示したい。

文字を表示するには、v-textを使えばOK

CSSのtext-overflowと同じ感じで、折返しをnoneにすれば、省略記号の表示もできる。

複数行の文字を表示する(省略不可)

次はレビューの文字を表示。

同じくv-textを使う感じ。
wrapを指定しなければ、そのまま複数行に。

改行文字を入れれば改行もしてくれて、widthを指定すれば折返しも自動。

ただ、残念ながら、-webkit-line-clampみたいに複数行の省略はないみたい。。

Canvasを画像にエクスポート

最後に作った画像をエクスポート!!

こんな感じ。Konvaでエクスポートするときには、v-stageから取得する。
DataURL以外にJSONとかでもエクスポートできるので、保存したりもOK

HTML5 Canvas Stage Data URL Tutorial | Konva - JavaScript 2d canvas library

開発しているサービスでは、FirebaseのCloud Storageに保存しているので、DataURL形式でOK。

ハマリポイントは、外部URLの画像を使っているとき。。エクスポートに失敗する。。
Cavans自体の仕様で外部URLの画像がある場合、汚染されたとみなされエラーになるとのこと。。

対処法は以下に書かれている感じで、CORS対応をすればOK
・Resolving "Tainted canvases may not be exported" with Konva | Konva - JavaScript 2d canvas library

おわり

SVGでも外部URLは問題があったけど、Konva.jsでも。。
でも、サクサクできたのと、ドラッグで位置を変えれるみたいなので、いろいろできそう(´ω｀)

積ん読レビューはできたての機能なので、ぜひぜひさわってみてくださいヽ(=´▽`=)ﾉ
■どっちでレビューする？妄想レビュ・きっかけレビュー

(改良版)パワプロ風画面ジェネレータを作ってみた

2020-03-14T22:03:11+09:00

作ったサービス

https://pawapro-gen.netlify.com/

一旦書いたボード

web1week - パワプロ風画面ジェネレータを作ってみた

時間的に残りの機能間に合わないかと思っていたので、最低限動く機能で出したのですが、結論から言うと間に合いました。

インライン編集機能

当初はフォームとプレビュー機能を分けて作っていたのですが、
ほとんど全てインラインで編集できるように変更しました。

twitterシェア機能

OGPサーバの構築

以前slack流量計を作った際に、web表彰のスクリーンショットを撮っていたので、OGP作成にはそれほど抵抗はありませんでした。

あとはだらさんの作成されてるOGPサーバを参考にさせていただきました。

OGPサーバの構築に使った技術

NodeJS
Express
TypeScript
puppeteer
VPS
docker-compose

ロジック

ジェネレータからDBにデータを登録する
登録されたデータをもとにpuppeteerでスクリーンショットを撮る
DBに画像を格納する
OGPのサーバ問い合わせにはDBに保存してある画像を使用する
- OGPサーバに直接アクセスさせると負荷が集中してサーバが落ちるため

twitter投稿

アプリ起動時componentDidMountのタイミングでUUIDを生成するようにしました。
react-shareというライブラリを使い、
beforeOnClickメソッドでDBへの登録を行っています。
ローディング画面も作りました(同時にバグ生成)。

{
              store.dispatch(switchLoading(true));
              let isSuccess = await postData();
              store.dispatch(switchLoading(false));
              if(!isSuccess){
                alert('データの保存に失敗しました。時間を空けるか、リロードして再度作成してください。')
                return new Error();
              }else{
                return Promise.resolve();
              }

            }}
          >
            保存してシェアする！

苦労したこと

OGPのトリミング問題

twitterやFacebookでOGPの上下左右がトリミングされる問題があり、
Jimpなどで余白の拡張をしようと思ったのですが、時間がなかったこともあり、
React側でマージンをとってスクリーンショットを撮る際に余白ができるように修正しました。

できなかったこと

チーム・選手画像のアップロード

OGPの生成で手一杯だったので、base64化してDBに格納するところまで考えられませんでした。後々追加する予定。

Cloud FunctionとSVGでOGP画像生成を試行錯誤したまとめ

2020-02-19T19:53:57+09:00

Nuxt+Firebaseで開発してるサービスのOGP画像を改善しようと、
いろいろ試してみたときの備忘録。

OGP画像の生成はクライアント側とサーバ側かがあるが、
Firestoreの変更に合わせて生成したいので、
Cloud Function上で利用できる方法を考えてた。

結果的に、

sharpで画像を合成してベースをつくり
ImageMagickで文字を追記していく

という構成になった。その試行錯誤の備忘録です。

やりたかったこと

背景画像+本の画像+文字みたいなOGP画像にしたい。

あと、座標の指定はめんどくさいので、楽な方法を探してみた。
SVGだとCSSも使えて、ブラウザ上で書くにできるので良さそう。
(と思ったけど、結果、だめだった...)

ためした方法とまとめ

試したのは以下の4パターン。
SVG+sharpで試した感じ。
node-canvasはおまけな感じ程度。

sharp+SVG(style+foreginObject)
- SVGですべて構成する方法。
- フォントとか位置、サイズはstyleで設定
- 外部URLの画像が取得できずにNG
sharp+SVG+画像は別で合成
- 1.の画像部分を別で合成するパターン
- カスタムフォントが設定できずNG
sharp+SVG+ImageMagick
- 画像の合成部分のみsharpをつかい
- 枠線をSVG、文字はImageMagickで書き出し
- これを採用
node-canvas+SVG
- node-canvasもSVGを入力にできるようなので試した
- 1.や2.と同様の理由でNG

内部で利用しているSVGライブラリ自体で未対応っぽいので、
SVGのstyleや外部URLの画像、カスタムフォントなどは、
ブラウザ上以外の画像生成ではまだ未対応っぽい。

ほかにも、CloudFunction上でpuppeteerを使えるようだけど、
メモリをすごい使うっぽい記事を見てしまい、まだためしてない。。

以下試したコード。

SVG(style+foreginObject)

sharpが、foreignObject+sytleに未対応...のためNG
imageに外部URLを使っているとダメっぽい...

import sharp from "sharp";

await sharp("./input.svg")
  .png()
  .toFile("./output.png");

SVG+外部URLの画像

SVGには文字とかだけにして、画像はファイル読み込みで対応
カスタムフォントが使えない...のNG
GAEかlamdaだと、fontconfigに関する環境変数を設定できるが、Cloud Functionでは無理そう
fonts.confを設定してもダメだった...

import axios from "axios";
import sharp from "sharp";

// 埋め込む画像のURL
const bookURL = "https://.../thumbnail.png";
const bookBuffer = await axios.get(bookURL, { responseType: "arraybuffer" });

// URLから取得した画像を加工(リサイズ)
const bookImage = await sharp(bookBuffer.data)
  .resize(520, 454, { position: "top" })
  .toBuffer();

// sharpで結合
await sharp("./background.png") // 背景画像を読み込み
  .composite([
    { input: bookImage, gravity: "south" }, 本の画像を書き出し
    { input: "./input.svg" } // SVGの書き出し
  ])
  .png()
  .toFile(tempFile);

SVG+ImageMagick

画像の加工や合成はsharpを使い、文字の書き出しだけImageMagickを使う
画像の加工・合成部分は、上の「SVG+外部URLの画像」と同じ感じ
ImageMagickで文字を書くのは以下の記事を参照
- Cloud Functions + ImageMagickでOPG画像の動的生成してCloud Storageにアップロードする - くらげになりたい。

node-canvas+SVG

同じくダメ。imageタグの外部URLがNG+foreignObject未対応...
Automattic/node-canvas: Node canvas is a Cairo backed Canvas implementation for NodeJS.

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

SVGでOGP用のPNG画像を生成してみる(折り返し文字、画像埋め込み、PNG化)

2020-01-24T15:25:45+09:00

SVGでOGP画像を作りたいなと思い、いろいろ調べたときの備忘録。

SVGはまるのも多いけど、いろいろできるので、
SVGからOGP画像をつくるのいいかもしれない。

とりあえず、SVGを書いてみる

ちょろっとなるなら、HTMLでベタ書きしてみるのもいい。
動作確認とか楽ちん。

こんな感じ。

で四角を書いて、で丸を書いてる。

上から順に描画されるので、下にある方が前面にくる感じ。
なので、四角の上に丸が描画されてる。

の座標(x,y)は左上の場所なので、
横幅と縦幅分の半分だけ、全体の中心からずらしてる。

画像化する

最終的にOGPで使うPNG画像にしたい。

画像化する方法について、ローカルとブラウザ上の2つを試した。

1. ローカルで画像化する

いろんな画像フォーマットに対応しているsharpがよさそう。
・sharp - High performance Node.js image processing

.svgファイルを.pngに簡単にできる。

sharpでsvgをpngに変換してみる

まずは、.svgとして扱えるように、
xmlnsとかをちゃんとつけたsample.svgを用意する。

パッケージをインストール

$ npm i sharp

変換するコードはこんな感じ。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

そして、実行。

$ node generate.js

すると、output.pngというPNGファイルを作成してくれる。

ただ、svgのstyleは反映してくれないので注意。

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .png()
    .toFile("output.png");
}

main().then();

背景色をつける場合は、sharp側で設定すればOK

// generate.js
const sharp = require("sharp");

async function main() {
  await sharp("sample.svg")
    .flatten({ background: "lightgray" }) // 背景色
    .png()
    .toFile("output.png");
}

main().then();

2. ブラウザ上のSVGを画像化する

ユーザに情報を入力してもらった内容をSVGで表示して、
OGP画像にするという感じが多いので、こっちがメイン。

保存先のFirebase StorageがData URL形式に対応しているので、
PNGのData URLが取得できればOK。

大まかな流れは、こんな感じ。

Canvasを用意する
SVGを読み込むを用意する
を文字列に変換
作成したにDataURL形式でSVGをセットして、読み込み開始
読み込みが完了したら、Canvasに書き出して
CanvasからDataURLを取得する

// svg2DataURL.ts

/**
 * svgをpngに変換
 * @param svgElement

あとは、好きなタイミングで呼び出せばOK。

Nuxt.jsでの例はこんな感じ。

これでSVGがCloud Storage for FirebaseにPNG画像で保存できる(´ω｀)

ハマったポイント

1. 画像化するときにhtml2canvasを使うといいかんじにならない

画像化する方法でhtml2canvasもあるけど、うまくいかなかった。。

スクロール位置や画面サイズによって、
うまく撮れるときと撮れない時があって、この方法に。。

2. ブラウザ上と保存した画像が違う

この後出てくる小ネタ集でスタイルで装飾する方法を使ったところ、
うまくいかない感じに。。

svg内にsytleをもたせたらうまくいった(´ω｀)

ブラウザ上 = 全体のCSSが適用
保存画像 = SVG配下のCSSのみ適用

なので、SVGだけで完結しないといけない...

フォントとかも指定しないと、見た目が変わってしまう。。

3. 背景画像など外部リンクがあるとうまく保存できない...

Canvasの仕様っぽく、外部リンクでCORSで引っかかると画像が表示されないよう...

SVGで完結するように、読み込んだ画像をDataURL形式で指定するようにしたらうまくいった(´ω｀)

「SVGで完結」が大事らしい。。

こんなのつくってます!!

積読用の読書管理アプリ『積読ハウマッチ』をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで♪

参考にしたサイト様

fly.ioでSPA&OGP芸を最速かつゼロ依存でやる（package.jsonすら不要）

2019-10-17T05:05:57+09:00

個人開発界隈ではOGP芸というものが流行っているみたいですね。

SNSにシェアする際に表示されるOGPの設定や画像をいい感じにするみたいなことのことですが、SPAではこれを生成するのが割と面倒だったりします。

自分が作っているg4でもOGPを使ったシェアを実装していますが、SSRを使って配信していて、割と設定が面倒だったりしています。

こんなの

今回、なるべくSSRをしないでSPAのままやってみることはできないかというのをfly.ioで試してみました。

作ったものの概要

実際にOGP画像として表示される画像は/image.png?i=0で配信する。
/に?i=0のようなパラメータをアクセスすると、入力した↑を含むOGPが反映されたhtmlを表示する
fly.ioが日本語に対応してないので、titleに日本語は使えない
せっかくfly.ioを使ってますが、今回はOGPだけにフォーカスしたいのでキャッシュ周りは実装してません

作ったもの

https://og-image-sample.edgeapp.net?i=0

https://og-image-sample.edgeapp.net?i=1

これをtwitterやfacebookなどでシェアしてみてください。

作り方

事前にflyのcliをPCにインストールしておく
npmは必要ないです（あったほうが便利だけど最速なので）

必要なファイルは4つだけ
- index.js: なんか処理書くやつ
- template.html: テンプレートです。ここに情報を流し込む
- fly.yml: なんか設定書くやつ
- sample.svg: OGP芸したい適当なsvg。今回はURLによって内容を書き換えるため雑に{{title}}みたいなやつをここに書いて、テキスト置換でそこに内容を埋め込んでます。

``` html:template.html

fly.ioで最速ogp芸

fly.ioでogp芸をする場合のサンプルだよ


templateはこんな感じになりました。
ogpのcontentは置き換えるので何でもいいです。とりあえずさり気なくg4のものを入れてアピールしておきます。

次に`index.js`です。こちらにすべての処理を書きます。

``` js:index.js
import { Image } from '@fly/image'
import { mount } from "@fly/fetch/mount"

// templateをテキストで取得するFunction
async function getTemplate() {
  const resp = await fetch("file://src/template.html")
  return await resp.text()
}

// svgをテキストで取得しつつ中身ちょっと埋め込めるFunction
async function getSvgText(title) {
  const resp = await fetch("file://src/sample.svg")
  const text = await resp.text()
  // g4(https://www.g-g-g-g.games)ではReactでテキスト化されたsvgを吐いてるが、とりあえず単純に置換する
  return text.replace('{{content}}', title)
}

// 画像形式のレスポンス作るFunction
async function responseImage(svgText) {
  const svgResp = new Response(Buffer.from(svgText))
  const buf = await svgResp.arrayBuffer()
  const png = new Image(buf).png()
  const result = await png.toBuffer()
  return new Response(result.data, {
    headers: {
      'Content-Type': 'image/png',
      'Content-Length': result.data.byteLength.toString(),
    }
  })
}

// 出力データのパターン
const TITLES = [
  'g4 is pomodoro rpg!',
  'fly.io de OGP!!',
]

// fly.ioのrouterみたいなやつ。ここに処理を書いてく。
const mounts = mount({

  // このパスでogpの画像を生成する
  '/image.png': async (req, init) => {
    const url = new URL(req.url)

    // URLからQueryStringを取得
    const index = url.searchParams.get('i')
    if (index !== '0' && index !== '1') {
      return new Response('not found', { status: 404 })
    }

    // 対応したタイトルを取得
    const title = TITLES[index]

    // タイトルをsvgに埋め込んだテキストを作る
    const svgText = await getSvgText(title)

    // svgからpng画像を生成する
    return responseImage(svgText)
  },

  // このパスをシェアする
  '/': async (req, init) => {
    const url = new URL(req.url)

    // URLからQueryStringを取得
    const index = url.searchParams.get('i')
    if (index !== '0' && index !== '1') {
      return new Response('not found', { status: 404 })
    }

    // 対応したタイトルを取得
    const title = TITLES[index]

    // テンプレートをparseして編集できるようにする
    const doc = Document.parse(await getTemplate())

    // テンプレートにOGPを埋め込む
    doc.querySelector('meta[name="description"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:url"]').setAttribute('content', url.href)
    doc.querySelector('meta[property="og:title"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:description"]').setAttribute('content', title)
    doc.querySelector('meta[property="og:image"]').setAttribute('content', `${url.origin}/image.png?i=${index}`)
    doc.querySelector('meta[property="og:image:alt"]').setAttribute('content', title)

    // htmlを返す
    return new Response(doc.documentElement.outerHTML, {
      headers: { 'Content-Type': 'text/html' },
      status: 200,
    })
  },
})

// リクエストをmountsの定義を使って処理するように設定する
fly.http.respondWith(mounts)

index.jsはこんな感じ。
/ はtemplate.html のogpを書き換えて出すだけ。
/image はsvgファイルを読み込んで文字列を置換したものをpngに変換して返してます。

fly.ymlやsvgファイルは特に特別な設定はないのでドキュメントや最後にソースを貼るのでそちらを見ていただければ。

あとは、fly.ioのコンソールでアプリを作って、fly deploy するだけ。

再度になりますが、

https://og-image-sample.edgeapp.net?i=0

https://og-image-sample.edgeapp.net?i=1

これをtwitterやfacebookなどでシェアしてみてください。

以上になります。ソースはこちらにあります。

LaravelでOGPを作る

2019-08-16T23:11:24+09:00

TwitterにURLをシェアした時に表示される画像であるOGPは今やWebサービスを作る時に当たり前のものになってきました。しかもWebサービスの場合はだいたい投稿内容に応じて動的に生成を行うため、プログラムによる自動生成が必要となります。

各サービスで色々な作り方をされています。例えばPuppeteerというChromeを用いたライブラリを使用したり、ImageMagickなどのライブラリや、JavaScriptのcanvasを使う方法などです。

Laravel、というか素のPHPにもGDという標準ライブラリがあり、そちらでも簡単に作成することが出来ますのでその方法です。ちなみにこういうOGPを作成します。

要件

サーバーでGDが有効になっている必要があります。また、pngやjpeg等の必要なライブラリも有効になっている必要があり、且つ今回は文字を入れるのでfreetypeも有効になっている必要があります。phpinfoで各サポートが有効になっているかを確認してください。

素材を準備

今回はそれっぽく見せるために最初に背景画像を描画します。そのためまずぱくたそから適当な背景画像をお借りしました。また、フォントも必要ですので無心をお借りしています。

OGPの作り方

コードをそのまま載っけます。普通にPHPで画像を作っているだけです。例えば今回はPostControllerに追記します。

    public function ogp(Post $post)
    {
        // OGPのサイズ
        $w = 600;
        $h = 315;
        // １行の文字数
        $partLength = 10;

        $fontSize = 30;
        $fontPath = resource_path('font/mushin.otf');

        // 画像を作成
        $image = \imagecreatetruecolor($w, $h);
        // 背景画像を描画
        $bg = \imagecreatefromjpeg(resource_path('image/HIRO95_yuubaenokage_TP_V4.jpg'));
        imagecopyresampled($image, $bg, 0, 0, 0, 0, $w, $h, 800, 533);

        // 色を作成
        $white = imagecolorallocate($image, 255, 255, 255);
        $grey = imagecolorallocate($image, 128, 128, 128);

        // 各行に分割
        $parts = [];
        $length = mb_strlen($post->title);
        for ($start = 0; $start < $length; $start += $partLength) {
            $parts[] = mb_substr($post->title, $start, $partLength);
        }

        // テキストの影を描画
        $this->drawParts($image, $parts, $w, $h, $fontSize, $fontPath, $grey, 3);
        // テキストを描画
        $this->drawParts($image, $parts, $w, $h, $fontSize, $fontPath, $white);

        ob_start();
        imagepng($image);
        $content = ob_get_clean();

        // 画像としてレスポンスを返す
        return response($content)
            ->header('Content-Type', 'image/png');
    }

    /**
     * 各行の描画メソッド
     */
    private function drawParts($image, $parts, $w, $h, $fontSize, $fontPath, $color, $offset = 0)
    {
        foreach ($parts as $i => $part) {
            // サイズを計算
            $box = \imagettfbbox($fontSize, 0, $fontPath, $part);
            $boxWidth = $box[4] - $box[6];
            $boxHeight = $box[1] - $box[7];
            // 位置を計算
            $x = ($w - $boxWidth) / 2;
            $y = $h / 2 + $boxHeight / 2 - $boxHeight * count($parts) * 0.5 + $boxHeight * $i;
            \imagettftext($image, $fontSize, 0, $x + $offset, $y + $offset, $color, $fontPath, $part);
        }
    }

ルーティングを設定

routes/web.phpに画像を表示するためのルーティングを設定します。これで http://localhost:8000/posts/1/ogp.png のようなURLでアクセスできるようになります。

Route::get('posts/{id}/ogp.png', 'PostController@ogp');

メタタグを設定

あとは詳細ページに下記のようなメタタグを追加しておけば詳細ページのURLをツイートするだけで画像が表示されるようになります。

@section('additionalMeta')



@endsection

（↑この例だと実際には共通レイアウトに @yield('addtionalMeta') を追記する必要があります）

確認

TwitterのCard validatorにそのURLを入力すれば正しく表示されるかテストが出来ます。

まとめ

全部プログラムで描画しているため改造する時のメンテナンス等は大変かもしれませんが、とりあえずぱぱっと作っておきたいときなどは非常に便利です。 Have a happy OGP life!

Nuxt(SPA)+FirebaseでSEO！OGP！: 特定のパスだけheadだけ返すやつ

2019-08-15T13:00:18+09:00

最近つくった積読ハウマッチをNuxtのSPAで作成しているけど、
シェアされたときにいい感じに画像とかを表示してほしいのでやってみた。

N番煎じ感がつよいけれど、自分の整理用〜

全体の流れ

該当のURLにアクセスがあったらリライトでFunctionを呼び出す(Hostingのrewrite)
FunctionでヘッダだけのHTMLを生成。ボディには仮のパスへリダイレクト(Function)
HTMLのリダイレクト先をさらにNuxt側で正しいパスリダイレクト(nuxt.config.ts)

若干複雑...

図的にはこんな感じ

Function側のコード(index.js)

まずは、Cloud Function for Firebaseから。
リスエストのパスに応じてDBの値を取得して、OPG用のHTMLを生成。

const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();

const db = admin.firestore();

// ********************************************************
// * Generate OPG HEAD
// ********************************************************
/**
 * OGP用のヘッダだけのHTMLを返す関数
 * @param {String} TITLE タイトル
 * @param {String} DESCRIPTION ディスクリプション
 * @param {String} OGP_URL OGP画像のURL
 * @param {String} PAGE_URL 該当ページのURL
 * @param {String} REDIRECT_URL リダイレクト先のURL
 */
const createHtml = (TITLE, DESCRIPTION, OGP_URL, PAGE_URL, REDIRECT_URL) => {
  return `

  
    
    
    ${TITLE}
    
    
    
    
    
    
    
    
    
    
    
  
  
    
  

`;
};

/**
 * '/user/'に対応するHTMLを返すFunction
 */
const BASE_URL = '<サイトのBASE_URL>'
exports.users = functions.https.onRequest(async (req, res) => {
  try {
    // PATHからパスパラメータを取得
    const [, , userId] = req.path.split("/");
    if (!userId) throw new Error(`userId is empty`);

    // パスパラメータを使って、DBからデータを取得
    const docRef = db.collection("users").doc(userId);
    const snap = await docRef.get();
    if (!snap.exists) throw new Error(`Not Found: userId=${userId}`);

    // DBのデータからHTML作成に必要なデータを用意
    const user = snap.data();
    const title = `${user.name}さんのページ`;
    const desc = `${user.name}さんのページの詳細です`;
    const ogpURL = "<該当ユーザのOGP画像のURL>";
    const pageURL = `${BASE_URL}/user/${userId}`;
    const redirectURL = `/_user/${userId}`;

    // ヘッダだけのHTMLを生成
    const html = createHtml(title, desc, ogpURL, pageURL, redirectURL);

    // キャッシュを設定
    res.set("Cache-Control", "public, max-age=600, s-maxage=600");

    // 生成したHTMLを返却
    res.status(200).end(html);
  } catch (err) {
    // エラーが発生したら'/'にリダイレクト
    console.warn(err);
    res.redirect("/");
  }
});

firebase.jsonの設定

firebase.jsonの設定。該当のパスにアクセスされたら、
リライトでFunctionを呼び出すように設定を追加。

{
  "functions": {
    "source": "functions"
  },
  "hosting": {
    "rewrites": [
      // '/user/'へのアクセスがあったらFunctionsのusersを呼び出す
      {
        "source": "/user/*",
        "function": "users"
      },
      {
        "source": "**",
        "destination": "/404.html"
      }
    ],
  },
}

nuxt.config.tsの設定

nuxt.config.jsのrouterの設定。HTML内でリダイレクトされる先を、
さらにrouter側でリダイレクト。もとに戻す感じに。

const config: NuxtConfiguration = {

  /*
   ** Router configuration
   */
  router: {
    extendRoutes(routes: NuxtRouteConfig[], resolve) {
      routes.push({
        path: "/_user/:uid",
        redirect: "/user/:uid",
        chunkNames: {}
      });
    }
  },
}

注意!! 動的パラメタのあるパスだけ使えます

ちなみに、該当のパスにHostingのHTMLがあるとダメ...
Hostingの優先度がこんな感じ...

予約済み名前空間（/__*）
リダイレクトの構成
正確に一致する静的コンテンツ
リライトの構成

リライトよりも静的コンテンツのほうが優先度が高いので、
リライトでFunctionを呼び出されるよりも先にHTMLが返されてしまう...

nuxt generateするとHTMLが配置されてしまうので、
動的パラメタじゃないとダメかも...

以上！！

【PR】積読ハウマッチをリリースしました！

積んでいる本の総額がわかる読書管理サービス
『積読ハウマッチ』をリリースしました♪

積読が多い方も、少ない方も、ない方も、
ぜひお試しください(´ω｀)

参考にしたサイト様

SNS映えするWebアプリを...！FirebaseとVue.jsでSPAのOGP画像の動的生成をやってみたら案外楽だった - Qiita

OGP取得用クローラのユーザーエージェントを、TwitterやLINEなど8サービスで調べてみた

2019-03-29T23:00:19+09:00

SNSなどで、投稿されたWebサイトのリンクがリッチに表示される「OGP (Open Graph Protocol)」機能。
Webサイトに簡単なメタタグを組み込むだけでOGP表示されるため、対応するサイトは増えています。
しかし、OGP用のメタタグは一般ユーザーからは見えないし、サムネイル動的生成などでサーバーに大きな負荷がかかることもあるので、できればOGP取得用クローラ以外にはメタタグを生成しないようにしたいもの。
そこで、UA(ユーザーエージェント)からクローラによるアクセスか判定するために、実際にOGP取得用クローラのUAを記録して調べてみました。

結果

2019年3月28日に記録された文字列をそのまま掲載しています。

サービス	User Agent
Twitter	Twitterbot/1.0
Facebook	facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)
LINE	facebookexternalhit/1.1;line-poker/1.0
メッセージ(iOS)	Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/601.2.4 (KHTML, like Gecko) Version/9.0.1 Safari/601.2.4 facebookexternalhit/1.1 Facebot Twitterbot/1.0
Discord	Mozilla/5.0 (compatible; Discordbot/2.0; +https://discordapp.com)
Skype	Mozilla/5.0 (Windows NT 6.1; WOW64) SkypeUriPreview Preview/0.5
Slack	Slackbot-LinkExpanding 1.0 (+https://api.slack.com/robots)
Plurk	Mozilla/5.0 (compatible; PlurkBot/1.0; +https://www.plurk.com/) Firefox/61.0

もし他にもOGP表示に対応しているサービスをご存知でしたら、@barley_uralまでご連絡いただければ調査して追記していきます。

おわり