Tech

Overview This article introduces how to describe a hierarchical table of contents using the Omeka S IIIF Server module. Documentation The documentation is somewhat complex, but explanations are available at: https://github.com/Daniel-KM/Omeka-S-module-IiifServer?tab=readme-ov-file#input-format-of-the-property-for-structures-table-of-contents Simple Table of Contents The following example from “Toyo Bunko Media Repository” is used: https://app.toyobunko-lab.jp/s/main/document/9f9d95c2-d33d-7402-742b-47db12748688 Specify {Range ID},{Range name},{Canvas index} as follows: r r r r r r r r r r r 1 2 3 4 5 6 7 8 9 1 1 , , , , , , , , , 0 1 延 明 安 安 天 天 寛 寛 享 , , 享 和 永 永 明 明 政 政 和 文 文 、 , 一 二 一 二 一 二 , 化 化 寛 2 , , , , , , 2 一 、 延 5 5 7 1 1 1 2 5 , 文 、 5 9 1 4 7 1 5 2 政 宝 0 2 7 8 7 、 暦 9 二 , , 1 3 1 3 This results in the following table of contents display: ...

Overview I had the opportunity to use pagination in IIIF collections with IIIF Presentation API v2, so this is a memo of the process. Background IIIF collections allow you to provide a list of multiple manifest files (and collections) as shown below. https://iiif.io/api/presentation/2.1/#collection { } " " " " " " " " ] @ @ @ l v d a m c i t a i e t a { } o d y b e s t n n " p e w c r i " " " t : e l i r i f @ @ l e " " n i b e i t a x " : : g p u s d y b t h H t t t " p e " t " " i i i s : e l : t s T n o o " " " p c o t n n : " : : " : : p " " " h h / C : : : [ t " " t / o L t s B t e l e " " " p c o p x l v t D P : : o : a e e o e r / M k / m c l p s o / a / p t " c v e n 1 i l i C , r i x i " i e o o i d a f i . n l p e m e f o " l t d p s . r , e i l t i g c o b e " o t n y . , i i o a i o o E r p i n f x g i f a / / / f C m i p c o o p i r o r l l i e l l e f s l E e / e e x c O b n c a t r o t t m i g o a i p o a k t o l n n 1 i n e " i / o / , z m n t O a a / o r t n 2 p g i i / " a o f c , n n e o i " s n z , t t a " e t , x i t o . n j " s , o n " , When the number of target manifest files becomes large, it becomes difficult to deliver them in a single IIIF collection. ...

Parts of this article were generated by AI. Overview When creating configuration pages for custom modules in Drupal, you may want to allow non-admin users to access them. This article explains how to solve this issue, using the GitHub Webhook module as an example. The Problem Initially, the routing configuration was as follows: # g i g t p d r i h a e e t u t f _ _ q _ h b h a f t u p u _ : u o i i e b w l r t r r _ e t m l e m w b / s : e m i e h a : : e s b o d n s h o m \ ' t i o k i D G s o o . n r i : n k s / u t : . e c p H r t o a u ' o t n l b a u i f \ d t n i g W m i g g i e i n s / t b n g : g h h i . i u o s y t b o t m h _ k e l u w r b e S _ b e s w h t i e o t t b o i e h k n o \ g c o F s o k o ' n ' r f m i \ g S u e r t a t t i i n o g n s ' F o r m ' With this configuration, only administrators with the administer site configuration permission could access the page, and general users could not. ...

Notice I have created a more accessible article explaining the workflow introduced in this article. Please also refer to the following. Overview I would like to introduce a prototype tool for creating annotated IIIF manifest files and TEI/XML files using NDL Klasseki OCR-Lite. Creating Annotated IIIF Manifest Files First, I created a Gradio app that takes an IIIF manifest file as input and outputs an annotated IIIF manifest file using NDL Klasseki OCR-Lite. It is published using Hugging Face Spaces. ...

