Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
2021-12-05_FOSS4GJA_WORKSHOP
Search
HideBa
December 04, 2021
Technology
0
140
2021-12-05_FOSS4GJA_WORKSHOP
HideBa
December 04, 2021
Tweet
Share
More Decks by HideBa
See All by HideBa
Re:Earth Buenos Aires 2021
hideba
0
88
FOSS4G Japan Online 馬場英道
hideba
0
1.9k
Other Decks in Technology
See All in Technology
大規模なアジャイル開発の現場と技術負債 / Technical Debt
yoshiitaka
20
4k
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
Challenges - Open Farming Hackdays 2024
loleg
0
530
既存プロセスからの脱却と変化に適応するために必要なこと
cybozuinsideout
PRO
2
170
単回帰分析について数式を追いながら実装してみた
kentaitakura
0
500
実務への応用例から考える 変更に強いオブジェクト指向設計 / 20240324-ooc2024
bengo4com
7
5.2k
LLM + RAG を使った SORACOM Support Bot の裏側の歴史
soracom
PRO
1
640
技術広報経験0のEMがエンジニアブランディングをはじめてみた
coconala_engineer
1
130
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
7
100k
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
初心者が行く!サーバレスWebアプリ開発の道
nagaharutogawa
0
440
サービスメッシュ環境における OpenTelemetry 活用 / OpenTelemetry in Service Mesh
k6s4i53rx
2
830
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
In The Pink: A Labor of Love
frogandcode
137
21k
Agile that works and the tools we love
rasmusluckow
323
20k
Facilitating Awesome Meetings
lara
39
5.5k
GitHub's CSS Performance
jonrohan
1023
450k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Debugging Ruby Performance
tmm1
68
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Visualization
eitanlees
135
14k
Building Applications with DynamoDB
mza
88
5.6k
Transcript
*ハンズオンの注意事項 本ハンズオンは事前にメールにてお送りした環境構築の必須項目を完了している前提で進めます。 もし環境構築がまだお済みでない方は、本ハンズオンの内容を目で追っていただき、イメージを掴んでいただく だけでも構いません。 ハンズオン中に質問などがある方は、Discordのquestionチャンネルにて質問をしてください。 人数の関係上、ハンズオンに進行自体は質問に関わらず進めさせていただきます。 ハンズオン中URLやファイルの共有があります。こちらもDiscordにて送付しますので、Discordチャンネルを御 覧ください。 環境構築について 質問等について
URLなど共有物について
エンジニア向けハンズオン
本日のタイムテーブル ▪13:00 - 13:15 Re:Earthの概要説明 ▪13:15 - 14:00 Re:Earthをローカル環境でセットアッ プ
▪14:00 - 14:45 Re:Earthの使い方ハンズオン ▪14:45 - 14:50 小休憩 ▪14:50 - 15:05 プラグイン機能の概要と仕組み ▪15:05 - 15:50 プラグイン開発ハンズオン ▪15:50 - 16:00 質疑応答
自己紹介 - 1 馬場英道 / Hidemichi Baba 株式会社Eukarya エンジニア /
「Re:Earth」プロダクトオーナー 好きなこと:河原でBBQ GitHub: @HideBa
自己紹介 - 2 西林直哉 / Naoya Nishibayashi 株式会社Eukarya GIS エンジニア
大阪府枚方市出身 地理とか気象とかが好き
ハンズオンのゴール1 ローカル環境でRe:Earthを動かす Re:Earthの全体像を掴む 本ハンズオンを通し、Re:Earthをお手持ちのPCで起動 し、開発するまでの流れを確認します。 本ハンズオン終了時に、みなさんがすぐにRe:Earthにコ ミットできる状態を目指します。 本ハンズオンを通して、Re:Earthのフロントエンド・ バックエンド含むシステム全体に関する大まかなイメー ジを掴むことを目指します。
ハンズオンのゴール2 Re:Earthの基本的な使い方を知る Re:Earthのプラグインを知る ローカル環境で起動したRe:Earthを用いて、Re:Earthの 使い方を学びます。ハンズオン終了後には、みなさんが 基本的なRe:Earthの使い方をマスターし、ご自身でプロ ジェクトを立ち上げることができる状態を目指します。 Re:Earthのコア機能の一つであるプラグイン機能がどの ように動作し、どう開発するのかを知ります。 ハンズオン終了時には、ご自身でプラグイン開発を始め
られる状態になることを目指します。
Re:Earthは、リアル空間にある情報をバーチャル空間に再現するWebアプリケーション ノンコードで、誰でも簡単に空間情報の管理・分析・可視化をし、Webアプリを作成可能 Re:EarthのUI Re:Earthとは
ノンコーディング 情報の作成や更新・公開設定などで難しいプログラミングを行う必要がありません。 作成例:統計情報の可視化 作成例:時系列情報の可視化 南アルプス市ふるさと〇〇博物館(東京大学渡邉英徳研究室制作、株式会社Eukarya技術協力) 経営危機自治体(株式会社Eukarya制作、渡邉英徳監修) これまでエンジニアやデザイナーが開発に携わる必要があった
技術的ポイント 3D モデルの描画 WebGL 安全かつ高速なサンドボックス 環境の構築 WebAssembly スキーマ駆動開発を実現 フロントエンドとバックエンドを 疎結合な構成とすることが可能
GraphQL 高速かつ方安全で、ポータブ ルなプログラミング言語 Go 安全かつ低開発コストで認 証機能を実現 OpenID Connect React・TypeScript webpack 高い生産性と リッチなUIを構築
Re:Earthの構成 Database IDaaS Back-end Static files Front-end Resium Plugins
フロントエンド アーキテクチャ 開発生産性 アトミックデザインを適用 Storybook GraphQL Code Generator コンポーネントの再利用性を高める ・高速なコンポーネント開発
・コンポーネントの一覧性 ・GraphQL スキーマからコードの 自動生成
バックエンド アーキテクチャ Clean architecture, Domain Driven Design & the Standard
Go Project Layout ・ビジネスロジックがその他のレイヤーから独 立 ・ドメインモデルをカプセル化 ・データベースやフレームワーク、認証サービ スなどの外部から独立し、置換可能
Re:Earthの構成 認証について Auth0 開発者の方がやること* 今後の認証機能について IDassとして、Auth0を利用しています。 ・Auth0テナントのセットアップ ・↑の内容をもとに、環境変数を設定 *詳しくは、 を御覧ください。
https://docs.reearth.io/developer-guide/intro/getting-started ・Re:Earthチームでは、コントリビューターの方 の環境構築負担軽減のため、Auth0なしでも動作可 能な、独自の認証基盤構築中です。
Re:Earthレポジトリ 開発タスクの管理 Re:Earth レポジトリ Re:Earthチームの開発タスク管理は、reearthレポジトリ の「Re:Earth Dev Kanban Board」にて行っています。 新規機能の開発状況などはこちらから御覧ください。
https://github.com/reearth/reearth/projects/2 Re:Earthはフロントエンド・バックエンドの2レポジトリ から構成されていますが、Issueやバージョン管理、ディ スカッションなどはこちらのレポジトリで行っていま す。 https://github.com/reearth/reearth Re:Earth Dev Kanban Borad Re:Earthレポジトリ
ローカルセットアップハンズオン
ハンズオンリンク1
Re:Earthアカウントについて アカウント申込みフォーム https://forms.gle/1AeGnrRK6N7Uf4ta8
使い方ハンズオン
プラグイン機能概要
プラグイン機能 プラグイン機能によって より細かなユースケースへの対応 外部開発者のプラグインを共有 美術館 建設 行政 広告 出版・メディア
プラグイン機能 デジタルツインや3D都市モデルの課題 ・システム開発を低コストで多くの実証実験をしたい。 ・ノンエンジニアであっても、様々な情報をバーチャル空間に再現したい。 Re:Earthのプラグインシステムは、 を実現する 資源を共有するエコシステム
プラグイン機能 プラグインでできること 今後 ・フロントエンドのカスタマイズ ・レイヤーツール ・インフォボックス内ブロック ・ウィジェット ・バックエンドプラグイン ・独自の演算処理の組み込み ・公式サポート外のデータフォーマットサポート
など
プラグイン機能 プラグインの使い方 インストール ・Zipファイルアップロード ・GitHub公開レポジトリ
プラグイン機能 プラグインを開発するには? マニフェストファイル JavaScriptファイル 概要:プラグインのメタデータと設定値を定義するファイルです。 形式:.yml 概要:実際にRe:Earthのフロンドレンドで実行されるJavaScriptファイルです。 形式:.js
プラグイン仕組み 最新のWeb技術を利用することで、第三者に開発されたコードを安全・高速に 実行することが可能 その他のユーザーが開発したプラグインを利用可能に 演算プラグイン(開発途中) 演算プラグインはRe:Earthが公式でサ ポートしてないデータ形式のサポート や、データ変換を可能にします。 UI プラグイン
iframe
プラグイン開発ハンズオン
プラグイン開発ハンズオンリンク
コントリビューション
コントリビューション フロントエンド FYI フロントエンドの開発項目は「Re:Earth Dev Kanban Board」の”reearth-web” というラベルの付いたIssueを確認してください。 プルリクエストは、 に出し、コアメンテナーメンバー2人と
@lavalse(designer)をレビュワーとしてアサインしてください。 https://github.com/reearth/reearth-web Re:Earthのフロントエンドコンポーネントは、Storybookを用いて可視化しています。 ↑から現在存在するコンポーネントを確認できます。 https://reearth.github.io/reearth-web/main/
コントリビューション FYI バックエンド Re:Earthのバックエンドは、GoDocを用いてドキュメント化されています。 ↑からコードベースのドキュメントを確認できます。 https://reearth.github.io/reearth-backend/main/pkg/github.com/reearth/r eearth-backend/index.html フロントエンドの開発項目は「Re:Earth Dev Kanban
Board」の”reearth-web” というラベルの付いたIssueを確認してください。 プルリクエストは、 に出し、コアメンテナーメンバー2 人をレビュワーとしてアサインしてください。 バックエンドの大きめなタスクは手戻りを防ぐためにも、設計・モデリング段階 で簡単なレビューを投げていただくと良いです。 https://github.com/reearth/reearth-backend
最後に @オンライン 1/11(火) 7 PM 次回イベント 内容 未定(乞うご期待!) 後ほどDiscordの#announcementにて連絡