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,41 @@
+# ストーリーテリング型 WebGIS の開発と活用に関する技術調査 ソースコード
+
+本レポジトリは「ストーリーテリング型 WebGIS の開発と活用に関する技術調査」のソースコードである。この調査は、ストーリーテリング手法を使った WebGIS コンテンツの既存事例とその関連技術について調査し、その結果をふまえ、PLATEAU の 3D 都市モデルデータを利用し、新しい表現を盛り込んだストーリーテリング型 WebGIS コンテンツを制作することで、WebGIS コンテンツにおける表現の新しい可能性を示すことを目的として、 2023 年度に実施された。詳しくは技術調査レポートを参照。
+
+本レリポジトリで、調査の際に作成したコードを公開する。
+
+## 構成
+
+- `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/` ディレクトリ配下に配置する。

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;