記事一覧

概要 Mirador 3で特定の領域にズームにするには、以下に記載があるような方法で行います。 https://github.com/ProjectMirador/mirador/wiki/M3---Mirador-3-Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area 具体的には以下です。 // Box to zoom to const boxToZoom = { x: 1420, y: 1831, width: 800, height: 1195 }; const zoomCenter = { x: boxToZoom.x + boxToZoom.width / 2, y: boxToZoom.y + boxToZoom.height / 2 }; var action = Mirador.actions.updateViewport(windowId, { x: zoomCenter.x, y: zoomCenter.y, zoom: 1 / boxToZoom.width }); miradorInstance.store.dispatch(action); 内部的にはOpenSeadragonのpanToとzoomToが使用されているようでした。 この時の課題として、zoomToは以下の記事にあるように、constraintsを無視して拡大するようでした。 https://github.com/openseadragon/openseadragon/issues/881 これに対して、以下の記事で示したように、viewer.viewport.applyConstraints();の処理を追加することで、constraintsを守った拡大ができるようになりました。 以下、強引ではありますが、npmでインストールしたMiradorに対して、上記の設定を行う方法を紹介します。 Miradorの編集 以下でMiradorをインストールします。 npm install mirador node_modules以下にmiradorフォルダが作成されます。 その中にある以下のファイルに対して、viewport.applyConstraints();を追加する例を示します。 ... { key: "componentDidUpdate", value: function componentDidUpdate(prevProps, prevState) { var _this$props2 = this.props, viewerConfig = _this$props2.viewerConfig, canvasWorld = _this$props2.canvasWorld; var viewer = this.state.viewer; this.apiRef.current = viewer; if (prevState.viewer === undefined) { if (viewerConfig) { viewer.viewport.panTo(viewerConfig, true); viewer.viewport.zoomTo(viewerConfig.zoom, viewerConfig, true); viewerConfig.degrees !== undefined && viewer.viewport.setRotation(viewerConfig.degrees); viewerConfig.flip !== undefined && viewer.viewport.setFlip(viewerConfig.flip); } this.addAllImageSources(!viewerConfig); return; } if (!this.infoResponsesMatch(prevProps.infoResponses) || !this.nonTiledImagedMatch(prevProps.nonTiledImages)) { viewer.close(); var canvasesChanged = !isEqual(canvasWorld.canvasIds, prevProps.canvasWorld.canvasIds); this.addAllImageSources(canvasesChanged || !viewerConfig); } else if (!isEqual(canvasWorld.layers, prevProps.canvasWorld.layers)) { this.refreshTileProperties(); } else if (viewerConfig && !this.osdUpdating) { var viewport = viewer.viewport; if (viewerConfig.x !== viewport.centerSpringX.target.value || viewerConfig.y !== viewport.centerSpringY.target.value) { viewport.panTo(viewerConfig, false); } if (viewerConfig.zoom !== viewport.zoomSpring.target.value) { viewport.zoomTo(viewerConfig.zoom, viewerConfig, false); viewport.applyConstraints(); // ここを追加 } if (viewerConfig.rotation !== viewport.getRotation()) { viewport.setRotation(viewerConfig.rotation); } if (viewerConfig.flip !== viewport.getFlip()) { viewport.setFlip(viewerConfig.flip); } } } ... 上記の設定により、Mirador.actions.updateViewportでズームした際に、constraintsを守った拡大ができるようになりました。 ...

OpenSeadragonのzoomToメソッドを使用した後に、viewport.applyConstraints()を呼び出すことで、ビューポートが設定した制約を満たすように調整されます。これは、ズームやパンの操作がビューポートの制約を超えた場合に有用です。 以下にその例を示します： // `viewer`はOpenSeadragonのインスタンス const zoomLevel = 2.0; viewer.viewport.zoomTo(zoomLevel); viewer.viewport.applyConstraints(); 上記のコードでは、まずビューポートのズームレベルを指定した値に設定します。その後、applyConstraintsメソッドを呼び出すことでビューポートがその制約を満たすように調整されます。つまり、もし指定したズームレベルが設定された制約を超えていた場合、ズームレベルはその制約に合うように調整されます。 この方法は、指定したズームレベルや位置が制約を超えていた場合でも、ビューポートが常に有効な状態を維持できるようにするために有用です。

