Vue3

概要 Editor.jsでインラインのマーカーツールを作成する方法の備忘録です。 参考 以下のページが参考になりました。 https://editorjs.io/creating-an-inline-tool/ https://note.com/eveningmoon_lab/n/n638b9541c47c TypeScriptでの記述にあたっては、以下が参考になりました。 https://github.com/codex-team/editor.js/issues/900 実装 Nuxtで実装します。以下のmarker.tsを作成します。 i c } e m l x p a b s a t c s } s } c } r } s } w } u } c } p o s u t p a l t t o e u r n h o r s t a i g a a r } a r n t t t t t n t t t t r r i } t a c c m m r t w c c m r e c t i } } r t t t : : s 静 t e ; イ t e s h h h h h ボ d h h h h e 選 r f h テ p o o a a a h < r o o a a ツ c o h f t M o e s 的 i t m } ン i t t i i i i i タ e i i i i t 択 o t r i キ ( n n r r n i m a n n r n ー k n i t e t t a n : A s : メ c u a , ラ c u r s s s s s ン r s s s < s u さ u ( h e s ス r s s k k g s a p s s k g ル S s s ( h l h d y r : P t ソ r r c イ r u . . . . . 要 ( . . . s . r れ n t i t . ト a t t . . e . r ( t t ? e の t t . t i s i e p k b I r s ッ g n k l ン g n c a b s t c 素 ) b b b v b n た d h s u w を n c a . a k r . . 状 a s h s e s f e e n o ; i t ド e : a ツ e t p u t a l を u u u g u テ ( i . r r g s m l p i p > a m t r i 態 t m t i . . a r u o n r で t { s ー t t o i t a g a 作 { t t t t t キ r s u n a < e e a a p n i n a e e n を e a a s b { b u { T l l g i 許 { s ル r r t t s 成 t t t w t h ス a . n ; p m : l r s e s . タ g r x m s チ ( r t . u u l o l e ; n 可 s : と i u ( = o e = s し o o o i o i ト n s w ( a e k s n e s グ e k t o e ェ ) k e s t t t A o a g さ a し s e { n 、 n n n d n s を g t r r r R c N d r e を : v r ッ t t t P l | n ; れ n " て I ; a = " = S . . t . . e a a a k a t = a C t l 解 = = e t ク { = = a o o M I ; る i c の n a p = M V = t i h c b < : t p n > n e m h N e 除 R ( N t n n a { H H t d 振 l p i f A " G y n = l u m e ( g g d d e i o c a t r ) o t ! e ? ? r } T T i x る i i ; n a R c ア d p n " a t a R ) r e タ e T o l d t n h a ; d h ! ) . . k M M z - 舞 n u l K d イ o e e 2 s t r a a ) グ ) e c = d e i g i n e i m c c e f L L e m い e } l s " x コ c r 0 s o k n { n ; で x u ( ( o e s g ( s a { l l r r B タ ( a を ( : l e ; - ン u = H " L n > g g ラ { t m t s m n ) . e t . r a a T o u グ ) r 定 ) ; ; m を m T i ; e e ッ e h e a . a . e a k s s o m t と k 義 { a 設 e " M h s タ ) ) プ = n i l r e { p e x p ; s s o t 属 { e { r 定 n b L e t グ ; t s e k x i x t i L L l " o 性 r a k t u i . で { r . . c ) p . t ) . i i ; @ n を " p e . t = g a 囲 a c c t ; a s r ; s s s e E 指 , i r c t h d む n r l e n e a e t t d l 定 : " r o t d g e a d d l c l . . i e ; e n = ( e a s T T e t e a r t m A a " " t . t s e o c C c d e o e P t ; 1 h e e ; x T t o t d m r n I e 8 i x E t a i n i ( o j t E " s t l ) g o t o " v s ; } l > . r e ; ( n e n c e / ) e < a a m m . n . d ( e m p p c e c a f t f x " d { e a i t n l r i s i - c i n t . C t a k n ( n m d t t h s o ( s ) d ) d a x o ( t n t s ; P ; P r - r " d y t h a a k m j b = l e i 属 r r e a s u " e n s 性 e e r r " t M s t . の n n - k ; t 1 . s t 追 t t - e o 0 i ( a 加 T T a r n . n ) g a a c - " 4 l ; ) g g t - ) 5 i ; ( ( i a ; 8 n t t v c e h h e t 1 T i i " i 2 o s s ) v . o . . ; e 0 l t t " 4 B a a ) l u g g ; 2 t ) , . t ; 9 o t 1 n h 9 ) i ; s 1 . . c 6 l 8 a 6 s s . ) 7 ; 8 1 1 . 4 1 7 . 9 8 4 . 0 3 . 9 7 4 1 . 6 8 7 H 8 . 6 7 4 l 1 . 4 9 - 2 . 5 8 3 . 5 0 8 . 7 7 5 . 8 0 2 - 1 . 4 0 1 z m . 5 4 6 . 9 5 2 l 3 . 6 2 4 - 6 . 3 2 7 a 1 . 5 9 7 1 . 5 9 7 0 0 1 2 . 1 8 2 . 5 9 1 . 6 3 2 1 . 6 3 2 0 0 1 . 6 1 5 2 . 2 0 1 l - 3 . 5 1 9 6 . 3 9 1 - 2 . 9 0 2 - 1 . 6 7 5 z m - 7 . 7 3 3 . 4 6 7 h 3 . 4 6 5 a 1 . 1 2 3 1 . 1 2 3 0 1 1 0 2 . 2 4 7 H 3 . 2 7 3 a 1 . 1 2 3 1 . 1 2 3 0 1 1 0 - 2 . 2 4 7 z " / > < / s v g > ' ; 上記を以下のように呼び出します。 ...

