Tech | デジタルアーカイブシステムの技術ブログ

nuxt3をamazon lightsailで公開する：pm2の使用

はじめに nuxt3などを用いて開発したアプリケーションについて、github pages, netlify, aws amplify, およびServerless Framework+Lambdaなどを用いてデプロイすることが多いのですが、今回はvpsを用いて公開する機会があり、その備忘録です。参考具体的には、Amazon Lightsailとpm2を使用します。 Amazon Lightsailインスタンスの作成 Node.jsのblueprintを選択します。また3000番ポートを使用するので、ファイアウォールを開放しておきます。 pm2の設定以下の記事を参考にしました。 https://it-evo.jp/blog/blog-70/ インストール sudo su npm install pm2 -g Nuxt3のダウンロードとビルドサンプルプログラムをダウンロードします。 su bitnami cd /home/bitnami/ git clone https://github.com/nakamura196/nuxt3-pm2 セットアップ cd nuxt3-pm2 npm install ビルド npm run build npm run preview localhost:3000 でNuxt3のアプリケーションをご確認いただけます。 pm2を用いて起動する cd /home/bitnami/ vi /home/bitnami/ecosystem.config.js module.exports = { apps: [{ name: 'demo', cwd: '/home/bitnami/nuxt3-pm2', exec_mode: 'cluster', instances: 'max', script: './.output/server/index.mjs', watch: ['./'], // または true watch_options: { followSymlinks: true, usePolling: true, interval: 10000, binaryInterval: 10000, }, env: { PORT: 3000, NODE_ENV: 'production', } }] } 以下のコマンドで、pm2が起動します。 ...

2022年12月22日 · 更新: 2022年12月22日 · 1 分 · Nakamura

TEI Boilerplateを試す

概要 TEI Boilerplateの日本語訳例は以下です。 TEI ( Text Encoding Initiative ) P5 コンテンツを最新のブラウザーで直接公開するための軽量ソリューションです。TEI Boilerplate を使用すると、サーバー側での処理や HTML への変換を行わずに、TEI XML ファイルを Web に直接提供できます。当社のTEI Boilerplate Demoは、TEI Boilerplate によってレンダリングされる多くの TEI 機能を示しています。 TEI Boilerplate は、Web 上で TEI/XML を公開および表示するための多くの優れた XSLT ソリューションに代わるものではありません。これは、より複雑な XSLT ソリューションに代わるシンプルで軽量なソリューションとなることを目的としています。今回は、このTEI Boilerplateの使い方の例を説明します。リポジトリのクローンとサーバの起動以下のリポジトリを使用します。 https://github.com/TEI-Boilerplate/teibp-teach 本リポジトリは、TEI-Boilerplate 対応の http サーバを立ち上げるプロジェクト、と説明されています。まず、リポジトリをクローンします。 git clone https://github.com/TEI-Boilerplate/teibp-teach 次に、ライブラリのインストールを行います。 cd teibp-teach npm install そして、ローカルのサーバを起動します。 node . 画面例 http://localhost:3000 にアクセスすると、以下のような画面が表示されます。 demoのリンクをクリックすると、表示例を確認することができます。この表示例では、画面右上に表示内容を切り替えることができるToolboxが提供されます。校異源氏物語テキストへの適用校異源氏物語テキストDBで公開されているTEI/XMLにも適用してみました。以下のGitHub Pagesからご確認いただけます。 https://nakamura196.github.io/teibp-teach/content/01.xml ソースコードは以下からご確認いただけます。 ...

2022年12月17日 · 更新: 2022年12月17日 · 1 分 · Nakamura

Omeka S 4.0.0 release candidateが公開されました。

概要 Omeka S 4.0.0 release candidateが公開されました。 https://forum.omeka.org/t/omeka-s-4-0-0-release-candidate/16272 Amazon Lightsailで試してみました。以下でお試しいただけます。 http://35.172.220.59/omeka-s/ インストール以下のスクリプトで初期セットアップを行うことができます。 # 変数 OMEKA_PATH=/home/bitnami/htdocs/omeka-s ## ハイフンは含めない DBNAME=omeka_s VERSION=4.0.0-rc ############# set -e mkdir $OMEKA_PATH # Omekaのダウンロード wget https://github.com/omeka/omeka-s/releases/download/v$VERSION/omeka-s-$VERSION.zip unzip -q omeka-s-$VERSION.zip mv omeka-s/* $OMEKA_PATH # .htaccessの移動 mv omeka-s/.htaccess $OMEKA_PATH # 不要なフォルダの削除 rm -rf omeka-s rm omeka-s-$VERSION.zip # 元からあったindex.htmlを削除（もし存在すれば） if [ -e $OMEKA_PATH/index.html ]; then rm $OMEKA_PATH/index.html fi # データベースの作成 cat <<EOF > sql.cnf [client] user = root password = $(cat /home/bitnami/bitnami_application_password) host = localhost EOF mysql --defaults-extra-file=sql.cnf -e "create database $DBNAME"; # Omeka Sの設定 cat <<EOF > $OMEKA_PATH/config/database.ini user = root password = $(cat bitnami_application_password) dbname = $DBNAME host = localhost EOF sudo chown -R daemon:daemon $OMEKA_PATH/files sudo apt install imagemagick -y 2022-12-15時点では上記に加えて、以下の作業が必要でした。 ...

