Flickrの画像でパズルを作る

Flickr＋Yahoo! UI Library＋PHP5で簡単なマッシュアップを作るチュートリアルです。

I'll take you through a sample project in this tutorial―a mini-mashup if you will―that will take a photograph, break it up and present it to the user as simple puzzle. We will obtain the image from Flickr, a community photo sharing web site. We'll use the drag and drop functionality from Yahoo!'s User Interface Library so we don't have to worry about coding and debugging our own JavaScript. Everything will be pulled together with everyone's favorite language, PHP.

で、実際に試す場合、いくつかポイントがあります。

• Yahoo! UI Libraryをあらかじめダウンロード・展開
• 4ページ目のSending the Piecesの一番下にあるスクリプトをfetch.phpとして保存
• 6ページ目のConclusionにあるスクリプトを任意の名前で保存
  • 「document.getElementById("randomizeBtn").click = randomize;」のrandomizeを「randomize()」に変更
  • 「id="randomBtn"」を「id="randomizeBtn"」に変更
• 6ページ目のスクリプトを保存したディレクトリ直下にtmpディレクトリを作成し、書き込み権限を与える

画面自体は非常に簡単なものですが、やはり面白いですね ＞ マッシュアップ