- 2009-01-13 (火) 23:50
- blogparts | Progression | works
旅行記共有サービス「旅箱」。僕も一部関わっていますが、本日ブログパーツをリリースしました。
「旅箱」サイト上で作った自分（他人でもOK）の旅行アルバムをブログ上でも見られます。地図はもちろんドラッグできます。写真はクリックで閉じることができるので、地図の縮尺をマウスホイールで変えたりして、思い出の地をご自分のブログ上でブラブラできます。
僕が作らせてもらった「エアライン版テンプレート」の利用者の人はチケット部分（ドラッグ可）から貼り付けコードを表示させてご利用ください。
今回考えたこと
このブログパーツは本体テンプレートと同じデータをロードしているので、やろうと思えば画面サイズ以外は本体サイトと同じことができてしまいます。でもサービス提供側としては本体サイトを見て欲しい（投稿写真も地図も大きくてより楽しいから）。だからブログパーツはあえて表出させる情報を押さえて、「これどこだろう？」「この人どこで写真撮ってるんだろう？」「コメント見たいな。」という気持ちになってもらって「この旅行記を見る」ボタンでジャンプした先でじっくりまったり楽しんでもらえるといいなぁ。
というイメージで作りました。
Progression 製
この Flash ブログパーツも Progression フレームワークで作っています。ブログパーツにフレームワークて大袈裟な！という感じもするけど、作るのがほんとにラクなんですごめんなさい。Progression デビューで模索しながら作った旅箱本体サイトのテンプレートとは別に、もう一度ゼロから作ってみたんですけど、デザイン以外は1日で実装できてしまいました。こうやって使えば使うほど開発効率が上がっていけば嬉しい限りです。間髪入れずに作り続けていきたいところ。なんかネタないかな～。
iframe を初めて使いました
いつものように SWFObject を使って javascript 貼り付けコードで埋め込ませようとと思ったら、今回は外部画像を読み込んでる都合上 Sandbox セキュリティうんたらで画像が表示されないおなじみの現象になって、さてどうしようと思ったのですが、iframe って手があるよと教えてもらってやってみたら楽でした。「きょうびフレームて！」と思ってたのだけど、iframe は iGoogle にも使われてるし、有名制作会社さんが手がけた Flash ブログパーツでも使われているようなので OKOK。
iframe を使った貼り付けコードで、
<iframe src='http://slide.tabibako.com/travels/blogparts.html#?travel_xml=travel-37.xml' width='160' height='341' scrolling='no' marginheight='0' marginwidth='0' frameborder='0' />
みたいにタグを閉じると、これ以降の要素が表示されなくなってしまうので、iframe を使う時は以下のような閉じ方をしないといけないみたい。
<iframe src='http://slide.tabibako.com/travels/blogparts.html#?travel_xml=travel-37.xml' width='160' height='341' scrolling='no' marginheight='0' marginwidth='0' frameborder='0'></iframe>
- Newer: ロールオーバー効果へのこだわり
- Older: パワーブロガーが選ぶ、2008年度ウェブキャンペーンベスト5