2022年12月15日 · 更新: 2022年12月15日 · 1 分 · Nakamura

Omeka SのAPIへのアクセス制限

Omeka Sでは、標準でAPIを提供しており、例えば以下のようなURLから、リソースの取得などが可能です。 https://dev.omeka.org/omeka-s-sandbox/api/items 便利な機能である一方、APIを提供したくないケースも考えられます。その場合には、Omeka Sを設定したディレクトリの直下にある.htaccessについて、以下のような記述を追記することで、アクセス制限をかけることができます。 RewriteCond %{REQUEST_URI} ^.*/api RewriteRule ^(.*)$ – [F,L] 具体的には、以下のような形です。 SetEnv APPLICATION_ENV "production" # SetEnv APPLICATION_ENV "development" RewriteEngine On RewriteCond %{REQUEST_URI} ^.*/api RewriteRule ^(.*)$ – [F,L] # The following rule tells Apache that if the requested filename # exists, simply serve it. RewriteCond %{REQUEST_FILENAME} -f RewriteRule !\.(php[0-9]?|phtml|phps)$ - [NC,C] RewriteRule !(?:^|/)\.(?!well-known(?:/.*)?$) - [C] RewriteRule .* - [L] ... Omeka Sのアクセス制限について、参考になりましたら幸いです。

2022年12月12日 · 更新: 2022年12月12日 · 1 分 · Nakamura

EC2サーバセットアップ時のTODOメモ

EC2でサーバをセットアップする際のTODOメモです。 Elastic IPの付与 sudo権限のユーザ追加 sudo su useradd nakamura passwd nakamura usermod -G wheel nakamura 公開鍵の設置 cd /home/nakamura mkdir .ssh touch .ssh/authorized_keys chmod 700 .ssh chmod 600 .ssh/authorized_keys vi .ssh/authorized_keys chown -R nakamura:nakamura .ssh

2022年12月5日 · 更新: 2022年12月5日 · 1 分 · Nakamura

Snorql for Japan Searchのカスタマイズ方法の調査

概要ジャパンサーチで使用されている「Snorql for Japan Search」のカスタマイズ方法について、その調査結果です。随時更新予定です。また誤りも含まれている可能性が高いので、ご注意ください。メニューページのタイトルを変更する snorql_def.js _poweredByLabel: "Cultural Japan", // "Japan Search", 問い合わせ先のエンドポイントを変更する snorql_def.js _endpoint: "https://ld.cultural.jp/sparql/", //"https://jpsearch.go.jp/rdf/sparql/", poweredByLinkのURLを変更する snorql_def.js _poweredByLink: "https://cultural.jp/", // "https://jpsearch.go.jp/", その他のフッター部分を編集する index.html footer> a href="./">Snorqla> for a id="poweredby" href="#">Japan Searcha>. Use a href="https://ld.cultural.jp/sparql">basic SPARQL endpointa> basic SPARQL endpoint --> for your application. >SPARQLエンドポイント解説 > --> footer> バージョンを変更する snorql_def.js var _sldb_version = "v0.0.1"; //"v2.20.1"; トップページの説明 ...

2022年11月29日 · 更新: 2022年11月29日 · 4 分 · Nakamura

【Omeka S モジュール紹介】IIIF Searchモジュール

