どうも、まさとらん（@0310lan）です！
今回は、わずか数行のJavaScriptコードを書くだけで3Dの地球上にデータをマッピングして可視化できるライブラリをご紹介します！
初心者でも簡単に扱えるように設計されており、カスタマイズ性やインタラクティブな機能を追加するのも簡単です。
輸出入のデータ・統計情報・インバウンドデータなどはもちろんのこと、海外旅行や旅のログを作ったりするのにも大変重宝すると思います！
【 Gio.js 】
■「Gio.js」の使い方
それでは、まず最初に「Gio.js」を利用するための準備から始めていきましょう！
導入方法としてはいくつかのオプションが用意されているので、特に手間を掛けることなく進めていけるはずです。
例えば、「npm」「yarn」を使う場合は以下のコマンドを実行するだけです！
※「npm」を使う場合
npm install giojs --save
※「yarn」を使う場合
yarn add giojs
また、HTMLファイルにCDN経由で「scriptタグ」を記述することでも簡単に始められます。
<script src="https://threejs.org/build/three.min.js"></script> <script src="https://raw.githack.com/syt123450/giojs/master/build/gio.min.js"></script>
「Gio.js」は3Dの描画部分に「three.js」をベースにしているので、先に読み込むようにしておきましょう。
もう1つの選択肢としては、GitHubから「Gio.js」のファイルをダウンロードして利用する方法もあります。
このように、自分の環境に合わせて「Gio.js」を利用できるようにしておきましょう！
■「Gio.js」で3Dの地球を表示してみよう！
「Gio.js」が利用できるようになったところで、早速3Dで表現された地球を生成して表示してみましょう！
まず最初に、HTMLの好きな箇所へ地球を表示するための「divタグ」を配置します。
<div id="globalArea" style="width:800px;height:420px"></div>
インラインでスタイルを設定していますが、もちろん外部CSSファイルに記述しても構いません。
次に、JavaScript側からこの「divタグ」を取得して3Dの地球を生成しましょう！
var container = document.getElementById( "globalArea" ); var controller = new GIO.Controller( container ); controller.init();
「GIO.Controller()」の引数にdiv要素を指定すればOKです。
あとは「inti()」を実行して初期化すれば以下のように表示されます！
簡単ですね！
マウスでドラッグしたり、好きな国をクリックするとハイライトを変更することもできます。
ただし、このままだと何のデータも設定していないので可視化を表現できていませんよね？
そこで、サンプルデータが公開されているので以下のように「scriptタグ」で取り込んでみます。
<script src="https://raw.githack.com/syt123450/giojs/master/assets/data/sampleData.js"></script>
そして、先ほどの地球オブジェクトにサンプルデータを次のように設定します！
controller.addData( data );
この1行を記述するだけでデータを取り込むことが可能です。
実行すると、以下のように国別のデータを可視化することができます！
（※データの作り方は後述します）
ここまでのソースコードは、以下のリンクからすべて閲覧できますので参考にしてみてください。
ちなみに、データの取り込み方法はいくつか用意されており、例えばサーバー側に用意されているJSON形式のファイルを簡単に読み込めるメソッドもあります。
controller.addDataAsync('/data/sampleData.json', function() { controller.init(); })
Webアプリやサービスなどに組み込む場合は、この方法を使うと効率よく利用できるのでオススメです。
■地球のデザインをカスタマイズしてみよう！
「Gio.js」では、3Dで表現された地球のカラーやデザインなどを細かくカスタマイズできる機能があるので合わせてご紹介しておきます！
「GIO.Controller()」の第2引数に、実はオブジェクト形式の「config（設定）」をオプションとして指定することが可能です。
//第2引数に「config」を指定 new GIO.Controller( container, config ); //設定用のオブジェクト var config = { //カラーの設定 color: { selected: 0xff8888, background: 0xaaaaff } }
上記の場合だと、指定された国と背景を任意のカラーに設定しています。
これを実行すると以下のようになります！
背景と指定した国のカラーが変更されましたね。
この「config」に設定できるプロパティは他にも細かくカラー指定が可能で、さらに明るさやパフォーマンス用のStatsを表示したり初期表示の国を変更するなど…さまざまなオプションが用意されています。
これらを1つずつ記述してもいいのですが、面倒な場合は「config」用のオブジェクトデータを自動生成できる専用のサービスを利用するのがオススメです！
【 Playground｜Goi.js 】
画面右側のGUIを操作することで、変更したプロパティがリアルタイムにプレビューできるので便利です。
カスタマイズできたら、画面下の「Generate」ボタンをクリックします。
すると、自動的に「config」のオブジェクトデータが生成されて表示されます！
あとはこのデータをコピーして、先ほどと同じようにJavaScriptから「config」を設定すれば即座に適用することができます。
ちなみに、「config」はオブジェクト形式で設定する以外にもさまざまなAPIが提供されているのでJavaScriptで動的に変更することも可能です。
■データの構造について
ここからは、「Gio.js」で可視化するためのデータをどのように作成するのかをご紹介していきます！
と…言ってもデータの構造自体はとても簡単で、「e」「i」「v」3つのプロパティを設定するだけです。
例えば、次の例を見てください！
var data = [ { e : "JP", i : "US", v : 10000 } ]
「e」はexport、「i」はimport、「v」はvalueの略になります。
簡単に言うと、「e（スタート地点）」の国と「i（ゴール地点）」の国を決めるだけです。
そこへ任意の「v（値）」を設定するだけで、あとは自動的に可視化をしてくれるようになるわけです。
これを踏まえた上で、次のサンプル例は「日本」から「中国」「タイ」「インドネシア」への可視化データになります。
var data = [ { e: "JP", i: "CN", v: 8000000 }, { e: "JP", i: "TH", v: 3000000 }, { e: "JP", i: "ID", v: 1000000 }];
実行するとこんな感じになります！
「v（値）」の大きさによって、可視化したラインのエフェクトも変化している点に注目してください。
つまり、大きな値になるほどエフェクトもどんどん派手になっていくというわけです。
さらに、今度は「アメリカ」「ロシア」「インド」から「日本」へのデータを作ってみましょう！
{ e: "US", i: "JP", v: 8000000 }, { e: "RU", i: "JP", v: 3000000 }, { e: "IN", i: "JP", v: 1000000 }
実行すると次のようになります！
今度は日本へ入ってくるデータなので、色違いのラインエフェクトになるわけです。
ちなみに、「i（ゴール地点）」は国名だけでなく例えば「アジア」など、大陸名をそのまま指定することもできます！
{ e : 'JP', i : 'Asia', v : '5000000' }
実行すると、アジア全域がハイライト表示されているのが分かります。
他にも、「Oceania」「North America」「Europe」など…さまざまな大陸名を指定できるので便利です。
このように簡単なデータを作成するだけで、3Dの地球上へデータを可視化できるのは大きな特徴と言えるでしょう。
例えば、空港の便数をマッピングしたり、訪日外国人の旅行者数を可視化するなど…アイデア次第でさまざまな活用方法を見つけることができると思います。
ここまでのソースコードは以下のリンクから閲覧できますので、ぜひ参考にしてみてください！
■その他、便利な機能について
「Gio.js」にはインタラクティブな機能も多く搭載されているので、特に便利なモノをピックアップしてご紹介しておきます！
まずは「onCountryPicked()」というメソッドです。
これを使うと、任意の国をクリックした時にその国の情報を取得することが可能になります。
controller.onCountryPicked( function( select, relate ) { console.log( select ); console.log( relate ); })
例えば、中国をクリックすると以下のように「国名」「位置」「短縮名」などが表示されます！
特に、「短縮名」は可視化データを作成する時によく使うので重宝します。
さらに、その国がデータで繋がっているすべての国をリストアップすることも可能です。
このメソッドを使えば、特定の国を指定した時だけ別の処理を実行するようなことも簡単に実装できるでしょう。
次に「マルチデータ」の扱いについて！
実は「Gio.js」では、複数のデータセットを切り替えることができるようになっています。
例えば、「日本」のデータと「中国」のデータがあるとします。
var data1 = [ { e: "JP", i: "CN", v: 8000000 }, { e: "JP", i: "TH", v: 3000000 }, { e: "JP", i: "ID", v: 1000000 }] var data2 = [ { e: "CN", i: "US", v: 8000000 }, { e: "CN", i: "RU", v: 3000000 }, { e: "CN", i: "IN", v: 1000000 }];
この2つのデータセットを切り替えるには、次のように準備しておきます。
var data = { dataSetKeys: ['Japan', 'China'], initDataSet: 'Japan', Japan: data1, China: data2 }
まず、「dataSetKeys」を使って「キー」となる好きな名称を登録しておきます。
そして、その「キー」に合わせて事前に用意しておいたデータセットを紐付けるというわけです。（「initDataSet」は、最初に表示するデータセットを指定します）
実際の切り替え処理は、「switchDataSet()」メソッドを使えば簡単に実行することができます。
controller.switchDataSet( 'China' );
このメソッドを例えばボタン要素に実装すれば、クリックするたびにデータセットを切り替えられるようになります。
さらに、類似のメソッドとして「switchCountry()」もあります！
controller.switchCountry( 'US' );
これは、JavaScript側から任意のタイミングで国を切り替えられるメソッドになります。
通常は3Dで表示された地球の任意の箇所をクリックしないと切り替えられないのですが、自動的に切り替えたい場合には重宝するメソッドになります。
公式のサンプルデモが以下のリンクから実際に試せるので、ぜひ動かしてみてください！
■動画でプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
■まとめ
今回は、JavaScriptで簡単に3Dで表現された地球を使った可視化を実現できる「Gio.js」についてご紹介しました！
初心者でも特に悩むことなく扱えるライブラリであり、簡単なデータを用意するだけですぐに楽しめるのは魅力的だと感じます。
豊富なオプションやAPIも提供されているので、ご興味ある方はぜひ挑戦してみてください！
＜参考＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
