Re:Earthをハックしてみた

[インフォラウンジのアドベントカレンダ](https://qiita.com/advent-calendar/2023/info-lounge)ー1日目です。
やりたいと思ってアドベントカレンダー立てたので1日目を担当します！

## はじめに
Plateau View 2.0などに使われている注目の[Re:Earth](https://reearth.io/ja/)について、せっかくOSSなのでソースコードを覗いてみての知見を共有させて頂きます。
特に結論のない話ですが温かく見守っていただけるとありがたいです。
理解できてないことも多いのでアドバイスもいただけるとありがたいです。

## 背景
バルセロナにて行われた[Smart City Expo 2023](https://www.smartcityexpo.com/)でお隣にRe:Earthを開発されておられるユーカリヤさんがおられました。
OSSの方触ってる話をしたら喜んでいただき、許可をいただいて記事にさせて頂いています！
多分意図されてない使い方なんですが、こういうことしようとしてますと伝えたところ、OSSにしてるので意図してない使われ方をされるのも楽しめるような人たちの集まりと言ってて素晴らしいなと思い、自分もOSS何かやりたいなと思いました
(念のためですが、攻撃的な意図は全くないです！)


## やりたいこと
- Re:Earthのソースコードをローカル環境で動かす
- ソースコードを変更して、publicページのフロントを書き換える
- 設定ファイルを取り出して別の場所でデプロイする(←できてないです)

ノーコードツールとしての素晴らしさはもちろん理解しているのですが、再現性などを考えてコードで完結もできれば色々できるなと思いました。
あとは単純にこんな複雑なものがどうゆう仕組みでできているのかみてみたかったです。

## まずは[Readme](https://github.com/reearth/reearth#getting-started)通りに動かしてみる
``` bash
mkdir reearth
cd reearth
curl -O https://raw.githubusercontent.com/reearth/reearth/main/docker-compose.yml
docker compose up -d
# visit http://localhost:8080
```
localhost:8080で立ち上がりました！
![Screenshot 2023-11-30 at 18.25.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590680/2d6870cd-065e-508b-1b4c-2c6c05460fef.png)
基本的には公開ページとlocalhost:8080配下で同じように使えましたが、通常編集画面やプレビュー画面を開いたら出てくる地球などが出てこず、[こちら](https://github.com/reearth/reearth/issues/432)と同じ状況のようでした。(プライベートモードのみで動くなどの現象もありました。)
また、Docker経由ということでやりたいようなコードを書き換えて反映させるようなことはできそうになく、ソースコードをそのまま動かす必要がありそうです。

## ソースコードを動かそう
[フロントエンドの公式ドキュメント](https://docs.reearth.io/developer-guide/frontend/getting-started/)
[バックエンドの公式ドキュメント](https://docs.reearth.io/developer-guide/backend/getting-started)
基本的にはAuthの設置をして、ドキュメント通り動かせば動きます。(自分はこのドキュメントが見つけられず苦戦してました。)

### web
- yarn install -> yarn start
- secium ion token
  - [コード内](https://github.com/reearth/reearth/blob/1b1e83d85bd99d08aaa33f5ea18e80a1eeb2a7fe/web/vite.config.ts#L100)にsecium ion tokenのヒントがありました！
### server
- make run-db -> make run-app


web/classic配下にcomopnent集があり、ここで色々整えられているようです。一旦web/publishedapp.tsxを書き換えて左上に文字を出すことができました！
![Screenshot 2023-11-30 at 23.22.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/590680/f4b158ab-702b-b2c6-8ad5-7acd86ae1c44.png)


## 設定ファイルのありか
- server/data/publishedにデータができることを見つけました！
```json
{"schemaVersion":1,"id":"01hgg5bx3qrq9g7d50ry4jgj3b","publishedAt":"2023-11-30T23:20:33.871952+09:00","property":{"tiles":[{"id":"01hgg5bx3rptbkghk4q5p1arg2"}]},"plugins":{},"layers":null,"widgets":[],"widgetAlignSystem":null,"tags":[],"clusters":[]}
```
編集画面で変更を加えるとこのjsonファイルが書き換わっているようで、このファイルからwebを生成するようなことをやってみたいなと思っています。


## レポジトリを見てみる(おまけ)
[Re:Earthのレポジトリ](https://github.com/reearth/reearth)を自分が辿ったように軽くみてみます。
### [server](https://github.com/reearth/reearth/tree/main/server)
goで書かれてる！goは本格的に触ったことはないのですがとりあえずmakefileを見つけました。
```makefile:makefile
lint:
	golangci-lint run --fix

test:
	go test -race -short -v ./...

e2e:
	go test -v ./e2e/...

build:
	go build ./cmd/reearth

run-app:
	go run ./cmd/reearth

run-db:
	docker compose -f ../docker-compose.yml up -d reearth-mongo

gql:
	go generate ./internal/adapter/gql

.PHONY: lint test e2e build run-app run-db gql
```

とりあえずrun-appとかがメインで動きそうなので呼び出してるcmd/reearthを見にいってみます。
```go:cmd/reearth/main
package main

import "github.com/reearth/reearth/server/internal/app"

var version = ""

func main() {
	app.Start(debug, version)
}
```
おー。(github.com経由でインポートされてるのがgoだとよくみますがどうゆう経緯なんでしょうか。後で調べてみます。)
internal/app/app.goを見てみましたが、なるほどわからん状態でした。

### [web](https://github.com/reearth/reearth/tree/main/web)
React.jsです！
```json:package.json
{
    "name": "@reearth/web",
    "version": "0.20.0",
    "repository": "https://github.com/reearth/reearth.git",
    "author": "Re:Earth contributors <community@reearth.io>",
    "license": "Apache-2.0",
    "private": true,
    "scripts": {
        "start": "yarn && vite",
        "test": "vitest",
        "coverage": "vitest --coverage",
        "e2e": "playwright test",
        "prepare": "cd .. && husky install web/.husky",
        "build": "vite build",
        "build:preview": "run-s build storybook:build",
        "clean": "del coverage dist node_modules/.cache",
        "check": "run-p type lint coverage",
        "type": "tsc",
        "lint": "eslint .",
        "format": "eslint --fix .",
        "storybook": "storybook dev -p 9001",
        "storybook:build": "storybook build --quiet -o dist/storybook",
        "gql": "run-s gql:beta gql:classic",
        "gql:beta": "graphql-codegen",
        "gql:classic": "graphql-codegen -c codegen-classic.ts",
        "i18n": "i18next",
        "gen:doc:plugin": "ts-node -O '{\"module\":\"CommonJS\"}' ./bin/pluginDoc"
    },
    "engines": {
        "node": ">=16"
    },
    "lint-staged": {
        "**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": "eslint --fix"
    },
    "devDependencies": {
...
```
viteだ！storybookとかhusky使ってるのもいいですね。
beta, classic, coreのディレクトリの使い分けが気になります。
classic/componentsはatomicデザインをやってそうです。

## おわりに
cmsも含めたでかいコードを見れて楽しかったです。
去年もPlateau Viewを触る機会があったのですが、Re:Earthベースに変わって操作スピードの向上はすごく体感しています！これからのRe:Earthの発展が楽しみです！(一月前くらいに触った情報で記事を書こうとしたのですが、結構コードが変わっていて成長されているのを実感しました！)
OSSでやられていることにリスペクトを感じ、インフォラウンジでもぜひOSSのプロジェクト立ち上げてみたいです！

記事を書くと宣言することで、いつか書きたいなで終わってたのを書くことができてよかったです！


## 資料
- [Re:Earthのレポジトリ](https://github.com/reearth/reearth)
- [plateau view 2.0 実証環境構築マニュアル 第3.0版](https://www.mlit.go.jp/plateau/file/libraries/doc/plateau_doc_0009_ver03.pdf)