概要

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

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

ゴール

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

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

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

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

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

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

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

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

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

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

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

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

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