Vercel

はじめに GakuNin RDMは、国立情報学研究所（NII）が提供する研究データ管理プラットフォームです。Open Science Framework（OSF）をベースに構築されており、APIを通じてプロジェクトの操作を自動化できます。 本記事では、Node.jsからGakuNin RDM APIを使って以下の操作を行う方法を紹介します。 プロジェクトの作成・設定 Wikiの作成・更新 メンバーの追加 GitHub連携 + Vercelによる自動デプロイ 事前準備 パーソナルアクセストークンの取得 GakuNin RDMにログイン 設定 > パーソナルアクセストークンに移動 新しいトークンを作成（スコープ：osf.full_read、osf.full_write） プロジェクトの初期化 m n n k p p d m m i r i i n n r i s d t t m a - l & y l & d c o d t e r n d v m .envファイルにトークンを保存します。 ...

はじめに Next.jsアプリケーションをVercelにデプロイしようとしたところ、ローカルでは成功するのにVercelでは失敗するという問題に遭遇しました。エラーメッセージは曖昧で、原因の特定に苦労しました。 この記事では、問題の発見から解決までの過程を共有し、JavaScriptの演算子優先順位について学んだことをまとめます。 問題の症状 エラーメッセージ E [ T r E h r r e o r r o s r p o : e c c c A i u n f r i r e c e r d r m o e p r s r s e o a r c g e c e n u d r i e r s r e i d o n m g i i n t p t a t e g h d e e i " S n / e e r p n r / e o s r d m u e C c l o t l m i s p o / o n 2 n 2 e b - n u 0 t i 3 s l " d r s e n t d o e r a . v o i d l e a k i n g s e n s i t i v e d e t a i l s . ] 特徴的な現象 ローカルビルドは成功 するが、Vercelでは失敗 毎回異なるページ でエラーが発生（22-03、24-03、25-04など） エラーの詳細が本番ビルドでは隠される 原因の発見 複数のファイルを調査する中で、以下のコードパターンを発見しました： ...

概要 Vercelにデプロイしたexpressについて、vercel.jsonによるcors対応を行う方法に関する備忘録です。 背景 以下の記事で紹介したプログラムについて、cors対応を行いました。 以下を参考にしています。 https://vercel.com/guides/how-to-enable-cors 方法 対応方法は以下です。他にも方法があるかと思いますが、headersを加えることで対応することができました。 https://github.com/nakamura196/dts-typescript/commit/4c28f66b2af68950656dcb812f3e941d1b9b5feb { } " " ] " ] " ] " ] v b , r , r , h e u { } e { } e { } e { } r i w d a s l " " r " " i " " " d " " ] i d s u i s d r s d p e s h o s r s t o e e o e e r o e { { { } { } n " c e e u s c u s r s u a , " : " " s r t t r t m " r d " " " " " " : : : " c i s c i a : c e k k k v k v [ : e n " e n n e r e e e a e a 2 " " " a : " a e [ " s y y y l y l , s @ [ : t : t n : " " " " u " u r v i [ i t : : : : e : e c e " " " " " " / r n n : / [ " " " : " : i c a " " " a A A A A n e p : , : t p c c c " c " d l i r i c c c G c X e / / " " u / e e e E e - x n d / / e ( s s s T s C . o t s a . s s s , s S t d s r p * - - - O - R s e ( c i ) C C C P C F " " . / " o o o T o - , i d , n n n I n T ) n t t t t O t o " d s r r r N r k , e " o o o S o e x , l l l , l n . - - - P - , t A A A A A s l l l T l X " l l l C l - o o o H o R w w w , w e - - - D - q C O M E H u r r e L e e e i t E a s d g h T d t e i o E e e n n d , r d t " s P s - i , " O " W a , S , i l " T t s v , h " a P , , l U u T A " e " c v " c a : e l p u " t e * , " " : A } c " , c t e r p u t e - " 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 " まとめ 参考になりましたら幸いです。 ...

概要 「れきちず 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に貼り付けると、以下のように表示されます。 ...

