Nuxt

Nuxt3のSSRをVercelでホスティングする機会がありましたので、その備忘録です。 ビルド設定について、以下のように、Output Directoryを.output/serverに設定する必要がありました。 またCORSを有効化するにあたり、以下の記事が参考になりました。 https://vercel.com/guides/how-to-enable-cors 具体的には、プロジェクトのルートに以下のフォルダを置くことで対応できました。 { } " ] h e { } a d " " ] e s h r o e { { { { s u a " r d " " " " : c e k k k k e r e e e e [ " s y y y y : " " " " " : : : : : " / [ " " " " a A A A A p c c c c i c c c c / e e e e ( s s s s . s s s s * - - - - ) C C C C " o o o o , n n n n t t t t r r r r o o o o l l l l - - - - A A A A l l l l l l l l o o o o w w w w - - - - C O M H r r e e e i t a d g h d e i o e n n d r t " s s i , " " a , , l " s v " " " a v v , l a a u l l " e u u v " e e a : " " l : : u " e * " " " " G X : E - } T C " , , S t O R r P F u T - e I T " O o N k } S e , , n P , A T X C - H R , e D q E u L e E s T t E e , d P - O W S i T t , h P , U T A " c c } e , p t , A c c e p t - V e r s i o n , C o n t e n t - L e n g t h , C o n t e n t - M D 5 , C o n t e n t - T y p e , D a t e , X - A p i - V e r s i o n " } 間違った記述もあるかもしれませんが、参考になりましたら幸いです。 ...

Babylon.jsとNuxt3とVuetifyを組み合わせて使用する機会がありましたので、その備忘録です。 構築したサイトは以下でご確認いただけます。 https://nakamura196.github.io/nuxt3-babylonjs/ ソースコードは以下です。 https://github.com/nakamura196/nuxt3-babylonjs 今回の組み合わせでアプリを開発される際の参考になりましたら幸いです。

概要 Nuxt3のssrでIIIF viewerを導入する方法の備忘録です。 Canvas Panel 以下のビューアの導入です。 https://iiif-canvas-panel.netlify.app/ インストール n p m i @ d i g i r a t i / c a n v a s - p a n e l - w e b - c o m p o n e n t s page 以下を参考にしてください。 https://github.com/nakamura196/nuxt3-iiif-viewer/blob/main/pages/canvas-panel/index.vue 表示例 https://nakamura196.github.io/nuxt3-iiif-viewer/canvas-panel Tify 以下のビューアの導入です。 https://github.com/tify-iiif-viewer/tify インストール n p m i t i f y page 以下を参考にしてください。 ...

Nuxt 3のserver/apiでjsonファイルを（インポートして）操作する方法の一例です。以下の記事を参考にしました。 https://github.com/nuxt/framework/discussions/775#discussioncomment-1470136 型定義などの改善の余地は多々ありますが、以下のような書き方で動作確認ができました。 e } x ) p c c c c c c r } ; a o o o o o e s r n n n n n n t " } y t s . s 以 s s s s u h n t d t 下 t t t t r i " } " c d e の n t t , h / e i f i 参 q p s i s o " i a f t a t 考 u a i t { " t v t w a e u e リ e g z e : a a s a u m l m ン r e e m l l " i l s t s ク y : : s { " u : t t _ を _ を : : e : つ t 参 = n n " i を d け o 照 u u a { : t 使 e a る t し g m m n e 用 f n 点 a て e b b y i m し i y に l く t e e [ t s て n 注 : だ Q r r ] e い e = 意 さ u m ま E a い e = = = s す v a n 。 r _ 。 e w y y N N i t n a [ ( u u t o t i ] e m m e t H t v b b m a a = e e e s l n i n r r _ . d m i t ( ( t l l p t ) q q o e e o e u u t n r r m e e a g ( t s r r l t a ( _ y y . h s ' . . . s , y ~ d p s l n / e a i i c a f g z c s a e e e ( s u ) ) ( e e l ( v t t p e s a n / g t i 1 2 e ) n ; 0 d ; - = e > x 1 . ) { j s o n s ' i ) z e , p a g e s i z e ) ; 上記により、例えば/api/items?page=2&size=40のようなクエリを用いることで、インポート元のjsonファイル（~/assets/index.json）の一部を返却することができました。パスはassets以外でも大丈夫のようですが、十分に検証できていません。 ...

概要 Omeka SおよびOmeka Classicは、デジタルアーカイブ構築および人文（情報）学研究において、とても便利なツールです。 https://omeka.org/ REST APIを標準搭載し、モジュールおよびプラグインの追加などによる高い拡張性を持ちます。またIIIF関連ツール、翻刻支援ツール、時空間情報を取り扱うツールなど、さまざまな既存資産を利用することができます。 一方、サイトの見た目を変更するテーマ開発などについては、PHPおよびOmekaに対する知識が求められ、比較的難易度が高いと（個人的に）感じています。この点について、昨今はバックエンドとフロンドエンドを分離したHeadless CMSという使い方も普及しつつあります。 そこでOmeka ClassicをHeadless CMSとして使用し、Nuxt 3を用いたフロントエンド開発を試みました。Omekaの活用方法の一例として参考になれば幸いです。 Omeka Classicの準備 APIの有効化 以下を参考に、APIの有効化を行います。 https://omeka.org/classic/docs/Admin/Settings/API_Settings/ Access-Control-Allow-Originヘッダーの追加 .htaccessファイルにAccess-Control-Allow-Originヘッダーを追加します。 H # # # # e a O T E d m h r e e i r r k s o a r s f e . i R t h l e t e p A a o c c i r c c s t e e i s s r n s s e g - : q C u # # o A i n p r t a e r c d o h l e f - o A c r l o l n O o f m w i e - g k O u a r r i a t g t o i i n o f n u " n * f c " i t l i # e o n 追 加 c o r r e c t l y . Omeka ClassicのAPI 以下のページにAPIがまとめられています。 ...

