概要

任意の角度で画像を回転するMirador 4プラグインで、角度の初期値を設定できるようにしました。

リポジトリは以下です。

https://github.com/nakamura196/mirador-rotation-plugin

デモページは以下です。角度および矩形を初期設定とともに、画像を回転させることができます。

https://nakamura196.github.io/mirador-rotation-plugin/

背景

以下の記事で、本プラグインについて説明しています。

一方、課題として、角度の初期値を与えることができませんでした。

これに対して、以下の記事で紹介したように、Mirador 4の標準機能として、角度の初期値を与えることができるようでした。

合わせて、以下の「mirador-image-tools」プラグインについて、webpackからViteに変更されていたので、この変更を「mirador-rotation-plugin」にも反映することにしました。

https://github.com/ProjectMirador/mirador-image-tools

GitHub Pagesでの公開

GitHub Pagesでの公開にあたり、「mirador-image-tools」のvite.config.jsを以下のように変更しています。これで、npm run build:demoにより、GitHub Pagesで公開するためのディレクトリを作成することができるようになりました。

https://github.com/nakamura196/mirador-rotation-plugin/blob/main/vite.config.js

iiiiiiie}mmmmmmmx)pppppppVpb)e}o}p]r}s};oooooooioa,s,p,l,e,e,rrrrrrrtrsp}{}beilte}ur{}sa}ropttttttteteruxnois,geol,vpo:ob}:b}iccambp]ianc}li'eer{rfp{{pcdcu,u,llMldiul,ncalva@rntesakoepeioer}sil}r}sduaueziu{}stmoi}est:::datfggnfrslumo,oli,o,o:dtdrelg,:(esf::eecfhilfaosdtpleiudbeffnleo}uece:Ddins}):ecct}}s{'ftrlofiuc.:Dtlxnr::nioalxu,r{:h:eOnae,[,B(oor{{t4iofebrgleeiyutpctlrmuttag}ce'ppsmtb}'upnnyci}ci}sd4nfmrUSoutsn{rOpeue{{remepepsl,e[s[jst:eTuu)fnrssdofaf/e4eroRymrsv:uOrtmyNa:Orusor'm]s:i:Opicl)idotte{nccf}ctc'm6Co'mLnad..tpn:a:atpntebera,.xo[D(loo;xlcms(ooooc(o:o'omfTcteeG'Dtapms'ta:taaepj_'{n'Obdna-eeddotdnnrccci}nhen,ns'oifnIdiilf:e:MilFlca:st,sl:u.tdo:sie/esdsooofsdaacrsfsf'nP}/oivTiro:i:io:{istce:oioeeussmsdmoet(nnnacoewwo(roiri@poapnn.Hs:nlt/[rnl::ttasarlnnrta.toreolmcsss(wolmaane.llcgvrdtfaeGUts[ers('as[e-rnt{dedLt:pseDScmSeofotttsaneoiisrcee/ioehrcCIB't:'Uurfed:.N{'duds-n)osuynir/or./intis./ttoro.Ui}tm:okoT_,r_Recso.aRoe_jaa:'tnvrcSclslssdsatolsl)deRneip}manHPu{_L,r'r{.mem,._sm{dj-c.DrSoretrettlorffeerLdfjsagfUAetTim,DOea'j-e(assG=ictgcscsasfegcss.{rTersetf'eiBG,eonalbsc:sf{wxtIrSa(fPtt.s.(..l!ooxo/shrg.g_EsPdt'Pj:txiaa'rTptt'=iaPsi.l'rro=rP.mp''olj(PStae)ule''llfi,uHa=asMltascoFmmg=(ahl;;mos{Astxmuc',Rielitc=Utt.oaeht=Fogi((('ttuboG?_h.=dgtmenslt>Bhpsivwhip(ldp''Ehmvg''nE_(j>'i.ia(-otfu_.asiao=aly`eeaREr(liiu;'S{/ns]nkrcjauesr{Prt=Dnif=weFCsmteNrn'tnr;*e'(,'eat_ssrr.eAehigtpa(ioohmOoe,e-l?'w,f,ydDt|-:r'Gs.arfapi)lpmS.oErw'r',osoOejjfe,Eorweffitat)eiorrvN;e;(Ur(rMsssiaSleacislht(evceeTpUapRmp-'txxl(d)vsitl.e.hf{sdeDsd'rRcrLakr,s)'esFeotoersj.sr:dio)oLto_(tgo_$,sri{(lrse)oj.crloc('cm'.t_/cl'vfyaiosP$s,vr{e';eo.=pa,t|edes(fd{nita{ueis.sc/=etao_(i(.)rd(natsc{(gs/skd=ein/_asds)oid(thrcdii_.serods.trtitmred(,cerinn_e_m'Dnrjeg'sa{(misPsesagtn_ue..csss)ttddosrdasctlevmp[jxt.;D(eeStcetfuDos.sdeesspidmmrDPshuridutB'r'nxx_areoociat}lsritsA]cdt_t,m/SDrtPli,rp_S,/?e]i)hosri,hayveu_Ein'n.\,'Srcr)t.e'ct'_n'c,j/drcD,f;h':dt,Pdmiss.'ecii)$)eofAeierx*umDtrfl;{;tmriiTxrsc?\toio)iedroylmH.a$.f'r;l)eu'ephd/j8,)re;se)ssoto]s';o)t,,t:rmr,$)'o;Pr'tl-{/,staf{u,.'r}rtocm/,o)}cdhrrteemt,,'i}ceurtiia)r`ecrrarmta;e):ue).apisc;r.;udoo_ytts'rorntnori)lrt.ecruv;)-.jsyee)rmst(.:,oe'sa.}tt_r.)taa:_g';rt./s)uiu'*);eorm',nli,=-)r>fp)aol,d(ruo_{cgrmei-o:nrc/okt'tsr)a_ut_e:i/o*}n').];'e,,s.js'),

まとめ

Mirador 4のプラグイン開発にあたり、参考になりましたら幸いです。

なお、Mirador 4がReact 19への対応を進めており、今後プラグインのほうも19に対応する必要がありそうです。

https://github.com/ProjectMirador/mirador/releases/tag/v4.0.0-alpha.16

Miradorやmirador-image-toolsプラグインの開発が進んだら、本モジュールもReact 19への対応を行いたいと思います。