概要 clover-iiifをNext.jsで使用するサンプルリポジトリを作成したので、備忘録です。 https://clover-iiif-demo.vercel.app/ 背景 clover-iiifは以下のように説明されています。 https://github.com/samvera-labs/clover-iiif Extensible IIIF front-end toolkit and Manifest viewer. Accessible. Composable. Open Source. （日本語訳）拡張可能な IIIF フロントエンドツールキットとマニフェストビューア。 これをNext.jsで使用します。 データ 「校異源氏物語（国立国会図書館所蔵）」をサンプルデータとして使用します。 https://dl.ndl.go.jp/pid/3437686 リポジトリ 以下で公開しています。 https://github.com/nakamura196/clover-iiif-demo 以下を参考にしました。 https://samvera-labs.github.io/clover-iiif/docs/composing クライアントサイドでの実行にあたり、以下のような工夫が必要でした。 " i i i c ) c } c } e u m m m o ; o ; o ; x s p p p n { n c c r ) n r ) p e o o o V s s o o e ; s e ; o r r r i t s t n n t < t t < r c t t t e = s s s u a / u S / t l w V > r W t t r r < a W r u < S i R d { e i : o n t V r o n s W u d e e y r e i r s m i i t r p o s e n a n u コ w m f k e a ( c e i k ( e r p f t c a s ン e p a C a n l w c n k e a " t m e ポ r o l o r i e e l = s C n u ; , i S ー r s n c f > r e e o s l c e ネ = t e t h e > n e t { a ン ( e P s i f t > f r ト d " } n a t i a e W S r c を y @ t r I i = l n o u o h 動 n s a d f > l t r s m P 的 a a = m C b k p a に m m s = o { a ; e " r イ i v n c n n a ン c e = s t k s e m ポ ( r e e = e x s ー a = u a n { t ト / > s r t < } / } （ c e c = d d S l { S h { i f y f S o e P m v r n r R v a a a > o a o を e r r n L m m m 無 r c a i o i 効 - h m f a " c " 化 i P s e d r " n ） i a . s i e ; e i r g t n a x f a e I g c t / m t d . t / v s ( } . " n i ( ' . ; a e ) m < v w ; a / i e n d g r i i a " f v t ) e > i , s } o t > n ' " ) ; " h t t p s : / / d l . n d l . g o . j p / a p i / i i i f / 3 4 3 7 6 8 6 / m a n i f e s t . j s o n " ; まとめ 不完全な点もあるかと思いますが、参考になりましたら幸いです。 ...

概要 以下のページで「史料編纂所データベース異体字同定一覧」が公開されています。 https://wwwap.hi.u-tokyo.ac.jp/ships/itaiji_list.jsp 今回は、上記のページで公開されているデータをJSON形式で取得するためのAPIを作成します。 開発したもの 以下のURLからアクセスいただけます。 https://hi-itaiji.vercel.app/ 同定一覧における「char（異体字）」をキーとして、「base」の漢字を値とするマッピングを返却します。 まとめ 異体字リストの応用にあたり、参考になりましたら幸いです。