（以下、ChatGPTによる回答です。参考になりましたら幸いです。） OpenSeadragon(OSD)のfitBoundsとfitBoundsWithConstraintsの違いは、制約を適用するかどうかにあります。 OSDは高度なズーム機能とパニング機能を持つJavaScriptライブラリで、深くズーム可能な画像やコンテンツを扱う際に使われます。その中のfitBoundsとfitBoundsWithConstraintsは、ビューポート（表示領域）を特定の境界に合わせるメソッドです。 fitBounds(rectangle, immediately): ビューポートを指定した矩形に合わせます。immediatelyパラメータがtrueの場合、アニメーションなしで即座にビューポートをフィットさせます。falseの場合、アニメーションを伴ってビューポートをフィットさせます。 fitBoundsWithConstraints(rectangle, immediately): fitBoundsと同じ動作をしますが、ビューポートのズームとパンの制約を考慮します。つまり、指定した矩形にフィットさせる前に、最小ズームレベル、最大ズームレベル、画像のパン制約などを確認します。これにより、ユーザーが画像をズームやパンしても、設定した制約を超えることがありません。 つまり、主な違いはfitBoundsWithConstraintsがビューポートの制約を適用することで、その制約を超える動作を防ぎます。これは特に、ユーザーが画像をズームイン/ズームアウトしたり、画像をパン（スクロール）する際の振る舞いを制御するのに重要です。

概要 Monaco EditorでLaTeXをハイライトする機会がありましたので、備忘録です。 Ace Editorを対象にした以下の記事の続編です。 参考になりましたら幸いです。 画面例 デモサイト https://nakamura196.github.io/ace_latex/monaco/ リポジトリ https://github.com/nakamura196/ace_latex/ ソースコード <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Monaco Editor Demo</title> <link href="https://cdn.jsdelivr.net/npm/monaco-editor@0.40.0/min/vs/editor/editor.main.min.css" rel="stylesheet" /> </head> <body> <h2>Monaco Editor LaTeX</h2> <div id="container" style="width: 100%; height: 600px; border: 1px solid lightgray" ></div> <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.40.0/min/vs/loader.min.js"></script> <script> require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.40.0/min/vs", }, }); require(["vs/editor/editor.main"], function () { // Register a new language monaco.languages.register({ id: "latex" }); // Register a tokens provider for the language monaco.languages.setMonarchTokensProvider("latex", { tokenizer: { root: [ [/(\\[a-zA-Z]+)/, "command"], // LaTeX commands [/(\\[\w\u3000-\u9FFF]+)/, "note"], // LaTeX commands [/(\{)/, "brace"], [/(\})/, "brace"], [/(\[)/, "bracket"], [/(\])/, "bracket"], [/(document|dvips)/, "keyword"], // LaTeX keywords [/(%.*)/, "comment"], // Comments ], }, }); // Define a new theme that contains only rules that match this language monaco.editor.defineTheme("myTheme", { base: "vs", inherit: true, rules: [ { token: "command", foreground: "#F44336" }, // LaTeX commands in red { token: "note", foreground: "#2196F3" }, // Notes in blue { token: "brace", foreground: "FF00FF" }, // Braces in magenta { token: "bracket", foreground: "00FFFF" }, // Brackets in cyan { token: "keyword", foreground: "#4CAF50" }, // Keywords in green { token: "comment", foreground: "#9E9E9E" }, // Comments in gray ], colors: {}, }); monaco.editor.create(document.getElementById("container"), { value: getCode(), language: "latex", theme: "myTheme", wordWrap: true, }); }); function getCode() { return `\\documentclass{tbook} \\usepackage{hiragino,cid} \\usepackage[dvips]{graphics} \\usepackage{font} % \\見開き \\begin{document} テキスト \\書名{（サンプル）}テキスト 長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト\\右注{（あああ）}長いテキスト長いテキスト \\右注{（サンプル）}テキスト \\end{document}`; } </script> </body> </html> カスタム言語の設定方法については、以下のページが参考になりました。 ...

