こんにちは。fujimuraです。
今回は超☆近日リリース予定の、
“MicroAd Ad Platform Global Visualizer“(以下、MGV)
の開発秘話についてお話します。
今回もカッコよく情報を魅せることにこだわったwebコンテンツですので
みなさんの「どんなサービスなの！？ワクワク！」をそそる(はずの)開発秘話を
リリースに先立ち、フライング公開しちゃいます！
これを読むとサービスの見方がぐっと変わるはずです。
サービスは近日中に公開予定ですので、しばしお待ちください。
MGVとは？
MicroAd BLADEの一日のリクエスト数を、各国・時間毎に可視化したサービスです。
また、マイクロアドの拠点情報も見ることができるようになっています。
では、そんなMGVのベースが出来るまでの道のりを振り返っていきます。
日本から世界へ
前にリリースした”MicroAd Ad Platform Visualizer“（以下、MAV）は
日本国内の配信量を可視化したものでした。
今回は規模を世界に広げるだけですので、楽勝です！！
となると、まずは
①日本地図から世界地図に変更
②光の玉を各国に配置
ですね。
Clik here to view.
日本に比べて他国はまだまだリクエスト数が少ないので、
国土が広いところは寂しい感じになりました。
そして、それを遥かに凌駕する”これじゃない”感!!!
ま、まずい！！これ全然楽勝じゃない。。。
地図の表現方法
地図自体に手を加えていい感じの表現はできないだろうか？
ということで、地図をドット絵風に表現してみました。
まずは、すべてImage may be NSFW.
Clik here to view.
で表現。
(↑のマークは弊社商品「BLADE」のロゴマークです）
Image may be NSFW.
Clik here to view.
とりあえずアジア圏のみ。なかなかいい感じですね。
次は、BLADE配信している所はImage may be NSFW.
Clik here to view.、それ以外はImage may be NSFW.
Clik here to view.
。
大きさを調整していい感じに見えるように。
Image may be NSFW.
Clik here to view.
あれ？？？なんていうか…ゲソ？
個人的には目にも見えますが…
Image may be NSFW.
Clik here to view.がゲソに見える原因なのではないかということで
①大きさを統一する
②通常のドットにする
③配信エリアはImage may be NSFW.
Clik here to view.
というようにしようと思いましたが、
③が大変な作業になってしまうのでとりあえず②までにしました。
Image may be NSFW.
Clik here to view.
平面か球体か
もともと、世界版なら球体というのは共通認識でありました。
しかし、まだ配信エリアはアジア圏までなので世界規模にしてしまうと
寂しく見えてしまいます。
そこで、画面いっぱいにアジアを表示する感じで行こうとなっていたのですが、
なかなかうまくいきません。
やっぱ球体でしょ！
ということで、できたのがこちらです。
かなり格好良くなったと思います。
透明感を出し、裏にある陸地が見えているのもいいですね。
光の玉が寂しくないように、首都以外の主要都市などにもポイントを増やしました。
意外と、アジア圏だけでも寂しくないですね。
回転が逆転
最初はいいのですが、日本が地球の裏側に行った辺りから錯覚が起きてしまいます。
さらに、光の玉が裏に行ったとき、玉の開始点と終了点が奥から手前となっていても、
手前から奥になっているように見えてしまいます。
この問題を解決するため
①裏側に行った国の色を白にして、国名・時間を非表示。
②地球の裏側に目隠し壁を一枚置く。ついでにテクスチャも貼りつけ。
という対応を行いました。
Clik here to view.
テクスチャを貼ることで立体感が増すと共に、前面と背面の差が分かりやすくなりました。
ちなみにテクスチャ画像はこんな感じです。
半球に張り付けた際に縁を白くする為に、こんな形になりました。
Clik here to view.
といった感じで、 修正版がこちらです。
これで逆回転問題は大分緩和され、MGVのベースが出来上がりました。
目隠し壁の作り方等のプログラム解説は、別の機会にやろうと思います。
なにはともあれ、このように試行錯誤して出来上がった世界地図を
カッコよく活かした新サービスに是非ご期待ください！
それではまた。
fujimura