概要 ZoteroのAPIをNext.jsから使う方法を調べましたので、備忘録です。結果、以下のアプリケーションを作成しました。 https://zotero-rouge.vercel.app/ ライブラリ 以下のライブラリを使用しました。 https://github.com/tnajdek/zotero-api-client API Keyなどの取得 以下の記事を参考にしてください。 使い方 コレクション一覧 i i i i i a ) } m m m m m s p p p p p y z z { c c r a o o o o o n o o o o e p r r r r r c t t n n t p t t t t t e e s s u / f r r t t r a { a { { { u o o n p p n A U m c i N i p d g c p s y o c / e r e e t i e a l o z x f i c t i K r p l l o t r s r S o e I i e l t R o m y e n y d c e e e m a p s : : = t c r s t s f i t o p " } i e s s a o i / o z } o t t t p n o c n o f n c r r i s n o s t r f h i i ( R s l e e o r } Z n n z e R l r m o o g g o s e e } o m f t , t p s c - " r e e o p t f a @ " o r r n o i r p / . m o o s n o o i l . C A e s n m - i / " o p e s c b . @ l i = . / " l . a l K r r n i p / u e e a a o e e r p t c y w w u x n i o h t ) a ; t t t s s 0 i . i e " m t / o l t . s ; a s n n i j e " / e s b m s r ; e x ( r y v n t a a e c j r p r r s y i " y - ( . ; p a " c t u u o i t s l o h e l n 0 r e " " " c ; ; , t i z o o n t s e ( r ) o . U g s e e t r ( I ) d ; ) ; 特定のコレクション i i i i i a ) } m m m m m s p p p p p y z z c { c c r a o o o o o n o o o o o e p r r r r r c t t l n n t p t t t t t e e l s s u / f r r e t t r a { a { { { u o o c n p p n A U t m c i N i p d g c p s i y o c / e r e e t i e o a l o z x f i c t i K r n p l l o t r s r S o e I I i e l t R o m y e n y d d c e e e m a p s : : : = t c r s t s f i t o p " } i e s s s a o i / o z } o t t t t p n o c n o f n c r r r i R n o s t r f h i i i ( e R l e e o r } Z n n n z s e l r m o o g g g o p s e } o m f t , , t o p c - " r e e n o t f a @ " o r r s n i r p / @ m o o e s o o i l / C A e n m - i a " o p = . / c b p @ l i r [ " l / p a l K a a i n i p / u e e w w d e e r a t c y a ; ] x n i p h t ) i / t t s i 0 i . t r " m / / o l s ; a p n n i m u e " o e ( b y t r ; s x r a e v t t a p . e s j r i t r / s y . s " e - ( c ; n a " o c u u l r t s l y h e e p 0 r c t " " t i ; , i o o n z n " o s ; t ( e c r o o l U l s e e c r t I i d o ) n ; I d ) . g e t ( ) ; 特定のコレクション内のアイテム一覧 i i i i i a ) m m m m m s p p p p p y z z c { c c r a o o o o o n o o o o o e p r r r r r c t t l n n . . . t p t t t t t e e l s s c i g u / f r r e t t o t e r a { a { { { u o o c l e t n p p n A U t m c l m ( i N i p d g c p s i y o e s ) c / e r e e t i e o a l c ( ; o z x f i c t i K r n p l t ) l o t r s r S o e I I i e i l t R o m y e n y d d c o e e e m a p s : : : = t n c r s t s f i s t o p " } i e s s s a o ( i / o z } o t t t t p n c o c n o f n c r r r i R o n o s t r f h i i i ( e l R l e e o r } Z n n n z s l e l , r m o o g g g o p e s e o m f t , , t o c p c N - " r e e n t o t e a @ " o r r s i n i x p / @ m o o e o s o t i l / C A n e n R - i a " o p = I . / e c b p @ l i d r [ q l / p a l K a ) a i u i p / u e e w w d e e r a t c y a ; ] s n i p h t ) i / t t s i 0 i . t i " m / / o l t } ; a p n n i m e " o e ( b y m f ; s x r a s r t t a p / o s j r i r m / s y o e - ( u " n a " t n c u u e e r t s . x y h e t t p 0 r s / t " " s i ; , e o r n z v " o e ; t r e " r ; o U s e r I d ) ; 参考 アプリケーションはVercelにホスティングされており、データベースにはVercel Postgres、ORMにはPrismaを使用しました。UIはTailwind CSSで構築され、ChatGPTのデザイン提案を使用しました。また、認証にはAuth0を採用しています。 ...

概要 校異源氏物語テキストDBで公開するTEI/XMLファイルに対するDTS（Distributed Text Services） APIを作成したので、備忘録です。 背景 校異源氏物語テキストDBは以下です。 https://kouigenjimonogatari.github.io/ TEI/XMLファイルを公開しています。 開発したDTS 開発したDTSは以下です。 https://dts-typescript.vercel.app/api/dts Express.jsをVercelに設置しています。 DTSは以下を参考にしてください。 MyCapytainライブラリ 以下の記事で、DTSをPythonから利用するライブラリを紹介しました。 本ライブラリを使用して、開発したDTSを利用してみます。 Create the resolver With the following line we create the resolver : f r r e o s m o l M v y e C r a p = y t H a t i t n p . D r t e s s R o e l s v o e l r v s e . r d ( t " s h . t a t p p i s _ : v / 1 / d i t m s p - o t r y t p e H s t c t r p i D p t t s . R v e e s r o c l e v l e . r a p p / a p i / d t s " ) Require metadata : let’s visit the catalog The following code is gonna find each text that is readable by Alpheios ...