概要 IIIF Search は、全文検索のためのIIIF Content Search APIを追加する Omeka S 用モジュールです。特に、日本語テキストを扱うための改修を加えた以下のモジュールを対象に、その使用方法を紹介します。 https://github.com/nakamura196/Omeka-S-module-IiifSearch インストール githubからソースコードをcloneします。omeka-sは適宜読み替えてください。 cd omeka-s/modules git clone https://github.com/nakamura196/Omeka-S-module-IiifSearch.git IiifSearch githubからインストールする場合には、上記のように、フォルダ名を対象モジュール名に変更する必要がある点に注意が必要です。インストール後、検索クエリとして使用する文字列の下限を設定するフォームが表示されます。日本語テキストを扱い場合には、1などに設定しておくことをお勧めします。 ALTO形式のxmlファイルの作成 OCR結果を記述するためのフォーマットの一つであるALTO形式のXMLファイルを作成する必要があります。 https://www.loc.gov/standards/alto/techcenter/elementSet/index.html ALTO形式のXMLファイルの作成にあたっては、以下の記事などが参考になります。例えば、以下の画像ファイルを対して、以下のようなxmlファイルが生成できます。 <?xml version="1.0" encoding="utf-8"?> <alto xmlns="http://www.loc.gov/standards/alto/ns-v4#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema" xsi:schemaLocation="http://www.loc.gov/standards/alto/ns-v3# http://www.loc.gov/standards/alto/alto.xsd"> <Description> <MeasurementUnit>pixel</MeasurementUnit> <sourceImageInformation> <fileName>alto_test.png</fileName> </sourceImageInformation> <OCRProcessing ID="IdOcr"> <ocrProcessingStep> <processingSoftware> <softwareName>tesseract 4.0.0-beta.1</softwareName> </processingSoftware> </ocrProcessingStep> </OCRProcessing> </Description> <Layout> <Page ID="page_1" PHYSICAL_IMG_NR="1" HEIGHT="841" WIDTH="595"> <PrintSpace HEIGHT="841" WIDTH="595" VPOS="0" HPOS="0"> ... <ComposedBlock ID="block_1_4" HEIGHT="23" WIDTH="446" VPOS="205" HPOS="59"> <TextBlock ID="par_1_4" HEIGHT="23" WIDTH="446" VPOS="205" HPOS="59" LANG="jpn"> <TextLine ID="line_1_4" HEIGHT="23" WIDTH="446" VPOS="205" HPOS="59"> <String ID="word_1_11" CONTENT="Google" HEIGHT="20" WIDTH="70" VPOS="208" HPOS="59" WC="0.89"/> <String ID="word_1_12" CONTENT="Colab" HEIGHT="16" WIDTH="58" VPOS="208" HPOS="135" WC="0.93"/> <String ID="word_1_13" CONTENT="で" HEIGHT="841" WIDTH="595" VPOS="0" HPOS="0" WC="0.93"/> <String ID="word_1_14" CONTENT="Tesseract" HEIGHT="16" WIDTH="117" VPOS="208" HPOS="195" WC="0.91"/> <String ID="word_1_15" CONTENT="を" HEIGHT="19" WIDTH="18" VPOS="206" HPOS="314" WC="0.93"/> <String ID="word_1_16" CONTENT="動か" HEIGHT="19" WIDTH="41" VPOS="206" HPOS="335" WC="0.93"/> <String ID="word_1_17" CONTENT="す" HEIGHT="19" WIDTH="19" VPOS="206" HPOS="378" WC="0.93"/> <String ID="word_1_18" CONTENT="(日" HEIGHT="21" WIDTH="25" VPOS="205" HPOS="413" WC="0.96"/> <String ID="word_1_19" CONTENT="本" HEIGHT="20" WIDTH="20" VPOS="206" HPOS="442" WC="0.93"/> <String ID="word_1_20" CONTENT="語" HEIGHT="20" WIDTH="41" VPOS="206" HPOS="464" WC="0.92"/> <String ID="word_1_21" CONTENT="対" HEIGHT="841" WIDTH="595" VPOS="0" HPOS="0" WC="0.93"/> </TextLine> </TextBlock> </ComposedBlock> ... </PrintSpace> </Page> </Layout> </alto> 画像とxmlファイルをOmekaにアップロードする以下のように、画像とxmlファイルをアップロードします。注意点として、画像とxmlのファイル名（拡張子を除く）を揃えて必要があります。（以下の例では、alto_test） ...

2022年11月24日 · 更新: 2022年11月24日 · 1 分 · Nakamura

Google ColabでTesseractを動かす（日本語対応）

Google ColabでTesseractを動かすノートブックを作成しました。日本語にも対応しています。参考になりましたら幸いです。 https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/Tesseractを試す.ipynb 末尾に、hocrファイルをalto形式のxmlファイルに変換するフローも紹介しています。具体的には、以下のツールを使用しています。 https://digi.bib.uni-mannheim.de/ocr-fileformat/ 参考になりましたら幸いです。

2022年11月24日 · 更新: 2022年11月24日 · 1 分 · Nakamura

【Omeka S モジュール紹介】PDFファイルに対してOCRを行うモジュール「Extract Ocr」

概要 PDFファイルに対してOCRを行うOmeka Sのモジュール「Extract Ocr」を紹介します。インストール以下のページを参考にします。 https://omeka.org/s/modules/ExtractOcr/ 本モジュールは、pdftohtmlというコマンドラインツールが必要です。以下、omeka-sの部分は、適宜変更してください。 AWS Lightsailを用いた環境では、以下によってインストールできました。 sudo apt install poppler-utils さらに、omeka-s/config/local.config.phpを編集する必要があります。base_uriの部分は、導入した環境に応じて変更してください。例：https://omekas.aws.ldas.jp/sandbox/files 'file_store' => [ 'local' => [ 'base_path' => null, // Or the full path on the server if needed. 'base_uri' => 'https://example.org/files', ], ], 上記の設定後、モジュールをダウンロード、インストールします。 cd omeka-s/modules git clone https://github.com/symac/Omeka-S-module-ExtractOcr.git ExtractOcr AWS Lightsailの場合、インストール時に以下のエラーが発生しました。以下のコマンドにより、omeka-s/filesにtempファイルを作成しました。 cd omeka-s/files sudo mkdir temp sudo chown daemon:daemon temp 上記の設定後、無事にインストールできました。ファイルのアップロードアイテムの新規登録を行い、メディアとしてPDFファイルをアップロードします。 ...

