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

概要 「れきちず x Next.js」はれきちずとNext.jsで作成されたウェブアプリケーションです。 このウェブアプリケーションに、ルートの登録機能を追加しましたので、紹介します。 機能紹介 トップページにアクセスし、「マイルートを管理」ボタンをクリックします。 以下のように、ログインが求められますので、画面右上の「ログイン」ボタンからログインします。 ログイン後、以下のような一覧画面が表示されます。 「ルートをインポート」ボタンを押すと以下のダイアログが表示されます。 「サンプルデータをダウンロード」ボタンを押すと、以下のようなGeoJSON形式のサンプルデータがダウンロードされます。 { } " " " " ] t n d f y a e e { } { } p m s a , e e c t " " " } " } " " " } " } " " r u t i p , g t i p , g : : i r y d r " " " e " " ] y d r " " " e " " ] p e p " o t w t o t c p " o t w t o t c " " t s e : p e h y m y o 1 3 e : p e h y m y o 1 3 F 東 i " " e x e p e p o 3 5 " e x e p e p o 3 5 e 京 o : : " r t r e t e r 9 . : " r t r e t e r 9 . a 観 n t t " e " r " d . 6 i t " e " r " d . 6 t 光 " [ " o i : " : y : i 7 8 " m i : " : y : i 7 8 u サ : F k e : " n 6 0 F p e : " n 5 5 r ン e y s " " : " a 7 9 e e s " " : " a 2 2 e プ " a o " 東 " p P t 3 5 a r " 皇 " p P t 8 C ル 東 t - : 京 東 o { o e 0 9 t i : 居 日 o { o e , o ル 京 u s 駅 京 i i s 6 1 u a " 本 i i s l ー 駅 r t { " 都 n n " 8 r l { , の n n " l ト か e a , 千 t t : , e - 天 t t : e " ら " t 代 " " " p 皇 " " c , 皇 , i 田 , [ , a 及 , [ t 居 o 区 l び i へ n 丸 a 皇 o の " の c 族 n 観 , 内 e の " 光 一 " 居 , ル 丁 , 所 ー 目 " ト に , の あ サ る ン 、 プ 東 ル 日 で 本 す 旅 " 客 , 鉄 道 ・ 東 海 旅 客 鉄 道 ・ 東 京 地 下 鉄 の 駅 " , このファイルをアップロードすると、以下のような編集画面が表示されます。 ...

2025年7月23日 · 3 分 · 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