概要 Rampのカスタマイズ方法に関する備忘録です。カスタマイズの結果、以下のように、UIの一部を日本語化し、メディアプレイヤーとメタデータおよび文字起こしを左右に並べて表示します。また、クエリパラメータtを使って、音声の再生開始時間を指定できるようにします。 例えば、以下のURLから、140秒時点から再生することができます。 https://ramp-iiif.vercel.app/?iiif-content=https://nakamura196.github.io/ramp_data/demo/3571280/manifest.json&t=140 以下がカスタマイズ前です。 セットアップ 以下の記事の参考にしてください。 カスタマイズ 音声の再生開始時間の指定 以下のマニュアルにおいて、startCanvasTimeプロパティが使えることがわかります。 https://samvera-labs.github.io/ramp/#!/IIIFPlayer そこで、以下のindex.jsファイルに対して、startCanvasTimeをクエリパラメータから取得する処理を追加します。 i i i c } c } R m m m o ; o e > p p p n c l i } r n c i } r a m , o o o i s e f e s o f e c a r r r m t n t u t t n r t t n d t t t p s l ( r u s ( e u D i o o m t e u p l r s t p t r O f c R R A r a t r a n t a u n M e u e e p t n p l r = a p r r . s m a a p i a u a u r a a n 0 r t e c c c f r r = m p r t r m ; e U n t t f o e a l s a l C a s p n R t D r n s m " . r ; a m . a d L . f O o f t s = h h a n s h r e = g r M m i U t a m v a s r { e o g R = ` t s s a = s e ( m t m f L $ p ( . s ( F < a E r f n { s ' g T n ' l A n l ' o / r = e c : i e i e t o p i e r m a o w o / i t m w ' a p f m e p m n / i ( e ) t e e a ' p U f n f ' U ) ( s n c r ' R i a - i = R p t t t e ; = L g k c i L { a U B ' a / > S . a o i S r R y ; c c e u m n f e a L I t o { a r u t - a m ( d - n r l r e c = r s ) ( d f c } a n o > c . } ' o i h / 1 t n h g r m g P m 9 ' t { P e s o ' ' a a 6 ) e a t t o ; ; r n . ) n r ( a t a i g t a ' r ' m f i { ' m t t ) s e t ) s ' C ) ( s h ; ( ) a ; w t u w ) n i s b i ; v n / . n a d $ i d s o { o o T w c w i . r . m l n a l e o f m o = c i p c { a g _ a s t . d t t i e a i a o n t o r n v a n t . } . C s d s a e l e e n a u m a v r n o r a c c / c s h h 3 h T ) r 5 ) i ; o 7 ; m o 1 e m 2 ( _ 8 ) m 0 } a / n m n a e n r i s f . e j s s t o . n j ` s ; o n " そして、app.jsに対して、startCanvasTimeプロパティを与えます。これにより、クエリパラメータから、メディアの再生開始時間を指定できます。 ...

概要 URLの引数で指定したIIIFマニフェストに対して、Mirador 3のannotationsプラグインを試すことができるデモページを用意しました。 https://mirador-annotations.vercel.app/ iiif-contentまたはmanifest引数を使用することで、指定したIIIFマニフェストを対象にすることができます。 https://mirador-annotations.vercel.app/?iiif-content=https://dl.ndl.go.jp/api/iiif/1301543/manifest.json 本記事は、このデモページの作成に関する備忘録です。 背景 Mirador 3向けのアノテーション付与プラグインとして、mirador-annotationsがあります。 https://github.com/ProjectMirador/mirador-annotations 以下の記事で使い方の例を紹介しています。 そして、以下のデモページがすでに用意されていますが、URLの引数にIIIFマニフェストファイルを指定する機能は提供されていません。 https://mirador-annotations.netlify.app/ フォークと修正 URLの引数にIIIFマニフェストファイルを指定する機能の追加にあたり、上記のリポジトリをクローンしました。 https://github.com/nakamura196/mirador-annotations そして、以下の修正を加えました。 https://github.com/nakamura196/mirador-annotations/commit/18848ccb1fa51df821335ed76e7b9f4e974527d0 特に、以下の修正を加えています。 v v v i } a a a f r r r w ( i p m w m n a a i a d r n n n o a i d i w m f o f s s e w e . s s s p = t t u = ) s n = h e [ { ( w p ] { a ; U r m R a a L m n ( s i d . f o g e c e s u t t m ( I e ' d n i : t i . i m l f a o - n c c i a o f t n e i t s o e t n n ) t } . ' ) s ) ; e a r c h p P a a r r a a m m s s . ; g e t ( ' m a n i f e s t ' ) ' h t t p s : / / i i i f . h a r v a r d a r t m u s e u m s . o r g / m a n i f e s t s / o b j e c t / 2 9 9 8 4 3 ' これは、以下の実装を参考にしています。iiif-contentまたはmanifest引数でIIIFマニフェストファイルを参照するようでした。 ...

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 " } 間違った記述もあるかもしれませんが、参考になりましたら幸いです。 ...