Omeka SのIIIF Serverモジュールを使用した階層構造を持つ目次の記述

概要 Omeka SのIIIF Serverモジュールを使用し、階層構造を持つ目次の記述方法について紹介します。 マニュアル やや複雑な記述になっていますが、以下に説明があります。 https://github.com/Daniel-KM/Omeka-S-module-IiifServer?tab=readme-ov-file#input-format-of-the-property-for-structures-table-of-contents 単純な目次 「Toyo Bunko Media Repository」で公開されている以下を例とします。 https://app.toyobunko-lab.jp/s/main/document/9f9d95c2-d33d-7402-742b-47db12748688 以下のように、{RangeのID},{Rangeの名前},{Canvasのインデックス}を指定します。 r r r r r r r r r r r 1 2 3 4 5 6 7 8 9 1 1 , , , , , , , , , 0 1 延 明 安 安 天 天 寛 寛 享 , , 享 和 永 永 明 明 政 政 和 文 文 、 , 一 二 一 二 一 二 , 化 化 寛 2 , , , , , , 2 一 、 延 5 5 7 1 1 1 2 5 , 文 、 5 9 1 4 7 1 5 2 政 宝 0 2 7 8 7 、 暦 9 二 , , 1 3 1 3 これにより、以下のように目次が表示されます。 ...

2025年6月5日 · 20 分 · Nakamura

IIIF Presentation API v2のIIIFコレクションで、ページネーションを使う

概要 IIIF Presentation API v2のIIIFコレクションで、ページネーションを使う機会がありましたので、備忘録です。 背景 IIIFコレクションでは、以下のように、複数のマニフェストファイル(およびコレクション)の一覧を提供することができます。 https://iiif.io/api/presentation/2.1/#collection { } " " " " " " " " ] @ @ @ l v d a m c i t a i e t a { } o d y b e s t n n " p e w c r i " " " t : e l i r i f @ @ l e " " n i b e i t a x " : : g p u s d y b t h H t t t " p e " t " " i i i s : e l : t s T n o o " " " p c o t n n : " : : " : : p " " " h h / C : : : [ t " " t / o L t s B t e l e " " " p c o p x l v t D P : : o : a e e o e r / M k / m c l p s o / a / p t " c v e n 1 i l i C , r i x i " i e o o i d a f i . n l p e m e f o " l t d p s . r , e i l t i g c o b e " o t n y . , i i o a i o o E r p i n f x g i f a / / / f C m i p c o o p i r o r l l i e l l e f s l E e / e e x c O b n c a t r o t t m i g o a i p o a k t o l n n 1 i n e " i / o / , z m n t O a a / o r t n 2 p g i i / " a o f c , n n e o i " s n z , t t a " e t , x i t o . n j " s , o n " , この時、対象とするマニフェストファイルが多数になった場合、一つのIIIFコレクションでは配信が難しくなりました。 ...

2025年6月2日 · 7 分 · Nakamura

Drupalで管理者以外のユーザーにも設定画面へのアクセスを許可する方法

本記事の一部はAIが作成しました。 概要 Drupalでカスタムモジュールの設定画面を作成する際、管理者以外のユーザーにもアクセスを許可したい場合があります。今回は、GitHub Webhookモジュールを例に、この問題の解決方法を説明します。 問題の発生 最初の状態では、以下のようなルーティング設定でした: # g i g t p d r i h a e e t u t f _ _ q _ h b h a f t u p u _ : u o i i e b w l r t r r _ e t m l e m w b / s : e m i e h a : : e s b o d n s h o m \ ' t i o k i D G s o o . n r i : n k s / u t : . e c p H r t o a u ' o t n l b a u i f \ d t n i g W m i g g i e i n s / t b n g : g h h i . i u o s y t b o t m h _ k e l u w r b e S _ b e s w h t i e o t t b o i e h k n o \ g c o F s o k o ' n ' r f m i \ g S u e r t a t t i i n o g n s ' F o r m ' この設定では、administer site configuration権限を持つ管理者のみがアクセス可能で、一般ユーザーはアクセスできませんでした。 ...

2025年5月28日 · 7 分 · Nakamura

NDL古典籍OCR-Liteを用いたアノテーション付きIIIFマニフェストファイルとTEI/XMLファイルの作成

