Posts

Introduction I implemented functionality in Mirador, a widely used IIIF (International Image Interoperability Framework) viewer, to meet the following requirements: Display the canvas (page) specified by URL parameters on initial load Highlight search terms within the specified canvas This article shares the approach and implementation method for achieving these requirements. Exploring Approaches defaultSearchQuery Option In Mirador 4, you can automatically execute a search at initialization by specifying the defaultSearchQuery option in the window settings: ...

Introduction I localized and published a Japanese version of the data visualization tool RAWGraphs. https://rawgraphs-ja.vercel.app/ RAWGraphs is an open-source web application that can transform complex data into beautiful visualizations. Without any coding, you can create various charts simply by dragging and dropping CSV or JSON data. What is RAWGraphs? RAWGraphs is a data visualization tool developed by DensityDesign Research Lab in Italy. https://www.rawgraphs.io/ Key features: ...

This article summarizes how to implement language switching without page reload in a multilingual application using Next.js App Router and next-intl. Environment Next.js 16 (App Router) next-intl TypeScript Configuration Overview localePrefix: ‘as-needed’ Using the localePrefix: 'as-needed' setting in next-intl, the default language does not have a URL prefix, while other languages do. Example (when the default language is Japanese): Japanese: /, /gallery, /viewer English: /en, /en/gallery, /en/viewer Implementation Steps 1. Middleware Configuration (Important) next-intl uses middleware to handle locale routing. It is important to configure the matcher so that static files are not redirected by the middleware. ...

Introduction To comfortably view high-resolution images on the web, pyramidal structures (multiple resolutions) and tile segmentation are essential. In this article, we used vips to create pyramidal tiled TIFFs from JPEG2000 images and compared the file sizes of various compression methods. Test Environment vips 8.17.3 macOS (darwin) Source image: 764029-1.jp2 (274MB) Source: National Archives of Japan Digital Archive vips Commands JPEG Compression (Lossy) # v # v # v i i i Q p Q p Q p u s u s u s a a a l t l t l t i i i i i i t f t f t f y f y f y f s s s 1 a 7 a 2 a 0 v 5 v 5 v 0 e e e ( ( ( i b i h i n n a n i n e p l p g p a u a u h u r t n t t l . c . c . y j e j o j p d p m p l 2 ) 2 p 2 o r s o o e o s u u s u l t t s t e p p i p s u u o u s t t n t ) _ _ ) _ q q q 1 7 2 0 5 5 0 . . . t t t i i i f f f - - - t t t i i i l l l e e e - - - p p p y y y r r r a a a m m m i i i d d d - - - c c c o o o m m m p p p r r r e e e s s s s s s i i i o o o n n n = = = j j j p p p e e e g g g - - - Q Q Q = = = 7 2 1 5 5 0 0 Lossless Compression # v # v # v i i i D p L p U p e s Z s n s f W c l t t o t a i c i m i t f o f p f e f m f r f s p s e s c a r a s a o v e v s v m e s e e e p s d r i i i i e n o n ( n s p n p B p s u u i u i t t g t o . . T . n j j I j p p F p ( 2 2 F 2 z l o o f o i u u o u b t t r t ) p p m p u u a u t t t t _ _ _ d l r n e z e o f w q n l . u e a t i . t i r t e f e i . d f t i - i f t f - i t l i - e v l t e e i r l - e p 4 - y G p r B y - a ) r p m a y i m r d i a d m i - d c - o c m o - p m c r p o e r m s e p s s r i s e o i s n o s = n i l = o z n n w o = n d e e f l - a b t i e g t i f f Test Results File Compression Method Size Ratio to Original Notes Original JPEG2000 274MB - Input q25.tif JPEG Q=25 57MB 0.21x Lossy, high compression q75.tif JPEG Q=75 167MB 0.61x Lossy, balanced q100.tif JPEG Q=100 2.4GB 8.8x Lossy, high quality deflate.tif Deflate 2.8GB 10.2x Lossless lzw.tif LZW 3.2GB 11.7x Lossless none.tif Uncompressed 4.3GB 15.7x Lossless Image Quality Comparison We visually compared the differences in JPEG compression quality (from left: Q=25, Q=75, Q=100). ...

