Articles

Nuxt.js and Next.js are both JavaScript frameworks built on top of Vue.js and React.js, respectively. Each framework has its own advantages, but here are some points where Nuxt.js is considered superior to Next.js: 1. Advantages of Vue.js: Nuxt.js is based on Vue.js, so it inherits the advantages of Vue.js. Vue.js is appreciated for its simple component structure and gentle learning curve. 2. Directory-based routing: Nuxt.js automatically generates routing based on the directory structure. This eliminates the need for developers to manually configure routing, improving development efficiency. 3. Vuex integration: In Nuxt.js, Vuex (Vue.js’s state management library) is integrated by default. This makes state management easier. 4. Middleware support: In Nuxt.js, middleware can be used to add custom logic to routes and pages. This allows developers to easily customize application behavior. 5. Module system: Nuxt.js has a module system that makes it easy to add community-developed features. This allows developers to improve the extensibility of their applications. However, which framework is better depends on the project requirements, the developer’s skill set, and preferences. Next.js also has features such as the React.js ecosystem, server-side rendering (SSR), and static site generation (SSG), and is supported by many developers. Ultimately, it is important to carefully consider which framework is best suited for your project. ...

A canonical URL is the practice of choosing one “canonical” URL from among different URLs that point to the same content. This is used so that search engines can prevent content duplication and accurately evaluate the importance of web pages without negatively affecting their search rankings. For example, suppose you have the following URLs: 1. http://example.com/page 2. http://www.example.com/page 3. https://example.com/page 4. https://www.example.com/page Even though all of these URLs point to the same content, search engines may treat them as different pages. The canonical URL uses the HTML <link rel="canonical"> tag to tell search engines which URL is the preferred one. ...

Introduction I previously wrote the following article, but GPT-4’s explanation was more useful, so I am sharing it here. How to Implement Exact Non-Match Search in JavaScript Fuse.js is a lightweight fuzzy search library that operates on the client side. However, it is not suitable for the purpose of exact non-match search. Instead, you can easily implement it using JavaScript’s Array methods. Exact Non-Match Search Example The following example uses the filter method to perform an exact non-match search. ...

How to Extract respStmt name Values from TEI/XML Files: Approaches Using BeautifulSoup and ElementTree in Python This article introduces how to extract respStmt name values from TEI/XML files using Python’s BeautifulSoup and ElementTree. Method 1: Using ElementTree First, we extract the respStmt name value using Python’s standard library xml.etree.ElementTree. import xml.etree.ElementTree as ET # Load the XML file tree = ET.parse('your_file.xml') root = tree.getroot() # Define the namespace ns = {'tei': 'http://www.tei-c.org/ns/1.0'} # Extract the respStmt name value name = root.find('.//tei:respStmt/tei:name', ns) # Display the name text if name is not None: print(name.text) else: print("The name tag was not found.") Method 2: Using BeautifulSoup Next, we extract the respStmt name value using BeautifulSoup. First, make sure the beautifulsoup4 and lxml libraries are installed. If they are not installed, you can install them with the following command. ...

Omeka Classic and Omeka S: Feature Comparison (Explained by GPT-4) Target Users: Omeka Classic: Primarily for individuals and small organizations to publish digital collections. Omeka S: Designed to handle multiple projects simultaneously for medium to large organizations. Site Management: Omeka Classic: Creates one website per instance. Omeka S: Can create and manage multiple websites from a single instance. Data Sharing: Omeka Classic: Basically creates independent sites. Omeka S: Supports Linked Data and Semantic Web technologies to facilitate data reuse and sharing. Extensions: ...

Overview I needed to create a user with viewing permissions for private resources in Omeka S, so this is a memo about that. Omeka S User Permissions Omeka S provides multiple user permission levels. Specifically, they are described on the following page. https://omeka.org/s/docs/user-manual/admin/users/#users Below is a summary with Japanese translations for reference. English Japanese Global Administrator full installation privileges. Global Administrator Full installation privileges Supervisor robust site and content privileges. Supervisor Robust site and content privileges Editor (Content Expert) full privileges for content creation. Editor Full privileges for content creation Reviewer robust content privileges but can only delete own content. Reviewer Robust content privileges but can only delete own content Author create own content. Author Can create own content Researcher search and read privileges only. Researcher Search and read privileges only Access to Private Resources: View Private Resources Module In the table above, Researcher has only search and read privileges, making it one of the possible permission levels to use when requesting review of private resources, for example. (Additionally, permissions can be extended using modules such as the Guest module.) ...