2022年11月24日 · 更新: 2022年11月24日 · 1 分 · Nakamura

Vertex AIのworkbenchを使用した際、HuggingFaceのTrainer()が開始されない事象への対処法

Google CloudのVertex AIのworkbenchを使用した際、HuggingFaceのTrainer()が開始されない事象に遭遇しました。この件について、以下のページで同様の不具合が報告されていました。 https://stackoverflow.com/questions/73415068/huggingface-trainer-does-nothing-only-on-vertex-ai-workbench-works-on-colab 当初、以下のような「PyTorch」の環境を選んでいましたが、この環境で上記の不具合が生じました。そこで、上記の記事にある通り、「Python」の環境を選択することで、上記の不具合を避けることができました。なお、上記の環境を選んだ場合、まず以下のような実行が必要です。 conda install pytorch cudatoolkit=11.0 -c pytorch 同様のことでお困りの方の参考になりましたら幸いです。

2022年11月21日 · 更新: 2022年11月21日 · 1 分 · Nakamura

Mroonga search モジュールのインストール（※うまくいきませんでした。）

概要以下の記事で紹介しているMroonga search モジュールのインスールについて、AWSのLightsailで試みました。 https://nakamura196.hatenablog.com/entry/2022/03/07/083004 結果、うまくインストールできませんでしたが、備忘録のために記事化します。 Omeka Sの立ち上げ以下の記事の通り、Omeka Sを立ち上げました。 Mroongaのインストール以下のページを参考に、インストールを行いました。 https://mroonga.org/docs/install/debian.html sudo apt update sudo apt install -y -V apt-transport-https sudo apt install -y -V wget wget https://packages.groonga.org/debian/groonga-apt-source-latest-bullseye.deb sudo apt install -y -V ./groonga-apt-source-latest-bullseye.deb sudo apt update sudo apt install -y -V mariadb-server-10.5-mroonga 上記を実行後、mysql（mariadb）に入ります。 mysql -uroot -p パスワードは、以下のコマンド確認できます。 cat /home/bitnami/bitnami_application_password その後、以下を実行して、Mroongaを有効にします。 MariaDB [(none)]> INSTALL PLUGIN Mroonga SONAME 'ha_mroonga.so'; SHOW VARIABLES LIKE 'mroonga_version'; 以下のように表示されます。 Omeka Sモジュールのインストール以下の通り、モジュールを展開します。 ...

2022年11月21日 · 更新: 2022年11月21日 · 1 分 · Nakamura

ResourceSyncのPythonライブラリを試す

概要 ResourceSyncのPythonライブラリである「py-resourcesync」を試したので、その備忘録です。 https://github.com/resourcesync/py-resourcesync セットアップ git clone https://github.com/resourcesync/py-resourcesync cd py-resourcesync python setup install 実行 resourcelist まず、出力用のresource_dirディレクトリを作成します。カレントディレクトリにex_resource_dirフォルダが作成されます。 resource_dir = "ex_resource_dir" !mkdir -p $resource_dir 次に以下を実行します。適宜generatorを変更して使用するようですが、以下ではEgGeneratorというサンプルのものを使用しています。 from resourcesync.resourcesync import ResourceSync # from my_generator import MyGenerator from resourcesync.generators.eg_generator import EgGenerator my_generator = EgGenerator() metadata_dir = "ex_metadata_dir" # 適宜変更してください。 rs = ResourceSync(strategy=0, resource_dir=resource_dir, metadata_dir=metadata_dir) rs.generator = my_generator rs.execute() 結果、ex_resource_dir/ex_metadata_dirに、.well_known、capabilitylist.xml、resourcelist_0000.xmlが作成されます。 <?xml version='1.0' encoding='UTF-8'?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:rs="http://www.openarchives.org/rs/terms/"> <rs:ln href="http://www.example.com/.well-known/resourcesync" rel="up" /> <rs:md capability="capabilitylist" /> <url> <loc>http://www.example.com/metadata_dir/resourcelist_0000.xml</loc> <rs:md capability="resourcelist" /> </url> </urlset> <?xml version='1.0' encoding='UTF-8'?> <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:rs="http://www.openarchives.org/rs/terms/"> <rs:ln href="http://www.example.com/metadata_dir/capabilitylist.xml" rel="up" /> <rs:md at="2022-11-21T00:13:46Z" capability="resourcelist" completed="2022-11-21T00:13:46Z" /> <url> <loc>http://www.resourcesync.org</loc> <lastmod>2016-10-01T00:00:00Z</lastmod> <rs:md hash="md5:cc9895a21e335bbe66d61f2b62ce3a8e" length="20" type="application/xml" /> </url> </urlset> changelist strategyを1に変更することでnew_changelist、2に変更することでinc_changelistを作成することができました。 Resourcedump と Changedump strategyを3に変更することでresourcedump、4に変更することでchangedumpを作成できるようですが、これらについては設定方法を十分に理解することができず、未検証です。 ...

