🐙

Mirador3プラグイン開発: ウインドウをコピーする

2023/07/19に公開

React

概要

Mirador3のプラグインとして、ウインドウをコピーするプラグインを作成しました。

なお本機能は以下のプラグインですでに提供されているものです。

そのため、本プラグインはプラグインの開発手順を学ぶために作成しています。そのような観点で、本プラグインが参考になりましたら幸いです。

画面例は以下です。

ソースコードは以下です。

デモサイトは以下です。

開発メモ

本プラグインの開発にあたり、まず以下のリポジトリをcloneし、変更を加えていきました。

src/index.js

まず以下のファイルについて、miradorDownloadをMiradorCopyWindowに書き換えました。

src/MiradorCopyWindow.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のアノテーション付与モジュールがありました。

`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の記述は省略しています。

`component`

最後にcomponentです。以下のように、コンポーネントで表示する内容を記述しています。

class CopyWindowComponent extends Component {
  render() {
    const { copyWindow } = this.props; // 1
    return (
      <MenuItem onClick={() => copyWindow()}>
        <ListItemIcon>
          <OpenInNewIcon />
        </ListItemIcon>
        <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
          Copy Window
        </ListItemText>
      </MenuItem>
    );
  }
}

上記の(1)でコメントした部分は、先にmapDispatchToPropsでpropsに与えたdispatchを使用しています。メニューをクリックしたら、dispatchであるcopyWindowが実行されます。

合わせて、以下の部分で、copyWindowの型を与えています。mapDispatchToPropsやmapStateToPropsでpropsに渡した変数の方を定義するようです。

CopyWindowComponent.propTypes = {
  copyWindow: PropTypes.func,
};

CopyWindowComponent.defaultProps = {
  copyWindow: () => { },
};

まとめ

間違っている部分があるかもしれませんが、Mirador3のプラグイン開発に関するメモを紹介しました。引き続き、他のプラグイン開発を通じて、メモを共有したいと思います。

他の方の参考になりましたら幸いです。

概要

開発メモ

src/index.js

src/MiradorCopyWindow.js

targetとmode

mapDispatchToPropsとmapStateToProps

component

まとめ

Discussion

`target`と`mode`

`mapDispatchToProps`と`mapStateToProps`

`component`