Overview Custom Ontology is a module that allows you to add custom vocabularies when standard ontologies such as LOV, schema.org, and W3C are not available. Its usage is introduced below. https://nakamura196.hatenablog.com/entry/2021/07/24/235050 The above article covers vocabulary creation, but does not address how to update existing vocabularies. This article explains how to update existing vocabularies. Creating a Vocabulary As an example, we will create the following vocabulary. https://omekas.aws.ldas.jp/omeka4/ns/myprefix/ Accessing the above URL will download the following TTL file. Here, we have added a custom property called myprefix:mySpecificProperty. ...

I had the opportunity to try Leaflet Marker Cluster with Nuxt 3. The implementation example is as follows. https://nuxt3-demo-nine.vercel.app/map-cluster For this implementation, I referenced the following page. https://codesandbox.io/s/ns238 The source code is at the following URL. https://github.com/nakamura196/nuxt3-demo As of March 2023, it appears to be at the POC (Proof of Concept) stage. I hope this serves as a useful reference.

Overview When creating Python packages, I use nbdev. https://nbdev.fast.ai/ nbdev is described as follows: Write, test, document, and distribute software packages and technical articles — all in one place, your notebook. This article serves as a memo when using nbdev. Installation The following tutorial page is a helpful reference. https://nbdev.fast.ai/tutorials/tutorial.html Below is a brief overview of the workflow. After installing the related tools, create a GitHub repository, clone it, and then execute the following in the cloned directory. ...

Overview Fuse.js is a search engine written in JavaScript. https://fusejs.io/ It is very useful as a search engine when building frontend-only applications. This time, when implementing exact non-match search using Fuse.js, I needed to craft the query carefully, so here are my notes. Advanced Search Fuse.js supports various types of searches, including exact/partial match and partial non-match. These are described on the following page. https://fusejs.io/examples.html#extended-search A Japanese translation is also available in the following article: ...

Overview I previously wrote the following article about how to use the “Bulk Import” module for batch registration of metadata (items) and images (media) into Omeka S. https://nakamura196.hatenablog.com/entry/2021/07/28/080952 However, due to updates to Omeka S and its modules, some behaviors differ as of March 2023. In this article, I will re-introduce the entire workflow from item set registration to media registration, while leaving the detailed explanations to the article above. ...

Overview Previously, I created tutorials for NDL OCR and NDL Classical Text OCR using Google Cloud Platform and Google Colab. This time, I will explain how to run NDL Classical Text OCR using Amazon SageMaker Studio. Please note that this method incurs costs during execution. The description of Amazon SageMaker Studio is available at the following link: https://aws.amazon.com/jp/sagemaker/studio/ Domain Setup and Other Configuration For domain setup and other configuration, please refer to articles such as the following: ...

Overview I investigated how to get the name of a mesh clicked in Babylon.js, as shown below. I referenced the following tutorial. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2#passing-data-from-babylonjs-to-vue-using-callbacks The demo page is as follows. https://nakamura196.github.io/nuxt3-babylonjs/8/ The source code for the page is as follows. https://github.com/nakamura196/nuxt3-babylonjs/blob/main/pages/8/index.vue Implementation In the following section, a callback variable is passed to createScene. The name fpsCallback might need to be revised. https://github.com/nakamura196/nuxt3-babylonjs/blob/5c33d2e6bcd1681df17f3f12fea3cd68fc645157/components/Scene8.vue#L10-L13 Then, in the createScene function, the result of onPointerDown is passed. ...

