2021-12-05_FOSS4GJA_WORKSHOP

Transcript

1. ＊ハンズオンの注意事項 本ハンズオンは事前にメールにてお送りした環境構築の必須項目を完了している前提で進めます。 もし環境構築がまだお済みでない方は、本ハンズオンの内容を目で追っていただき、イメージを掴んでいただく だけでも構いません。 ハンズオン中に質問などがある方は、Discordのquestionチャンネルにて質問をしてください。 人数の関係上、ハンズオンに進行自体は質問に関わらず進めさせていただきます。 ハンズオン中URLやファイルの共有があります。こちらもDiscordにて送付しますので、Discordチャンネルを御 覧ください。 環境構築について 質問等について URLなど共有物について
2. エンジニア向けハンズオン
3. 本日のタイムテーブル ▪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 質疑応答
4. 自己紹介 - 1 馬場英道 / Hidemichi Baba 株式会社Eukarya エンジニア / 「Re:Earth」プロダクトオーナー 好きなこと：河原でBBQ GitHub: @HideBa
5. 自己紹介 - 2 西林直哉 / Naoya Nishibayashi 株式会社Eukarya GIS エンジニア 大阪府枚方市出身 地理とか気象とかが好き
6. ハンズオンのゴール1 ローカル環境でRe:Earthを動かす Re:Earthの全体像を掴む 本ハンズオンを通し、Re:Earthをお手持ちのPCで起動 し、開発するまでの流れを確認します。 本ハンズオン終了時に、みなさんがすぐにRe:Earthにコ ミットできる状態を目指します。 本ハンズオンを通して、Re:Earthのフロントエンド・ バックエンド含むシステム全体に関する大まかなイメー ジを掴むことを目指します。
7. ハンズオンのゴール2 Re:Earthの基本的な使い方を知る Re:Earthのプラグインを知る ローカル環境で起動したRe:Earthを用いて、Re:Earthの 使い方を学びます。ハンズオン終了後には、みなさんが 基本的なRe:Earthの使い方をマスターし、ご自身でプロ ジェクトを立ち上げることができる状態を目指します。 Re:Earthのコア機能の一つであるプラグイン機能がどの ように動作し、どう開発するのかを知ります。 ハンズオン終了時には、ご自身でプラグイン開発を始め られる状態になることを目指します。
8. Re:Earthは、リアル空間にある情報をバーチャル空間に再現するWebアプリケーション ノンコードで、誰でも簡単に空間情報の管理・分析・可視化をし、Webアプリを作成可能 Re:EarthのUI Re:Earthとは
9. ノンコーディング 情報の作成や更新・公開設定などで難しいプログラミングを行う必要がありません。 作成例：統計情報の可視化 作成例：時系列情報の可視化 南アルプス市ふるさと〇〇博物館（東京大学渡邉英徳研究室制作、株式会社Eukarya技術協力） 経営危機自治体（株式会社Eukarya制作、渡邉英徳監修） これまでエンジニアやデザイナーが開発に携わる必要があった
10. 技術的ポイント 3D モデルの描画 WebGL 安全かつ高速なサンドボックス 環境の構築 WebAssembly スキーマ駆動開発を実現 フロントエンドとバックエンドを 疎結合な構成とすることが可能 GraphQL 高速かつ方安全で、ポータブ ルなプログラミング言語 Go 安全かつ低開発コストで認 証機能を実現 OpenID Connect React・TypeScript webpack 高い生産性と リッチなUIを構築
11. Re:Earthの構成 Database IDaaS Back-end Static files Front-end Resium Plugins
12. フロントエンド アーキテクチャ 開発生産性 アトミックデザインを適用 Storybook GraphQL Code Generator コンポーネントの再利用性を高める ・高速なコンポーネント開発 ・コンポーネントの一覧性 ・GraphQL スキーマからコードの 自動生成
13. バックエンド アーキテクチャ Clean architecture, Domain Driven Design & the Standard Go Project Layout ・ビジネスロジックがその他のレイヤーから独 立 ・ドメインモデルをカプセル化 ・データベースやフレームワーク、認証サービ スなどの外部から独立し、置換可能
14. Re:Earthの構成 認証について Auth0 開発者の方がやること* 今後の認証機能について IDassとして、Auth0を利用しています。 ・Auth0テナントのセットアップ ・↑の内容をもとに、環境変数を設定 *詳しくは、 を御覧ください。 https://docs.reearth.io/developer-guide/intro/getting-started ・Re:Earthチームでは、コントリビューターの方 の環境構築負担軽減のため、Auth0なしでも動作可 能な、独自の認証基盤構築中です。
15. 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レポジトリ
16. ローカルセットアップハンズオン
17. ハンズオンリンク1
18. Re:Earthアカウントについて アカウント申込みフォーム https://forms.gle/1AeGnrRK6N7Uf4ta8
19. 使い方ハンズオン
20. プラグイン機能概要
21. プラグイン機能 プラグイン機能によって より細かなユースケースへの対応 外部開発者のプラグインを共有 美術館 建設 行政 広告 出版・メディア
22. プラグイン機能 デジタルツインや3D都市モデルの課題 ・システム開発を低コストで多くの実証実験をしたい。 ・ノンエンジニアであっても、様々な情報をバーチャル空間に再現したい。 Re:Earthのプラグインシステムは、 を実現する 資源を共有するエコシステム
23. プラグイン機能 プラグインでできること 今後 ・フロントエンドのカスタマイズ 　・レイヤーツール 　・インフォボックス内ブロック 　・ウィジェット ・バックエンドプラグイン 　・独自の演算処理の組み込み 　・公式サポート外のデータフォーマットサポート など
24. プラグイン機能 プラグインの使い方 インストール ・Zipファイルアップロード ・GitHub公開レポジトリ
25. プラグイン機能 プラグインを開発するには？ マニフェストファイル JavaScriptファイル 概要：プラグインのメタデータと設定値を定義するファイルです。 形式：.yml 概要：実際にRe:Earthのフロンドレンドで実行されるJavaScriptファイルです。 形式：.js
26. プラグイン仕組み 最新のWeb技術を利用することで、第三者に開発されたコードを安全・高速に 実行することが可能 その他のユーザーが開発したプラグインを利用可能に 演算プラグイン(開発途中) 演算プラグインはRe:Earthが公式でサ ポートしてないデータ形式のサポート や、データ変換を可能にします。 UI プラグイン iframe
27. プラグイン開発ハンズオン
28. プラグイン開発ハンズオンリンク
29. コントリビューション
30. コントリビューション フロントエンド 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/
31. コントリビューション 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
32. 最後に @オンライン 1/11(火) 7 PM 次回イベント 内容 未定（乞うご期待！） 後ほどDiscordの#announcementにて連絡