概要 Editor.jsを使用する際、デフォルトでは左右に大きなマージンができます。これを解決する方法を紹介します。 方法 以下が参考になりました。 https://github.com/codex-team/editor.js/issues/1328 具体的には、以下を追加します。 . . } . } c c c e e m d m - - a x a b t x - x l o - b - o o w l w c l i o i k b d c d _ a t k t _ r h h c _ : { : o _ n c c 1 t o a 0 e n l 0 n t c % t e ( , n 1 ! t 0 i 0 m { % p o - r t 8 a 0 n p t x ; ) ! i m p o r t a n t ; ソースコード全体は以下です。 ...

概要 以下の記事で、Nuxt 3でLeaflet Marker Clusterを試す方法を紹介しました。今回は、Composition APIを使った書き方に更新したので、その備忘録です。 インストール 以下をインストールします。 n n p p m m i i l - e D a f @ l t e y t p e l s e / a l f e l a e f t l . e m t a r @ k t e y r p c e l s u / s l t e e a r f l @ e v t u . e m - a l r e k a e f r l c e l t u / s v t u e e r - l e a f l e t ソースコード 以下を参考にしてください。 ...

概要 Nuxt3とVuetifyを使用したサンプルリポジトリに、Cytoscapeの動作デモを追加しました。 https://github.com/nakamura196/nuxt3-demo 以下のページで動作確認いただけます。 https://nakamura196.github.io/nuxt3-demo/ インストール 以下を実行しました。 n n p p m m i i c @ y t t y o p s e c s a / p c e y t o s c a p e ソースコード < t e < i l c c } o } < # } m / s m e o o ; n ) / s c / p < t c p t n n c ] M c } ; s t y w h p b s l d / e r o s s y ) o y ) c y i e o a t a i < d m i r c t t . { } { } ; u c b a s e } l } ; r l { d i s c y t v d i p p t y a , , n = o o u t l , a , i e t g i k l e - i v l t : c a d g d p g d t n x t y . . . } . . } e n ] e ] y n d p p h h t g e > i b v > a c o d d r a o r a e c t S o l s s c ) s c ) m o , d , o a i a t s : t i r > d t t s y a u d ( o t s o t d y a e u e t e s h w " " " " c " e s w " " " " , e d { { { { { { { { g { { { { { { { u m r d > c : o o = n i e e t n n N [ u a i u a ( t i l n : y l s e i b b b b o t l s i t l t c n e e t e e d o 1 n u " d > t o y t o p : t p : ( o n e s l e ( i d a o o o n e e ( d a i a u t s d d d d d d d d s d d d d d d d : : c i p 0 8 : n v c = u s : d : i : ) s e c e c e c { g t c r r r t x c { t r n r r s : a a a a a a a a : a a a a a a a t n e 0 0 d i l " p c = e { o { c r t l y s t h h k d d d e t t h g e g v : t t t t t t t t t t t t t t t { " e g d % % a - e a c a n " n " = a : i e t h o t : g e e e n - o : e - e e [ a a a a a a a a [ a a a a a a a b d : > ; ; b c w s y l p n u = n i : e i > p o c o e r : r r r r t v r t c t - { : : : : : : : : : : : : : : : r : s o " s " a e u m o d d d e d n t s e ( 8 o - - - : a ( 6 - o - s e 1 o l > = > n l b d : { g : { ( o E i c t " 8 0 u c w o l " , a l a t { { { { { { { { { { { { { { { a t 0 l o " < g f l e e e { c n f a ( n 0 , n o i p " i e r o r y d r , u r m / = r ; r s " x s " u a y p ) o , d l d a d g d r r r l i i i i i i i i s s s s s s s t u t : a d " o = " n : " e m b : e d - o t c a n g o " o e d d d d d d d d o o o o o o o h e e - i t m = > , o , d e l e f r h i t " e w : w " : : : : : : : : u u u u u u u f , ; l 4 v s d 3 g n e t " i " " t a : " - - : r r r r r r r i i " > " " 0 { e 0 e t d r ) t : : y ( ) s " c " " " " " " " " c c c c c c c r g > c = ; " 0 " . : u " " n " h # o " c b l a r g p w e e e e e e e s h c y , g e : " 3 : a c a f l b a i a p o r l h : : : : : : : t t o t r + + e f , # , m e p f o e t r d h s a a e " c l o e y t a " 0 0 e n e a r z " d y i e s n a " " " " " " " , y o s f c : c E l c 0 . ) t " a " i " b d " s t t c b b g g l a a r c ( = o o l s o 0 5 " e : a : e } u " h " " a i i r r a p n = a n u 2 u e e v " , , r a r } g } o t r r a a d h ; " p u r n 0 n m , e , " " " " " } " } p } } " d d s s y i p e l e t 0 t e r , t , # , , } } p , " " s s b d r " l f , n " r f , } } , e } } , , h h u " i ; ) ( } } t , i f , r , , t o o g , m ; 0 , , s B a a } " a t t p p " a ) o y n a , r a a p p , t r ; u I g a } g r r e e a y / r d l a e g g r r t r " r c ( e " } t e e " " a g e / e " " , , : t t , , r e a r : c , : : g t c e y " t t e : o t a " " b " " a a t n i c n ) i l g r r : " : v t o , r a r g g r c e i d d d a e e " o l ( v e " y s t t a s i { e " b s : : p e c } ( } u h h " k ) 0 + g o " " i = ; ) } " p p w d } " ; c , p l h " a o } e a e } d / u r n a } , d : n } " t t N t , " " } o a , } , d n } } e y t } " a , } } > r , , p g u e s t h : < / " v c - a b t t " n > } , まとめ 参考になりましたら幸いです。 ...

