「旅箱」でProgressionデビューしました

海外旅行に行きたくなる感動共有サイト | 旅箱(たびばこ)

という写真＆旅行記共有サービスが先週 MTL よりリリースされました。

僕も部分的にですが、Flash 制作で携わらせていただきました。「旅箱」には、ユーザが投稿した写真を Flash スライドショー表示させるコーナーがあるのですが、全2種類あるスライドショーテンプレートのうちの1つを担当しました。それがこれです：

↑僕の唯一の海外旅行である「2001年イタリアの旅」です。（※飲まず食わずで風邪で寝込んでた AdobeMAX Chicago は除く）

写真を閉じて、地図をドラッグしたり拡大縮小したりして、当時の思い出を振り返ったり散歩したりもできます。
制作時のお話になりますが、僕レベルのスキルで、ぶっつけ本番で Progression を使うと、こういう感じになります。
以下長文で、制作過程での紆余曲折をダラダラと綴りますが、Web の専門教育を受けてない僕は割とこんな風に右へ左へぐらつきながらもの作りしてます。邪道でしょうが。

1. お題に迷走

当時すでに制作中だったもう一方のテンプレートの補助的位置づけだったので、けっこう自由に作らせてもらえました。頂いたお題としては「mixi で写真共有してる女子大生」あたりがターゲットということぐらい。この段階でおっさんには想像しがたい難題だったのですが、こちらのエントリの「それをふまえて」の項をふまえたデザインしようとしたんですね。女の子が好きな「雑貨系の切り貼りスクラップ系」サイトを。

ところがどっこい、個人スキルの壁（※低い）にあっという間にぶつかりました：

• 可愛い挿絵イラストが書けない
  →カワイイ系の素材集を買い集めるも、統一感が出せなかったり、レイアウトセンスも要求されることに絶望。
• 曲が作れない
  →単音鳴らす系の曲ぐらい作れるだろうと甘く見てて、作曲できる環境をそれなりに用意したけど激ムズ！
• マスキングテープが全然綺麗じゃない！
  →どうやらマスキングテープでコラージュする手法が可愛いらしいことを知り、マスキングテープをスキャンしたりして ActionScript で”始点と終点を設定すればビビビッとテープをマスキングテープを貼ってくれる TeraTape ライブラリ”などを作るも、これが全然可愛くならない。これもセンスが必要なのか。。

こんなことをしていたらあっという間に時間が過ぎ、締切が近づいてきました。
「やべぇ！とにかくピンク色は使おう！」
とだけ誓い、個人的に安心感を得ようと、サイトの仕組みの構築を先に取り掛かることにしました。

余談ですが：

あとで思い返してみると、この段階では HELLO.WORLD! – SoftBank みたいな縦スクロールの一枚絵で、tutuanna みたいに音連動してて、Girls Trip みたいなカワイイ感をベースに、西田幸司さん（後発ですが Juana de Arco みたいなコラージュオブジェクトが飛び出したらいいなぁ～という、「スキルないのに憧れだけでパクリまくったら結果劣化コンテンツになってしまった」という道を進もうとしていたかもしれません。
日頃 Flash サイトを何百、何千と見てきている人は、こういう「意識的/無意識的に目指してしまおうとする」問題をどう克服しているのでしょうか。

2. Progression デビュー

スライドショーコンテンツということで、小物 Flash ばかり作っていた僕にも、いよいよ「Progression」を使う時がやってきました。ユーザが投稿した写真 DB の XML をロードして、サムネイル展開（子シーン）して、拡大表示（孫シーン）を表示させるという、Progression サンプルそのままの素直な構造をイメージ。この時点では旅サイト向けのアイデアも固まってなかったのですが、とにかく最低限のスライドショーを作ってみました。

Progression サイト内のクラスベースサンプルを元に、xml のロードから少しずつ実装していく地道なアプローチ。そのあたりの苦闘はこのメモ書きエントリで見れます。なので実は本番サイトも本家サンプルをベースに、僕の汚いコードをアドオンした形になっています。

Progression を勢いで触った印象としては：

• ある程度は記述箇所が決められていることで、自分のコード記述箇所を把握しやすい。
• 全ての機能を知らずとも、これまでの自分の AS3 スキルと、分かる範囲の機能を使って一応どうにか動かすことができる。
• 同時期に Progression 関連エントリを皆さんが書かれていたことで相当助けていただきました。

要するに「ライブラリ・フレームワークのメリット」をそれなりに享受しつつ、2日程で Flash サイトとしては動くようになりました。Progression を使ってなかったら果たして作れたかどうか・・・（汗）

「カッコイイ・ダサい」の判断を個人の感性に強いられるデザイン作業よりも、「動く・動かない」で答えてくれるオーサリング作業の方が、僕はやっぱり好きなのだろうか。

3. アイデアを練る

サイト構造ができてちょっとホッとし、これをベースに「ユーザが旅に行きたくなるアイデア」を練ります。自分が一般的なデジタルスキルの女子大生なら、どこまで操作できて、どういう盛り上がり方をするだろうか？みたいな。

いろいろあって、最終的には完成スライドショーのようなことになりました。

写真を撮った場所を地図上にプロットして見せることで、「この裏にこんな建物があったのね。」とか、「こことあそこの距離はこれぐらいだったんだー。結構歩いたなぁ。」「上から見たらこうだったんだ！」とかで隣人と話を膨らませることができたらなと。

最終的には例外処理や内部ユーザのフィードバックとかで多少変わっていったけど、主題はこれです。

4. 反省点

最低限、ユーザが「1回気付けばその後は理解できる」ような UI のつもりでは作ったのだけど、その「1回目の気づき」のための UI がまだ不十分だとは自覚しています。直せるところは直していきたいです。

• 拡大写真を閉じた時の中心点が、その写真を撮ったポイント
• 右上の GoogleMaps ツールバーで地図の拡大縮小や、ドラッグができる
• 実はサムネイル写真とかチケットはドラッグできる
• 写真送りボタンと日付送りボタンの機能の明示化

このあたり、制作者である僕自身はすんなり理解していても、一見（いちげん）さん、ましてや女子大生あたりのユーザに、一発で理解してもらえるかといえば、相当「？」だと思う。そんな中でも Progression のツールチップ表示がある程度救いになってくれました。まさに神の手ｗ

5. ユーザとして投稿してみると

自分の旅スライドを作ってみての感想ですが、位置情報のない写真データを登録画面で緯度経度をプロットしていくのは相当大変だったけど、僕タイプのスライドショーにして、操作が全部理解できているという前提でw楽しんでみると、結構楽しいのではないでしょうか。インドア派の僕でも、人のスライドショーを見てるとちょっと羨ましくなります。

• 「うぉ！これがフォレストガンプが走った道路かぁ～」
• 「ヒマラヤは山やなぁ～。現地人とのふれ合いとか羨ましいなぁ～。」

お時間ある人はぜひぜひ自分の旅と場所を投稿してみてくださいませ。
最終的にはやはり、GPS 付きのカメラが欲しいなぁということでいつもの D90 アフィリエイトです。欲しい。

Nikon GPSユニット GP-1
	ニコン 2008-11-28 売り上げランキング : 2415 Amazonで詳しく見る by G-Tools

Nikon デジタル一眼レフカメラ D90 AF-S DX 18-105 VRレンズキット D90LK18-105
	ニコン 2008-09-19 売り上げランキング : 3881 おすすめ平均 一眼始めるなら低価格モデルよりＤ９０！ これはすごい！ 感動しました。 Amazonで詳しく見る by G-Tools