アークウェブのブログ

次のサンプル画面を見てください。

画像にタグを付けるサンプル

ここでは、画像に関連するpopular tagsからタグをつけるか、自分で新たにテキストフィールドへタグを入力して、追加できます。
※実際には追加できませんが^^;

この画面、Web 1.0的なサイトでは普通にあった画面の機能ですが、こういったユーザインターフェイスは必要な時に表示させるのがよいと思いませんか？

「■タグを追加」がクリッカブルになっていて、クリックしたら下にフォームが表示するような形でも良いかもしれません。ただ、この場合は下が動的に変わるのでバランスが悪くなる可能性が高いです。

そういう時に、LITBoxを使えば↓はい、スッキリこのとおり。

画像にタグを付けるサンプル (use LITBox)

ここでは、無駄なアクセスを避けるためにAjaxを利用せず、type:'alert' を指定して、JavaScript内にBOXの中身を書いています。

[タグを追加]ボタンをクリックしたらBOXを表示し、[追加する]ボタンをクリックしたらサーバへsubmitされ、再度同じ画面を表示させるような仕組みです。
※実際には追加できません！

ここで1点、気になることが。
タグを新規に追加したい場合は[タグ追加]をわざわざ押さないといけないのか！という面倒くささに気づきました。

そこで、デフォルトでテキストフィールドによる入力を許すようにして、popular tagsだけ必要に応じてLITBoxで表示するようにしてみましょう。

画像にタグを付けるサンプル (use LITBox and textfield)

popular tagsからタグのリンクをクリックした時、テキストフィールドへタグを追加しています。
一応、既に登録されている場合は追加してませんが、サーバに既に登録されている'サイパン'は判定してないです ^^; まぁ、それは置いといて、これでだいぶインターフェイスとして良くなったように思います。

また、これならもしJavaScriptが使えない環境の方でも、タグを追加することができますね。

LITBoxの応用例をいくつかあげてみます。

- ログインフォームを表示しっぱなしにするのではなく、必要な場合にだけLITBox内でログインさせる
-- LITBox内から新規登録できても良いですね

- 住所入力フォームで、LITBox内から郵便番号を入力すると、元の画面の住所フォームに値が自動で入力される

- type:'window'の非同期通信で検索結果を表示して、リンクをクリックすると元の画面の何かに影響を与える

メインの入力を助けるような処理をLITBox内で実装しておき、ユーザは必要に応じてBOXを呼び出して利用できるわけです。

最後に、今回動作確認したブラウザのバージョンを挙げておきます。

Windows XP
- Firefox 2.0
- IE 7.0
- IE 6.0

Windows 2000
- Firefox 1.5.0.8
- IE 6.0

Mac
- Firefox 2.0
- Safari 2.0.4