お知らせ 本記事で紹介する流れをわかりやすくした記事を作成しました。以下も参考にしてください。 概要 NDL古典籍OCR-Liteを用いたアノテーション付きIIIFマニフェストファイルとTEI/XMLファイルの作成を行うツールを試作したので紹介します。 アノテーション付きIIIFマニフェストファイルの作成 まず、NDL古典籍OCR-Liteを用いて、IIIFマニフェストファイルを入力として、アノテーション付きIIIFマニフェストファイルを出力するGradioアプリを作成しました。Hugging FaceのSpaceを用いて公開しています。 https://nakamura196-ndlkotenocr-lite-iiif.hf.space/ 出力結果として、以下のようなアノテーション付きIIIFマニフェストファイルが得られます。 { } " " " " } " ] @ i t l , i c d y a " ] t { } { } o " p b n e , n : e e o " m " " " " " } " ] " ] " " " " " } " ] " ] t " l n 校 s i t w h l , i , a i t w h l , i , a e " : " e 異 " d y i e a " ] t { } n { } d y i e a " ] t { } n { } x h : " 源 : " p d i b n e n " p d i b n e n t t " : 氏 : e t g e o " m " " " ] o " " " ] : e t g e o " m " " " ] o " " " " t M { 物 [ " h h l n 1 s i t i t i t i " h h l n 2 s i t i t i t i : p a [ 語 " : " t " e " " d y t { } a d y t { } { } { } { } { } { } { } " : " t " e " " d y t { } a d y t s n . h : " : " : " p e t " p e , , , , , , h : " : " : " p e t " p e " : i t " : : : e m " " " " " } i : e m " " " " " } " " " " " } " " " " " } " " " " " } " " " " " } " " " " " } " " " " " } t " : : : e m " " " " " } i : e m h / f 巻 t C 6 { [ " s i t m t b o " s i t m t b i t m t b i t m t b i t m t b i t m t b i t m t b i t m t b t C 6 { [ " s i t m t b o " s t / e 一 p a 8 4 [ " : " d y o a o " " " " " " ] n " : " d y o a o " " d y o a o " " d y o a o " " d y o a o " " d y o a o " " d y o a o " " d y o a o " " p a 8 4 [ " : " d y o a o " " " " " " ] n " : " t d s " s n 9 7 h : " p t r d i t f w h s s h : " p t r d t v " p t r d t v " p t r d t v " p t r d t v " p t r d t v " p t r d t v " p t r d t v s n 9 7 h : " p t r d i t f w h s s h : p l t : 0 0 t " : e i g y d y o i e e { } " t " : e i g y y a : e i g y y a : e i g y y a : e i g y y a : e i g y y a : e i g y y a : e i g y y a : 0 0 t " : e i g y d y o i e e { } " t " : . " / a , 6 t A [ " v e " " p r d i r : t A [ " v e " p l " v e " p l " v e " p l " v e " p l " v e " p l " v e " p l " v e " p l / a , 6 t A [ " v e " " p r d i r : t A [ n , / s , p n " : a t : : e m t g v " " " p n " : a t : e u " : a t : e u " : a t : e u " : a t : e u " : a t : e u " : a t : e u " : a t : e u / s , p n " : a t : : e m t g v " " " p n ] / d d " s n h t " " a h h i i t p [ s n h t " " e h t " " e h t " " e h t " " e h t " " e h t " " e h t " " e d " s n h t " " a h h i i t p [ s n i l l , : t " i : { " : t " t c d y r : t " i : { : " t " i : { : " t " i : { : " t " i : { : " t " i : { : " t " i : { : " t " i : { : " l , : t " i : { " : t " t c d y r : i . . t t A o h " : " e " p o t t A o : t A o : t A o : t A o : t A o : t A o : t A o : . t t A o h " : " e " p o t i g n / a p n n " t " : : " : e f / a p n n " " p n n " " p n n " " p n n " " p n n " " p n n " " p n n " " n / a p n n " t " : : " : e f / a f o d d t s n " h t I 6 : " i d t s n " h T " s n " h T " s n " h T " s n " h T " s n " h T " s n " h T " s n " h T " d d t s n " h t I 6 : " i d t . . l l i : : t p m " 8 4 " : l l i : : t e 一 : : t e ○ : : t e 一 : : t e ス : : t e □ : : t e 〇 : : t e 同 l l i : : t p m " 8 4 " : l l i i j . . o t t s a i 9 7 [ h e . o t t x ・ t t x 〇 t t x 一 t t x 〇 t t x 琉 t t x 〇 t t x 校 . . o t t s a i 9 7 [ h e . o o p g n n / a " p : g m 0 0 t " " n n / a " p t 〇 / a " p t " / a " p t " / a " p t 〇 / a " p t 球 / a " p t 〇 / a " p t 異 g n n / a " p : g m 0 0 t " " n n / / o d P d t s s / e a , 6 t I : d P d t c s u ・ d t c s u d t c s u d t c s u 〇 d t c s u □ d t c s u 〇 d t c s u 源 o d P d t s s / e a , 6 t I : d P a a . l a l i c : / " g , p m l a l i o : a ・ l i o : a l i o : a l i o : a 六 l i o : a □ l i o : a 〇 l i o : a 氏 . l a l i c : / " g , p m l a p p j . g . o : / d , e s a " . g . o m / l ・ . o m / l . o m / l . o m / l 〇 . o m / l □ . o m / l 〇 . o m / l 物 j . g . o : / d , e s a " . g i i p g e n n p / l / : g l g e n n m / B ・ n n m / B n n m / B n n m / B 〇 n n m / B □ n n m / B 〇 n n m / B 巻 p g e n n p / l / : g l g e / / / o " d " a d . j / e e o " d " e d o ・ d " e d o d " e d o d " e d o 〇 d " e d o □ d " e d o 〇 d " e d o 一 / o " d " a d . j / e e o " p i a . , l , i l n p / S v . , l , n l d ・ l , n l d l , n l d l , n l d 一 l , n l d □ l , n l d 〇 l , n l d " a . , l , i l n p / S v . , r i p j . n . d e d e e j . t . y 一 . t . y . t . y . t . y 〇 . t . y □ . t . y 〇 . t . y p j . n . d e d e e j e i i p g t n l g l r l p g i n " 一 g i n " g i n " g i n " 〇 g i n " □ g i n " 〇 g i n " i p g t n l g l r l p s f / / o i d . " . v 2 / o n d , 一 o n d , o n d , o n d , 〇 o n d , □ o n d , 〇 o n d , / / o i d . " . v 2 / e / i a . n l g , n i " a . g l 一 . g l . g l . g l 〇 . g l □ . g l 〇 . g l i a . n l g , n i " a n 3 i p j g . o d c p j " . ・ j " . j " . j " . 〇 j " . □ j " . 〇 j " . i p j g . o d c p t 4 i i p " g . l e i p , g ・ p , g p , g p , g 〇 p , g □ p , g 〇 p , g i i p " g . l e i a 3 f / / , o j . 2 / / o ・ / o / o / o 〇 / o □ / o 〇 / o f / / , o j . 2 / t 7 / i a . p g " i a . ・ a . a . a . 一 a . □ a . 〇 a . / i a . p g " i i 6 3 i p j / o , i p j ・ p j p j p j 一 p j □ p j 〇 p j 3 i p j / o , i o 8 4 i i p a . i i p ・ i p i p i p 一 i p □ i p 〇 i p 4 i i p a . i n 6 3 f / / p j f / / ・ / / / / / / 〇 / / □ / / 〇 / / 3 f / / p j f / / 7 / i a i p / i a ・ i a i a i a 〇 i a " i a 〇 i a 7 / i a i p / 3 m 6 3 i p / / 3 i p ・ i p i p i p 〇 i p i p 〇 i p 6 3 i p / / 3 / a 8 4 i i i a 4 i i ・ i i i i i i 一 i i i i 〇 i i 8 4 i i i a 4 c n 6 3 f / i p 3 f / ・ f / f / f / 一 f / f / 〇 f / 6 3 f / i p 3 o i / 7 / i i i 7 / i ・ / i / i / i 一 / i / i 〇 / i / 7 / i i i 7 n f c 6 3 i f / 6 3 i ・ 3 i 3 i 3 i 一 3 i 3 i 一 3 i c 6 3 i f / 6 t e a 8 4 i / i 8 4 i ・ 4 i 4 i 4 i 〇 4 i 4 i 〇 4 i a 8 4 i / i 8 e s n 6 3 f 3 i 6 3 f ・ 3 f 3 f 3 f 〇 3 f 3 f 〇 3 f n 6 3 f 3 i 6 x t v / 7 / 4 i / 7 / ・ 7 / 7 / 7 / 〇 7 / 7 / 一 7 / v / 7 / 4 i / t . a c 6 3 3 f c 6 3 ・ 6 3 6 3 6 3 〇 6 3 6 3 〇 6 3 a c 6 3 3 f c . j s a 8 4 7 / a 8 4 ・ 8 4 8 4 8 4 〇 8 4 8 4 〇 8 4 s a 8 4 7 / a j s / n 6 3 6 3 n 6 3 ・ 6 3 6 3 6 3 〇 6 3 6 3 〇 6 3 / n 6 3 6 3 n s o 1 v / 7 8 4 v / 7 ・ / 7 / 7 / 7 〇 / 7 / 7 " / 7 2 v / 7 8 4 v o n " a c 6 6 3 a c 6 ・ c 6 c 6 c 6 〇 c 6 c 6 c 6 " a c 6 6 3 a n " , s a 8 / 7 s a 8 ・ a 8 a 8 a 8 〇 a 8 a 8 a 8 , s a 8 / 7 s " , / n 6 R 6 / n 6 ・ n 6 n 6 n 6 〇 n 6 n 6 n 6 / n 6 R 6 / , 1 v / 0 8 1 v / ・ v / v / v / 一 v / v / v / 2 v / 0 8 2 / a c 0 6 / a c ・ a c a c a c 一 a c a c a c / a c 0 6 / p s a 0 / a s a ・ s a s a s a ・ s a s a s a p s a 0 / a a / n 0 R n / n ・ / n / n / n 〇 / n / n / n a / n 0 R n g 1 v 0 0 n 1 v ・ 1 v 1 v 1 v 〇 1 v 1 v 1 v g 2 v 0 0 n e / a 0 0 o / a ・ / a / a / a ・ / a / a / a e / a 0 0 o " p s 1 0 s a s ・ a s a s a s ・ a s a s a s " p s 2 0 s , a / / 0 " n / ・ n / n / n / ・ n / n / n / , a / / 0 " g 1 f 0 , n 1 ・ n 1 n 1 n 1 ・ n 1 n 1 n 1 g 2 f 0 , e " u 0 o # ・ o # o # o # ・ o # o # o # e " u 0 / , l 1 s x ・ s x s x s x ・ s x s x s x / , l 2 i l " / y ・ / y / y / y ・ / y / y / y i l " m / , 0 w ・ 1 w 2 w 3 w の 4 w 5 w 6 w m / , a f " h ・ " h " h " h 〇 " h " h " h a f g u , = ・ , = , = , = 〇 , = , = , = g u e l 5 ・ 5 5 4 ・ 4 4 6 e l a l 2 ・ 2 0 3 ・ 3 2 9 a l n / 7 ・ 9 9 7 ・ 7 8 4 n / n 0 0 ・ 3 2 5 ・ 5 3 , n 0 o / , ・ , , , 一 , , 4 o / " d 2 ・ 2 3 3 ・ 2 2 9 " d , e 7 ・ 0 2 0 ・ 8 7 9 , e f 5 ・ 0 7 4 ・ 5 5 , f a , ・ 9 2 , " 3 6 3 a u 1 ・ , , 1 , , 1 u l 1 ・ 2 6 0 4 6 0 l t 4 ・ 1 3 3 5 3 , t . , ・ 8 , , , , 2 . j 9 ・ , 8 1 5 2 9 j p 3 ・ 4 0 4 2 5 9 p g 5 ・ 2 " 7 2 2 1 g " " ・ 4 , 5 " " " " , , ・ " " , , , , ・ , , " TEI/XMLファイルの作成 上記で得られたアノテーション付きIIIFマニフェストファイルを入力として、TEI/XMLファイルを作成するライブラリを作成しました。 ...

