- 2006-10-21 (土)
- diary
AID-DCCさんのサイトに影響を受け、Google Maps APIをいじってみました。
昨日購入した雑誌「WebDesigning 11月号」の古旗一浩さんの記事「Ajaxハジメマシタ」で、Google Maps APIを使ったフォトギャラリーのサンプルがあったので挑戦してみました。
まず、256×256で区分けできるような写真素材を用意しないといけないらしい。記事では4096×4096の画像を用意し、筆者のPhotoShopCS用のスクリプトで自動で区分け＆保存作業をしてくれて、必要な画像を用意できるそうなのですが、僕のはPhotoShop6なので使えませんでした。仕方ないのでちまちまスライスして画像を用意しました。
僕だけかもしれませんが、雑誌からのダウンロードサンプルが壊れていて、そのPhotoShopCS用の処理スクリプト自体も書籍のを新規で手打ちで書かないと手に入らない気がします。僕と同じく、力技でやる方は、
- gphoto.htmlと同じ階層に0,1,2,3,4という4つのフォルダを作成
- 4096ピクセルの画像を、256個の画像にスライスする（1ブロックが256px×256px）。左上のスライスが、「0,0.jpg」その下が「0,1.jps」「0,2.jpg」・・・「0,15.jpg」、隣の列の上から「2,0.jpg」「2,1.jpg」・・・・・・・「15,15.jpg」で全256枚。これを「4」フォルダに保存。
- 次に一辺4096pxのオリジナル画像を2048pxにリサイズ、また256pxずつ区分ける。「0,0.jpg」「0,1.jpg」・・・・「7,7.jpg」。この64枚を「3」フォルダに保存。
- 同じく、1024pxにリサイズして、16枚にスライス、「2」フォルダに保存。
- 512pxにリサイズして、4枚にスライス、「1」フォルダに保存。
- 256pxにリサイズして、スライスは不要。「0,0.jpg」1枚を、「0」フォルダに保存。
やたら時間がかかりました。Fireworksでやればもっと早くできたかも。後はサンプル通りやれば、完成しました。
手元にGoogleMaps関連本がなかったので、「Google Maps API Documentation」のオンラインマニュアルを見ていろいろ実験。まだ公開するレベルではありませんが、やりたいことは大体実現できそう。（グリッドで並んだ商品サムネイル画像から詳細画像までをGMapsAPIで見せようと思っていて、詳細情報のポップアップを表示したり、MovableTypeのXHTMLからロード、データのソート、半透明黒PNGのオーバーレイでアクティブ・非アクティブを分類などなど←個人的メモ）
ただ、最小画像表示の時、横方向にループで敷き詰められるのに、縦にはループで敷き詰めることができないようで、グレーの背景が見えてしまう。せめてグレーの色を変えたいのだけど方法が分かりませんでした。変更できないのでしょうか？
勉強のための本として、洋書で買って放置してたら、日本語版が出てしまった、
Google Maps Hacks -地図検索サービス徹底活用テクニック-
と、今回の記事の筆者、古旗一浩さんの、
Google Maps API逆引きクイックリファレンス―WEB2.0対応
が良さそう。というのも、同じ著者の
実践Web2.0 Ajaxプログラミング入門
が、Ajaxについて本当に入門から丁寧に解説してくれている本で、（寝転がりながらさっと読むだけで、なんとなく分かった気になるぐらい）分かりやすかったので、好感触だったからです。
- Newer: Flashチュートリアルビデオを作るために必要な機材
- Older: Flashで画像を台形に変形させる方法
Comment:0
Trackback:0
- TrackBack URL for this entry
- http://www.trick7.com/blog/mt-tb.cgi/356
- Listed below are links to weblogs that reference
- Google Maps APIで遊ぶ from trick7.com blog
![FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]](http://images.amazon.com/images/P/4881664573.01._SCTHUMBZZZ_.jpg)
