Posts

Overview This is a note about creating an app that generates a CSV file containing a list of image URLs from a IIIF manifest file. You can access it from the following. https://iiif-demo-next.vercel.app/csv-converter Usage We will use “Koigenshimonogatari, Volume 1” from the National Diet Library collection as the target. https://dl.ndl.go.jp/api/iiif/3437686/manifest.json Enter the manifest file URL in the form below and press the “Download CSV” button. As a result, a CSV file containing URL and size information is downloaded as follows. ...

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 I made improvements to “IIIF Annotator,” a polygon annotation support tool for IIIF images. Specifically, I worked on the following three points: Support for manifest files that do not use an Image Server Export function for IIIF manifest files with annotations Export function for TEI/XML files The following sections explain these improvements. Background The following article explained the reasons for creating a new annotation tool. The features added this time are also available in other tools, but were implemented for improved convenience. ...

Overview I developed a viewer for DTS (Distributed Text Services), so this is a memo of the process. You can try it at the following URL. https://dts-viewer.vercel.app/ja/ Background The official page for DTS (Distributed Text Services) is below. https://distributed-text-services.github.io/specifications/ I also covered this in the following article. This time, I developed a viewer that partially conforms to this DTS specification. Usage The following is the top page. Enter the DTS URL in the form. Examples are provided at the bottom of the page. Technically, it uses the Entry point. ...

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 This is a memo on how to handle CORS for Express deployed on Vercel using vercel.json. Background I implemented CORS handling for the program introduced in the following article. The following was used as a reference. https://vercel.com/guides/how-to-enable-cors Method The solution is as follows. While there may be other approaches, adding headers resolved the issue. https://github.com/nakamura196/dts-typescript/commit/4c28f66b2af68950656dcb812f3e941d1b9b5feb { } " " ] " ] " ] " ] v b , r , r , h e u { } e { } e { } e { } r i w d a s l " " r " " i " " " d " " ] i d s u i s d r s d p e s h o s r s t o e e o e e r o e { { { } { } n " c e e u s c u s r s u a , " : " " s r t t r t m " r d " " " " " " : : : " c i s c i a : c e k k k v k v [ : e n " e n n e r e e e a e a 2 " " " a : " a e [ " s y y y l y l , s @ [ : t : t n : " " " " u " u r v i [ i t : : : : e : e c e " " " " " " / r n n : / [ " " " : " : i c a " " " a A A A A n e p : , : t p c c c " c " d l i r i c c c G c X e / / " " u / e e e E e - x n d / / e ( s s s T s C . o t s a . s s s , s S t d s r p * - - - O - R s e ( c i ) C C C P C F " " . / " o o o T o - , i d , n n n I n T ) n t t t t O t o " d s r r r N r k , e " o o o S o e x , l l l , l n . - - - P - , t A A A A A s l l l T l X " l l l C l - o o o H o R w w w , w e - - - D - q C O M E H u r r e L e e e i t E a s d g h T d t e i o E e e n n d , r d t " s P s - i , " O " W a , S , i l " T t s v , h " a P , , l U u T A " e " c v " c a : e l p u " t e * , " " : A } c " , c t e r p u t e - " V e } r , s i o n , C o n t e n t - L e n g t h , C o n t e n t - M D 5 , C o n t e n t - T y p e , D a t e , X - A p i - V e r s i o n " Summary I hope this serves as a helpful reference. ...

Overview This is a memo on how to add Normalization rules in Archivematica’s Preservation planning. Background When ingesting images with the .jpg extension into Archivematica, there were cases where tif files were not created for preservation, despite having a rule to create tif files for items with Format of JPEG as shown below. I checked the task details from the history screen shown below. The results were as follows. ...

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 I looked into how to use Rekichizu (historical maps) with Next.js, so here are my notes. Background In the following article, I introduced how to use “Rekichizu.” Then, I learned that the “nationwide version was released” on April 4, 2025. https://rekichizu.jp/ So I investigated how to integrate it into an application built with Next.js. Demo App I prototyped the following application. https://rekichizu-next.vercel.app/ja/ For the investigation, I aimed to reproduce features such as map switching, overlay, and search functionality provided on the official site. For this implementation, I used the following React library. ...

Overview This article introduces an example of representing IIIF polygon annotations in TEI/XML. Method In TEI/XML, you can represent polygon annotations using the zone tag and the points attribute. https://www.tei-c.org/release/doc/tei-p5-doc/en/html/ref-teidata.point.html Example For verification purposes, I added a TEI/XML export feature to the annotation tool introduced in the following article. Specifically, the following download option was added. An example of the TEI/XML obtained as a download result is shown below. Rectangles are described using ulx, uly, lrx, lry, while polygon information is described using points. ...

Overview I built a tool for adding polygon annotations to IIIF images. https://next-fb-anno.vercel.app/ This article explains this tool. Usage Below is the top page. Enter the URL of a IIIF manifest file. You can also try it using the “Use sample input” option. It uses “Hyakki Yako-zu” (Night Parade of One Hundred Demons) from the University of Tokyo General Library collection. The following annotation registration screen is displayed. ...

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. ...