2025年5月27日 · 42 分 · Nakamura

DrupalでJSON形式のFieldを扱うための「JSON Field」モジュールを使用する

概要 DrupalでJSON形式のFieldを扱うための「JSON Field」モジュールを使用する機会がありましたので、備忘録です。 https://www.drupal.org/project/json_field 結果、以下のようにエディタと共にJSONを扱えるようになりました。 インストール 以下により、ダウンロードします。 c d o r m u p s o h s e e r n r j e s q o u n i _ r f e i e ' l d d r u p a l / j s o n _ f i e l d : ^ 1 . 4 ' さらに、以下により、ウィジェットも有効します。 ...

2025年5月25日 · 1 分 · Nakamura

TEI/XMLファイルをS3互換のオブジェクトストレージでホストする

概要 TEI/XMLファイルをS3互換のオブジェクトストレージでホストする機会がありましたので、備忘録です。具体的には、mdx Iのオブジェクトストレージを対象にします。 https://mdx.jp/mdx1/p/about/system 背景 TEI/XMLファイルを読み込み、その内容を可視化するウェブアプリケーション(Next.js)を構築します。この時、ファイル数やサイズが小さい場合は、publicフォルダに格納していましたが、これらが大きくなった場合、別の場所でホストすることを考えました。 場所の選択肢は多々ありますが、今回はS3互換であるmdx Iのオブジェクトストレージを対象にします。 GUIを用いたオブジェクトストレージへのファイルアップロード オブジェクトストレージへTEI/XMLファイルをGUI経由でアップロードする方法も多々あります。その中で、これまではCyberduckを使用する方法や、GakunNin RDMを使用する方法などを紹介しました。 一方、今回の事例では、TEI/XML以外のコンテンツをDrupalで管理していました。そこで、Drupalとオブジェクトストレージを接続し、ユーザはDrupalの操作で完結できるようにしました。 Drupalとオブジェクトストレージの接続 以下のモジュールを使用します。 https://www.drupal.org/project/s3fs インストール後、環境設定のページ/admin/configから、S3 File Systemを選択します。 そして、アクセスキーや秘密鍵を登録し、さらにS3のバケット名を登録します。 またAdvanced Configuration OptionsのCustom Host Settingsにおいて、https://s3ds.mdx.jpを入力します。 これでオブジェクトストレージとの接続設定は完了です。 その後、各コンテンツタイプのフィード設定において、アップロード先として「S3 File System」を選択します。 また、今回はTEI/XMLファイルがアップロード対象となるため、「許可されている拡張子」として、xmlを入力します。 この結果、DrupalのGUIを介してアップロードしたTEI/XMLファイルが、mdx Iのオブジェクトストレージに格納されるようになりました。 (参考)DrupalのJSON:APIを用いたファイルの一括アップロード TEI/XMLの初期登録にあたり、Pythonを用いた一括登録を行いました。JSON:APIを用いたファイルの一括アップロードの方法は、以下の記事などが参考になりました。 https://www.drupal.org/node/3024331 一例ですが、以下のようなスクリプトで実現できました。 i i i f f f c m m m r r r l p p p o o o a o o o m m m s r r r s d d d d t t t d g t e e e e o l q A f f f f r j o t o d p e s s e b m i l # s # # # s s l # l l i g # c i e u u # f # w h h h # r i e q o n C _ o e e e o o o f e s f l p r i i e e e e f l u n v i i l i a D l エ s 認 l l g ロ g g t C r s l l フ l フ t a a a フ s s e m m i n d r f ン e 証 f f i グ i i l _ S f c e o ァ e ァ h d d d ァ p r e s i p p e i _ u . ド l 情 . . n イ n n l j h o s c R _ f c s # # s } : # s a = イ n イ f e e e イ o e i : p t m o o n t d p D ポ f 報 U P ( ン _ _ o s e g e s F t " o r e e d ル a ル o i r r r ル n s f r s p r r t _ o a R イ . ( S A s リ u r g o a i l r ト o { o f r s l r l _ f 名 m を p l s s s を s p i o t t : _ t l U ン J B E S e ク r e i n d n f f ー k s k _ e e f a f f " を e バ e e [ [ ア e o v n r ( e サ P ト S a R S l エ l s n = e _ . _ ク e e i t t l . " " " i . i { 取 イ n _ = ' ' ッ n e p t t g t s n イ A ( O s N W f ス p _ { r r s t ン n l e o u f h C A X s c l s 得 = ナ ( d C C プ = s r r ( l q e v ト L J N i A O ) ト = o u " s e e o を _ f s k r . e o c - e s e e リ f a s o o ロ e b i f l o d l ( の _ S A c M R : n r n = s s k 取 r . = e n c a n c C r ( l o モ i t e n n ー r . o n " o b m f o U B O P 認 E D f s l a { p s e 得 e D s n s d t e S E f s f s ー l a l t t ド e s s t フ a ) v R A N I 証 " e , m " o i n s R e _ c r e e p R x _ e . . ド e f e e q t e ( ァ d : e L S : _ ) = = { e C n o ( p U l r s f r n t F c t l D p で _ = . n n u a : f イ _ r ( E A E s = " o s n s o P f e r _ s t " - e o f R a 読 p h t t e t " ル d r 例 _ P N o o e : n e _ e n A . s f t - : T p k , U t み a f e - - s u フ ア o i ) U I D s s l r t . c l s L s p _ o = T o t e P h 込 t . a T D t s ァ ッ t d R ) P . . f e s e s o f e _ e o t k y " k i n t A . む h r d y i s _ イ プ e e L O g g . q e n t o ) B s n o e { p a e o y L b , e e p s . c ル ロ n = I e e D u l t a k : = A s s k n e p n n = p _ a a r e p p o ア ー v T = N t t R e f - t i S i e e " p " ( e B s ' d s ' o o d ッ ド r T e e U s . T u e r E o . n = : l : f N , A e r ( . ] s s e プ 失 u o n n P t U y s s e _ n s _ i " o S n b ) c i t ロ 敗 e s = v v A s S p _ q U _ t r c " c c C n u E a ' o = t ( = ー : ) . ( ( L . E e c = u R c a e s a a s S e u _ m ) p i u = ド g f " " _ p R " o e L o t s r p t r R i U e y ' o r 成 { e " D D B o N : d l s } u p f p i f F d R ( a ( a n l 2 功 r t { R R A s A e o t k s o _ l o _ ト , L f s ) p ' , 0 : e e s U U S t M " g s s i _ n t i n t ー } i p ] 0 s n e P P E ( E a = i . e e c s o c / o ク f / l f l h : { p v l A A _ , p = n g s s o e k a v k ン i j e : i = e f o ( f L L U p _ e s d . e t n e 取 e s _ c a i n " . _ _ R " l 2 r t i e t n i d n 得 l o p a f d l s D D U P L p i 0 e ( o # e _ o . _ 失 d n a t ' e e e R R S A } a c 0 s n = x r n a r 敗 , a t i a r n . U U E S / s a : p / こ = t e / p e : p h o t s a s P P R S u s t o t こ s v i s f i ) n t = m t A A N W s " i n o で 2 p n + p { i / / a h e a L L A O e : o s k ロ 0 o d j o c l n o c e } t _ _ M R r n e e グ 0 n . s n s e o c h a " u B B E D / s / . n イ : s a o s r _ d t m d ) s A A " " l e j c " ン e p n e f p e e e e _ S S ) ) o l s o , セ . i " . _ a / t n r c E E g f o o ッ t + , t t t { - t s o _ _ i . n k シ e j e o h t s ; , d U U n P " i ョ x s x k , y t e R R ? A } e ン t o t e p r f c } L L _ S s を n , n v e e i o " } f S 渡 " _ e } a l o { ) / o W す , r r / m e k r j r O e b { ' n i e s m R s o u a e s o a D p s u m s p n t } o e i e = o a = , n = d = s n p j s F } " e s i s e a / { l e / o . l { f f . n n s s f i . t o " t e i l s e d a ) e e e x e t : l n s t / u d a s } a s } m i " r _ " e o ) t c } n i o " _ c d ' c l e o e } o " k { i c e s s r , f _ d t a o t k a e = n f _ i r l e e s _ p d o a n t s a e ) . t e x t } " ) すでに対象コンテンツが作成済みで、例えばfield_fileといったフィールドにファイルをアップロードする目的で使用することができます。 ...