Overview When there are many annotations in a 3D viewer, backface culling (Raycast) processing becomes a performance bottleneck. This document explains the improvement techniques adopted. Problem Backface culling for annotations requires executing a Raycast (ray-mesh intersection test) for each annotation. This processing becomes heavy for the following reasons: Intersection testing with all mesh vertices is required Computation increases proportionally with the number of annotations Executing every frame makes it difficult to maintain 60 FPS Solution: Execute Raycast Only During Idle We adopted an approach that executes Raycast processing only when the camera has stopped. ...

Introduction Historical maps and old manuscripts contain characters oriented in various directions. This tool uses polygon annotations to accurately mark up tilted characters and leverages the tilt information to retrieve rotation-corrected images via the IIIF Image API. How Tilt Calculation Works Vertex Ordering Rules When creating polygon annotations, vertices are specified in the following order: Top-left -> 2. Bottom-left -> 3. Bottom-right -> 4. Top-right By following this counterclockwise order, the tilt angle can be uniquely calculated. ...

This article explains how to migrate data from Amazon Elasticsearch Service to another OpenSearch cluster. It introduces a simple and reliable migration method using the Scroll API and Bulk API. Background The need to migrate data between Elasticsearch/OpenSearch clusters can arise due to cloud service migration or cost optimization. This time, we performed a migration between the following environments. Source: Amazon Elasticsearch Service (AWS) Destination: Self-hosted OpenSearch Migration Flow Check indices on source and destination Retrieve and adjust mapping information Create indices on the destination Migrate data with Scroll API + Bulk API Verify migration results Preparation: Checking Indices First, check the index lists on both the source and destination. ...

This document explains the setup procedure for automatically deploying Docker containers with GitHub Actions. Table of Contents Docker Configuration GitHub Actions Configuration Server-Side Configuration Troubleshooting Docker Configuration Dockerfile (Static Site + nginx) Generates static HTML and serves it with nginx. F W C R C R # F # # C C E C R O O U O U R O O X M O R P N P N n O N N P P P D M K Y Y g M u u Y Y O D n n i x x S [ n I p p . p n n t t n E " o R a m m x g - g n d c i 3 2 f i 8 g e / k i r f n : : r n 0 i : a a n u o x o x n 2 p g s n r : d m . x 2 p e t a o i = c " - * a g s l u s b o , a . l e e p t t u n l j l n r i p i f " p s e v n u l - i o r i e t d / g n n a n / e e " e t g p r t , e u c A s b / / " S t l a n d a i p g a b t c p i e u i / n m i c . x o l o / n d f u c e i t o o r l p n f e u f f s t . ; d " p / ] u d b e l f i a c u l / t u . s c r n s f h a r e / n g i n x / h t m l nginx.conf (SPA Configuration) For SPAs, dynamic routes (such as /item/:id) need to fall back to index.html. ...

This article explains how to create natural-looking thumbnail images from 360-degree content (equirectangular format) captured with cameras like the Insta360. The Problem: Simple Resizing Causes Distortion 360-degree videos and photos are stored in equirectangular (equidistant cylindrical projection) format. This format unfolds a sphere onto a flat plane, causing horizontal stretching that increases toward the top and bottom edges. Simply resizing this to create a thumbnail results in a distorted, unnatural image. ...

This article introduces how to programmatically check from the command line whether GPS information is contained in 360-degree video files (.insv) shot with Insta360. Background Videos shot with Insta360 cameras have location information embedded when the GPS function is enabled. However, depending on the shooting settings and GPS signal reception conditions, files with and without GPS information may be mixed. When organizing a large number of files, there are cases where you want to classify files by the presence or absence of GPS information. ...

Introduction Deep Zoom technology is used to smoothly zoom and display high-resolution images on websites. There are cases where you need to restore the original high-resolution image from tiled image data generated by tools such as Microsoft Deep Zoom Composer. This article explains the technology for restoring original high-resolution TIFF images from image data published in Deep Zoom format. How Deep Zoom Images Work Tile Structure Deep Zoom images divide a single large image into multiple small tile images and store them in a pyramid structure: ...

Overview Digitizing Tibetan manuscripts is one of the important challenges in digital humanities. Precious Buddhist scriptures and historical documents are preserved in libraries around the world, yet most have not yet been converted to text data. Manual transcription requires enormous time and cost, and researchers with the necessary expertise are limited. This article introduces BDRC Tibetan OCR, an open-source Tibetan OCR system developed by the Buddhist Digital Resource Center (BDRC). ...