概要 Nuxt 3とVuetify 3を用いたIIIF Image API関連ツールを作成しました。本ツールを開発した背景として、IIIF Image APIを操作するニーズに加えて、Nuxt 3の使い方を学ぶ目的がありました。 GitHubリポジトリは以下です。参考になりましたら幸いです。 https://github.com/nakamura196/nuxt3-vuetify3 使い方 以下のURLからアクセスいただけます。 https://nv3.netlify.app/ 以下のように、「例」ボタンを押すと、画面上部のテキストフォームにURLが入力され、そのURLに含まれる要素（「region」や「size」など）が画面下部に表示されます。 IIIF Image APIを操作する際の参考になりましたら幸いです。

Nuxt 2を用いたMirador 3の使用例を以下のGitHubリポジトリで紹介しています。 https://github.com/nakamura196/nuxt-mirador ただ上記のリポジトリにおいて、production環境において不具合が生じることがわかりました。具体的には、ページ遷移後にMiradorの表示が崩れてしまう不具合です。 送っていただいたissue https://github.com/nakamura196/nuxt-mirador/issues/1 このissueについて、さらに不具合を修正したPull requestも送っていただきました。 https://github.com/nakamura196/nuxt-mirador/pull/2 具体的には、以下に示すように、beforeDestroyでunmountする必要がありました。 https://github.com/nakamura196/nuxt-mirador/pull/2/files 自分では不具合の解消方法が分かりかねたので、大変助かりました。 Nuxt（Vue）におけるMirador 3の使用において、参考になりましたら幸いです。

以下に説明がありました。 https://develop365.gitlab.io/nuxtjs-2.8.X-doc/ja/api/configuration-watch/ e } x p g } w o e , a r . n f t t , e a c r l h d a l : e t b f e a [ a : c ' u k s l { : t t a t t { r i u c e ' , ] , 上記のように、nuxt.config.jsファイルでwatchを与えることで、対象ディレクトリも監視対象になりました。 ...

本記事では、AWS x Nuxt.js x Elasticsearchを用いた検索アプリケーションの開発環境の構築について、説明します。備忘録の側面が強いです。 以下の構成を目指します。よりよい構成や構築方法があるかと思いますが、とりあえずAWSを用いて、検索エンジンにElasticsearchを使用したNuxt.js製のウェブアプリケーションの開発環境が整います。 Cultural Japanプロジェクトにおいても、上記とほぼ同様の構成を採用しています。 以下の流れで説明します。 準備（任意） AWSでドメインの取得やSSL/TLS化を行う方法です。 Route 53を用いたドメイン取得 独自ドメインの取得が必要な場合、Route 53でドメインの取得が可能です。 AWS Certificate Manager 次に、AWS Certificate Managerを用いて、SSL/TLS化を行います。こちらも手順に進めれば問題ありません。 なお、検証を行う際、以下の「Route 53でレコードを作成」ボタンをクリックして手続きすることで、簡単に進めることができました。 Backend Backendの構築から進めます。 Identity and Access Management (IAM)ユーザの作成 まず、Amazon OpenSearch Serviceにアクセス権限があるユーザを作成します。 作成後に表示される「アクセスキー」と「シークレットアクセスキー」をメモしておきます。 Amazon OpenSearch Service まず、Amazon OpenSearch Serviceを選びます。 その後は、以下のチュートリアルが参考になります。 https://docs.aws.amazon.com/opensearch-service/latest/developerguide/gsg.html 上記のマニュアルからの変更点として、アクセスポリシーは「ドメインレベルのアクセスポリシーの設定」を選択し、先に作成したユーザのARNを許可してください。 （ローカル）Pythonを用いたAmazon OpenSearch Serviceへのデータ登録 次に、上記で発行した「アクセスキー」と「シークレットアクセスキー」などを用いて、Amazon OpenSearch Serviceにデータ登録を行います。 具体的には、以下のGoogle Colabなどを参考にしてください。 https://colab.research.google.com/drive/1-uygvtQwoc3Wn4XSEUWN5Z5Hxq3vT9Gj?usp=sharing AWS SAM（Serverless Application Model） 次に、API GatewayとLambda 関数を作成します。具体的には、以下の記事を参考に、AWS SAM（Serverless Application Model）を利用します。 dev.classmethod.jp ...

概要 Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 github.com 以下のページから、デモサイトをご確認いただけます。 https://nuxt-visjs.netlify.app/ 詳細 Nuxt.jsはVue.jsをより効果的に使えるフレームワークです。 またvis.jsは、ネットワーク図やタイムラインを作成することができる可視化ライブラリです。 visjs.org 今回、Nuxt.jsでvis.jsを使用する方法を紹介するGitHubリポジトリを作成しました。 「Timeline」「Network」「Graph2d」による基本的な可視化例を掲載しています。 Nuxt.jsを用いたvis.jsの利用に際して、お役にたてば幸いです。