2022年11月21日 · 更新: 2022年11月21日 · 1 分 · Nakamura

iiif auth apiを試す

概要 iiif auth apiを試すため環境として、以下のリポジトリが提供されています。 https://github.com/digirati-co-uk/iiif-auth-server 今回は、上記のリポジトリを使用して、iiif auth apiを試します。起動準備 git clone https://github.com/digirati-co-uk/iiif-auth-server cd iiif-auth-server python -m venv venv source venv/bin/activate pip install --upgrade pip pip install -r requirements.txt pip install -r requirements.txt時にバージョンの不具合などが発生した場合、以下のように、バージョン情報を削除して、再度試すなどしてみてください。 argparse Flask iiif2 itsdangerous Jinja2 MarkupSafe pbr Pillow six stevedore Werkzeug db作成その後、dbを作成します。 export FLASK_APP=iiifauth export FLASK_DEBUG=true flask initdb 上記を実行後、iiif-auth-server/iiifauthにiiifauth.dbというファイルが作成されます。 dbの中身は、以下のようなツールを使って確認することができます。 https://sqlitebrowser.org/dl/ 起動以下を実行します。 flask run その後、http://127.0.0.1:5000にアクセスすると、以下の画面が表示されます。ビューアの準備以下を実行して、mirador3をダウンロードして、ローカルサーバで起動してみます。 wget https://mirador.cultural.jp python -m http.server http://0.0.0.0:8000にアクセスして、以下の画面が表示されればOKです。ビューアに読み込ませる http://127.0.0.1:5000のページの構成は、まずImagesが並び、その後Manifestsが並びます。今回、下部のManifestsを、Mirador3で読み込んでみます。 ...

2022年11月18日 · 更新: 2022年11月18日 · 3 分 · Nakamura

TEIテキストの作成支援ツール「FairCopy」の紹介

概要研究仲間に、「FairCopy」というTEIテキストの作成支援ツールを教えていただきました。本ツールはGUIを介してTEIテキストを作成可能なツールで、とても便利なものに感じました。有料のツールですが、2週間は無料で試用できるため、この調査結果を共有します。インストール以下のSign Up画面から情報を送信することで、トライアルのコードとアプリケーションのダウンロードリンクが表示されます。 https://faircopyeditor.com/sign_up ダウンロード後にアプリケーションを起動すると、以下のようなプロジェクトの選択画面が表示されます。プロジェクトの作成プロジェクトを作成します。今回は、以下のような情報を入力しました。その後、以下のような画面が表示されます。作成するデータ今回は、すでに公開されている校異源氏物語テキストDBで公開されている「きりつぼ」のTEIデータについて、本ツールを使って再現することを試みます。 https://kouigenjimonogatari.github.io/tei/01.xml 国立国会図書館で公開されているIIIF画像と、プロジェクトで翻刻したテキストデータを対応づけたTEI/XMLファイルです。新規リソースの作成「NEW RESOURCE」をクリックすると、以下のような登録フォームが表示されます。適当なNameとIDを与えます。また「Resource Type」については、複数の選択肢が表示されますが、TEI Header付きのTEIとIIIFを組み合わせたXMLファイルを作成したい場合には、「TEI Document」を選択するのがよさそうです。結果、以下のように、「校異源氏物語・きりつぼ」フォルダの中に、「TEI Header」というファイルが作成されます。 IIIFのインポートまず、IIIF画像のインポートを試みます。「IMPORT IIIF」ボタンを押し、以下のようなIIIFマニフェストのインポート画面において、URLを入力します。今回は、以下のマニフェストのURLを入力しました。 https://www.dl.ndl.go.jp/api/iiif/3437686/manifest.json すると、以下のように画像が追加されます。その行をクリックすと、以下のように、マニフェストファイル内の画像が取り込まれます。ID列で、各画像にIDが与えられていることが確認できます。テキストと画像の紐付けにおいて、後ほど使用します。画面右上の画像アイコンをクリックすると、画像を表示することもできます。参考までに、「校異源氏物語・きりつぼ」に戻り、以下のように、画像の行のチェックボックスを選択して、「ACTIONS」 > 「Export」を押すと、XMLファイルが出力されます。以下のように、facsimile要素を持つXMLファイルが作成されます。 <?xml version="1.0" encoding="UTF-8"?> <TEI xmlns="http://www.tei-c.org/ns/1.0"> <facsimile sameAs="https://www.dl.ndl.go.jp/api/iiif/3437686/manifest.json"> <surface xml:id="f000" ulx="0" uly="0" lrx="6890" lry="4706" sameAs="https://www.dl.ndl.go.jp/api/iiif/3437686/canvas/1"> <label>1</label> <graphic mimeType="application/json" url="https://www.dl.ndl.go.jp/api/iiif/3437686/R0000001"/> </surface> <surface xml:id="f001" ulx="0" uly="0" lrx="6890" lry="4706" sameAs="https://www.dl.ndl.go.jp/api/iiif/3437686/canvas/2"> <label>2</label> <graphic mimeType="application/json" url="https://www.dl.ndl.go.jp/api/iiif/3437686/R0000002"/> </surface> ... </facsimile> </TEI> 後ほど、TEI Headerとtext - bodyを組み合わせたTEI/XMLをエクスポートしますが、上記のように、画像やテキスト、TEI Headerなど、それぞれの要素のTEI/XMLをエクスポートする機能が提供されています。テキストのインポート次に、テキストのインポートを行います。とりあえず、以下のようなサンプルのテキストファイルを登録します。 ...