Problem Overview In a React application using Cesium.js 1.135.0, billboard markers using the CLAMP_TO_GROUND setting were observed to become inaccurately positioned after camera movement or zoom operations. Environment Cesium.js: 1.135.0 (issue occurred) -> 1.134.0 (issue resolved) Framework: Next.js 16.0.1 + React 19.2.0 Terrain Data: Cesium World Terrain (Cesium.Terrain.fromWorldTerrain()) Marker Settings: clampToGround: true heightReference: Cesium.HeightReference.CLAMP_TO_GROUND Symptoms Click a specific marker to zoom in Change the camera viewpoint (rotate/pan) Markers in the distance appear floating above the terrain or displayed at inaccurate positions This issue is thought to occur due to inconsistency between the high-resolution terrain data (LOD: Level of Detail) loaded when the camera moves closer and the low-resolution terrain data referenced by distant markers. ...

The modern internet is fast and sophisticated, but many people may feel nostalgic for the atmosphere of the early days of the internet. Protoweb is a community-driven public service that revives the internet experience of the 1990s in the present day. What is Protoweb? Protoweb is a proxy server service that hosts websites from the early days of the internet and recreates the browsing experience of that era. By preserving and restoring historical websites, it provides an environment where you can experience the internet as it was around 1995. ...

Introduction Long-term preservation of digital data is an important challenge for libraries, archives, and research institutions. Various factors such as changes in data formats, software obsolescence, and the evolution of storage technologies threaten the sustainability of digital information. In this article, I introduce OCFL (Oxford Common File Layout), one solution to this challenge, covering its concepts, significance, and implementation examples. What is OCFL OCFL (Oxford Common File Layout) is a specification for preserving digital information in a structured, transparent, and predictable manner. It was developed primarily by the Bodleian Library at the University of Oxford and Stanford University Libraries, and has now evolved as a community-driven open standard. ...

Introduction When participating in a workshop at iPRES (International Conference on Digital Preservation), the hex editor “HxD” was used for hands-on exercises in digital preservation. It is an essential tool in digital archive practice for tasks such as analyzing binary file structures and verifying file formats. However, HxD is Windows-only and cannot be used on Mac. After the workshop, I searched for alternative tools to perform similar work in a Mac environment and found a web-based hex editor. ...

If you are responsible for digital archives or long-term preservation, you have surely wondered, “Is this file really in the format its extension suggests?” This time, I introduce “DROID,” a powerful tool that resolves such doubts, along with actual analysis results. What is DROID? DROID (Digital Record Object Identification) is a file format identification tool developed by The National Archives (UK). It identifies the true format by analyzing not just the file extension but the internal structure (signature) of the file. ...

Overview The editor developed in this project is a web-based tool for recording and managing arbitrary coordinates on IIIF-compatible high-resolution images. It is designed as a general-purpose coordinate recording tool that can specify images via URL parameters and be used across various research projects. https://youtu.be/UqPo5Xrkin8 Technology Stack OpenSeadragon: IIIF image viewer library (v4.1) SVG Overlay: For marker display localStorage: Data persistence Vanilla JavaScript: Framework-free implementation Technical Features 1. Image Specification via URL Parameters The tool’s most distinctive feature is the ability to specify any IIIF image via URL parameters: ...

Introduction Odeuropa is a project that studies the history of scents in Europe, collecting and analyzing representations of scents depicted in paintings, literature, and other historical sources. This article introduces the implementation of a web application for visualizing scent data based on the SKOS (Simple Knowledge Organization System) vocabulary, utilizing Odeuropa’s SPARQL endpoint. https://odeuropa-seven.vercel.app/ja/ Project Overview Technology Stack Frontend: Next.js 15 (App Router) UI: Material-UI v5 Internationalization: next-intl Data Retrieval: SPARQL queries (Odeuropa SPARQL endpoint) Language: TypeScript Hosting: Static Site Generation (SSG) Main Features 1. Scent Search (/odeuropa-sources) This is the core feature of the application, allowing users to search and browse smell perception events collected by the Odeuropa project. ...

Introduction A common challenge in digital archives for museums and libraries is the need to “properly manage the relationship between works and their creators.” Especially when a single author has created multiple works, or when multiple authors have collaborated on a single work, it is important to clearly express these relationships and make them searchable. This article explains how to build an independent author database in Omeka S and link it with works. ...