2025年5月24日 · 14 分 · Nakamura

校異源氏物語テキストDBのDTS(Distributed Text Services) APIの更新

概要 校異源氏物語テキストDBのDTS(Distributed Text Services) APIを更新したので、備忘録です。 背景 DTS(Distributed Text Services) APIは以下で説明されています。 https://distributed-text-services.github.io/specifications/ 以下の記事で、DTS APIの作成について紹介しました。 一方、以下を課題としていました。 今回開発したDTS APIも上記のガイドラインに非対応の箇所がある可能性がある点にご注意ください。 そこで、前回作成したAPIをv1とし、今回はdtsVersionの1-alphaに従ったv2のAPIを作成します。 API 以下がEntry Endpointです。v1とv2の違いは以下です。 v1 https://dts-typescript.vercel.app/api/v1/dts { } " " " " " " n @ @ c @ d a i t o c o v d y l o c i " p l n u g : e e t m a " c e e t " : t x n i i t t a " o " s n p E n : " " i n s : : / t " " v r : d " " 1 y t / / / P " s a a d o / / p p t i a E i i s n p n / / " t i t v v , " / r 1 1 , v y / / 1 P d d / o t t d i s s t n / / s t d n / . o a c j c v o s u i l o m g l n e a e l n t c d t i t " " o i , n o " n , s " , v2 https://dts-typescript.vercel.app/api/v2/dts ...

2025年5月24日 · 18 分 · Nakamura

Dockerによるディスク圧迫の調査と対処法【Ubuntu 22.04 運用事例】

はじめに 本記事では、Dockerコンテナやイメージによるディスク圧迫が原因でElasticsearchにエラーが発生した事例と、その調査・対処方法について記録します。同様の問題に直面している方の参考になれば幸いです。 🔍 問題の発生 運用中のElasticsearchで以下のエラーが発生しました。 { } " } " e , s r " " " t r t r p a o y e h t r p a a u " e s s s : " o e " : n " : { " : " : 5 s " 0 e " q 3 a a u r l e c l r h y _ s " p h , h a a r s d e s _ e f x a e i c l u e t d i " o , n _ e x c e p t i o n " , 初期調査により、インデックスが close 状態になっており、ディスク容量不足が疑われました。 ...

2025年5月22日 · 4 分 · Nakamura

Annotorious v2のpolygonツールを使って、polylineを作成する

概要 Annotorious v2のpolygonツールを使って、polylineを作成する方法の備忘録です。 背景 Annotorious v2のウェブサイトは以下です。 https://annotorious.github.io/getting-started/ 以下のように、polygonを記述することができます。 一方、同様の方法でpolylineを記述するツールは、以下のプラグインを含めて、提供されていないようでした。 https://github.com/annotorious/annotorious-v2-selector-pack カスタマイズ 以下のような多角形を作成した場合、 以下のようなJSONファイルが作成されます。 { } " " ] " } " " t b , t , @ i y o a c d p d r o " e y { } g " " } n : " " e s s t : : t o e e " " u l x # " [ " " " : r e " " t c A t v p c c t v " 4 n y a u { e t y a : 6 n p l r " o p l 9 o e u p : r e u " b t " e o " " e h 1 a : " s " : : " t a t : e h : t 3 i " " t { " p - o T " : t S " : 8 n e p p v < / 9 " x o " s g s / 0 , t l c : S v w 2 u y o / e g w - a g m / l > w 4 l o m w e < . 4 B n e w c p w 4 o " n w t o 3 3 d , t . o l . - y i e r y o 8 " n - " g r f , g c , o g 5 " o n / 4 d n - i p s 4 c o / 7 e i a d s n n f . t n 8 u s o b n = . b i \ j 8 f " s 7 r 3 o d . 3 n 7 c 8 l e h 3 d " / . " l 1 , o 2 r 1 i 3 s 3 / 7 g 8 a 9 u 0 / 6 g 2 a 5 u , - 1 F 2 r 9 a 0 g . m 1 e 3 n 7 t 4 / 5 g 1 a 1 u 7 - 1 F 8 r 7 a 5 g m 9 e 4 n 5 t . _ 1 f 3 r 5 a 4 g 9 0 8 0 0 1 4 a 6 . 8 j 7 p 5 2 , / 1 f 6 u 5 l 8 l . / 4 f 2 u 6 l 5 l 1 / 3 0 6 / 7 d 1 e 8 f 7 a 5 u l 8 t 8 / 5 j . p 9 g 6 " 9 , 6 6 5 5 2 7 3 4 3 8 , 3 0 0 3 . 3 5 2 2 9 4 9 2 1 8 7 5 2 5 0 8 . 5 4 1 5 0 3 9 0 6 2 5 , 3 3 4 8 . 4 2 4 0 7 2 2 6 5 6 2 5 3 4 8 5 . 0 2 1 4 8 4 3 7 5 , 2 7 2 4 . 3 5 7 9 1 0 1 5 6 2 5 2 1 7 0 . 8 1 1 7 6 7 5 7 8 1 2 5 , 2 1 0 7 . 6 3 3 7 8 9 0 6 2 5 \ " / s v g > " 上記に対して、autoCloseのような変数を用意し、これがfalseの場合、polygonという文字列をpolylineに変更する処理を加えました。 ...

