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
200
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
110
FOSS4G Japan Online 馬場英道
hideba
0
2.5k
Other Decks in Technology
See All in Technology
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
1k
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
10
5k
Introdução a Service Mesh usando o Istio
aeciopires
0
220
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
150
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
12
81k
Claude Code Subagents 再入門 ~cc-sddの実装で学んだこと~
gotalab555
10
16k
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
450
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
140
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
330
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
3
830
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
130
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Statistics for Hackers
jakevdp
799
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
GitHub's CSS Performance
jonrohan
1032
470k
Speed Design
sergeychernyshev
32
1.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
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にて連絡