2009年07月13日

リポマップ開発日記: マーカーに動きを出してみよう


     今ウェブにはGooglemapsを使ったサービスが多くあり、一般的にはそのサイトの

地図上に表示されたマーカーをクリックすると吹き出しが出てそのマーカーに含まれる

情報が表示されます。GooglemapsAPIに用意された関数を使えば簡単に地図上の

指定した場所にマーカーを表示する事ができ、デフォルトではよく見られるピン型の赤い

マーカーが表示されます。大抵の場合このデフォルトのマーカーでも十分なのですが、

指定すれば自分の好きな画像が使用できます。


     リポマップ開発初期の頃は3つの携帯アイコン画像を使い、携帯アプリで取得した

GPS位置情報を元に、その位置情報がどのくらい正確かを3段階で表現して、

3種類の画像を使い分けていました。この機能も実装するのにかなり苦労されたと

思うのですが、見て使われる方達には伝わりづらく扱いづらいのではないかという

声があったため、何か別の形、例えば鮮度で表現しようということになりました。


     鮮度別でマーカーを表示してほしいとの要望を受け、まず自分が考えたのが

絵的にどう表現するかでした。プログラムの方はただjavascriptで今日の日付と

投稿時間を比べているだけなのでそれほど難しくはありませんでしたが、

要望として見た目だけで新しい物が一目でわかるようにといわれたので

まず自分が考えたのが単純に色で表現する方法でした。

 

                                     keitai2.gif  newkeitai4.gif  newkeitai5.gif  newkeitai6.gif



2009年7月8日現在公開されているリポマップのマーカーは写真になっていますが、

6月のデモサイトオープン初期の頃はこれらのマーカーを使って鮮度で表していました。

基本的な部分ができてきたらボタン等でアイコン表示も切り替えられるようにする予定です。



     画像の見栄えは一旦さておき、これでも鮮度で表現していることは一応

わからないことはないかもしれませんが、今一つわかりにくいという指摘をもらい、

どうにかしようと考えた結果、新しい投稿物のマーカーに動きをつけて

表現しようと考えました。

 

     今googlemapsを使用しているサイトではほとんど静止画を使用していますが、

調べてみた所gifアニメーションも使用可能らしいです(ほかにも動きを表現する方法は

あるかもしれませんが)。本来googlemapsのマーカーには.png形式の画像ファイルが

推奨されているらしいですが、今回はgifアニメを作成するということで一枚一枚

パラパラ漫画の要領でドット絵を書いてみました。



                       keitai2.gif  glarekeitai3.gif  glarekeitai4.gif  glarekeitai5.gif  glarekeitai6.gif  glarekeitai7.gif  glarekeitai8.gif  glarekeitai9.gif  glarekeitai10.gif  glarekeitai11.gif  glarekeitai12.gif  glarekeitai13.gif  



絵が全て完成したら絵を繋げるgifアニメーション作成ソフトが必要です。

特別な仕様がなければフリーソフトでも十分ですので今回の場合適当なものを選びました。


Giam ダウンロードページ

http://homepage3.nifty.com/furumizo/giamd.htm


基本的な使い方としては、一枚ずつ絵を指定しながら、1コマにかける時間や、

ループの回数などのオプションを指定して、完成したら書き出していきます。

今回のように単純なアニメの場合それほど苦労もなく操作できました。



                                                         glarekeitaianimation4.gif



筆者はドット絵はほとんど打ったことがないのでこのように雑な動きに

なってしまいました。7月時点で公開されているサイトではこのアイコンは

没になってしまいましたが返ってよかったのかもしれませんね。


筆者とは違って画像編集の技術があれば見た目的にも目を引くマーカーができると

思います。ただリポマップは地図の方ではなくアプリの方がメインなのでマーカーの方

に注目しすぎてもらっても困るかもしれませんね。



ラベル:G
posted by ラクサス at 10:03| Comment(0) | TrackBack(0) | システム開発 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。