2025年5月5日 · 9 分 · Nakamura

Elasticsearch Search UIでの初期ソート順の指定方法

概要 本記事はAIが作成しました。 ElasticsearchとSearch UIを使って検索インターフェースを構築する際、検索結果のソート順を制御することは一般的な要件です。このガイドでは、Search UI Reactライブラリでソートを設定する方法を説明します。 参考 https://www.elastic.co/docs/reference/search-ui/api-react-search-provider#api-react-search-provider-initial-state 初期状態とソート設定の理解 Search UIライブラリでは、検索の初期状態を指定することができ、ソートの方向とソートするフィールドを含めることができます。これは、ユーザーがページに最初にアクセスしたときに、検索結果が事前に決められた順序で表示されるようにしたい場合に特に役立ちます。 基本的なソート設定の例 Search UI設定でソートを指定する方法は次のとおりです: c } r ) o ; e ; n i } t < s n , u S / t i s s r e { S そ t o o n a / e c の i r r r * a o 他 a t t ( c r n の l D F h 検 c f 設 S i i P 索 h i 定 t r e r コ P g オ a e l o ン r プ t c d v ポ o = シ e t : i ー v ョ : i d ネ i { ン o ' e ン d . { n f r ト e . : i r . e c > ' l o / a d n } s _ f c t i ' z g , _ = i { d c ' o , n f i g } > ソート設定オプション initialStateオブジェクトは、ソート関連の2つのプロパティを受け付けます: ...

2025年4月30日 · 2 分 · Nakamura

MDX.jpのオブジェクトストレージに対するIPアドレス制限の実装方法

