概要
Mirador3のプラグインとして、ウインドウをコピーするプラグインを作成しました。
なお本機能は以下のプラグインですでに提供されているものです。
https://github.com/ProjectMirador/mirador-plugin-demos
そのため、本プラグインはプラグインの開発手順を学ぶために作成しています。そのような観点で、本プラグインが参考になりましたら幸いです。
画面例は以下です。
ソースコードは以下です。
https://github.com/nakamura196/mirador-copy-window-plugin
デモサイトは以下です。
https://nakamura196.github.io/mirador-copy-window-plugin/
開発メモ
本プラグインの開発にあたり、まず以下のリポジトリをcloneし、変更を加えていきました。
https://github.com/ProjectMirador/mirador-dl-plugin
src/index.js
まず以下のファイルについて、miradorDownloadをMiradorCopyWindowに書き換えました。
https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/index.js
src/MiradorCopyWindow.js
以下のファイルが主に編集するファイルです。
https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js
本ファイルは、まず以下のファイルの内容をコピーしました。
https://github.com/ProjectMirador/mirador-plugin-demos/blob/master/src/plugins/copy-window.js
まず末尾の以下の記述から説明します。
targetとmode
targetはコンポーネントを設置する場所を指定します。またmodeはコンポーネントの追加方法を指定します。modeについては、addやwrapという選択肢があるようでした。
以下、targetの値の例です。
- WindowTopMenu
各ウインドウ上部のメニューの部分です。
- WorkspaceControlPanelButtons
ワークスペースのパネル部分です。
- AnnotationSettings
アノテーションの設定画面です。
最後のAnnotationSettingsおよびmodeにwrapが指定されているプラグインとして、以下のMiradorのアノテーション付与モジュールがありました。
mapDispatchToPropsとmapStateToProps
これがはじめ理解しづらかった（そしてまだ適切に説明できるほど理解できていない）のですが、propsに渡すdispathとstateを定めた変数を指定します。
dispatchについては、以下の変数を与えてます。
copyWindowActionの具体的な内容は以下です。既存のwindowを取得して（1）、不要な変数を削除した上でwindowをコピーして(2)、それをaddWindow（3）しています。
stateについては、以下の変数を与えています。以下の例は少し特殊で、stateをすべてpropsに渡す設定となっています。他のプラグインでは、必要な値のみをstateから抽出して、propsに渡しているようでした。
実際、本プラグインでは、mapStateToPropsでpropsに渡された値は使用されていないため、この記述はなくてもよいはずです。そのため、以下でもmapStateToPropsの記述は省略しています。
https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js
component
最後にcomponentです。以下のように、コンポーネントで表示する内容を記述しています。
上記の(1)でコメントした部分は、先にmapDispatchToPropsでpropsに与えたdispatchを使用しています。メニューをクリックしたら、dispatchであるcopyWindowが実行されます。
合わせて、以下の部分で、copyWindowの型を与えています。mapDispatchToPropsやmapStateToPropsでpropsに渡した変数の方を定義するようです。
まとめ
間違っている部分があるかもしれませんが、Mirador3のプラグイン開発に関するメモを紹介しました。引き続き、他のプラグイン開発を通じて、メモを共有したいと思います。
他の方の参考になりましたら幸いです。