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 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: ...
![[Babylon.js x Vue] Passing Click Events to Vue](https://storage.googleapis.com/zenn-user-upload/6041bf8f0f03-20230217.gif)
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. ...
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. ...
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. ...
I had the opportunity to host Nuxt 3 SSR on Vercel, so this is a note for reference. For the build settings, I needed to set the Output Directory to .output/server as follows. For enabling CORS, the following article was helpful. https://vercel.com/guides/how-to-enable-cors Specifically, I was able to handle this by placing the following file at the root of the project. { "headers": [ { "source": "/api/(.*)", "headers": [ { "key": "Access-Control-Allow-Credentials", "value": "true" }, { "key": "Access-Control-Allow-Origin", "value": "*" }, { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" }, { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" } ] } ] } There may be incorrect descriptions, but I hope this is helpful. ...
I had the opportunity to use Babylon.js combined with Nuxt3 and Vuetify, so this is a memo of my experience. The site I built can be viewed at the following URL. https://nakamura196.github.io/nuxt3-babylonjs/ The source code is available below. https://github.com/nakamura196/nuxt3-babylonjs I hope this is helpful when developing an app with this combination.
Overview IIIF Presentation Validator is, as the name suggests, a tool for validating IIIF Presentation API manifests. https://presentation-validator.iiif.io/ The following article explains how to use it. This time, I needed to validate manifests in a local environment while creating IIIF Presentation API v3 compliant manifest files, as introduced in the following article. So I installed this tool locally, and here are my notes. Installation Method Instructions are available at the following link, but running Step one did not work. (There was also this Issue filed.) ...
Overview I created an NDL “Classical Text” OCR application using Google Colab. You can try it at the following URL. https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/NDL古典籍OCRの実行例.ipynb The description of NDL Classical Text OCR is as follows. https://github.com/ndl-lab/ndlkotenocr_cli The notebook was created with reference to @blue0620’s notebook. Thank you! https://twitter.com/blue0620/status/1617888733323485184 In the notebook I created, I added support for additional input formats and a feature to save to Google Drive. How to Use The usage is almost the same as the NDLOCR application. Please refer to the following video. ...
Overview JPCOAR Schema publishes XML Schema Definitions in the following repository. Thank you for creating the schema and making the data available. https://github.com/JPCOAR/schema This article is a memo of trying XML file validation using the above schema. (Since this is my first time doing this kind of validation, it may contain inaccurate terminology or information. I apologize.) A Google Colab notebook is also prepared. https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/JPCOARスキーマを用いたxmlファイルのバリデーション.ipynb Preparation Clone the repository ...
Overview In the following article, I performed XML file validation using jingtrang and RNG files. Since this jingtrang library can create RNG files from XML files, I decided to try it out. I also prepared a Google Colab notebook. https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/jingtrangを試す：作成編.ipynb Creating an RNG File As the source file for creating the RNG file, I prepared the following: <root><title>aaa</title></root> For the above file, execute the following: pytrang base.xml base.rng As a result, the following file was created: ...
Overview I had an opportunity to create an XML file conforming to a specific schema, and needed to verify that the XML file matched the schema. To meet this requirement, I tried the jingtrang library for working with RELAX NG schemas, so here are my notes: https://pypi.org/project/jingtrang/ I also prepared a Google Colab notebook: https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/jingtrangを試す.ipynb Trying Validation # ライブラリのインストール pip install jingtrang # rngファイルのダウンロード（tei_allを使用） wget https://raw.githubusercontent.com/nakamura196/test2021/main/tei_all.rng # validation対象のXMLファイルの用意（校異源氏物語テキストのダウンロード） wget https://kouigenjimonogatari.github.io/tei/01.xml Passing Example Running the following produced no output: ...
Overview I tried registering an image on OpenSea, so this is a memo of my experience. The page for the created item is below. https://opensea.io/assets/ethereum/0x495f947276749ce646f68ac8c248420045cb7b5e/10640296615676167047199551942164304992363478966543389627838835760480269631489 Uploading to OpenSea Uploading images to OpenSea was quite easy. On the other hand, the prior steps of creating MetaMask and OpenSea accounts took some time. There are many articles about these procedures, so please refer to those. Transferring from bitFlyer to MetaMask I sent 0.005 ETH held in bitFlyer to MetaMask. The transfer fee cost 0.005 ETH ($7.72, 990.48 yen). (Expensive… lol) ...
Overview In this article, I will attempt to customize TEI ODD (One Document Does-it-all) using a web application called Roma. https://romabeta.tei-c.org/ For more about TEI ODD, please refer to the official site below. I must admit that I do not fully understand it myself due to limited study. https://wiki.tei-c.org/index.php/ODD However, one use case is that in TEI-based projects, you can restrict the tags used (specifically, those that receive assistance and validation). ...
Overview This is a memo on how to introduce an IIIF viewer in Nuxt3 with SSR. Canvas Panel This section covers the introduction of the following viewer. https://iiif-canvas-panel.netlify.app/ Installation npm i @digirati/canvas-panel-web-components Page Please refer to the following. https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/canvas-panel/index.vue Display Example https://nakamura196.github.io/nuxt3-iiif-viewer/canvas-panel Tify This section covers the introduction of the following viewer. https://github.com/tify-iiif-viewer/tify Installation npm i tify Page Please refer to the following. https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/tify/index.vue In the case of SSR, a document is not defined. error occurred, so I added the following file to the plugins. ...
Introduction When deploying applications developed with Nuxt 3 and similar frameworks, I often use GitHub Pages, Netlify, AWS Amplify, and Serverless Framework + Lambda. However, this time I had the opportunity to deploy using a VPS, so this is a memo. References Specifically, I use Amazon Lightsail and pm2. Creating an Amazon Lightsail Instance Select the Node.js blueprint. Also, since port 3000 is used, open the firewall for it. ...