ログイン後のダッシュボードにブックマークレット機能と Like 機能を追加しました 投稿一覧へ戻る
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
コメントはまだありません。
コメントを追加する(不適切と思われるコメントは削除する場合があります)