Overview I had the opportunity to use the “JSON Field” module for handling JSON format fields in Drupal, so this is a personal note for future reference. https://www.drupal.org/project/json_field As a result, JSON can now be handled together with an editor as shown below. Installation Download it with the following commands. c d o r m u p s o h s e e r n r j e s q o u n i _ r f e i e ' l d d r u p a l / j s o n _ f i e l d : ^ 1 . 4 ' Furthermore, enable the widget as well with the following. ...

Overview This is a memo about hosting TEI/XML files on S3-compatible object storage. Specifically, we target the mdx I object storage. https://mdx.jp/mdx1/p/about/system Background We are building a web application (Next.js) that loads TEI/XML files and visualizes their content. When the number and size of files were small, they were stored in the public folder, but as these grew larger, we considered hosting them elsewhere. There are many options for storage locations, but this time we target mdx I’s S3-compatible object storage. ...

Overview This is a memo about updating the DTS (Distributed Text Services) API for the Koui Genji Monogatari Text DB. Background The DTS (Distributed Text Services) API is described at the following link. https://distributed-text-services.github.io/specifications/ The following article introduced the creation of the DTS API. However, the following was noted as a remaining issue. Please note that the DTS API developed this time may have areas that do not comply with the above guidelines. ...

Introduction This article documents a case where Elasticsearch errors occurred due to disk pressure caused by Docker containers and images, along with the investigation and resolution methods. We hope this serves as a useful reference for those facing similar issues. The Problem The following error occurred in a running Elasticsearch instance: { } " } " e , s r " " " t r t r p a o y e h t r p a a u " e s s s : " o e " : n " : { " : " : 5 s " 0 e " q 3 a a u r l e c l r h y _ s " p h , h a a r s d e s _ e f x a e i c l u e t d i " o , n _ e x c e p t i o n " , Initial investigation revealed that indices had entered a close state, and insufficient disk space was suspected. ...

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 This article was generated by AI. When building a search interface using Elasticsearch and Search UI, controlling the sort order of search results is a common requirement. This guide explains how to configure sorting in the Search UI React library. References https://www.elastic.co/docs/reference/search-ui/api-react-search-provider#api-react-search-provider-initial-state Understanding Initial State and Sort Configuration In the Search UI library, you can specify the initial state of the search, including the sort direction and the field to sort by. This is particularly useful when you want search results to be displayed in a predetermined order when the user first accesses the page. ...

Overview I investigated how to implement IP address restrictions for MDX.jp’s object storage. The following article was written by AI after verifying the implementation. Introduction This article explains how to configure access restrictions by specific IP addresses for the DDN EXAScaler S3-compatible object storage service provided by MDX.jp. Object Storage Security Layers DDN EXAScaler S3-compatible storage has three main security layers: Access Key and Secret Key: Basic authentication credentials Bucket Policy: Bucket-level access control Access Control List (ACL): Object-level access control To implement IP address restrictions, “Bucket Policy” is used. ...

Overview I prototyped a TEI/XML file creation app using Google Cloud Vision API and GakuNin RDM, so this is a memo of that work. Background I needed an environment for creating TEI/XML files that reflect OCR results using Google Cloud Vision API. So I prototyped an environment that uses GakuNin RDM as the backend to manage files per user and execute OCR. How to Use Creating a Folder Access the following. ...

Overview I added a route registration feature to the “Rekichizu x Next.js” site. Below is a display example. References The “Rekichizu x Next.js” site is introduced in the following article. As a precedent for displaying routes using “Rekichizu”, the following example exists. https://codh.rois.ac.jp/edomi/route/ This time, I added a route creation feature based on the above example. Usage Access the site. https://rekichizu-next.vercel.app/ja/ Click “Manage My Routes”. Login is required, so log in using the button in the upper right. ...