Overview Previously, I created a repository combining Babylon.js and Nuxt 3. Meanwhile, a tutorial for using Vue with Babylon.js has been published at the following link. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue This time, I implemented the following tutorial from the above site using Nuxt 3. https://doc.babylonjs.com/communityExtensions/Babylon.js+ExternalLibraries/BabylonJS_and_Vue/BabylonJS_and_Vue_2 The demo site is as follows. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is as follows. https://github.com/nakamura196/nuxt3-babylonjs Tutorial Passing data from BabylonJS to Vue using callbacks This is the most verbose, but the safest, most extensible, and most reusable approach. Basically, you create methods in the BabylonJS scene code and export them accordingly, allowing you to import them in Vue components and call each one. ...

Instructions were found at the following link. https://archivesspace.github.io/tech-docs/administration/unix_daemon.html Specifically, it appears you can run it as follows: cd /home/ubuntu/archivesspace/ ./archivesspace.sh start

Overview ArchivesSpace is an open-source archival information management application for managing archives, manuscripts, and digital objects, and providing web access. https://archivesspace.org/ I had the opportunity to set up ArchivesSpace on Amazon Lightsail, so this is a memo of the process. Installation instructions are described on the following page. https://archivesspace.github.io/tech-docs/readme_implement.html Instance I selected Ubuntu 20.04 LTS. The documentation states the following, but since performance was sluggish with 2GB of memory, I selected 4GB. ...

The AIP created by Archivematica includes a README.html file. I translated this file using DeepL (with some manual corrections). There may be many errors, but I hope you find it helpful. Archivematica AIP Structure This Readme file describes the basic structure of the Archival Information Package (AIP) generated by Archivematica. Acronyms AIP = Archival Information Package METS = Metadata Encoding and Transmission Standard OAIS = Open Archival Information System PDI = Preservation Description Information ...

Overview This is the Archivematica API section of “Trying the Archivematica API.” (There is also a separate “Storage Service API” section.) https://www.archivematica.org/en/docs/archivematica-1.13/dev-manual/api/api-reference-archivematica/#api-reference-archivematica This time, I will try the following “Transfer” API. https://www.archivematica.org/en/docs/archivematica-1.13/dev-manual/api/api-reference-archivematica/#transfer Usage You can try it with the following notebook. https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/ArchivematicaのAPIを使ってみる.ipynb The following configuration was required. The location UUID was confirmed from the storage service. ## Server settings endpoint = "http://<domain>:81/api" username = "<username>" api_key = "<API key>" location_uuid = "<location UUID>" ## Transfer settings name = "mc_api_transfer" type = "standard" accession = "2023-1234" paths = ["files/movie_test"] row_ids = [""] ## Encode to base64 import base64 paths_encoded = [] for path in paths: path_encoded = base64.b64encode(f"{location_uuid}:{path}".encode()).decode() paths_encoded.append(path_encoded) ## POST import requests data = { "name": name, "type": type, "accession": accession, "paths[]": paths_encoded, "row_ids[]": row_ids } headers = {'Authorization': f'ApiKey {username}:{api_key}'} response = requests.post(f'{endpoint}/transfer/start_transfer/', headers=headers, data=data) Summary This time I only tried Start Transfer, but APIs are provided for various operations, enabling a wide range of system integrations. ...

Overview Japan Search provides Web Parts, a feature that allows UI components used within Japan Search to be used as parts on websites outside of Japan Search. https://jpsearch.go.jp/static/developer/webparts/ja.html I had the opportunity to use this feature with Next.js, so here are my notes. Usage Example You can see it on the following page. https://jps-2023-next.vercel.app/jps Source Code It is published at the following URL. https://github.com/nakamura196/jps_2023_next By loading the JS file using the Script tag as shown below, I was able to display it successfully. ...

Overview The Archivematica Storage Service API is documented on the following page. I tried using some of these APIs, and this is a memo of my experience. https://www.archivematica.org/en/docs/archivematica-1.13/dev-manual/api/api-reference-storage-service/ If basic authentication is required, please use the following credentials: Username: demo Password: Nd4Ev3XJ PACKAGE A package is a bundle of one or more files transferred from an external service; for example, a package may be an AIP, a backlogged transfer, or a DIP. Each package is stored in a location. ...