SvelteKitで文献リストを作ってみる

Code4Lib Japan 2023 カンファレンス

東京大学　前田朗

はじめに

• いまどきのフロントエンド技術を試す
• オフ(趣味）の自由研究
• こういう自由研究が仕事に役立つことも

​

JavaScriptフレームワーク

• Webページ作成のためのフレームワーク（フロントエンド技術）
• 用意された枠に設定とHTML・JavaScript・CSS等を埋めていく
• ボタン等の再利用可能なパーツ（コンポーネント）をつくれる
• JavaScriptオブジェクトの変更を感知して画面表示を変えてくれる
• JavaScriptフレームワークの有名どころ
• Vue.js
• Angular
• React

「こういうのが使えると本格っぽいのでは？？」という動機で学習開始

SvelteKitとは

• JavaScriptフレームワークSvelteがベース
• 学習と利用のハードルが低い
• 実はVue.jsやGatsbyJS(Reactベース）の学習に挫折
• 教科書どおりに動かせはしたが、独自にサイトを作れる気がしない…
• その挫折の果てに、Svelte/SvelteKitに行き着いた
• とはいえ、Vue.jsやReactの学習もSvelteKitの理解に役立った
• いくつも機能があるが、今回試すのはメタデータを外部から取り込んでWebサイトを作るJamstackのみ

Jamstackの自分なりの理解

外部サイト

(データ）

Web API

著者IDで

動的生成

静的Webページ

JavaScript�フレームワーク

外部サイト

取得データを含め

出力

Webページ

取得データで

動的生成

Webサーバ側で動的な処理（DBサーバ等内部プログラムとの連携）をしない

動的な処理はJavaScriptによりWebブラウザ側でさせる

CiNii Booksの著者IDから著作リストを作る

試したこと

• SvelteKitでWebサイトを作ってみる
• Webサイトに表示するデータはWeb APIから取得する
• 一覧ページ　→ CiNii Books API (入力は著者ID)
• 詳細ページ　→ OpenBD (入力はISBN)
• BootStrapを組み合わせて楽に画面デザインする
• 静的サイトを生成してみる

​

Webページ生成図解

著作詳細ページ

著作詳細ページ

著作一覧ページ

著作詳細ページ

CiNii Books

OpenBD

著者IDで

データ取得

ISBNで

データ取得

ISBNで

動的生成

著者IDで

動的生成

全ISBNリンク

静的Webページ

SvelteKitで作る

出力

作成したWebサイト（一覧ページ）

以下、略

著者ID（CiNii Booksの著者ID）設定を変えれば、任意の著者でWebサイト生成ができてしまう

作成したWebサイト（詳細ページ例）

以下、略

ヘッドレスCMSで文献リスト

試したこと

• ヘッドレスCMSとSvelteKitを組み合わせる
• Webフロントエンドとデータをサイトごと分離
• ヘッドレスCMSでどこまできるか
• ヘッドレスCMSはWeb公開用の画面がない

（Web公開画面はWeb APIでデータを取得して要自作）

• JPCOARスキーマもどきのメタデータにしてみる
• SvelteKitでJPCOARスキーマをWebページで自分なりに表示

Webページ生成図解

論文詳細ページ

論文詳細ページ

文献一覧ページ

文献詳細ページ

microCMS

(ヘッドレスCMS)

全件取得

１コード取得

動的生成

動的生成

全レコードリンク

静的Webページ

JPCOARスキーマライクなメタデータ設計�メタデータ数件入力

SvelteKitで作る

出力

microCMSでJPCOARスキーマもどき

• microCMS（クラウド）なら無料枠がある
• メタデータを設計
• 基本のメタデータ型（テキストや数値など）を組み合わせたデータ型を作れる
• それをさらに組み合わせて、積み上げていくと複雑なメタデータ設計ができる（WEKO3と似たところがある）
• ただし、XMLの属性は表現できないため、値として持たせる
• 入力したデータはWeb APIによりJSON形式で出力できる

作成したWebサイト（一覧ページ）

作成したWebサイト（詳細ページ）

• JPCOARスキーマのXMLの「属性(attribute)」を値に添える
• 階層はインデント表示
• 本当は著者詳細情報はデフォルト非表示にしたかった
• 行間のコントロールが手に余った
• 画面に表示するものとしないものを選ぶとすっきりしそう

最後のまとめ

• SvelteKitはたしかに楽
• ヘッドレスCMSで文献サイトをつくるモデルはおもしろかった
• researchmap APIとの組み合わせを試すのも勉強になりそう
• SvelteKitを動かせることと、きれいな画面デザインが作れることは（当然だが）別問題
• 検索(List.jsなど)との組み合わせは難しそう
• 各ページのHTMLはJavaScriptのみ
• つまりテキストの入ったHTMLにはなっていない
• HTML中のidを使うのもうまくいかなかった（ページ読み込みの関係か）

今回の参考文献

• 「Software Design 2023年7月号」（技術評論社）の特集「Special Feature 2 SvelteでJamstack開発」
• 「実践 Svelte入門」 （技術評論社） ISBN 978-4-297-13495-2