cover_django_3_by_example

ログイン後のダッシュボードにブックマークレット機能と Like 機能を追加しました 投稿一覧へ戻る

Tags: Django , Python , update , jQuery , AJAX , bookmarklet , JavaScript

Published 2020年5月15日10:25 by T.Tsuyoshi

今回、ブックマーク機能と 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 しているユーザーをクリックすることでそのユーザーのプロフィール情報を表示する機能を実装中です。

この投稿をメールでシェアする

0 comments

コメントはまだありません。

コメントを追加する(不適切と思われるコメントは削除する場合があります)