init

.github/workflows/ci_app.yml

@@ -0,0 +1,42 @@
+name: ci-app
+on:
+  pull_request:
+    paths:
+      - app/**
+      - .github/**
+  push:
+    paths:
+      - app/**
+      - .github/**
+jobs:
+  ci:
+    name: ci
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: app
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: lts/*
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+      - uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+      - name: Install
+        run: yarn install
+      - name: eslint
+        run: yarn run lint
+      - name: Test
+        run: yarn run test
+      - name: Build
+        run: yarn run build
+      - name: Check translations
+        run: yarn run i18n

.gitignore

@@ -0,0 +1 @@
+.DS_Store

README.md

@@ -0,0 +1,53 @@
+# ストーリーテリング型 WebGIS の開発と活用に関する技術調査 ソースコード
+
+本レポジトリは「ストーリーテリング型 WebGIS の開発と活用に関する技術調査」のソースコードである。この調査は、ストーリーテリング手法を使った WebGIS コンテンツの既存事例とその関連技術について調査し、その結果をふまえ、PLATEAU の 3D 都市モデルデータを利用し、新しい表現を盛り込んだストーリーテリング型 WebGIS コンテンツを制作することで、WebGIS コンテンツにおける表現の新しい可能性を示すことを目的として、 2023 年度に実施された。詳しくは[技術調査レポート](https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_tech_doc_0058_ver01.pdf)を参照。
+
+本レリポジトリで、調査の際に作成したコードを公開する。
+
+## 構成
+
+- `app/` ディレクトリ配下には、実際の Web アプリケーションとして動作するコードが置かれている。
+- `plateau_citygml_to_mvt/` ディレクトリ配下には、PLATEAUで提供される2023年度の建物モデルの CityGML を MVT に変換するためのコードが置かれている。
+
+## 必要なツール
+
+- Node.js: バージョン 20.11.1 以上
+- Yarn: バージョン 1.22.22 以上
+- tppeacanoe: バージョン 2.42.0 以上、 `plateau_citygml_to_mvt` を起動する場合のみ必要。
+
+## 起動方法
+
+### Web アプリケーションの起動方法
+
+事前に `app/.env.example` を参考に `.env` を作成する。
+
+次に、 Web アプリケーションは以下のように起動する。
+
+1. `yarn install`
+2. `yarn dev`
+
+### CityGML を MVT へ変換するスクリプトの起動方法
+
+事前に G空間情報センターから東京都 23 区 3D 都市モデルの 2023 年度の CityGML をダウンロードし、`plateau_citygml_to_mvt/data/plateau_citygml_2023` のように配置する。  
+
+次に、 CityGML を MVT へ変換するために以下のスクリプトを実行する。
+
+1. `yarn install`
+2. `yarn convert`
+3. `tippecanoe -pC -ad -an -aD -pf -pT -Z10 -z16 -e dist -l tokyo23-mvt -ai --hilbert tokyo23.geojsonl`
+
+上記を実行後、 `plateau_citygml_to_mvt/` ディレクトリは以下に `dist/` ディレクトリが生成され、このディレクトリに MVT のファイル群が入っている。  
+
+新しく生成した MVT を本アプリケーション上で確認する場合は、生成した `dist/` ディレクトリの名前を `tokyo23-mvt` に変更した上で `app/public/data/` ディレクトリ配下に配置する。
+
+## ライセンス
+ソースコード及び関連ドキュメントの著作権は国土交通省に帰属します。  
+本ドキュメントは[Project PLATEAUのサイトポリシー](https://www.mlit.go.jp/plateau/site-policy/)（CCBY4.0及び政府標準利用規約2.0）に従い提供されています。
+
+## 注意事項
+本リポジトリは参考資料として提供しているものです。動作保証は行っていません。  
+本リポジトリについては予告なく変更又は削除をする可能性があります。  
+本リポジトリの利用により生じた損失及び損害等について、国土交通省はいかなる責任も負わないものとします。  
+
+## 参考資料
+技術検証レポート: https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_tech_doc_0058_ver01.pdf

app/.env.example

@@ -0,0 +1 @@
+VITE_DATA_RESOURCE_URL="https://example.com/"

app/.eslintignore

@@ -0,0 +1 @@
+**/lib/i3s/*

app/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["reearth", "plugin:storybook/recommended"],
+};

app/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env
+
+/public/data
+/scripts

app/.storybook/i18next.ts

@@ -0,0 +1,25 @@
+import { initReactI18next } from "react-i18next";
+import i18n from "i18next";
+import Backend from "i18next-http-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+
+const ns = ["translation"];
+const supportedLngs = ["en", "ja"];
+i18n
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .use(Backend)
+  .init({
+    lng: "en",
+    fallbackLng: "en",
+    defaultNS: "translation",
+    ns,
+    interpolation: { escapeValue: false },
+    react: { useSuspense: false },
+    supportedLngs,
+    backend: {
+      loadPath: (lng, ns) => `/locales/${lng}/${ns}.json`,
+    },
+  });
+
+export default i18n;

app/.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "storybook-react-i18next",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

app/.storybook/preview.ts

@@ -0,0 +1,24 @@
+import type { Preview } from "@storybook/react";
+import i18n from "./i18next";
+
+const preview: Preview = {
+  globals: {
+    locale: "en",
+    locales: {
+      en: "English",
+      ja: "日本語",
+    },
+  },
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    i18n,
+  },
+};
+
+export default preview;

app/.storybook/preview.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { Preview } from "@storybook/react";
+import { I18nProvider } from "../src/i18n/provider";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <I18nProvider><Story /></I18nProvider>
+    )
+  ]
+};
+
+export default preview;