2022年11月11日 · 更新: 2022年11月11日 · 1 分 · Nakamura

テキストマークアップツール「CATMA」の使い方

概要テキストマークアップツールの一つである「CATMA」の入門的な使い方を紹介します。 https://catma.de/ アノテーションの結果はTEIフォーマットでエクスポートできるため、他のシステムでも活用可能な相互運用性の高いデータを作成できると思われます。また実験的な段階とのことですが、JSON APIも提供されています。これを使うことで、アノテーションはCATMAで行い、その結果をAPIを経由して、他のシステムで利用する、という構成も考えられます。上記は未検証の内容を含む、一部発展的な取組みになりますが、本記事では、CATMAの基本的な使い方を備忘録として残します。使い方以下にアクセスして、「Sign Up」を行います。Googleのアカウントでログインするとスムーズかと思います。 https://app.catma.de/catma/ ログイン後の画面は以下です。プロジェクトの作成「Create New Project」から新しいプロジェクトを作成します。ドキュメントの登録以下のように、「+」ボタンを押して、「Add Document」を行います。今回は以下のような単純なtxtファイルを試します。私の名前は中村覚です。その後の選択肢は基本的にそのままでOKですが、以下のように、言語は「Japanisch」にしておくとよいかもしれません。以下のように、exampleというドキュメントと、example Default Annotaitonsというアノテーションを保存するためのコレクションが作成されます。タグセットの作成次に、タグセットを作成します。左のメニューから「Tags」を選択して、画面右上の「+」ボタン、「Add Tagset」を選択します。今回は「はじめてのタグセット」という名前をタグセットを作成しました。さらに、画面右上の「+」ボタンから、「Add Tag」を選択します。そして、以下のように、タグの追加対象となるタグセットを選択して、今回は、「persName」というタグを追加してみます。「プロパティ」などを追加設定できますが、今回はスキップします。アノテーション左のメニューから、「Annotate」に移動して、以下のように、アノテーション対象のドキュメントとして「example」、タグセットとして「はじめてのタグセット」を選択します。アノテーション付与対象の選択し、画面右から付与対象のタグを選択します。先のタグの追加画面で設定した色の下線が引かれます。エクスポート左のメニューから、「Project」に戻り、「example Default Annotations」を選択して、メニューアイコンから「Export Documents & Collections」を選択します。 zipファイルがダウンロードされ、元テキストであるtxtファイルと、アノテーション結果を格納したxmlファイルが展開されます。 xmlファイルは以下のようなTEIのフォーマットで出力されます。<encodingDesc>に使用したタグ、具体的にはpersNameが示されます。また、<body>以下に、何文字目から何文字目に対して、どのタグが付与されているか、という情報が格納されます。 <TEI xmlns="http://www.tei-c.org/ns/1.0" xml:lang="en"> <teiHeader> <fileDesc> ... </fileDesc> <encodingDesc> <fsdDecl xml:id="T_876E9B9F-B41D-4DD7-B54A-A225A75A8F50" n="はじめてのタグセット b51b9866b96ff38f059b7b5b38b8383dfc53f27c"> <fsDecl xml:id="CATMA_BDA41946-07EF-403E-BDE9-D2E60C48D093" n="2022-11-10T02:05:19.000+0100" type="CATMA_BDA41946-07EF-403E-BDE9-D2E60C48D093"> <fsDescr>persName</fsDescr> ... </fsDecl> </fsdDecl> </encodingDesc> </teiHeader> <text> <body> <ab type="catma"> <ptr target="D_FB58A2B3-EC15-42B8-8DAC-E9A28B3D1FDC#char=0,5" type="inclusion"/> <seg ana="#CATMA_E1AE48BF-903B-451B-8723-FAD8FD182CFE"> <ptr target="D_FB58A2B3-EC15-42B8-8DAC-E9A28B3D1FDC#char=5,8" type="inclusion"/> </seg> <ptr target="D_FB58A2B3-EC15-42B8-8DAC-E9A28B3D1FDC#char=8,13" type="inclusion"/> </ab> </body> <fs xml:id="CATMA_E1AE48BF-903B-451B-8723-FAD8FD182CFE" type="CATMA_BDA41946-07EF-403E-BDE9-D2E60C48D093"> ... </fs> </text> </TEI> 上記の構造化データを使って、さまざまな活用ができそうです。 ...

2022年11月10日 · 更新: 2022年11月10日 · 1 分 · Nakamura

MediaWikiのTEI拡張を試す（結果：うまくいきませんでした。）

