🙆

Rampをカスタマイズする

2024/07/09に公開

Vercel

iiif

ramp

tech

概要

Rampのカスタマイズ方法に関する備忘録です。カスタマイズの結果、以下のように、UIの一部を日本語化し、メディアプレイヤーとメタデータおよび文字起こしを左右に並べて表示します。また、クエリパラメータtを使って、音声の再生開始時間を指定できるようにします。

例えば、以下のURLから、140秒時点から再生することができます。

https://ramp-iiif.vercel.app/?iiif-content=https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json&t=140

以下がカスタマイズ前です。

セットアップ

以下の記事の参考にしてください。

カスタマイズ

音声の再生開始時間の指定

以下のマニュアルにおいて、startCanvasTimeプロパティが使えることがわかります。

そこで、以下のindex.jsファイルに対して、startCanvasTimeをクエリパラメータから取得する処理を追加します。

demo/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
// import config from './config';

const manifestURL = () => {
  const params = new URLSearchParams(window.location.search);
  // let url = `${config.url}/manifests/${config.env}/lunchroom_manners.json`;
  let url = "https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json"
  if (params.has('iiif-content')) {
    url = params.get('iiif-content');
  }
  return url;
};

const startCanvasTime = () => {
  const params = new URLSearchParams(window.location.search);
  if (params.has('t')) {
    return parseFloat(params.get('t'));
  }
  return 0;
}

ReactDOM.render(<App
  manifestURL={manifestURL()} startCanvasTime={startCanvasTime()}
/>, document.getElementById('root'));

そして、app.jsに対して、startCanvasTimeプロパティを与えます。これにより、クエリパラメータから、メディアの再生開始時間を指定できます。

demo/app.js

...
        <IIIFPlayer
          manifestUrl={manifestUrl}
          startCanvasTime={canvasTime}
        >
...

日本語化およびレイアウトの変更

上記と同様、demo/app.jsファイルを編集することで、日本語化およびレイアウトの変更を行うことができます。

Vercelへのデプロイ

Build & Development Settingsを以下のように指定します。

Build Commandにnpm run demo:build、Output Directoryにdemo/distを設定します。

また、Node.js Versionを18.xにする必要がありました。20.xの場合、パッケージのインストール時にエラーが発生しました。

まとめ

Rampの開発に関わる方々に感謝いたします。RampおよびIIIF Presentation API v3の利用にあたり、参考になりましたら幸いです。