📚

Next.jsでジャパンサーチのウェブパーツを使う

2023/02/09に公開

Next.js

tech

概要

ジャパンサーチでは、ジャパンサーチ内で使われている画面の構成要素を、部品としてジャパンサーチ以外のウェブサイトでも利用できる機能であるウェブパーツを提供しています。

今回、Next.jsで本機能を使用する機会がありましたので、その備忘録です。

使用例

以下のページでご確認いただけます。

https://jps-2023-next.vercel.app/jps

ソースコード

以下で公開しています。

以下のように、Scriptタグを使ってjsファイルを読み込むことで、うまく表示させることができました。

    <Layout>
      <Script src="https://jpsearch.go.jp/assets/js/wp.bundle.js"></Script>
      <Container
        sx={{
          my: 5,
        }}
      >
        <p>
          東京大学「総合図書館バーチャルミュージアム」を改変して作成しています。
        </p>
        <div className="jps" data-lang="ja" data-cur={data}></div>
      </Container>
    </Layout>

まとめ

ジャパンサーチのウェブパーツを同様の環境でお使いになられる際の参考になりましたら幸いです。

概要

使用例

ソースコード

まとめ

Discussion