概要 MDX.jpのオブジェクトストレージに対するIPアドレス制限の実装方法を調べました。以下、動作確認を行なった上で、AIが記事を執筆しました。 はじめに 本記事では、MDX.jpが提供するDDN EXAScaler S3互換オブジェクトストレージサービスにおいて、特定のIPアドレスからのみアクセスを許可する設定方法について解説します。 オブジェクトストレージのセキュリティレイヤー DDN EXAScaler S3互換ストレージには、主に以下の3つのセキュリティレイヤーがあります: アクセスキーとシークレットキー :基本的な認証情報 バケットポリシー :バケットレベルでのアクセス制御 アクセス制御リスト(ACL) :オブジェクトレベルでのアクセス制御 この中で、IPアドレス制限を実装するには「バケットポリシー」を利用します。 バケットポリシーによるIPアドレス制限の設定手順 1. ポリシーJSONファイルの作成 まず、以下のようなJSONファイル(例:mdx.json)を作成します: { } " " ] V S e t { } r a s t i e o m n e " n " " " } " ] " " } : t S E P , A , R C " i f r c e o " : d f i t s n 2 " e n i o d " } 0 [ : c c o u i I 0 t i n r t p 8 " " p " " c i A - B : a D : " " e o d " ] 1 u l D s s " n d a 0 c " " N [ 3 3 : " r w - k A : " : : : e s 1 e l : L G " s : " " 7 t l { i e B { s S 1 2 " N o [ s t u " o 9 0 , a w " t O c : u 2 3 m " * B b k r . . e , " u j e { c 1 0 " ] c e t e 6 . , k c N I 8 1 e t a p . 1 t " m " 1 3 " e : . . , " 1 0 , [ / / 3 2 2 4 " " , ポリシーの主な要素: ...

2025年4月24日 · 5 分 · Nakamura

Google Cloud Vision APIとGakuNin RDMを用いたTEI/XMLファイル作成アプリの試作

概要 Google Cloud Vision APIとGakuNin RDMを用いたTEI/XMLファイル作成アプリを試作しましたので備忘録です。 背景 Google Cloud Vision APIを使ってOCR結果を反映したTEI/XMLファイルを作成する環境が必要になりました。そこでバックエンドとしてGakuNin RDMを用いて、ユーザごとにファイルを管理して、OCRを実行可能な環境を試作しました。 使い方 フォルダの作成 以下にアクセスします。 https://ge-manager.vercel.app/ 画面右上から、GakuNin RDMを使ってログインします。 以下のようにプロジェクト一覧が表示されます。 適当な階層まで下り、フォルダの作成ボタンを押します。 ここでは、「sample」というフォルダを作成します。 そして、「GE Manager」のリンクを押します。 以下のようなページに遷移します。 処理の実行 今回は、「e-codices - Virtual Manuscript Library of Switzerland」の「fragm1a」を使用させていただきます。 https://www.e-codices.unifr.ch/loris/gau/gau-Fragment/gau-Fragment_frag001a.jp2/full/full/0/default/jpg 画像のURLを入力して、アップロードボタンを押します。アップロードされると、以下のような画面に変わります。 次に、「OCR実行」ボタンを押します。正しく完了すると、以下のように表示されます。 次に「TEI/XML作成」ボタンを押します。正しく完了すると、以下のようにTEI/XMLとともに表示されます。 Oxygen XML Editorでダウンロードしたファイルを表示した例です。Google Cloud Vision APIによるOCR結果を確認することができます。 GakuNin RDMのファイル 上記のプロセスで作成された各種ファイルは、GakuNin RDMのフォルダにファイルとして保存されます。 参考: URLを介してアクセス可能な画像ファイルを用意する mdx.jpのオブジェクトストレージを利用して、URLを介してアクセス可能な画像ファイルを用意する。 今回はge-editorというバケットを作成し、以下のようなファイルを用意します。 { } " " ] V S e t { } r a s t " " " } " " i e S E P , A R o m i f r " c e n e d f i D t s " n " e n D i o : t : c c N o u " t i " n r " : " " p : " c 2 g : a : e 0 [ e l [ " 0 - " " " [ : 8 e A : * " - d l " s " 1 i l { ] 3 g 0 t o : e - o w L - 1 r " i e 7 " , s d " , t i , B t u o c r k " e t " , " s 3 : G e t O b j e c t " ] , そして、以下を実行することで、上記のバケットにアップロードされたファイルをダウンロード可能にします。 ...

2025年4月16日 · 2 分 · Nakamura

「れきちず x Next.js」サイトにルートの登録機能を追加しました。

概要 「れきちず x Next.js」サイトにルートの登録機能を追加しました。以下が表示例です。 参考 「れきちず x Next.js」サイトについては、以下で紹介しています。 この「れきちず」を使ってルートを表示する先行事例として、以下が挙げられます。 https://codh.rois.ac.jp/edomi/route/ 今回は上記の事例を参考に、ルートを作成する機能を追加しました。 使い方 サイトにアクセスします。 https://rekichizu-next.vercel.app/ja/ 「マイルートを管理」をクリックします。 ログインが求められますので、画面右上のボタンからログインします。 「新しいルートを作成」から、ルートを作成します。 以下が編集画面です。 編集アイコンをクリックすると、ルートのタイトルおよび説明を編集できます。 モードを「追加」に設定すると、地図上でクリックした箇所にピンが立ちます。ドラッグ&ドロップで移動させることも可能です。 マーカーはドラッグ&ドロップで順序変更することができます。 インポートとエクスポート エクスポート ルートの一覧画面と編集画面にダウンロードボタンを設置しています。以下のようなJSONファイルがダウンロードされます。 { } " " ] t f y e { } { } { } p a , , e t " " } " } " " } " } " " } " } " u t p , g t p , g t p , g : r y r " " " " e " " ] y r " " " " e " " ] y r " " " e " " ] e p o i t w t o t c p o i t w t o t c p o i p t o t c " s e p d e h y m y o 1 3 e p d e h y m y o 1 3 e p d a y m y o [ ] [ ] F " " e " x e p e p o 3 5 " e " x e p e p o 3 5 " e " t p e p o , e : : r : t r e t e r 9 . : r : t r e t e r 9 . : r : h e t e r 1 3 1 3 a t " e " r " d . 7 t " e " r " d . 7 t " " r " d 3 5 3 5 t [ " i " : " : y : i 7 0 " i " : " : y : i 7 1 " i " : : y : i 9 . 9 . u F e 1 : " n 6 7 F e 1 : " n 7 2 F e 1 " n . 7 . 7 r e s 7 " " : " a 8 7 e s 7 " " : " a 0 1 e s 7 " " : " a 7 0 7 1 e a " 4 湯 " p P t 0 0 a " 4 不 " p P t 5 0 a " 4 [ l L t 6 7 7 2 C t : 4 島 神 o { o e 9 2 t : 4 忍 池 o { o e 0 4 t : 4 1 i { i e 8 7 0 1 o u 6 天 社 i i s 9 0 u 6 池 " i i s 6 9 u 6 7 n n s 0 0 5 0 l r { 3 神 " n n " 2 1 r { 3 " , n n " 8 9 r { 3 4 e e " 9 2 0 4 l e 9 " , t t : 1 3 e 9 , t t : 1 4 e 9 4 " S : 9 0 6 9 e " 5 , " " 4 8 " 3 " " 0 9 " 5 6 t 2 1 8 9 c , 5 , [ 7 1 , 7 , [ 3 6 , 5 3 r [ 1 3 1 4 t 1 0 7 9 4 9 1 9 i 4 8 0 9 i 5 0 1 9 1 1 5 5 n 7 1 3 6 o 6 5 5 0 0 5 6 5 g 0 7 4 9 n 3 6 5 3 3 3 1 " 0 1 1 1 " " , " , - 5 , 5 5 0 5 , , , 1 6 6 5 3 7 3 , , 4 ] 4 6 3 9 3 [ 7 1 9 7 9 4 0 4 3 6 " 3 , 9 3 7 9 9 0 3 ] " , これをgeojson.ioに貼り付けると、以下のように表示されます。 ...

2025年4月14日 · 4 分 · Nakamura

Nuxt i18nのブラウザ言語検出を無効化する方法

概要 (ChatGPTによる作成) Nuxt i18nモジュールでは、ユーザーのブラウザ言語を検出して、適切な言語のページにリダイレクトする機能があります。しかし、特定の状況ではこの機能を無効化したい場合もあります。この記事では、detectBrowserLanguage: falseを使用してブラウザ言語検出を完全に無効化する方法について解説します。 https://v8.i18n.nuxtjs.org/guide/browser-language-detection 設定方法 ブラウザの言語検出機能を無効にするには、nuxt.config.jsファイルでdetectBrowserLanguageオプションをfalseに設定します。 e } x ) p i } 1 , r 8 d t そ n e そ の : t の d 他 言 e 他 e の { 語 c の f 設 検 t 設 a 定 出 B 定 u を r l 無 o t 効 w 化 s d e e r f L i a n n e g N u u a x g t e C : o n f f a i l g s ( e { これが役立つケース 特定のURLで直接アクセスさせたい場合 : 特定のコンテンツをユーザーが直接訪れることを意図している場合、リダイレクトが邪魔になることがあります。 クロールの最適化 : 検索エンジンのクローラーが特定の言語ページに直接アクセスできるようにしたい場合。 一貫性のあるユーザーエクスペリエンス : 例えば、リンクされた言語のページ同士を行き来するユーザーに対して、予想外のリダイレクトを避けたい場合。 まとめ detectBrowserLanguage: falseを利用することで、ユーザー体験やSEO最適化のために、リダイレクトに頼らずにサイトのアクセスを制御できます。適切な状況でこの設定を利用することで、サイトのユーザビリティを向上させることができます。 ...

2025年4月10日 · 1 分 · Nakamura

Next.js 15 App Router で Tailwind CSS V4 を使用してダークモードを追加する方法

概要 Next.js 15 App Router で Tailwind CSS V4 を使用してダークモードを追加する方法です。 以下の記事が参考になりました。 https://sujalvanjare.vercel.app/blog/dark-mode-nextjs15-tailwind-v4 以下のように、ダークモードとライトモードを切り替えることができました。 上記の記事について、ChatGPTによる日本語記事です。 Next.js 15 App RouterプロジェクトでTailwind CSS V4を使用してダークモードとライトモードを実装する方法を学びましょう。このステップバイステップガイドでは、シームレスなテーマスイッチャーを実現するためのTailwind V4とNext.js 15の最新の変更点をカバーしています! 既にNext.jsプロジェクトをお持ちの場合は、ステップ1に進んでください。 ステップ1:新しいNext.jsプロジェクトを作成する App RouterとTailwind CSS v4を搭載したNext.js 15をインストールするには、次の手順に従ってください: 任意の場所にプロジェクトフォルダを作成します。 VS Codeでフォルダを開きます。 ターミナルを開き、次のコマンドを実行します: npmユーザーの場合: n p x c r e a t e - n e x t - a p p @ l a t e s t . pnpmユーザーの場合: p n p x c r e a t e - n e x t - a p p @ l a t e s t . インストール中に、次のオプションが表示されます: ...

2025年4月1日 · 20 分 · Nakamura

Error: Do not use <img>. Use Image from 'next/image' instead.への対応

概要 Error: Do not use . Use Image from ’next/image’ instead.への対応にあたり、以下の記事が参考になりました。 https://stackoverflow.com/questions/68203582/error-do-not-use-img-use-image-from-next-image-instead-next-js-using-ht 上記の記事に基づき、ChatGPTによる回答を以下に掲載します。間違っている点もあるかもしれませんが、参考になりましたら幸いです。 Next.jsのESLintルール変更とフラットコンフィグの設定方法 Next.js 11以降、ESLintの設定がデフォルトで提供されるようになり、@next/next/no-img-element ルールが追加されました。このルールにより、通常の<img>タグの使用が制限され、Next.jsのnext/imageコンポーネントを推奨するようになっています。 しかし、プロジェクトによっては<img>タグを使いたい場合もあるでしょう。そのため、このESLintルールを無効化する方法を紹介します。 1. 従来の設定方法(.eslintrc.js) 以前のNext.jsのESLint設定は、.eslintrc.js に次のように記述することで変更できました。 m } o ; d r } u u , l l " e e @ . s n e : e x x p { t o / r n t e s x t = / n { o - i m g - e l e m e n t " : " o f f " , しかし、Next.jsのESLintは「フラットコンフィグ(Flat Configuration)」へ移行しました。そのため、.eslintrc.js ではなく、eslint.config.mjs を使用する必要があります。 ...

2025年4月1日 · 3 分 · Nakamura

Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う

概要 Mirador 4で、初期読み込み時に、画像の回転や範囲指定を行う方法を紹介します。 背景 2025年3月現在、Mirador 4の開発が進められています。alpha版を以下で確認することができます。 https://github.com/ProjectMirador/mirador/releases おそらくMirador 4からの機能かと思いますが、以下のFAQで初期設定の方法が記述されています。 https://github.com/ProjectMirador/mirador/wiki/Frequently-Asked-Questions#q-how-do-i-change-the-view-of-an-image-to-zoom-to-a-certain-area 具体的には、以下のように、initialViewerConfigを用いることで、初期設定ができました。 https://github.com/ProjectMirador/mirador/blob/main/__tests__/integration/mirador/mirador-configs/initial-viewer-config.js e } x ; p i w } o d i ] r : n c i } m , t d a n , a ' o n i t x y z n d m w v t h : : o i e i s a i u o f f r : s a m 9 7 y m e a a I l b 3 8 o : s u d [ d V n 4 2 u t l o { : i a , , 0 I t r e i n . d ' ' w l e 0 : { , h e N e 0 t r a d 0 ' t C v 7 h p o i t , t s n g o t : f a p / i t s s / g i p : i : o e / i n c / i { P i i f o f i . s y i h i f a t z . r i o h v o o a a n m r r : v d f a a ' o r r f r d t a a m r t r u - h t s b i m e o s u u t s m t t e s o o u . m m o ' l s r , o . g o o / k r m g a g / n o m i o a f d n e i s f t e s s / t o s b / j o e b c j t e / c 2 t 9 / 9 2 8 9 4 9 3 8 / 4 c 3 a ' n , v a s / c a n v a s - 4 7 1 7 4 8 9 2 ' , 応用 上記を応用して、以下のような初期設定を行ってみました。 ...

2025年3月26日 · 8 分 · Nakamura

mdx Iのオブジェクトストレージに対するproxyサーバの構築

概要 mdx Iのオブジェクトストレージに対するproxyサーバの構築に関する備忘録です。 背景 mdx Iの利用手引きにおいて、以下のように説明されています。 https://docs.mdx.jp/ja/index.html#オブジェクトストレージ mdxが提供するS3データサービス(DDN EXAScaler S3 Data Service)で取り扱うAPI仕様を記載したDataDirect Networks社のマニュアルです。 Tipsのオブジェクトストレージの利用方法例 と合わせてご確認ください。 https://docs.mdx.jp/ja/_downloads/b5d961f2c152387fa10ed951d5278f47/S3 Data Services 5.2.7 API Reference Guide.pdf こちらをGoogle NotebookLMに読み込ませ、corsの実装状況について確認しました。以下が回答です。 回答 資料 でBucket CORS Featureが未実装 であることが明記されているため、EXAScaler Access S3 APIに対して、ウェブブラウザ上で動作するJavaScriptなどから直接、異なるオリジン (例えば、APIのエンドポイントとは異なるドメインで提供されているウェブサイトのJavaScript)を通してリクエストを行うと、CORS(Cross-Origin Resource Sharing)の問題が発生し、通常はリクエストがブロックされます 。 これは、ウェブブラウザのSame-Origin Policy というセキュリティ上の仕組みによるものです。異なるオリジンからのリソースへのアクセスは、サーバー側が明示的に許可しない限り制限されます。CORSは、この許可の仕組みを提供するものですが、EXAScaler Access S3においては、この機能がまだ実装されていないため、サーバー側からのCORSヘッダーなどのレスポンスがなく、ブラウザはクロスオリジンリクエストを拒否する と考えられます。 したがって、プロキシサーバー などを利用して、クライアントサイドのリクエストを一旦プロキシサーバーに送り、そこからEXAScaler Access S3 APIにリクエストを行うことで、オリジンが一致するように見せかけるなどの回避策が必要になる場合があります。プロキシサーバーは、APIからのレスポンスに必要なヘッダーを付与する役割を担うこともできます。 ただし、これはCORSの問題を回避するための一つの一般的な方法であり、他にもサーバーサイドでAPIを公開する際にオリジンを一致させるなどの方法も考えられます。重要なのは、EXAScaler Access S3 API自体がCORSの仕組みをサポートしていない ため、クライアントサイドから直接クロスオリジンリクエストを行う際には、何らかの対策が必要になるということです。 対策 理解が間違っている点もあるかもしれませんが、上記の回答から、mdx Iのオブジェクトストレージに対するproxyサーバの構築を行うこととしました。 構築したproxyサーバのリポジトリは以下です。 https://github.com/nakamura196/s3-proxy 例えば、以下で指定したバケット上のファイルにアクセスできます。 https://s3-proxy.vercel.app/public/CETEIcean.css 一方、以下が直接アクセスした例です。 https://s3ds.mdx.jp/satoru196/public/CETEIcean.css 前者では、以下のようなレスポンスヘッダーが確認でき、CORSの設定がなされていることが確認できます。 a a c c c d e s s x x x c g a o o a t e t - - - c e c n n t a r r p v v e : h t t e g v i o e e s e e e : : e c w r r s 0 - n n r t e c c - c t t S W : - r e e c o - - u / t e l l o n e t n “ V r d - - n t n y , 3 e a - c i t r c p d r n b a d r o o e 2 5 c s y c : o l d : 3 c e p : h l : i - l o e h - n t M p r E : n a p g e a s t x d l u : x r b - p M 1 l b t 8 s r I : o l b / 2 j e e S : w i r c 0 s c s S i - c s 2 g u s a o , s 5 R r d r M i 1 i m 0 3 t : g a 3 D y : i x : K : z n - 1 Y b : a 1 L m d g : g a g e 2 M x m = 7 V - - 0 w a 1 , G i g 7 M 7 e 4 m T N = 2 u s 6 6 s / 3 9 t A 0 9 - I 7 4 r h 2 8 e g 0 6 v ” 0 5 a 0 9 l ; 2 i - d i 2 a n b t c 2 e l 8 u 6 d a e a S c u d b 0 D 6 o 2 m a i n s ; p r e l o a d 実装 Expressを用いて、以下のように実装しました。aws-sdkについては、AWS SDK for JavaScript v3に移行する必要があるようなので、この点はご注意ください。 ...

2025年3月23日 · 8 分 · Nakamura

Next.jsでUniversal Viewerのnpmパッケージを使用する

概要 Next.jsでUniversal Viewerのnpmパッケージを使用する方法の備忘録です。 インストール 以下でインストールします。 n p m i u n i v e r s a l v i e w e r 実装 useEffectを使うため、クライアントコンポーネントとして実装する必要があるようでした。 またdivタグにuvクラスを与えることで、cssが当たるようになりました。 ' i i i } f } c } e u m m n u o ) x s p p t m c x n u } r n s l ) p e o o e a v y コ c s , e S s s o , o r r r n ? w ン t e c r i t < S t r a < r c t t f i : h ポ i E o e n [ u d R : d d / t l a f ? ー o f n q i m r i を V i i s } ビ d i { d c e n : ネ n f u s u t a n v 無 i f n v t } ュ i d e y e s u ン e n t i ( n 効 e a g y w h d j a b ー v e n u n t m s ト V c i r ' i ( i 化 w l : l i e i u l a ワ > f t s a V : b t の i t v { e u f d し e s e d i s s i c ー a ' e m i e r 実 e ( e ( v e = 、 r e = t g p t g k を u E i e s r i 装 w ( r i ' ' s " ク , { h h l i n g 読 l f c w t n e ) s n u , t u ラ = { : t a f I r み t f e r g r a i n , v イ = : y y t o 込 e f r i C = l t i { " ア d > ' : C e u み V c r P n o > v v c ン y 1 ' o m n 中 i t o r g m i } e m v c ト n 0 6 ' n s d . e m o p { e r a , l サ a 0 0 f t : : . w } p o w = s n a イ m % v l e . e ' s n e a i x s ド i ' h e n ' ' r f n e r r l f y s で c , ' x t c # r e { n を e v e w N の ( , ' : e f o x t イ q i s h a み ( , n 0 m t ( ン u e t ] m レ ) ' t f { ポ i w , ) e ン c e 0 ' d ー r e = ダ = e r f r y m ト e r c " リ > n ' 0 e n a し ( a u ン t , ' a a n て ' d n v グ P e , c m i 初 u i v " す r r t i f 期 n s a る o ' ' c e 化 i t s s コ m , ' s v / I t ン i t e e n y ポ s , r s d l ー e s m e e ネ . c a / x = ン r v l i : { ト e , v n { s i d c o x e e v w l y w x , i v w e . d e h r c x t ( ' s y h V } ) s w : i : ' h e ) ' w V } 1 e i ) 0 r e 0 C w % o e ' m r , p P o r h n o e e p i n s g t ) h ) t , { : { ' 6 0 v h ' } } > < / d i v > 他にも使用可能なオプションがあるかと思いますが、cvで処理ロードするcanvasのインデックス、xywhで表示する矩形を指定することができました。 ...

