誰にでも作れる「年賀状を届けにいくよツアー」

かなり多めなので順番にいきます。

FlashとGoogleMapsの連携

えと、はじめにFlashとGoogleMapsの連携ですが、コンポーネント使ってます。
Advanced Flash Components (AFC) にある、G Mapってヤツです。 コンポーネントなので、開発者じゃなくてデザイナーさんでもサクっと配置することからはじめられちゃいます。
もちろん、Google非公認のコンポーネントで、GoogleMapsのキー取得もいらない。
ASから勝ってにGoogleMapsの画像を読み込むという仕様。
なので、GoogleMaps側で画像のURLを変えられちゃうと、このコンポーネントがアップグレードさぜるを得ないワケで。僕が一年前に実装してたときも、ポンポンとアップグレードしてたしｗ

今回の実装にあたっては、目的地までの残り距離を計算したいと思ってて、そこはG_MapコンポーネントではAPIがなくて、JS側にさせてます。そのためにGoogleMapsのキーを使ってるワケです。
Flashでのコンポーネントの座標移動にあわせて、そのたびにExternalInterfaceでJS側で距離計算させてます。


GoogleMapsの表現に関しては、最終的には普通になっちゃったんだけど、開発段階では BitmapData をガシガシいじってたんです。
Flash IDE での開発中は「よっしゃスゴい」とか言ってたんですが、HTMLに載せた途端にマップが表示できなくなるという現象にハマりました。Flashで外部画像を読んだときのセキュリティの問題ですね。GoogleMapsはもちろん、crossdomain.xml置いてないので、BitmapData.draw()ができないできない。

でそのとき、「ここで引き下がってたまるか」と思って、「GoogleMapsの画像じゃなくて自分のサイトのドメインならいいんじゃね？」と思って、PHP側でプロキシスクリプトを作成。Flashのコンポーネントが直接GoogleMapsの画像を読み込むのではなくて、一度 naggg.jp のPHPにアクセスして、PHPがGoogleMapsの画像を読み込みそれを複製してFlashに返すというコード。はい、はっきり言って著作権侵害しまくりｗ この方法、たしかにヤバいけど「どーせ身内にしか公開しないし」と思って、僕のドメインでガシガシ画像キャッシュを作成して（画像盗用ですね）、もちろん、Flashでの BitmapData.draw() も問題なく実装できるように！
「っしゃ！」と深夜に自宅でひとりガッツポーズを取ったのもつかの間、なんとそれから一時間ほど経過してから GoogleMaps から 403 Forbidden が返ってくるようにっ！！マジでグーグル先生勘付くの早すぎだし。
「これがGoogleMapsなのか！」と慌てまくって、プロキシ作戦は失敗に終わりました。 そこらへんの苦悩はこちらとかこちらのエントリでボヤいてました。マジで泣きそうだったんすよ。

郵便番号 → 緯度・経度のところ

コンテンツの冒頭、郵便番号 → 緯度・経度の変換のところは、自作DBとマッシュアップを連携させてます。
もともと郵便番号とマップの連動は、某大手チェーンさんのサイトリニューアル案件の際に提案していて、半分くらいできていたのですが、その案件自体がなくなって行き場がなくなって。そのロジックをプライベートで再利用したんですね。

えと、郵便番号とその住所をまとめたCSVは、国土交通省国土計画局　国土情報整備室　街区レベル位置参照情報ダウンロードサービスからダウンロードができます。 12万行なのでもちろんエクセルから開けない魔のCSVです。かなりデータ量重いです。なので、テキストファイルと正規表現でデータの軽量化を行っていきます。軽量化して4MBに。これならなんとかしてPHPで操作できるだろ。
PHPで郵便番号から住所を引き出す部分は自作。

次にこの住所をマップで使えるように緯度・経度に変換しなきゃいけないんだけど、当時は、GoogleMaps API で住所を緯度・経度に変換するジオコーディングはサポートされてなくて。今はできるみたいですけど、当時は自作する必要がありました。
そこらへんはGoogle Maps APIで日本の住所から緯度・経度を求める方法 - F.Ko-Jiの「一秒後は未来」で詳しくまとめられています。まんま実装させてもらいました。

なので、順番としては、Flashで郵便番号入力 → 自作PHPで住所名に変換 → それをGoogle AJAX Search API で緯度・経度に変換 → それをもとにFlashで画像読み込み →ツアー開始、どんだけまわりくどいんだｗ

動画のところ

ここは、たぶんほとんどの人には伝わってないとこだけど、動画に出てくる目隠し、ドラッグ＆ドロップできます。その速度にあわせて動画が変形するんですが、その外向きな意味で、コンテンツのコピー「内向的禁止」を伝えたつもりだったんだけど、たぶん誰にも伝わってないわなｗ
ここの変形は、ホントは地図にかけたかった効果を再利用。
目隠し座標はASのキューポイントで制御して、その座標情報と歪んだ座標系を変換して、どんなに変形しても目隠しがあるべき位置に戻るようにしてみました。
なお、自宅で正月休みにこんな動画を撮影してたのはスゴイ寂しかったです。

アクセス解析と動画のオチ

激しくどうでもいいとこだけど、ちゃんとログをつけてアクセス解析も実装していて、このツアーを動画のオチの最後まで閲覧したのは、だいたい20％ほど。動画が身内ネタでツマらないから、普通の人は最後まで見ないワケで。だからこそ、ああいうオチを実装しています。まだ見てない人はヒマなときアクセスしてみてください。

フォント埋め込みのところ

郵便番号の入力を終えるとそこと一致する住所名が表示されますが、あそこは埋め込みフォント使ってます。 技術者ならご存知のとおり、日本語フォントの埋め込みは文字数の多さからファイルサイズが膨らむワケで。 基本的に地図画像の読み込みに時間がかかるので、フォントを最小限に埋め込みたかったんです。 12万行もあるCSV（およそ270万文字）にある文字すべてを埋め込めばいいってことですね。 だけど、次の画像の欄に、CSVすべてをコピペすると失敗になります。270万文字のコピペだし、やっぱなーという感じ。
  そこで、270万文字からすべての重複を取り除くマクロを作成。
そいつで270万文字 → 4000文字にダイエット。容量でいうと500KBくらいまで落とせたー。
激しくどうでもいいところだけど、ここもがんばったなーと。
このマクロとかいつか拡張として配布してみたいですね。

ローディングの誤解

下記メッセージに関して、一部で賞賛されてましたが、これはボクの技術力のなさです。

ホントはローディングバーと作りたかったけど、地図読み込みの進捗具合をコンポーネントから取得できる方法がなくて。めんどくさかったからテキストでいっちゃったみたいな。

ふぅ。言いたいこと言ってやったよポイズン。俺は俺をだますことなく生きていくよｗ
一年に一回くらいこういうオナニーな自分サイトを作っていけたらなぁと思います。