今回、ブックマーク機能と Like機能を実装しました。以下が画面構成と使用手順になります。

ログイン後のダッシュボード画面です。"BOOKMARK IT" ラベルをブラウザのブックマークバーにドラッグアンドドロップします。

これは、ブックマークレット JavaScript コード本体を起動するのではなく、当サーバー上のブックマークレット本体への URL を含む読み込み用リンクコードになります。

ブックマークバーにリンクが作成されます。

他のサイトを訪問し、ブックマークバー上の "Bookmark it" リンクをクリックすると、そのサイトに拡張子 .jpg、.jpeg の画像が含まれている場合は画面右端のようなブックマークbox が表示されます。

このスクリプトが実行しているのは、まず jQuery が読み込まれているかを確認し、読み込まれていない場合はサイトのソースに script タグを追加し src として ajax.googleapis.com の jquery.min.js を指定します。読み込みが成功すればブックマークスクリプトを実行します。

スクリプト本体では、ブックマークbox 用の css スタイルシートをサイトに埋め込み、img タグが見つかればその画像を URL 情報と共にブックマークbox に追加、表示します。

このブックマークbox 内の画像がクリックされると、画像の URL とタイトルをパラメータとしてこちらのサイトへのリクエスト URL を作成し、新たに開いたブラウザウィンドウに表示します。

このリクエストを受け付ける view は @login_required デコレータで修飾されているため、ログインをしていない場合はまずログイン画面が表示され、ログインすると画像をブックマークするためのページへリダイレクトします。

ブックマークbox から送られてきたリクエストを元に表示されるページです。「画像をブックマーク」ボタンを押すと、該当する画像が保存されます。

保存が正常に終了すると、画像の詳細ページにリダイレクトします。

このページではこの画像が気に入った場合に投票する LIKE ボタンと、現在何人のユーザーがこの画像を LIKE しているかを示す情報が表示されます。

LIKE ボタンを押すとお気に入りの人数に反映され、ボタンが UNLIKE に変更されます。LIKE ボタンと UNLIKE ボタンはトグル関係にあります。

ダッシュボードの Images メニューを選択すると、他のユーザーのものも含めて、登録されている画像が全てリスト表示されます。お気に入りの画像があればクリックしてみてください。その画像の詳細ページへ移動します。

その画像を LIKE しているユーザーがすでに存在している場合、そのユーザーも表示されます。

現在、LIKE しているユーザーをクリックすることでそのユーザーのプロフィール情報を表示する機能を実装中です。