Rampをカスタマイズする

概要

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

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

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

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

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

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

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

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

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の利用にあたり、参考になりましたら幸いです。