Mirador3プラグイン開発: ウインドウをコピーする
概要 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 まず末尾の以下の記述から説明します。 export default { target: 'WindowTopMenu', mode: 'add', component: CopyWindowComponent, mapDispatchToProps: mapDispatchToProps, mapStateToProps: mapStateToProps, } targetとmode targetはコンポーネントを設置する場所を指定します。またmodeはコンポーネントの追加方法を指定します。modeについては、addやwrapという選択肢があるようでした。 以下、targetの値の例です。 WindowTopMenu 各ウインドウ上部のメニューの部分です。 WorkspaceControlPanelButtons ワークスペースのパネル部分です。 AnnotationSettings アノテーションの設定画面です。 最後のAnnotationSettingsおよびmodeにwrapが指定されているプラグインとして、以下のMiradorのアノテーション付与モジュールがありました。 https://github.com/ProjectMirador/mirador-annotations/blob/master/src/plugins/miradorAnnotationPlugin.js mapDispatchToPropsとmapStateToProps これがはじめ理解しづらかった（そしてまだ適切に説明できるほど理解できていない）のですが、propsに渡すdispathとstateを定めた変数を指定します。 dispatchについては、以下の変数を与えてます。 const mapDispatchToProps = (dispatch, { windowId }) => ({ copyWindow: () => dispatch(copyWindowAction(windowId)), }); copyWindowActionの具体的な内容は以下です。既存のwindowを取得して（1）、不要な変数を削除した上でwindowをコピーして(2)、それをaddWindow（3）しています。 const copyWindowAction = (windowId) => (dispatch, getState) => { const window = getState().windows[windowId]; // 1 const cleanedWindow = omit(window, [ 'id', 'companionWindowIds', 'thumbnailNavigationId', ]); // 2 dispatch(mirador.actions.addWindow(cleanedWindow)); // 3 }; stateについては、以下の変数を与えています。以下の例は少し特殊で、stateをすべてpropsに渡す設定となっています。他のプラグインでは、必要な値のみをstateから抽出して、propsに渡しているようでした。 const mapStateToProps = (state) => ({ state: state, }); 実際、本プラグインでは、mapStateToPropsでpropsに渡された値は使用されていないため、この記述はなくてもよいはずです。そのため、以下でもmapStateToPropsの記述は省略しています。 https://github.com/nakamura196/mirador-copy-window-plugin/blob/main/src/MiradorCopyWindow.js component 最後にcomponentです。以下のように、コンポーネントで表示する内容を記述しています。 ...