2025年3月23日 · 4 分 · Nakamura

GakuNin RDMのAPIを用いて、連携したストレージのファイルを検索する

概要 以下の記事で、GakuNin RDMのAPIを用いたアプリケーション構築について紹介しました。 本記事では、GakuNin RDMのAPIを用いて、連携したストレージのファイルを検索する方法を紹介します。 実装例 次のような形で、検索APIを実装しました。なお、https://rdm.nii.ac.jp/api/v1/search/file/にクライアントから直接アクセスした際には、CORSによるエラーが発生したため、Next.jsのAPI Routesとして実装しています。 i i i e } m m m x p p p p c c c c c c c c } c } c r o o o o o o o o o o o o ; o ) o e r r r r n n n n n n n n a s h e } n m h } b ; n t t t t t s U s s s s s s s p o i l , s e e , o s u t R t t t t t t t i r g a q } f s t t a " A d t r { { { a L _ t h s u , r i h d C u y n s s か u q o s a a p v : l t e f } o z r o e o t : d N a g y e ら r u f i c p a e i i r i , m e e d r n h a N e u e n s ク l e f z c i r r " g c y l q } : , s : s t o J t e x t t c s エ r s e e U a s c h s : t u , : e r S a x t h S i リ = y e s r m i r t e e e q } o = " n i O t R O e f o パ t = s l s o e : a { r r u , f P { t z N = R e p r u n ラ n = T n a r e y e d f ] q a l f a O - a . e s t v n メ e = p o = = : t " c d : r e i , u n e s w S T t s a s p i e c = ー w u a k e t h : y f e " " " " " " " e a n e a T y i t w p o o r t タ r p r e " { { d i _ { _ a l _ t d j s a a r l i t i " p o r a o n n S i a を U l a s n h _ t d { s u d a i e o c l l y y e , t , e n i i n s s e o w 取 R . r e t v d l s t l s l t s b h l l , z n " : n t s e s n a 得 L s s I = t e e e l r t : l l c ^ o _ _ e t f : g e } s i ( e e n p n s : : i _ " e r 1 o j s _ : e ` i r . } i G t r a I t s s d c 3 n f [ , ^ i " l o c w t " B f e j f o E e r n ( e : o " 0 { g i 4 p , ^ b h i t c a e y s s f r n T g q c t u s / r , , : e " t 1 s o l r h p a ( . o r o ( e . h ( r s / : n l , i " ^ o d u ( p r p j n o m } r t u P u l i r a { d o , 0 l c e a l e a s ( m e S r a r . o d " m : n . s a , p i r r o d " f q e l r l s n m g e ^ 1 ^ r i c a n a " @ r : r ) a . e ? . r : " 1 2 0 d U a $ m ( t n / o v ; m s a . n d 3 _ . 5 . : r t { s ) a e a m R e s e r a i m 0 a 2 " 1 l i a ) ; ) x p e r . a c c i " , l " , 2 t , o c , ; t p " q S g r h c . , u l , 5 r n c / / n u e e c P e a s " " u { / e s a e e s t h a s c v e , , e j s e p x s s ( P r s . e r , s s r i t t i " a a T j r : o T v / - ) o f r m o p s 3 n o e a a n i a s k / i 0 " k r u u { ( l m . e a o , , e " t t a t s g n p n t n ; h h u e . e ; i : e } / " t r g t / x ` [ ; h [ e ( v 2 t , . O f t " 1 : . p u ( p / } 1 . t l " a s , 2 n i l p g e 4 e o t a e a , x n e g [ r c t s x e l c o a ) t [ i h m u ; ] o m / m t " f i f e h ) f t i n ] s ] l t / e " e s a t ) / . u ] " * t " " ; : h " 1 O ; 2 p " 4 t 2 " i 0 , o " " n 0 , s " " , 1 ; 0 1 ) 0 ; ) ; 利用例 以下のURLからお試しいただけます。(利用にあたっては、GakuNin RDMへのログインが必要です。) ...

2025年3月21日 · 11 分 · Nakamura