バルーンの中では結構Ajaxなことが出来る
Posted By 茜丸@昼勤務 on 2009年9月24日
カラーピッカーをバルーンの中で
バルーンの中で出来ることが大幅に拡張されたとの素敵な情報を、Bugsなうさぎの憂鬱さんから仕入れてから数日。それまでやり損ねていたことを次々と処理して、そろそろバルーンに手を付けてみようと思っていたら、早速、Earth on Cubit-SightのTakashi.U氏が 
jQueryを用いてアクションができるよ！という投稿を見つけました。
ことこのウェブサイトもWordPressに移行してから、shadowbox.jsというＡｊａｘなエフェクトライブラリを導入していたりするわけなのですが、あまり派手な運用はしていません。もっと動的なサイトに出来れば面白いことができるのかもしれませんが、Ajaxライブラリの活用法で思い付くというか、過去にやったのは、外部HTMLファイルの呼び出しくらいで、てんで知識がないわけで・・・
ただ、世の中には、こんな自分みたいなへなちょこ野郎でも使えるキットを配布してくれているサイトがたくさんあります。また、フリーウェアでAjaxなページを作れるものもあったりするので、本当に動的なサイトを作るのに、十分な環境が整ってきているなと感じます。
ということで、うちのサイトでこっそり使っているAjaxライブラリとして、 prototype.jsを使って、ひとつプレイスマークを作ってみました。技術的な説明は全くできませんが、動作原理とここまでできるんだという感想、そしてこの実験の前にやった失敗談をひとつ紹介しようと思います。
まず、jQueryとならんでよく利用されているAjaxライブラリとして、このprototype.jsがあります。書籍やウェブでの紹介もたくさん出ているので、お手軽に使えるもう一つのライブラリとして覚えて置いて損はないでしょう。それだけじゃなく、これがあることで、ウェブページを平べったい簡素なページから、もっともポピュラーなページの動的呼び出しが実現できたりします。ユーザにとっても、ウェブページ全部を読み込まず部品単位の呼び出しで済むので、トラフィック的にも有効ということで、普及した最初のテクとも言えます。
実は、これをやろうとして、失敗しました。バルーンの中でHTML呼び出しをしてみたのですが、出来ませんでした。クロスサイトスクリプティング
やらなにやら危険な匂いのするセキュリティ上の問題からそういったことはできないようになっているのかなと思っていたりしますが、原理がわからんので説明できません。ということで、それを諦めて、スクリーンショットの様な配布されている 
カラーピッカーをバルーンの中で実現してみました。
このカラーピッカーは実現するためのJavaScript毎配布されていて、誰でもページに実装できます。今回は実装というよりベタ張りしてみただけなので、全くもって利用価値がないのですが、ここまでバルーンの中で動的なことができるとなると、HTMLのタグがどうとかそういうレベルはすっ飛んでしまいます。これで、外部HTMLを呼び出しできるようなコードで使えるものがあれば、動的なオーダーフォームや、Flashに頼らないコンテンツが作れそうですね。実のところ、バルーン内にiframeで呼び出すことは出来るのですが、その場合、iframe内でのリンクはバルーンの中で開いてしまいます。これではうまくないという時に、呼び出しができたら、面白いことができると思っています。
P.S. – CSSなんですが、普通にバルーンの中で使えます。つまり、バルーンの中でのコンテンツの演出が結構派手にできますよ。今後はベタにバルーンの中に書き込むのではなく、CSSでスタイルを作っておき、綺麗な枠組みで表示ができそう。このAjaxライブラリと組み合わせれば、例えば、１バルーンの中でアルバムが出来たりするかもしれません。
付記：オルソ化空中写真WMSオーバーレイ改４として、リリースしました。是非使ってみてください。今回のリリースで今までは最も古いレイヤだけだったのが、３種類レイヤが追加されています。それぞれ年代が異なり、古い物ほどサポート範囲が広いですが、新しいものもこれで見ることが可能です。都市圏でなければ、真っ白になってしまいますが。
Download – Color Picker on KML
▼ このエントリーの関連記事 ▼
Comments
Leave a Reply
注記: コメントは管理者が承認されるまでの間遅れて表示されます。承認後、表示されるようになります。コメントを再送信する必要性はありませんスパムコメント防止の為、ご協力くださいませ。