Overview (Created by ChatGPT) The Nuxt i18n module has a feature that detects the user’s browser language and redirects them to the appropriate language page. However, in certain situations you may want to disable this feature. This article explains how to completely disable browser language detection using detectBrowserLanguage: false. https://v8.i18n.nuxtjs.org/guide/browser-language-detection Configuration To disable the browser language detection feature, set the detectBrowserLanguage option to false in your nuxt.config.js file. e } x ) p i } 1 , r 8 d t そ n e そ の : t の d 他 言 e 他 e の { 語 c の f 設 検 t 設 a 定 出 B 定 u を r l 無 o t 効 w 化 s d e e r f L i a n n e g N u u a x g t e C : o n f f a i l g s ( e { Use Cases Where This Is Helpful When you want users to directly access specific URLs: If you intend for users to directly visit specific content, redirects can be an obstacle. Optimizing crawling: When you want search engine crawlers to be able to directly access specific language pages. Consistent user experience: For example, when you want to avoid unexpected redirects for users navigating between linked language pages. Summary By using detectBrowserLanguage: false, you can control site access for user experience and SEO optimization without relying on redirects. Using this setting in appropriate situations can improve your site’s usability. ...

Overview This article describes how to add dark mode using Tailwind CSS V4 with the Next.js 15 App Router. The following article was helpful as a reference. https://sujalvanjare.vercel.app/blog/dark-mode-nextjs15-tailwind-v4 I was able to switch between dark mode and light mode as shown below. The following is a Japanese translation of the above article by ChatGPT. Learn how to implement dark mode and light mode using Tailwind CSS V4 in a Next.js 15 App Router project. This step-by-step guide covers the latest changes in Tailwind V4 and Next.js 15 to achieve a seamless theme switcher! ...

Overview The following article was helpful for handling the error: “Error: Do not use . Use Image from ’next/image’ instead.” https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht Based on the article above, I am posting a ChatGPT-generated response below. There may be some inaccuracies, but I hope it serves as a helpful reference. Changing Next.js ESLint Rules and Configuring Flat Config Since Next.js 11, ESLint configuration has been provided by default, and the @next/next/no-img-element rule was added. This rule restricts the use of regular <img> tags and recommends using Next.js’s next/image component. ...

Overview I introduce how to rotate images and specify regions on initial load in Mirador 4. Background As of March 2025, development of Mirador 4 is underway. The alpha version can be checked at the following link. https://github.com/ProjectMirador/mirador/releases This is probably a feature from Mirador 4, and the following FAQ describes the initial configuration method. https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area Specifically, as shown below, initial configuration was achieved by using initialViewerConfig. https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js e } x ; p i w } o d i ] r : n c i } m , t d a n , a ' o n i t x y z n d m w v t h : : o i e i s a i u o f f r : s a m 9 7 y m e a a I l b 3 8 o : s u d [ d V n 4 2 u t l o { : i a , , 0 I t r e i n . d ' ' w l e 0 : { , h e N e 0 t r a d 0 ' t C v 7 h p o i t , t s n g o t : f a p / i t s s / g i p : i : o e / i n c / i { P i i f o f i . s y i h i f a t z . r i o h v o o a a n m r r : v d f a a ' o r r f r d t a a m r t r u - h t s b i m e o s u u t s m t t e s o o u . m m o ' l s r , o . g o o / k r m g a g / n o m i o a f d n e i s f t e s s / t o s b / j o e b c j t e / c 2 t 9 / 9 2 8 9 4 9 3 8 / 4 c 3 a ' n , v a s / c a n v a s - 4 7 1 7 4 8 9 2 ' , Application Building on the above, I tried the following initial configuration. ...

Overview This is a memo on building a proxy server for mdx I’s object storage. Background The mdx I user guide explains the following. https://docs.mdx.jp/ja/index.html#オブジェクトストレージ This is a DataDirect Networks manual describing the API specifications handled by the S3 Data Service (DDN EXAScaler S3 Data Service) provided by mdx. Please review it together with the object storage usage examples in Tips. https://docs.mdx.jp/ja/_downloads/b5d961f2c152387fa10ed951d5278f47/S3 Data Services 5.2.7 API Reference Guide.pdf ...