Splitpanesは、以下のように、ペイン（pane）分割・リサイズを可能にするVue.jsのライブラリです。 https://github.com/antoniandre/splitpanes このライブラリの利用にあたり、ペインにiframe要素を含む際、リサイズがうまくできないことがありました。これに対して、以下で対応方法が記載されていました。 https://github.com/antoniandre/splitpanes/pull/162 上記に記載がある通り、以下を追記することで、iframe要素を含むペインがあっても、正しくリサイズ操作を行うことができました。 . } s p l i p t o p i a n n t e e s r - - - e d v r e a n g t g s i : n g n o . n s e p ; l i t p a n e s _ _ p a n e { 同様のことでお困りの方の参考になりましたら幸いです。 ...

概要 Nuxt3（Vue3）を用いたテキストの選択機能の実装にあたり、VueUseを使用してみましたので、その備忘録です。 https://vueuse.org/ デモ 以下のページからお試しいただけます。 https://nuxt3-demo-git-main-nakamura196.vercel.app/textSelection ソースコードは以下です。 https://github.com/nakamura196/nuxt3-demo/blob/main/pages/textSelection.vue インストール方法 以下のページに記載があります。 https://vueuse.org/guide/ 具体的な手順は、以下のとおりです。 n p m i - D @ v u e u s e / n u x t @ v u e u s e / c o r e e } x ) p m ] n o o , u r d ' x t u @ t l v . d e u c e s e o f : u n a s f u [ e i l / g t n . u t d x s e t f ' i , n e N u x t C o n f i g ( { まとめ テキスト選択以外にも、便利な機能が色々と使えるようなので、引き続き試してみたいと思います。 ...

