■ブラウザ上で気持ちよく使えることを目指した写真ビュアーを作ってみました。かなりのピュアAjax アプリケーションでもあります。

• おもな機能

  • JavaScriptによる画面更新なしの写真閲覧
  • スライドバーで画像サイズの動的変更
  • 画像のドラッグ＆ドロップによるタグ管理
  • 写真タイトルなどのテキストをその場で編集（in-place-edit)

• こちらでお試しください（アクセス集中すると重いかも…）

  • http://piccy.dotimpac.to/

■[追記]　公開後の問題を修正し機能を追加したver.001をリリースしました。 - http://collisions.dotimpac.to/works/web/piccy001.html

これはなにか

■ブラウザで使用するweb上のフォトアルバムソフトです。管理が簡単でストレスなく見られる、というものを目指しています。

以前、旅行写真を公開するような機会があって、管理がらくちんでかっこよく見られるアルバムソフトというのを探していたんですが、探しかたが悪いのかうまく見つけられませんでした。そのときは結局SPGMを使ってみて、フォルダに画像をコピーするだけでアルバムを表示してくれるのは楽でよかったんですが、画面遷移がかったるかったり、プラグインを入れないといけなかったり細かい情報をテキストで書いてディレクトリに置かなければならなかったりとなかなかうざったい思いをしました。

いっぽう、ストレスなくきれいに見せるという意味では、たとえばzphotoのようなコンパイルしてflashファイルにするようなものもいいんですが、写真を増やしたり差し替えたりといった場合の手間があるのでちょっとなー…と。

で、その中間というと、やはりAjaxなのではないかと。ちょうどTiddlyWikiやLesserWikiのUIをほかのものに使えないかなと考えていたところだったので、思い立って作りました。

機能の詳細

■基本的にはデモサイトで触ってもらえばわかるかと思います。

• http://piccy.dotimpac.to/

フォルダウインドウのオープン／クローズ

TiddlyWikiスタイルと思ってもらっていいです。フォルダを開くと中にある写真画像が一覧できるウインドウが開き、写真をクリックするとそのウインドウの下に大きな画像を見るウインドウが開きます。それぞれのウインドウは個別に開閉できます。

ズームスライドバー

写真ウインドウにはそれぞれスライドバーがついていて、表示画像の大きさを変えることができます。

フォルダ／写真タイトルのin-place-edit

フォルダと写真のタイトルは編集することができます。タイトルの文字をクリックすると編集フォームに切り替わり、その場で編集できます。

ドラッグ＆ドロップによるタグ編集機能

いわゆるタグというか、いくつかのフォルダから写真を選んで別のアルバムをつくることができます。

タグの編集は写真をドラッグ＆ドロップすることで行えます。タグのウインドウに写真をドロップすると、非同期リクエストを行い情報を自動的に保存します。

script.aculo.usを使ってみた

■ご覧のとおり、JavaScriptをふんだんに使用していてスゲー感じになってますが、見栄えの部分ではscript.aculo.usというJavaScriptユーティリティライブラリを全面的に利用しています。使いかたについてはLesserWikiをものすごく参考にしました。

具体的にどのあたりを使っているかというと、

• Effect.Appear
  • ウインドウや写真がフェードインしてくるところに使用してます。これがあると見栄えがだいぶ違いますよね。
• Effect.HighLight
  • mouseoverでのハイライティングに。
• Draggable
  • 写真をドラッグさせるために使っています（スライドバーも）。やったことある人はご存知の通り、JavaScriptでのマウスポインタ位置とレイヤーの相対位置を調停するのは死ぬほど面倒なんですが、
    > new Draggable(‘idofelement’,[options]);
    とかエレメントを指定してやるとそれだけでドラッグできるようになるという。とはいえ、ワナがいろいろあって面倒なことをしてますが…。
• Droppables.add
  • こっちはタグウインドウのドロップイベントリスナ。ライブラリがなければ絶対にやろうと思わなかっただろう処理です。
• Ajax.inPlaceEditor
  • タイトル編集のその場で編集モードを自動設定してくれます。すげえ便利。

といったところです。ただデメリットとして、script.aculo.usフルセットとprototype.js（必須）でファイルサイズが130KBくらいなので、ページのロードがちょっと遅くなるかなと。

それとあと、データ関係は全面的にJSONを採用してみました。なるほど便利かもと思いました。

今後

■まだつくりたてほやほやでひどいものなので、もうちょっとなんとかしてからサポートしたいと思います。

• IEだとときどき表示がくずれます。謎です。
• IEだとドラッグ座標がずれます。これも謎です。
• ユーザ管理をして、タグ編集はログインしないとできないようにします。

使えるかどうかわからないですが、いちおう現状のアーカイブも置いておきます。ドキュメントはありません。ご参考に。

• http://piccy.dotimpac.to/release/piccy_20050926.zip