概要 MediaWikiでTEIの編集を可能とする拡張機能が開発されています。 https://www.mediawiki.org/wiki/Extension:TEI 編集画面の例は以下です。 Omeka Sの翻刻支援モジュールであるScriptoは、Omeka SとMediaWikiを連携させることで、Omeka Sに登録された画像データ等に対する翻刻を可能にします。 https://omeka.org/s/modules/Scripto/ この環境に、上述したTEI拡張を組み合わせることで、TEIに準拠した翻刻ができないかを試しました。ただ、結果として、今回のTEI拡張をうまく動作させることができませんでした。以下、この取り組みに関する備忘録です。なお、オンライン上でTEIを編集できるツールとして、以下があります。こちらも参考になりましたら幸いです。 https://digital-editing.fas.harvard.edu/editor/ MediaWikiのセットアップ AWSのLightsailを用いて作成したLAMP環境に、MediaWikiをインストールしました。このインスール方法については、公式のドキュメントなど、多くの記事がすでに存在するため、そちらに説明を譲ります。 https://www.mediawiki.org/wiki/Manual:Installing_MediaWiki/ja TEI拡張のインストール以下のページのInstallationを参考に、拡張機能を追加します。 https://www.mediawiki.org/wiki/Extension:TEI 以下、日本語訳です。ファイルをダウンロードして、extensions/フォルダー内のディレクトリに配置します。 LocalSettings.phpの下部に次のコードを追加します。 wfLoadExtension ( 'TEI' ); 完了 – ウィキのSpecial:Versionに移動して、拡張機能が正常にインストールされたことを確認します。上記のSpecial:Versionのページには、日本語設定の場合は、以下からアクセスできます。 /index.php?title=特別:バージョン情報以下のような画面が表示されます。そして、以下の記述をLocalSettings.phpにさらに追加します。 define( 'NS_TEI', 100 ); define( 'NS_TEI_TALK', 101 ); $wgExtraNamespaces[NS_TEI] = 'TEI'; $wgExtraNamespaces[NS_TEI_TALK] = 'TEI_Talk'; $wgNamespaceContentModels[NS_TEI] = 'tei'; 追加作業上記まで行いましたが、TEIが有効になりませんでした。以下の追加作業が必要でした。 CodeMirrorの追加以下の拡張機能が必要でした。 https://www.mediawiki.org/wiki/Extension:CodeMirror 上記をインストールの上、以下をLocalSettings.phpに追記します。 wfLoadExtension ( 'CodeMirror' ); wfLoadExtension ( 'Math' ); wfLoadExtension ( 'VisualEditor' ); 上記では、CodeMirrorに加えて、デフォルトでインストールされているMathとVisualEditorも有効化しています。 ...

2022年11月10日 · 更新: 2022年11月10日 · 1 分 · Nakamura

[TEI x JavaScript] Nuxt3で意図しないWhitespaceを削除する

課題 TEI/XMLファイルを読み込み、JavaScript（Vue.jsなど）で可視化を行う際、意図しないWhitespaceが入ってしまうケースがありました。具体的には、以下のようなHTMLを書いた場合、 <template> <div> お問い合わせは <a href="#">こちらから</a> お願いします </div> </template> 以下のように表示され、「お問い合わせはこちらからお願いします」と意図しないスペースが入ってしまいました。この課題に対して、以下のリポジトリで解決策を公開してくださっていました。 https://github.com/aokiken/vue-remove-whitespace ただ私の環境ではNuxt3ではうまく動作させることができなかったため、ソースコードを参考に、Nuxt3へ導入してみました。以下、この備忘録です。 Nuxt3への導入 plugins/removeWhitespace.tsを作成します。 function isText(node: ChildNode) { return node.nodeType === Node.TEXT_NODE } function trimText(node: NodeListOf<ChildNode>) { Array.from(node).forEach((node) => { if (isText(node) && node.textContent) { node.textContent = node.textContent.trim() return } trimText(node.childNodes) }) } export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.directive("removeWhitespace", { mounted(el: HTMLElement) { trimText(el.childNodes) }, updated(el: HTMLElement) { trimText(el.childNodes) }, }); }); そして、pages/index.vueなどで、v-remove-whitespaceディレクティブを使用します。 <template> <div v-remove-whitespace> お問い合わせは <a href="#">こちらから</a> お願いします </div> </template> その結果、以下のように、意図しないWhitespaceを削除できました。まとめディレクティブの理解が不十分で誤っている点もあるかと思いますが、参考になりましたら幸いです。以下、ソースコードとデモサイト（GitHub Pages）です。ソースコード https://github.com/nakamura196/nuxt3-removeWhitespace デモサイト https://nakamura196.github.io/nuxt3-removeWhitespace/ なお、本題と話がそれますが、nuxt.config.tsを以下のように記述することで、baseURLを指定することができました。 export default defineNuxtConfig({ app: { baseURL: "/nuxt3-removeWhitespace", // /<reponame> }, }); Nuxt3のSSGをGitHub Pagesで公開する際の参考になりましたら幸いです。 ...

