open-graph-scraper で取得した YouTube サムネイル画像とタイトルをブラウザで表示する

経緯

open-graph-scraper を使って、YouTube のサムネイル画像とタイトルを取得し、それをブラウザに表示する実装をしました。

その中でハマったところがあったので、これから同じような実装を検討している人の参考になればと思い、書いていきます。

開発環境

• Vue3
• Nuxt.js
• TypeScript

open-graph-scraper はブラウザでの使用がサポートされていない

以下 README 参照

A simple node module for scraping Open Graph and Twitter Card info off a site.
Note: open-graph-scraper doesn't support browser usage at this time.

翻訳: Open Graph と Twitter カードの情報をサイトからスクレイピングするための単純なノード モジュール。
注:open-graph-scraper 現時点では、ブラウザの使用はサポートされていません。

はい、最初からしっかり README を読んでいれば、ハマらずに済みましたね。
(使い方しか見てなかった。。)

使い方は簡単で、以下のスクリプトに取得したい YouTube の URL を入れてあげれば OK です。

sample.js

const ogs = require('open-graph-scraper');
const options = { url: 'http://ogp.me/' }; // <= ここにYouTubeのURLをいれる。
ogs(options)
  .then((data) => {
    const { error, result, response } = data;
    console.log('error:', error);  // This returns true or false. True if there was an error. The error itself is inside the results object.
    console.log('result:', result); // This contains all of the Open Graph results
    console.log('response:', response); // This contains the HTML of page
  })

README のサンプルはjsで書かれていますが、もちろんtsでも大丈夫です。

ぱっと思いつく実装としては、

1. module として、上記スクリプトを書いてexportする
2. ブラウザ側のコンポーネントからimportしてボタン要素をクリックしたら実行する
3. 取得したサムネイル画像とタイトルを表示する
   こんな感じをイメージしてました。

で、何が問題なのかというと、open-graph-scraperはブラウザでの使用がサポートされていないので、importして使おうとすると、build エラーになることです。

open-graph-scraperの install は問題なくできるのですが、ブラウザ側で呼び出そうとした瞬間、build すらできなくなりました。
(当初原因わからなく、ここでだいぶハマった)

結論として、Nuxt の serverMiddleware を使うことで、この問題を解決しました。

serverMiddleware を使用する

使用方法はいたってシンプルです。
今回はsrcディレクトリ内にapiディレクトリを作成して、その中のファイルに API の記述をしていきます。

serverMiddleware の設定はnuxt.config.tsに追加します。

nuxt.config.ts

const nuxtConfig: NuxtConfig = {
  serverMiddleware: ['~/api/index.ts'], // <= 今回ファイル名はindex.tsとします。
}

続いてindex.tsファイルに API の記述をします。

index.ts

import express from 'express'
import ogs from 'open-graph-scraper'

const app = express()
app.use()

app.post('/', async (req, res) => {
  try {
    const options = { url: req.body.url }

    await ogs(options).then((data) => {
      const { result } = data
      res.send(result)
    })
  } catch (error) {
    console.log(error)
  }
})

module.exports = {
  path: '/api/',
  handler: app,
}

記述はこんな感じで OK です。
あとはブラウザ側で/api(今回は POST )を叩けばopen-graph-scraperが実行され、YouTube のサムネイル画像やタイトル、その他データを取得してくれます。

まとめ

• open-graph-scraperはブラウザ側での使用はサポートされていない
• serverMiddleware を使用し、open-graph-scraperを実行することで解決できる

build エラーになる原因に気づいてからは、比較的スムーズに解決できました。
同じような原因で詰まっている方の解決策として、参考にしていただけるとうれしいです。

参考資料

The serverMiddleware property
Nuxtに「serverMiddleware」を設定して、API サーバ的な動きをさせてみた