paiza開発日誌paiza開発日誌IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。開発ネタTweetどうも、まさとらん(@0310lan)です!今回は、わずか数行のJavaScriptコードを書くだけで3Dの地球上にデータをマッピングして可視化できるライブラリをご紹介します!初心者でも簡単に扱えるように設計されており、カスタマイズ性やインタラクティブな機能を追加するのも簡単です。■「Gio.js」の使い方それでは、まず最初に「Gio.js」を利用するための準備から始めていきましょう!導入方法としてはいくつかのオプションが用意されているので、特に手間を掛けることなく進めていけるはずです。giojsまた、HTMLファイルにCDN経由で「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タグ」を配置します。style="width:800px;height:420px"></div>インラインでスタイルを設定していますが、もちろん外部CSSファイルに記述しても構いません。);controller.init();「GIO.Controller()」の引数にdiv要素を指定すればOKです。あとは「inti()」を実行して初期化すれば以下のように表示されます!簡単ですね!マウスでドラッグしたり、好きな国をクリックするとハイライトを変更することもできます。このままだと何のデータも設定していないので可視化を表現できていませんよね?そこで、サンプルデータが公開されているので以下のように「scriptタグ」で取り込んでみます。);この1行を記述するだけでデータを取り込むことが可能です。実行すると、以下のように国別のデータを可視化することができます!(※データの作り方は後述します)ここまでのソースコードは、以下のリンクからすべて閲覧できますので参考にしてみてください。】ちなみに、データの取り込み方法はいくつか用意されており、例えばサーバー側に用意されているJSON形式のファイルを簡単に読み込めるメソッドもあります。controller.init();})Webアプリやサービスなどに組み込む場合は、この方法を使うと効率よく利用できるのでオススメです。■地球のデザインをカスタマイズしてみよう!「Gio.js」では、3Dで表現された地球のカラーやデザインなどを細かくカスタマイズできる機能があるので合わせてご紹介しておきます!「GIO.Controller()」の第2引数に、実はオブジェクト形式の「config(設定)」をオプションとして指定することが可能です。}}上記の場合だと、指定された国と背景を任意のカラーに設定しています。これを実行すると以下のようになります!背景と指定した国のカラーが変更されましたね。この「config」に設定できるプロパティは他にも細かくカラー指定が可能で、さらに明るさやパフォーマンス用のStatsを表示したり初期表示の国を変更するなど...さまざまなオプションが用意されています。画面右側のGUIを操作することで、変更したプロパティがリアルタイムにプレビューできるので便利です。カスタマイズできたら、画面下の「Generate」ボタンをクリックします。すると、自動的に「config」のオブジェクトデータが生成されて表示されます!あとはこのデータをコピーして、先ほどと同じようにJavaScriptから「config」を設定すれば即座に適用することができます。ちなみに、「config」はオブジェクト形式で設定する以外にもさまざまなAPIが提供されているのでJavaScriptで動的に変更することも可能です。■データの構造についてここからは、「Gio.js」で可視化するためのデータをどのように作成するのかをご紹介していきます!と...言ってもデータの構造自体はとても簡単で、「e」「i」「v」3つのプロパティを設定するだけです。}]「e」はexport、「i」はimport、「v」はvalueの略になります。簡単に言うと、「e(スタート地点)」の国と「i(ゴール地点)」の国を決めるだけです。そこへ任意の「v(値)」を設定するだけで、あとは自動的に可視化をしてくれるようになるわけです。これを踏まえた上で、次のサンプル例は「日本」から「中国」「タイ」「インドネシア」への可視化データになります。1000000}];実行するとこんな感じになります!「v(値)」の大きさによって、可視化したラインのエフェクトも変化している点に注目してください。大きな値になるほどエフェクトもどんどん派手になっていくというわけです。1000000}実行すると次のようになります!今度は日本へ入ってくるデータなので、色違いのラインエフェクトになるわけです。'5000000'}実行すると、アジア全域がハイライト表示されているのが分かります。America」「Europe」など...さまざまな大陸名を指定できるので便利です。このように簡単なデータを作成するだけで、3Dの地球上へデータを可視化できるのは大きな特徴と言えるでしょう。空港の便数をマッピングしたり、訪日外国人の旅行者数を可視化するなど...アイデア次第でさまざまな活用方法を見つけることができると思います。■その他、便利な機能について「Gio.js」にはインタラクティブな機能も多く搭載されているので、特に便利なモノをピックアップしてご紹介しておきます!まずは「onCountryPicked()」というメソッドです。これを使うと、任意の国をクリックした時にその国の情報を取得することが可能になります。表示されます!特に、「短縮名」は可視化データを作成する時によく使うので重宝します。その国がデータで繋がっているすべての国をリストアップすることも可能です。このメソッドを使えば、特定の国を指定した時だけ別の処理を実行するようなことも簡単に実装できるでしょう。次に「マルチデータ」の扱いについて!実は「Gio.js」では、複数のデータセットを切り替えることができるようになっています。「日本」のデータと「中国」のデータがあるとします。}];この2つのデータセットを切り替えるには、次のように準備しておきます。}まず、「dataSetKeys」を使って「キー」となる好きな名称を登録しておきます。その「キー」に合わせて事前に用意しておいたデータセットを紐付けるというわけです。(「initDataSet」は、最初に表示するデータセットを指定します)実際の切り替え処理は、「switchDataSet()」メソッドを使えば簡単に実行することができます。);このメソッドを例えばボタン要素に実装すれば、クリックするたびにデータセットを切り替えられるようになります。);これは、JavaScript側から任意のタイミングで国を切り替えられるメソッドになります。通常は3Dで表示された地球の任意の箇所をクリックしないと切り替えられないのですが、自動的に切り替えたい場合には重宝するメソッドになります。■動画でプログラミングが学べるpaizaラーニング動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。「Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。■まとめ今回は、JavaScriptで簡単に3Dで表現された地球を使った可視化を実現できる「Gio.js」についてご紹介しました!初心者でも特に悩むことなく扱えるライブラリであり、簡単なデータを用意するだけですぐに楽しめるのは魅力的だと感じます。豊富なオプションやAPIも提供されているので、ご興味ある方はぜひ挑戦してみてください!<参考>「Gio.js」公式サイト「Gio.js」GitHubページ「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。詳しくはこちらそしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。記事内に記載している情報は、記事公開時点でのものとなります。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。