概要 Ace.jsでTeXをハイライトする機会がありましたので、備忘録です。 以下の記事を参考にしました。 https://banatech.net/blog/view/11 参考になりましたら幸いです。 画面例 デモサイト https://nakamura196.github.io/ace_latex/ リポジトリ https://github.com/nakamura196/ace_latex ソースコード <html lang="en"> <head> <title>ACE in Action</title> </head> <body> <div id="editor" style="width: 100%; height: 400px; border: 1px solid gray;"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.2/ace.js" integrity="sha512-oVyp48/610D5Jo577cvp2vX+Fc0kYaI6s2tZRqBRzjZh7+y/vOEHTzUefbXk/B8P0B76bOK3tL1zeF/QcXlyiA==" crossorigin="anonymous" referrerpolicy="no-referrer" ></script> <script> const text = `\\usepackage{hiragino,ryumin,cid} \\usepackage[dvips]{graphics} \\usepackage{multicol} \\begin{document} テキスト \\右注{（サンプル）}テキスト \\end{document}`; const editor = ace.edit("editor"); // editor.setTheme("ace/theme/monokai"); editor.setFontSize(14); editor.getSession().setMode("ace/mode/latex"); editor.getSession().setUseWrapMode(true); editor.getSession().setTabSize(4); editor.$blockScrolling = Infinity; editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, }); editor.setValue(text, 1); </script> </body> </html>

概要 Github Actionsを使ってGithubからEC2までのDjangoのCICD環境を構築する機会があり、その備忘録です。 以下の記事を参考にさせていただきました。 https://qiita.com/fffukken/items/27b0bfa712940914d3f6 上記の記事に対して、Github Actionsの設定を一部更新しました。 Github Actionsの設定 name: Test and Deploy on: push: branches: [ develop, main ] pull_request: branches: [ develop ] jobs: build: runs-on: ubuntu-latest strategy: max-parallel: 4 matrix: python-version: [3.9, "3.10"] steps: - uses: actions/checkout@v3 - name: Set up Python ${{ matrix.python-version }} uses: actions/setup-python@v4 with: python-version: ${{ matrix.python-version }} - name: Install Dependencies run: | python -m pip install --upgrade pip pip install -r requirements.txt - name: Run Tests run: | python manage.py makemigrations python manage.py migrate python manage.py test - name: deploy run: | echo "$SECRET_KEY" > secret_key chmod 600 secret_key ssh -oStrictHostKeyChecking=no ${EC2_USER}@${EC2_HOST} -i secret_key "source <仮想環境名>/bin/activate \ && cd ~/<プロジェクト名>\ && git pull origin main \ && python manage.py makemigrations \ && python manage.py migrate \ && deactivate \ && sudo systemctl restart gunicorn" env: SECRET_KEY: ${{ secrets.SECRET_KEY }} EC2_USER: ${{ secrets.EC2_USER }} EC2_HOST: ${{ secrets.EC2_HOST }} 変更した点として、actions/checkoutとactions/setup-pythonのバージョンを変更しました。また、pip installの部分を変更し、pip install -r requirements.txtにしました。 ...

概要 Djangoで編集履歴を残す方法を調べたので、その備忘録です。 以下のメッセージのように、デフォルトでは、管理画面を通じた編集履歴は記録されるが、それ以外の画面を通じた編集履歴は残らないようでした。 This object doesn’t have a change history. It probably wasn’t added via this admin site. django-simple-history そこで、以下のパッケージを使ってみます。 https://django-simple-history.readthedocs.io/en/latest/ 以下のクイックスタートのページを参考にすることで、問題なく利用できました。 https://django-simple-history.readthedocs.io/en/latest/quick_start.html 参考 以下のように、編集履歴に関するテーブルが追加され、編集履歴が記録されるようになりました。 また管理画面から、以下のような編集履歴を確認できるようになりました。管理画面以外の画面からの変更履歴を確認できました。 まとめ Djangoで編集履歴を残す際に参考になりましたら幸いです。

