こんにちは。キャスレーコンサルティング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ご覧ください。
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