2022年10月25日 · 更新: 2022年10月25日 · 1 分 · Nakamura

ultralytics/yolov5でのAttributeErrorへの対応

ultralytics/yolov5を使用した際、以下のエラーが発生しました。 AttributeError: 'Detections' object has no attribute 'imgs' これは、以下のissueにあるように、apiが変更されたために発生するようです。 https://github.com/robmarkcole/yolov5-flask/issues/23 一例ですが、以下のようにプログラムを書き換えることで、エラーが解消しました。 results = model(im) # inference # new def getImage(results): output_dir = "static" if os.path.exists(output_dir): shutil.rmtree(output_dir) results.save(save_dir=f"{output_dir}/") return Image.open(f"{output_dir}/image0.jpg") # old def oldGetImage(results): results.render() return Image.fromarray(results.imgs[0]) renderedImg = getImage(results) 同様のことでお困りの方の参考になりましたら幸いです。

2022年10月18日 · 更新: 2022年10月18日 · 1 分 · Nakamura

Nuxt 3のserver/apiでjsonファイルを操作する方法の一例

Nuxt 3のserver/apiでjsonファイルを（インポートして）操作する方法の一例です。以下の記事を参考にしました。 https://github.com/nuxt/framework/discussions/775#discussioncomment-1470136 型定義などの改善の余地は多々ありますが、以下のような書き方で動作確認ができました。 // async/await を使用しています。 export default defineEventHandler(async (event) => { const items_: any = await import('~/assets/index.json') // .defaultをつける点に注意 const items_total: any[] = items_.default // 以下の参考リンクを参照してください。 const query = getQuery(event) const page: number = Number(query.page) || 1; const size: number = Number(query.size) || 20; const items: any[] = items_total.slice((page - 1) * size, page * size); return { "hits": { "total": { "value": items_total.length, }, "hits": items } } }); 上記により、例えば/api/items?page=2&size=40のようなクエリを用いることで、インポート元のjsonファイル（~/assets/index.json）の一部を返却することができました。パスはassets以外でも大丈夫のようですが、十分に検証できていません。色々と改善の余地があるかと思いますが、参考になりましたら幸いです。参考 https://v3.nuxtjs.org/guide/directory-structure/server/#handling-requests-with-query-parameters

2022年10月16日 · 更新: 2022年10月16日 · 1 分 · Nakamura

Nuxt3をNetlifyおよびAWSにデプロイする方法の一例

概要 Nuxt3をNetlifyおよびAWSにデプロイする方法の一例の備忘録です。以下、構築例です。 Netlify app.vue https://nuxt3-nakamura196.netlify.app/ server/api/hello.ts https://nuxt3-nakamura196.netlify.app/api/hello AWS（Serverless） app.vue https://nuxt3.aws.ldas.jp/ server/api/hello.ts https://nuxt3.aws.ldas.jp/api/hello ソースコードは以下です。 https://github.com/nakamura196/nuxt3 以下、それぞれについて説明します。 Netlify 以下の記事を参考にすることで、BFFを含むデプロイができました。 https://blog.cloud-acct.com/posts/nuxt3-netlify-deploy/ AWS（Serverless） Lambda Functions URLを使用する方法は以下の記事が参考になりました。 https://qiita.com/P3117/items/e2893804c3161a161a49 一方、今回はAPI Gatewayを使用する方法を示します。以下の記事が参考になりました。 https://stackoverflow.com/questions/73862456/nuxt-3-in-aws-lambda-with-serverless-framework 上記を参考にすることで、以下のようにデプロイすることができました。 https://9f4jl2wn81.execute-api.us-east-1.amazonaws.com/ こちらについて、カスタムドメインの設定を行います。以下、API Gatewayのみを使用する場合と、CloudFrontを用いる場合のそれぞれについて説明します。 API Gatewayのみ API Gatewayの「カスタムドメイン名」から、ドメイン名を作成します。その後、APIマッピングから、上述のAPIを選択します。そして、Route 53でレコードを追加します。これにより、以下のように、カスタムドメインを用いて公開することができます。 https://nuxt3-apigateway.aws.ldas.jp/ CloudFrontを用いる場合 CloudFrontのディストリビューションの作成において、オリジンドメインにAPI GatewayのURLを入力します。「デフォルトのキャッシュビヘイビア」の「ビューワー」では、「Redirect HTTP to HTTPS」を選択しました。「設定」において、代替ドメイン名およびカスタムSSL証明書を指定します。最後に、Route 53でCloudFrontのドメイン名を用いたレコード追加を行います。これにより、以下のように、カスタムドメインを用いた公開を行うことができました。 https://nuxt3.aws.ldas.jp/ まとめ他にもより良い方法があるかと思いますが、Nuxt3のデプロイに関して参考になりましたら幸いです。またSPAやSSGとしてデプロイする場合には、GitHub Pagesを利用する方法もあるかと思います。用途に応じて使い分けていきたいと思います。

2022年10月11日 · 更新: 2022年10月11日 · 1 分 · Nakamura