Django Rest Framework (DRF)で部分一致フィルタを実装するためには、Djangoフィルターバックエンドを使うのが一般的です。これは、django_filters モジュールを使用します。 このモジュールをまだインストールしていない場合は、以下のコマンドでインストールできます： pip install django-filter 以下は、部分一致検索を実現するための一般的な手順です： フィルタセットを定義します。以下はmodels.pyに存在するMyModelというモデルでnameフィールドを部分一致検索するためのフィルタセットです： import django_filters class MyModelFilter(django_filters.FilterSet): name = django_filters.CharFilter(lookup_expr='icontains') class Meta: model = MyModel fields = ['name',] ここで、lookup_expr=‘icontains’は、大文字小文字を区別せずに部分一致を行うための設定です。 次に、作成したフィルタセットをViewSetに適用します： from rest_framework import viewsets from django_filters.rest_framework import DjangoFilterBackend class MyModelViewSet(viewsets.ModelViewSet): queryset = MyModel.objects.all() serializer_class = MyModelSerializer filter_backends = [DjangoFilterBackend] filterset_class = MyModelFilter これで、クライアントからのリクエストにnameパラメータが含まれている場合、その値に部分一致するMyModelのインスタンスがレスポンスとして返されます。 ただし、これらのコードは例示のためのものであり、実際の使用ではモデルやフィールド名を適切に置き換える必要があります。また、セキュリティやパフォーマンスの観点から、適切なフィルタリングとバリデーションを行うことが重要です。

概要 Omeka Classicでコレクションを一括削除する方法の一例を紹介します。Omeka Classic （Version 3.1.1）では、コレクションを複数選択して削除するGUIは提供されていません。アイテムについては、同機能が提供されています。 そこで、APIを用いてコレクションの一括削除を行います。 APIキーの取得 以下を参考に、APIの有効化とAPIキーの発行を行います。 https://omeka.org/classic/docs/Admin/Settings/API_Settings/ 具体的には、まず以下のページにアクセスします。 /admin/settings/edit-api そして、ユーザ毎のページにアクセスして、「API Keys」のタブを選択します。「New key label」からAPIキーを発行します。 /admin/users/api-keys/1 Pythonスクリプト 以下のようなPythonスクリプトにより、コレクションの一括削除を行うことができます。以下では、アイテム数が0のコレクションのみを削除するように設定しています。 import requests api_key = "<取得したAPIキー>" # 要変更 endpoint = "https://example.org/omeka/api" # 要変更 params = { "key": api_key } # コレクション一覧の取得 url = f"{endpoint}/collections" collections = requests.get(url, params=params).json() for collection in collections: # コレクションに含まれるアイテム数を取得 items_count = collection["items"]["count"] # アイテム数が0の場合 if items_count == 0: url_collection = collection["url"] requests.delete(f"{url_collection}", params=params) まとめ Omeka Classicでコレクションを一括削除する際の参考になりましたら幸いです。

概要 IIIF Mirador2のアノテーション画面の使い方（の一部）を説明します。 四角形アノテーションの作成 https://www.youtube.com/watch?v=jny09nLZvLU パス（多角形）アノテーションの作成 アノテーションを終了する場合には、ダブルクリックします。 https://www.youtube.com/watch?v=4cM-6-rXL9M 既存のアノテーションの修正 https://www.youtube.com/watch?v=HlE36inbgq4 既存のアノテーションの削除 https://www.youtube.com/watch?v=STk2vjLc_-k まとめ IIIF Mirador2を用いたアノテーション付与の際の参考になりましたら幸いです。

bagitは以下のように説明されています。 bagit is a Python library and command line utility for working with BagIt style packages. 本ライブラリを試すGoogle Colabのノートブックを作成しました。 https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/bagit_python.ipynb bagitの利用にあたり、参考になりましたら幸いです。

DjangoのModelFormを使用してアップロードしたファイルのパスを取得する機会がありましたのでメモします。 以下のモデルを想定します。 class Document(models.Model): file = models.FileField(upload_to='documents/') 上記に対して、以下のようなviewsで、パスにアクセスすることができました。 from django.shortcuts import render, redirect from .forms import DocumentForm def upload_file(request): if request.method == 'POST': form = DocumentForm(request.POST, request.FILES) if form.is_valid(): document = form.save() file_url = document.file.url # Correct field name used here full_path = document.file.path # Correct field name used here return redirect('some-view') else: form = DocumentForm() return render(request, 'upload.html', {'form': form}) 基本的なことかと思いますが、参考になりましたら幸いです。

