Vue

Overview The “Pre-modern Japan-Asia Relations Digital Archive” was released on July 25, 2025. https://asia-da.lit.kyushu-u.ac.jp/ The viewer is also available at: https://github.com/localmedialabs/tei_comparative_viewer In this article, I share my experience trying out this viewer. As a result, I was able to self-host it as shown below: https://tei-comparative-viewer.aws.ldas.jp/ It loads the following XML file of “Kaitoshokokki” (Record of Countries and Peoples in the Eastern Sea): https://asia-da.lit.kyushu-u.ac.jp/viewer/300 Running Locally Detailed instructions are provided at the following link, which I followed to get it running: ...

Overview This is a memo on how to create polylines using the polygon tool in Annotorious v2. Background The Annotorious v2 website is available at the following link. https://annotorious.github.io/getting-started/ As shown below, polygons can be drawn. However, a tool for drawing polylines in a similar manner did not appear to be provided, including the following plugin. https://github.com/annotorious/annotorious-v2-selector-pack Customization When a polygon like the following is created: The following JSON file is generated: ...

Overview These are notes on how to create an inline marker tool with Editor.js. References The following pages were helpful: https://editorjs.io/creating-an-inline-tool/ https://note.com/eveningmoon_lab/n/n638b9541c47c For writing in TypeScript, the following was helpful: https://github.com/codex-team/editor.js/issues/900 Implementation Implemented with Nuxt. Create the following 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 > ' ; Call it as follows: ...

Overview When using Editor.js, large margins appear on the left and right sides by default. This article introduces how to solve this issue. Method The following was helpful. https://github.com/codex-team/editor.js/issues/1328 Specifically, add the following CSS. . . } . } 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 ; The full source code is as follows. ...

Overview In the following article, I introduced how to use Leaflet Marker Cluster with Nuxt 3. This time, I updated it to use the Composition API, so here are my notes. Installation Install the following: 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 Source Code Please refer to the following: ...

Overview I added a Cytoscape demo to a sample repository using Nuxt3 and Vuetify. https://github.com/nakamura196/nuxt3-demo You can check it working on the following page. https://nakamura196.github.io/nuxt3-demo/ Installation I ran the following. 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 Source Code < 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 > } , Summary I hope this is helpful. ...

Splitpanes is a Vue.js library that enables pane splitting and resizing, as shown below. https://github.com/antoniandre/splitpanes When using this library, I encountered an issue where resizing did not work properly when a pane contained an iframe element. A solution was described in the following pull request. https://github.com/antoniandre/splitpanes/pull/162 As described there, adding the following CSS resolved the issue and allowed correct resize operations even with panes containing iframe elements. . } 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 { I hope this helps anyone experiencing the same issue. ...

Overview This is a personal note on using VueUse for implementing text selection functionality with Nuxt 3 (Vue 3). https://vueuse.org/ Demo You can try it from the following page. https://nuxt3-demo-git-main-nakamura196.vercel.app/textSelection The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo/blob/main/pages/textSelection.vue Installation Method The installation instructions are described on the following page. https://vueuse.org/guide/ The specific steps are as follows. 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 ( { Summary In addition to text selection, there seem to be many other useful features available, so I would like to continue trying them out. ...

Overview Omeka S and Omeka Classic are very useful tools for building digital archives and for humanities (informatics) research. https://omeka.org/ They come with a REST API as standard and have high extensibility through the addition of modules and plugins. Various existing assets can also be used, including IIIF-related tools, transcription support tools, and tools for handling spatiotemporal information. On the other hand, I (personally) feel that theme development for changing the appearance of sites requires knowledge of PHP and Omeka, making it relatively difficult. On this point, the Headless CMS approach, where the backend and frontend are separated, has been gaining popularity in recent years. ...

I created a repository introducing a usage example of Leaflet with Vue 3 (including coordinate range retrieval). The working example is available here: https://static.ldas.jp/vue3-leaflet/ The source code is available here: https://github.com/ldasjp8/vue3-leaflet As a Vue 3 beginner, there may be errors, but we hope this serves as a useful reference.

I created a sample repository for using OpenSeadragon with Vue3. Here is a working example. https://static.ldas.jp/vue3-osd/ The source code is available below. https://github.com/ldasjp8/vue3-osd As I am a Vue3 beginner, there may be some errors, but I hope this is helpful.

The following was helpful. https://stackoverflow.com/questions/59407003/set-focus-text-field-inside-dialog-when-dialog-opened By accessing $refs after a short delay when opening the dialog, it worked successfully. w } a t c d } h i : a } l i { o f } g s , : e v t t 2 f a T h 0 u l i i 0 n u m s ) c e e . ; t ) o $ i u r o { t e n ( f ( ( s v ) . a n l = a u > m e e ) { . f { o c u s ( ) ;

Overview I created a web application that displays information in a calendar format. Below is a display example targeting a list of Hatena Blog articles. https://static.ldas.jp/calendar/?u=https://nakamura196.github.io/json/calendar.json https://github.com/ldasjp8/calendar You can check the display example by accessing the following URL and clicking the “Example” button, then the “Add” button. https://static.ldas.jp/calendar/ You specify the URL of a JSON file in the following format as a parameter. https://nakamura196.github.io/json/calendar.json Below, I will explain how to create the JSON file from an Excel file as one example method. ...

概要 Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 github.com 以下のページから、デモサイトをご確認いただけます。 https://nuxt-visjs.netlify.app/ 詳細 Nuxt.jsはVue.jsをより効果的に使えるフレームワークです。 またvis.jsは、ネットワーク図やタイムラインを作成することができる可視化ライブラリです。 visjs.org 今回、Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 「Timeline」「Network」「Graph2d」による基本的な可視化例を掲載しています。 Nuxt.jsを用いたvis.jsの利用に際して、お役にたてば幸いです。

Mirador 3をVueで使用する方法を紹介するリポジトリを作成しました。Vueを使ったアプリケーション開発の参考になれば幸いです。 github.com 本リポジトリの作成にあたっては、以下を参考にさせていただきました。 github.com なお、別のより簡単な方法として、UMD（Universal Module Definition）ビルドを利用する方法もあります。単純にMirador 3を利用したい場合には、以下の方法をおすすめします。 github.com 上記サイトでは、（今回紹介するリポジトリで示したように）「パッケージマネージャーを通じたインストールは、より柔軟なカスタマイズを可能とします。」と記載されています。 Installing through a package manager can give you more flexibility for customization.