🎉

Mirador 3にmirador-image-toolsプラグインを追加して、1つのjsファイルにまとめて配布する方法

2022/06/08に公開

iiif

Mirador

tech

概要

表題の通り、Mirador 3にmirador-image-toolsなどのプラグインを追加して、1つのjsファイルにまとめて配布する方法を記述します。

JavaScriptに関する知識不足により、誤った記述があるかもしれません。間違っている点などがありましたらご指摘いただけますと幸いです。

ゴール

以下に示すようなHTMLファイルを記述することにより、以下のURLから確認できるアプリを作成することが目的です。mirador-image-toolsプラグインが有効化されているMirador 3を使用しています。

https://nakamura196.github.io/mirador-integration-alt/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Basic Mirador</title>
  </head>
  <body>
    <div id="demo"></div>
    <!-- ポイント -->
    <script src="https://nakamura196.github.io/mirador-integration-alt/dist/main.js"></script>
    <script>
      // 注意点
      const {Mirador, miradorImageToolsPlugin} = integration
      const config = {
        id: "demo",
        windows: [
          {
            imageToolsEnabled: true,
            imageToolsOpen: true,
            manifestId: "https://iiif.dl.itc.u-tokyo.ac.jp/repo/iiif/fbd0479b-dbb4-4eaa-95b8-f27e1c423e4b/manifest",
          },
        ]
      };
      Mirador.viewer(config, [...miradorImageToolsPlugin]);
    </script>
  </body>
</html>

ポイントは、上記のソースコードで「」としている点です。1つのjsファイルを読み込むことで、Mirador 3とmirador-image-toolsプラグインを使用しています。

また注意点として、integrationという変数を介して、MiradorやmiradorImageToolsPluginを使用しています。この点は、今後改善の余地があるかと思います。

以下、このjsファイルの使い方・作成方法について説明します。

使い方

ビルド済みのものを使用する

上述したHTMLファイルのように、以下のjsファイルのURLを参照することで使用することができます。

https://nakamura196.github.io/mirador-integration-alt/dist/main.js

ビルドして使用する

以下のGitHubリポジトリを作成しました。

このリポジトリは、こちらの公式リポジトリを参考に作成しました。

まず、リポジトリをクローンします。

git clone https://github.com/nakamura196/mirador-integration-alt

次に、必要なライブラリをインストールします。

cd mirador-integration-alt
npm install

そして、以下のように、webpackを実行します。

npm run webpack

（リポジトリをクローンした際に既に作成されているはずですが、）distフォルダにmain.jsというファイルが作成されます。

カスタマイズする

以下のファイルで、Miradorとmirador-image-toolsプラグインを使用しています。ここに他のプラグインを追加する等してカスタマイズすることができます。

まとめ

Mirador 3にmirador-image-toolsなどのプラグインを追加して、1つのjsファイルにまとめて配布する方法を記述しました。誤った記述を行なっている点があるかもしれませんが、参考になりましたら幸いです。

概要

ゴール

使い方

ビルド済みのものを使用する

ビルドして使用する

カスタマイズする

まとめ

Discussion