概要 DjangoとAWS OpenSearchを接続する方法に関するメモです。以下の記事が参考になりました。 https://testdriven.io/blog/django-drf-elasticsearch/ ただし、上記の記事はElasticsearchを対象にした設定のため、OpenSearchに応じた変更が必要です。 変更点 以下のElasticsearch Setupの部分から、OpenSearchに応じた変更が必要でした。 https://testdriven.io/blog/django-drf-elasticsearch/#elasticsearch-setup 具体的には、以下の2つのライブラリが必要でした。 (env)$ pip install opensearch-py (env)$ pip install django-opensearch-dsl その後は、django_elasticsearch_dslとなっている箇所をdjango-opensearch-dslに、elasticsearch_dslをopensearchpyに書き換えることで、記事の通りに進めることができました。 例えば、以下のような形です。 # blog/documents.py from django.contrib.auth.models import User from django_opensearch_dsl import Document, fields # opensearchに変更 from django_opensearch_dsl.registries import registry # opensearchに変更 from blog.models import Category, Article @registry.register_document class UserDocument(Document): class Index: name = 'users' settings = { 'number_of_shards': 1, 'number_of_replicas': 0, } class Django: model = User fields = [ 'id', 'first_name', 'last_name', 'username', ] @registry.register_document class CategoryDocument(Document): id = fields.IntegerField() class Index: name = 'categories' settings = { 'number_of_shards': 1, 'number_of_replicas': 0, } class Django: model = Category fields = [ 'name', 'description', ] @registry.register_document class ArticleDocument(Document): author = fields.ObjectField(properties={ 'id': fields.IntegerField(), 'first_name': fields.TextField(), 'last_name': fields.TextField(), 'username': fields.TextField(), }) categories = fields.ObjectField(properties={ 'id': fields.IntegerField(), 'name': fields.TextField(), 'description': fields.TextField(), }) type = fields.TextField(attr='type_to_string') class Index: name = 'articles' settings = { 'number_of_shards': 1, 'number_of_replicas': 0, } class Django: model = Article fields = [ 'title', 'content', 'created_datetime', 'updated_datetime', ] Populate Elasticsearch Elasticsearchを対象にした上記の記事では、以下のコマンドが紹介されています。 ...

概要 Django REST framework で一括登録を行う方法を調べたので、その備忘録です。 以下の記事の通りに進めることで、一括登録用のエンドポイントを作成することができました。 https://qiita.com/Utena-lotus/items/c7bde7f663cfc4aabff1 Postman Postmanで以下のようなリクエストを送りました。 結果、以下のように、一括登録を行うことができました。 まとめ 参考になりましたら幸いです。

概要 djangoでJWTを使おうと思い、djangorestframework-jwtを使ってみました。 https://github.com/jpadilla/django-rest-framework-jwt 以下のサイトなどを参考にすすめてみました。 https://dev-yakuza.posstree.com/django/jwt/ ただし、‘rest_framework_jwt.authentication.JSONWebTokenAuthentication’を記述したところで、以下のエラーが発生しました。 ImportError: cannot import name 'smart_text' from 'django.utils.encoding' 調べたところ、以下の記事が見つかりました。 https://stackoverflow.com/questions/72102911/could-not-import-rest-framework-jwt-authentication-jsonwebtokenauthentication かわりにdjangorestframework-simplejwtを使え、とのことでした。 https://github.com/jazzband/djangorestframework-simplejwt 以下、こちらの使い方についてメモを残します。 djangorestframework-simplejwt 以下のページを参考にすることで、動作確認を行うことができました。 https://django-rest-framework-simplejwt.readthedocs.io/en/latest/getting_started.html Postman usernameとpasswordを使って、以下にpostします。 http://localhost:8000/api/token/ 結果、refreshとaccessが得られます。 このaccessのほうの値を使用して、HeaderにAuthorizationを設定して送ります。Bearer [jwt]の形式で送ることで、apiを利用できました。 まとめ djangoでJWTを使う際の参考になりましたら幸いです。

背景 ArchivematicaのAPIを用いて、TransferからAIPのダウンロードまでを行うことができましたので、メモします。 以前、ArchivematicaのAPI利用と、Storage ServiceのAPI利用をそれぞれ記事にしました。 今回は、上記を組み合わせて、TransferからAIPのダウンロードまでを行います。 方法 以下のノートブックに方法を記載しました。 https://colab.research.google.com/github/nakamura196/ndl_ocr/blob/main/ArchivematicaのAPIを使ってみる.ipynb まとめ ArchivematicaのAPI利用にあたり、参考になりましたら幸いです。 今後は、サーバへの処理対象ファイルのアップロードや、上記のAPIを使用したフロントエンドの開発にも取り組みたいと思います。

