Gio.jsを使って地球儀を表示してみた話
はじめに
前々から気になっていたGio.jsを使ってみました。
技術記事というよりは感想やメモの記事になります。
Gio.jsとは
Gio.jsは、Three.jsで構築されたWeb3Dグローブデータ視覚化用のオープンソースライブラリです。Gio.jsの違いは、Gio.jsを使用して、宣言的な方法で3Dデータ視覚化モデルをカスタマイズし、独自のデータを追加して、それを独自の最新のWebアプリケーションに統合するのが簡単なことです。
(Gio.js READMEの翻訳を引用)
文章だとイメージが掴みづらいですが、要するに地球儀の3Dモデルを表示できます。
またデータを登録することでデータを地球儀上で可視化できるので、以下画像のような地球儀の表示ができます。
Gio.jsの特徴
Gio.jsは以下の3点を特徴として挙げています。
①導入のシンプル性
最低4行のJavaScriptコードで3Dの地球儀モデルを作成できる。
②カスタマイズ性
Gio.jsのAPIを使用することで地球儀のデザインをカスタマイズできる。
③モダンなデザイン
インタラクティブかつリッチな3Dフロントエンドアプリケーションを構築できる。
環境
Next + Typescriptのプロジェクト内でGio.jsを使用してみます。
バージョンは以下のとおりです。
| 項目 | バージョン詳細 |
|---|---|
| node | 16.14.2 |
| next | 12.1.4 |
| react | 18.0.0 |
今回試すこと
Gio.jsを導入し、以下のようなシンプルな地球儀を表示してみます。
最終的にデータの登録やスタイルのAPIを使用し、以下のようなリッチな表示にします。
手順
- 地球儀を表示する
- Gio.jsのインストール
- コードを記述
- パラメータの説明
- データを追加し地球儀上で可視化する
- データファイルの追加
- コードの追記
- パラメータ説明
- スタイルを追加して地球儀をカスタマイズする
- コードnの追記
- スタイルを細かく変更する場合
地球儀を表示する
まずは地球儀を表示させてみます。
Gio.jsのインストール
Gio.jsをインストールします。
パッケージマネージャ-にyarnを使用しているのでyarnでインストールします。
※Gio.jsはTypeScript未対応。
yarn add giojs
npmを使用している場合は以下でインストールします。
npm install giojs
コードを記述
今回はNext,Typescriptを使用しているので以下のようなコードになりました。
特徴に挙げられていた4行で記述はできませんでしたが、それでも充分コード数は少ない印象です。
import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
const initCountry = "JP";
const Giojs: NextPage = () => {
const ref = useRef(null);
useEffect(() => {
const controller = new GIO.Controller(ref.current, {
control: {
initCountry,
},
});
controller.init();
}, []);
return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};
export default Giojs;
これだけのコード記述で地球儀が表示できます。画面では以下画像のようなシンプルな地球儀が表示されているはずです。
パラメータの説明
initCountry
initCountry で初期選択の国を指定できます。
initCountry にはISO 3166-1の国名コードが指定でき、今回は JP を渡しているため日本が選択状態になります。何も指定しない場合はデフォルトで CN が指定されるので中国が初期選択状態となります。
データを追加し地球儀上で可視化する
ひとまず地球儀は表示できましたが味気ないです。
Gio.jsの良いところは国同士のデータ関係を可視化できることにあるので、データを追加して表示をリッチにしていきます。
データファイルの追加
各パラメータの説明は後述するとして、ひとまずデータを追加します。
サンプルデータとして今回は sampleData.ts ファイルを追加しました。
const data = [
{
e: "JP",
i: "CN",
v: 3000000,
},
{
e: "JP",
i: "TH",
v: 8000000,
},
{
e: "ID",
i: "JP",
v: 1000000,
},
];
export default data;
コードの追記
先ほどのindex.tsxファイルで追加したデータをインポートします。
インポートしたデータは controller.addData(); の引数に渡すことで地球儀に反映されます。
import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
+ import data from "./sampleData";
const initCountry = "JP";
const Giojs: NextPage = () => {
const ref = useRef(null);
useEffect(() => {
const controller = new GIO.Controller(ref.current, {
control: {
initCountry,
},
});
+ controller.addData(data);
controller.init();
}, []);
return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};
export default Giojs;
表示を確認すると、ラインが2つの国を結んでおり、光の粒子がそのライン上を移動しています。
これで少しだけ見た目に動きが出てきました。
パラメータ説明
先ほど追加したデータのパラメータについて説明します。
{
e: "JP",
i: "CN",
v: 3000000,
},
e
e はエクスポート国を表しており、国同士を結ぶラインの出発国になります。
コードはISO 3166-1を参考にします。
i
i はインポート国を表しており、国同士を結ぶラインの到着国になります。
コードはISO 3166-1を参考にします。
v
v は国同士の間の値です。
値が大きければ、ライン上を移動する粒子のサイズと量が大きくなり、速く移動します。
値が小さければ、ライン上を移動する粒子のサイズと量が小さくなり、遅く移動します。
スタイルを追加して地球儀をカスタマイズする
最後にスタイルをカスタマイズしてよりリッチな見た目にします。
Gio.jsには色やスタイルをカスタムするAPIが用意されているので使用してみます。
コードの追記
index.tsxファイルに controller.setStyle("mint"); を追加します。
setStyle()APIでは引数に配色の名前を指定することでスタイルのテンプレートを読み込むことができます。
今回は mint を指定しました。
import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
import data from "./sampleData";
const initCountry = "JP";
const Giojs: NextPage = () => {
const ref = useRef(null);
useEffect(() => {
const controller = new GIO.Controller(ref.current, {
control: {
initCountry,
},
});
+ controller.setStyle("mint");
controller.addData(data);
controller.init();
}, []);
return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};
export default Giojs;
これだけで表示のスタイルが変更されてよりリッチ(?)な見た目になりました。
スタイルを細かく変更する場合
setStyle で指定できないような背景色や海の透過率を変更するAPIなども用意されているため、APIの組み合わ次第で好みの色に変更できそうです。
import type { NextPage } from "next";
import { useEffect, useRef, useState } from "react";
import * as GIO from "giojs";
import data from "./sampleData";
const initCountry = "JP";
const Giojs: NextPage = () => {
const ref = useRef(null);
useEffect(() => {
const controller = new GIO.Controller(ref.current, {
control: {
initCountry,
},
});
// 地球表面(国境)の色(デフォルト値:#FFFFFF)
controller.setSurfaceColor("#FFFFFF");
// 選択した国の色(デフォルト値:#FFFFFF)
controller.setSelectedColor("#FFFFFF");
// 選択した国から出ていくラインの色(デフォルト値:#DD380C)
controller.setExportColor("#DD380C");
// 選択した国に入ってくるラインの色(デフォルト値:#154492)
controller.setImportColor("#154492");
// 地球の輪郭の色(デフォルト値:#FFFFFF)
controller.setHaloColor("#FFFFFF");
// 背景色(デフォルト値:#000000)
controller.setBackgroundColor("#000000");
// 海の明るさ[0~1](デフォルト値:0.5)
controller.adjustOceanBrightness(0.5);
// 関連する国の明るさ[0~1](デフォルト値:0.5)
controller.adjustRelatedBrightness(0.5);
// メンションされた国を光らせるか(デフォルト値:false)
controller.lightenMentioned(true);
// メンションされた国の光度[0~1](デフォルト値:0.5)
controller.adjustMentionedBrightness(0.5);
controller.addData(data);
controller.init();
}, []);
return <div style={{ width: 1440, height: 800 }} ref={ref} />;
};
export default Giojs;
所感
Gio.jsでは簡単に3Dの地球儀を描画でき、データを追加することで国同士の関係を可視化できるのは面白いと感じました。
今回は色を変更した程度でしたが、Gio.jsには他にもAPIが用意されているので、よりインタラクティブな表示ができそうです。
参考記事
Discussion