そういえば1年程前にYahoo APIを使ったサンプルページを作ったのでupしてみます。
当時はプログラマになって1年ちょい経った時で、そろそろ何か自分で作ってみたいなぁと勢いだけで作ったものになります。
Yahoo APIを使ってサムネイル画像を取得しドラッグ＆ドロップで画像を動かしたり、選択した画像をZipでダウンロード出来るものです。振り返ると、そんなの誰も使わねぇ～と思うのですが初めて作ったものですので恥を忍んで晒します。
これが作ったサイトです。GazoGet
遊び方
検索窓に適当に文字入力
→Searchボタンを押下
→検索で引っかかった画像をDropZoneにドラッグ＆ドロップ
→ダウンロードボタンや削除ボタンが等が出てくる
上記操作後に、DropZoneにドロップした画像をzipファイルでダウンロード出来たり、Mr.Delete君に画像をドロップすると食べてくれたりしてくれます。
削除ボタンでDroｐZoneの画像が全て削除されます。DroｐZoneから画像を削除してもHistoryから画像をDroｐZoneに再び配置する事も可能です。
Historyに表示されている画像をダブルクリックするとスライドショーを開始します。
大体そんな感じです。それ以外の機能は触ってくれれば大体分かるかと思います。
※IEとオペラ以外は、まぁそれなりに動きます。
※あと、何故か適当な英語使ってますけど気にしないで下さい。
上記サイトを作るに当たって参考・利用したライブラリ/サイト
ライブラリ
www.prototype-ui.com
・いわゆるCarousel系のライブラリです。
※このライブラリを使用するためには、prototype.jsとscriptaculous.jsが必要になります。
※どちらも有名なのでググればすぐtipsとか出てくると思います。
http://xuxu.fr/ressources/javascript/splash.image/
・画像をスライドショー表示できるライブラリです。
※このライブラリの使用方法は以下のサイトで詳しく紹介されています。
寺子屋未満
サイト
Yahoo 画像検索Web API
・Yahoo APIの利用方法等が書かれています。
作成した時の流れ
script.aculo.usで何か作りたいと思い立つ
→www.prototype-ui.comを見つける
→動的に画像を取得したら面白そう
→Yahoo APIを使えば簡単に画像が取得出来る事に気づく
→サーバサイド（PHP）の実装
→script.aculo.usのドラッグ＆ドロップとスライダーを組み込む
→まだ物足りない
→splash.imageを見つけ、画像のスライドショーを組み込む
→どうせならダウンロード出来るようにしちゃえ！
→サーバサイドの修正
→デザインの調整 ※これに一番苦労した記憶が。。
→完成
とまぁそんな感じで作りました。
作っている最中は、ドラッグ＆ドロップとかが簡単に出来るライブラリって何て素敵なの！って感じでした。次はライブラリを作れる様になりたいなぁと思って既に1年以上経ってますね。。はい。
ライブラリの詳しい使い方とかどう組み込んだかは、なにぶん昔の事で覚えていませんので、割愛します。すいません。。
後、ソースもめっちゃ汚いです。
本当に今更ながらこんなの誰が使うねんって感じですね。でも、また何か作りたいなぁと思います。
※IEだとGazoGetのMr.Delete君が反応しません。IEってマウスダウン中にマウスオーバーって効かないんでしょうか？