概要 Omeka Sでアイテムセット毎のページに表示されるアイテムのデフォルトソートを設定する方法について記載します。 具体的には、以下のような画面の初期ソートについてです。デフォルトでは「登録日」「降順」に設定されています。 以下、Omeka v4とv3で方法が異なりますので、それぞれについて説明します。 v4 以下のサイト毎の設定画面にアクセスします。 /admin/site/s/<URLスラッグ>#site-settings そして、以下の「Item browse defaults」で、フィールドと昇順・降順を設定します。 注意として、ここで設定したソートは、アイテムセットのページだけでなく、アイテムの一覧ページの初期ソートも変更されてしまいます。 そこで、以下のように、ナビゲーションのクエリ設定から、アイテム一覧については、別途デフォルトソートを設定することで、それぞれ異なるデフォルトソートを設定することができます。 /admin/site/s/<URLスラッグ>/navigation 他にも良い方法があるかもしれませんが、一つの方法として参考になりましたら幸いです。 v3 v3の場合、以下のモジュールを追加します。 https://github.com/Daniel-KM/Omeka-S-module-Next インストール後、サイト毎の設定画面に以下の項目が追加されます。 /admin/site/s/<URLスラッグ>#site-settings 以下のように説明があります。 Set order for item set, one by row, format “id,id,id property order”. Use “0” for the default. 例えば、0 dcterms:title ascと入力すると、アイテムセットにおけるアイテムのデフォルトソートがdcterms:titleに対する昇順になります。アイテムセット毎に設定を変更したい場合には、当該アイテムセットのIDを指定します。例75532 dcterms:title asc まとめ Omeka Sでアイテムセット毎のページに表示されるアイテムのデフォルトソートを設定する方法について記載しました。より良い方法があるかもしれませんが、一つの方法として参考になりましたら幸いです。

Strapi v4のGraphQLのソートやページネーションの方法を調べました。以下に記載がありました。 https://docs.strapi.io/dev-docs/api/graphql 具体的には、以下のような形で記述することで、ページネーションやソートを行うことができました。 query { blogPosts(pagination: {page: 1, pageSize: 10}, sort: "createdAt:desc") { meta { pagination { total } } data { id attributes { createdAt } } } } 参考になりましたら幸いです。

概要 DrupalでOpenAPIを有効にする機会がありましたので、その備忘録です。なお、以下のjson:apiモジュールを有効化済みです。 モジュールのインストール 以下の2つのモジュールをインストールします。 https://www.drupal.org/project/openapi https://www.drupal.org/project/openapi_jsonapi 結果、以下のURLで、jsonを取得することができます。 /openapi/jsonapi 以下にアクセスすると、「No UI …」と表示されます。次に、UIを追加してみます。 /admin/config/services/openapi UIの追加 以下の2つのモジュールをインストールします。 https://www.drupal.org/project/openapi_ui https://www.drupal.org/project/openapi_ui_redoc 結果、「Explore」のボタンが表示されます。 ボタンをクリックすると、以下の画面に遷移します。 /admin/config/services/openapi/redoc/jsonapi Swagger UIライクな画面が表示されます。 なお、Redocは、以下のように説明されていました。 Redoc is an open-source tool for generating documentation from OpenAPI (fka Swagger) definitions. https://github.com/Redocly/redoc 参考 以下の「Swagger UI for OpenAPI UI」についてもインストールしてみましたが、私の環境ではエラーが出てしまいました。 https://www.drupal.org/project/openapi_ui_swagger まとめ DrupalでOpenAPIを利用される際の参考になりましたら幸いです。

概要 Nuxt3でOpenSeadragonとOpenSeadragon SVG Overlayを使う例を作成しました。（鯰に御札を貼る要石）「国立国会図書館 所蔵」の画像を利用しています。 OpenSeadragon https://nuxt3-demo-nine.vercel.app/osd OpenSeadragon SVG Overlay https://nuxt3-demo-nine.vercel.app/osd-svg 方法 ポイントとして、以下のようなプラグインファイルを用意しました。これにより、SSR時に生じる不具合を解消できました。 https://github.com/nakamura196/nuxt3-demo/blob/main/plugins/osd.client.js またsvg overlayに関する記述は以下を参考にしました。 https://github.com/openseadragon/svg-overlay/blob/master/openseadragon-svg-overlay.js まとめ よりよい記述の方法があるかと思いますが、Nuxt3でのOpenSeadragonの利用にあたり、参考になりましたら幸いです。