概要 以下の記事で、vue3とbabylon.jsのやりとりを行うプログラムを作成しました。 今回は上記の発展版として、sceneに渡すmeshをvueから指定しています。以下のリンク先で内容をご確認いただけます。（途中、meshをうまく削除できていない箇所があります。今後修正予定です。） https://youtu.be/-dyQp-QX42I デモサイト https://nakamura196.github.io/nuxt3-babylonjs/10 ソースコード https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/10/index.vue まとめ 参考になりましたら幸いです。

概要 vue3とbabylon.jsの双方向のやりとりを行うプログラムを試作しました。以下のリンク先で内容をご確認いただけます。 https://youtube.com/shorts/BIdj-3T2_z8 デモサイト https://nakamura196.github.io/nuxt3-babylonjs/9 ソースコード https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/9/index.vue まとめ 参考になりましたら幸いです。

Nuxt 3でLeaflet Marker Clusterを試す機会がありました。実装例は以下です。 https://nuxt3-demo-nine.vercel.app/map-cluster 本実装にあたり、以下のページを参考にさせていただきました。 https://codesandbox.io/s/ns238 ソースコードは以下です。 https://github.com/nakamura196/nuxt3-demo 2023年3月時点においては、POC（Proof of Concept）の段階のようです。参考になりましたら幸いです。

概要 TEIビューアでの利用を想定したCustom OpenSegDragon Viewerを作成しました。 背景 以下のようなTEIとIIIFを対応させたビューア開発において、次に示す機能を持ったビューアが必要でした。 https://www.hi.u-tokyo.ac.jp/collection/digitalgallery/wakozukan/tei/ IIIFのマニフェストファイルを読み込むことができる。 ビューアコンポーネント側でのコマ送りを、コンポーネント外で把握することができる。 画像の部分領域をハイライトすることができる。 上記の要件を全てを満たす既存のIIIF対応ビューアを見つけることができなかったため、独自のビューアの開発を試みました。合わせて、npmパッケージとして公開することも試みました。 開発したビューア ドキュメンテーション等がまだ不十分ですが、以下のページで公開しています。このページで、ソースコードへのリンクも掲載しています。 https://www.npmjs.com/package/@nakamura196/osd-custom-viewer vue3とviteを使ったコンポーネントの開発およびnpmでの公開にあたっては、以下のサイトを参考にしました。 https://blog.egmond.dev/vue-component-to-npm-package 使用例 以下のページで導入例をご確認いただけます。 https://nakamura196.github.io/nuxt3-iiif-viewer/custom-osd コンポーネント内外からのコマ送りが可能です。これにより、例えばIIIF画像とTEIテキストの並列表示を行った際、TEIテキスト側からのコマ送りや、画像のコマ送りによる当該テキストへのスクロールなどを行うことができます。 またハイライト機能用いることで、あるテキスト行に対応した画像の部分領域をハイライトさせる、といったことが可能です。 使用例のソースコードは以下です。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/custom-osd/index.vue ssrでの公開にあたり、pluginsフォルダに以下を追加しています。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/plugins/custom-osd.client.js まとめ ドキュメンテーションの充実や、IIIF v3への対応など、多くのTODOが残っていますが、参考になりましたら幸いです。

LeafletのVue3での使用例（座標範囲の取得を含む）を紹介するリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-leaflet/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-leaflet Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。

Vue3でOpenSeadragonを使用するサンプルリポジトリを作成しました。 以下が動作例です。 https://static.ldas.jp/vue3-osd/ ソースコードは以下です。 https://github.com/ldasjp8/vue3-osd Vue3初学者のため、誤りなどがあるかもしれませんが、参考になりましたら幸いです。