こんにちは。キャスレーコンサルティングS&C部のワイアット(Wyatt)です。

CSVに基づいて新サービスを世の中に発信出来ればと思い、チームを発足しました。

その新チームでつくったサイトCIVUS(シーバス)と、当サイトが何を使って作られているかをご紹介したいと思います。

CIVUS(シーバス)

CIVUS(シーバス)

http://csvvirustracker.appspot.com/

まず、プランニングフェーズの際、何か《楽しい技術》を利用して作成したいと思いました。

理由としましては、『自分の勉強になる』ことと、面白い技術を利用すればエンジニアも『刺激的』だからです。

見ているユーザーも『ワクワク』して、さまざまな良い影響があるんじゃないかなと思いました。

CIVUS(シーバス)の目的

CIVUS(シーバス)の目的については、下記ページをご覧ください。

http://csvvirustracker.appspot.com/about.jsp

Three.jsについて

雲のところ

http://csvvirustracker.appspot.com/volun.jsp

このページはまだ作成中ですが、ストーリー性のあるコンテンツにしたいと思います。

今後、ユーザークリックによりページのコンテンツが切り替えられたり、曇空から青空になるような仕掛けが出来たらと考えています。

このページでは、Three.jsという3Dコンテンツ作成のために作られたライブラリ(名前の由来も3Dから)を利用しています。

リサーチTop

こちらのページもThree.jsを利用しています。

http://csvvirustracker.appspot.com/research.jsp

Three.jsの良いところ、悪いところ

良いところ:3Dコンテンツはカッコイイ!

悪いところ:CPU負荷が大きい。。。

Three.jsは場合によってInternet Explorerでは閲覧できません。

現在のInternet Explorer利用率は10%、Google Chromeに変えてください。

他にも楽しい見本がたくさんありますので、下記のURLご覧ください。

http://threejs.org/

Google App Engine, Java, JSP, SQLについて

Three.jsの他に、Google App Engine, Java, JSP, MySQL を利用しています。

なぜGAE?

理由はコスト削減です。(CIVUS作成の際、コストはかかっておりません)

GAEのデメリットは統計学的な機能に弱いです。

GAEに機能があれば課金対象になります。(例:CloudSQL)

そこで、GAEのDataStoreからMySQLサーバーにImportしています。

このデータで地図の画面管理をしています。

GPS地図(Modestmaps.js)

GPS地図はModestmaps.jsを利用しています。

Modestmaps.jsはリアルタイムデータで変更とアップデートできます。

TopのInteractive地図はKinetic.js GoogleのChart.jsなどを利用しています。

http://csvvirustracker.appspot.com/chiki.jsp

一般的にこのような地図を作成する際、Flashで作ることが多いと思います。

例えば下記のサイト:

https://www.measureofamerica.org/maps/

今回はあえてFlashを使わず、全てJavaScriptで作れる方法を探して作成しました。

今は地図のLoadingタイムに問題を解決しています。

面白い技術!=ユーザーのワクワク☆

次々とサイト改善していますので、お楽しみにしてください。

– Wyatt