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) | システム開発 | このブログの読者になる | 更新情報をチェックする

2009年05月22日

MacとWindowsの橋渡しコラム

第1回:Excel初心者のための「Excelでウェブページの画面設計書を作ろう」

私は学生時代ずっとMacを使っており、WindowsやOfficeはほとんど初心者でした。
しかし、やはりまだまだWindowsの世の中。
職場ではExcelを使って書類を作らなければならない場面もあり、
避けてばかりもいられなくなってきました。

このコラムではそんな私が『本当はMacを使いたいのに』という心の叫びをこらえつつ
Windowsを使って苦労したことや、周りの人に助けてもらって身に着けた仕事術を紹介しようと思います。

※Excelはバージョン2003を使用しています。


ところで、画面設計書とはなんでしょうか?

m001a.gif

簡単に言えば、上図のようにウェブページの
レイアウトと機能の説明を兼ねた文書のことです。

このような書類はExcelで作ることが多いです。なぜでしょうか?
まずソフトに必要な条件を考えてみると、

1.簡単な図形を組み合わせて図を描けること
2.図形と箇条書きなどの文章を自由にレイアウトできること
3.複数のページを一つの書類で管理できること(タブ機能など)

があります。さらに、仕事用の文書として通用するためには

4.印刷した時のレイアウトをコントロールできること
5.各ページにヘッダが付けられること(プロジェクト名、作成者、作成日、更新日などを書きます。)
6.他の社員が再編集できるようになっていること

が望まれるでしょう。

そう考えてみると、Excelは確かにこれらの条件を全て満たしていると言えます。

ただし、Excelは特有のクセがありますので、それを
知らないまま作業にとりかかると、後で大修正が必要になってしまうかもしれません。

今回は、その注意すべき性質と、Excelの便利な機能を紹介しようと思います。

Excelの注意すべき性質

Excelには、文字列の長さが編集中と印刷プレビューとで変わってしまうという厄介な問題があります。また、この変化の度合いはプリンターのドライバーに依存しており、
ユーザーの環境によって変わるようです。職場のプリンターではかなりの違いが見られました。

特に文字がテキストボックスやセルの端で切れてしまったりするので、
入力する文字に対してセルやボックスの幅に余裕を持たせておくことが望ましいです。
(印刷プレビューでダメならフォントを小さくするという手もありますが・・・)

m001b.gif


とにかく印刷時のトラブルを避けるために、
レイアウトが直しやすいような文書を作ることをお勧めします。

また、改行をセルの端での自動改行にしていると、上記の問題で端が切れてしまうことがあるので、
改行は手動で入れるようにしておいた方が安全です。

印刷範囲を決める

印刷範囲は後でも変更できますが、初めに決めておいた方が後々ラクです。
範囲指定と微調整は、上のツールバーの【印刷プレビュー】でできます。
印刷範囲を設定すると、シートの中に目安の点線が描かれます。

1ページに印刷されるセルの範囲を大きく変えたいときは、
【表示】メニューの【改ページプレビュー】を選んで範囲を設定します。

すると印刷範囲だけが表示されるモードになるので、
シート全体を見たいときには【表示】の【標準】を選びなおしてください。

【改ページプレビュー】では印刷範囲に納める領域を広げられて便利ですが、
当然その分全体が縮小されてしまうので気をつけてください。


セルの形を決める

さて、次にシート全体のセルの形を決めましょう。

レイアウトを自由に作りたいときは、列を短くしてグリッドにしてしまうことをお勧めします。
シート全体を選択してから列の幅を変えると、全部の列幅を一斉に変化させることができます。

セルの中に文字を書くとき、エクセルの仕様で端で切れてしまうことがありますが、
セルの幅を変えると全ての行に影響してしまうので、印刷範囲を直すのが大変です。

セルをグリッドにしておけば、セルの幅を調節せずに文章を好きな位置に動かせる
ので、レイアウトの修正が簡単になります。

m001c.gif


図形を描く

デフォルトでは下にツールバーがあります。
かなり多種多様な図形が用意されているので、バリエーションには困らないでしょう。

図形やテキストボックスは、
新しいオブジェクトが上に被さるレイヤー式になっているので、
図形の順番を変えたいときには右クリックのメニューで変えます。

また、ツールバーの一番左の矢印を使えば、複数の図形をまとめて選択することができます。


・その他のTips

a. Excelはメニューの階層が深いので、なるべくツールバーの中から機能を使う方が早いです。
b. 罫線のツールは上にあります。また、オプションで自由に罫線を引けるツールバーがあります。
c. f2ボタンでセルの中身を編集できます。
d. 1つのセルの中で改行するにはAltキー + Enterを押します。
e. 【書式】メニューの【行】からセルの幅を文字の大きさに合わせる自動調整ができます。
f. 【セルの結合】は上のツールバーにあります。
g. 下のタブで複数のシートを切り替えることができます。


以上、Excelを使って自由なレイアウトの文書を作る方法を紹介させていただきました。
普段から使っている方には常識だったかもしれませんが、何かの役に立てば幸いです。

ところで、以上の性質を理解すればExcelでなくても同じような文書を作ることができます。

たとえばOpenOfficeやApple iWorkのNumbersなどでは、ほぼ完璧に図形入りのExcel文書
の読み書きを行うことができます。
(googleDocsのスプレッドシートは今のところ、表を作る機能しかないので無理そうです。)

特にNumbersでは、一枚のシートに複数の表をオブジェクトのように自由に配置できるので、
簡単に美しい文書を作ることができてしまいます。

残念ながら表のフリーレイアウトはExcelでサポートされていない機能なので、
最後にxls形式に戻す場合は、そのようなレイアウトは再現できません。
しかしMacを持っていたらぜひ使ってみてほしいツールの一つです。
ラベル:leopard
posted by ラクサス at 14:55| Comment(0) | TrackBack(0) | システム開発 | このブログの読者になる | 更新情報をチェックする

2008年10月07日

google デベロッパー交流会(第7回)

google デベロッパー交流会(第7回)に参加してきました。

今回の内容は、「Google Maps API」ついての公演とセッションでしたが、興味深いQAのやりとりがありましたので紹介します。

Q.Googleマップのライセンスは商用利用は有料なのか?
A.Googleマップ(API)は、個人、商用問わずユーザーが無料で使用できるWebサイトであれば、無料で使用できる。会員のみ閲覧できたり、イントラネット内などでは無料で利用できないが、会員制のサイトでも登録が無料の場合は、かなりグレーではあるが無料で利用できる。


Q.Google マップの利用規約とGoogle マップ APIの利用規約が微妙に異なるが?
A.Google マップの利用規約は英語のページが最新の規約になり、規約は随時更新されている。日本語に翻訳された利用規約は、最新の情報への更新が追いついていないので、英語のページを参照すべき。


Q.Google Static Maps APIの画像は「1ユーザ(1IPアドレス)あたり1日1000枚」までの制限があるが、日本のモバイル環境では少ないのではないか?
A.現在の利用状況で、1000枚の制限を超えた事例は世界で数例しかなく、日本のモバイル環境でも1000枚を超える事例はない。もし、制限を超えた場合は報告して欲しい。


※出来るだけ正確にやりとりの内容を再現していますが、メモを元にしているため多少の表現の違いがあるかもしれません。間違いがあればご指摘ください。
ラベル:どなん
posted by ラクサス at 15:49| Comment(0) | TrackBack(0) | システム開発 | このブログの読者になる | 更新情報をチェックする
×

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