Overview Here are my notes on how to use the Universal Viewer npm package in Next.js. Installation Install with the following command. n p m i u n i v e r s a l v i e w e r Implementation Since it uses useEffect, it appeared necessary to implement it as a client component. Also, by adding the uv class to the div tag, the CSS was applied correctly. ...

Overview In the following article, I introduced building applications using the GakuNin RDM API. In this article, I introduce how to search files in linked storage using the GakuNin RDM API. Implementation Example I implemented the search API as follows. Since directly accessing https://rdm.nii.ac.jp/api/v1/search/file/ from the client caused CORS errors, I implemented it as a Next.js API Route. i i i e } m m m x p p p p c c c c c c c c } c } c r o o o o o o o o o o o o ; o ) o e r r r r n n n n n n n n a s h e } n m h } b ; n t t t t t s G s s s s s s s p o i l , s e e , o s u t e t t t t t t t i r g a q } f s t t a " A d t r { { { a t _ t h s u , r i h d C u y n s s u q o s a a p v : l t e f } o z r o e o t : d N a g y e q r u f i c p a e i i r i , m e e d r n h a N e u e n s u l e f z c i r r " g c y l q } : , s : s t o J t e x t t c s e r s e e U a s c h s : t u , : e r S a x t h S i r = y e s r m i r t e e e q } o = " n i O t R O e f o y t = s l s o e : a { r r u , f P { t z N = R e p r u n n = T n a r e y e d f ] q a l f a O - a . e s t v n p e = p o = = : t " c d : r e i , u n e s w S T t s a s p i e c = a w u a k e t h : y f e " " " " " " " e a n e a T y i t w p o o r t r r p r e " { { d i _ { _ a l _ t d j s a a r l i t i " p o r a o n n S i a a U l a s n h _ t d { s u d a i e o c l l y y e , t , e n i i n s s e o w m R . r e t v d l s t l s l t s b h l l , z n " : n t s e s n a e L s s I = t e e e l r t : l l c ^ o _ _ e t f : g e } s i t ( e e n p n s : : i _ " e r 1 o j s _ : e ` i r . } i G t e r a I t s s d c 3 n f [ , ^ i " l o c w t " B f e j f o E r e r n ( e : o " 0 { g i 4 p , ^ b h i t c a e y s s f r n T g s q c t u s / r , , : e " t 1 s o l r h p a ( . o r o ( e . h ( r s / : n l , i " ^ o d u ( p r p j n o m } r t f u P u l i r a { d o , 0 l c e a l e a s ( m e S r r a r . o d " m : n . s a , p i r r o d " f q e o l r l s n m g e ^ 1 ^ r i c a n a " @ r : r m ) a . e ? . r : " 1 2 0 d U a $ m ( t n / o v ; m s a . n d 3 _ . 5 . : r t { s ) a e a m R e U s e r a i m 0 a 2 " 1 l i a ) ; ) x p e r R . a c c i " , l " , 2 t , o c , ; t p " q S L g r h c . , u l , 5 r n c / / n u e e c P e a s " " u { / e s a e e s t h a s c v e , , e j s e p x s s ( P r s . e r , s s r i t t i " a a T j r : o T v / - ) o f r m o p s 3 n o e a a n i a s k / i 0 " k r u u { ( l m . e a o , , e " t t a t s g n p n t n ; h h u e . e ; i : e } / " t r g t / x ` [ ; h [ e ( v 2 t , . O f t " 1 : . p u ( p / } 1 . t l " a s , 2 n i l p g e 4 e o t a e a , x n e g [ r c t s x e l c o a ) t [ i h m u ; ] o m / m t " f i f e h ) f t i n ] s ] l t / e " e s a t ) / . u ] " * t " " ; : h " 1 O ; 2 p " 4 t 2 " i 0 , o " " n 0 , s " " , 1 ; 0 1 ) 0 ; ) ; Usage Example You can try it at the following URL. (Login to GakuNin RDM is required.) ...