ブックマーク仕様書

2020年09月03日(木)

今回作成したブックマークの主な機能は以下の３つ

jsファイル内にfavorite-entry.jsとfavorite-index.jsの２つを追加する
css/destファイル内にfavorite.min.cssを追加する
includeファイル内にfavorite-entry-button.html,favorite-entry-list.html,favorite-index-list.htmlの３つを追加する
include/head内のlink.htmlからfavorite.min.cssを読み込む
エントリー内にブックマークボタンを追加する。include/entry-body.html内のボタンを置きたい位置に@include("/include/favorite-entry-button.html")を記入する。この例で言うとentry-titleの直後に追加している。
エントリー内にブックマークリストを追加する。include/entry-body.html内のリストを置きたい位置に@include("/include/favorite-entry-list.html")を記入する。この例で言うとページャーの直後に追加している。
一覧ページにブックマークリストを追加する。_top.html内とindex.html内のリストをおきたい位置に@include("/include/favorite-index-list.html")を記入する。この例で言うとカレンダーの直前に追加している

ローカルストレージを用いて実装した。
ボタンのクリックが行われると、そのクリックがあったエントリーをローカルストレージに追加する。ブックマークリストはローカルストレージを監視してリスト内に出力している。
ローカルストレージでは1つのkeyを用意し、ブックマークリストを1つのvalueとして保存している。オブジェクト内の各項目は url:title と紐付けて保存している。urlはリストに追加する際にページのurlを取得している。titleはa-blog cmsのグローバル変数である%{ENTRY_TITLE}をブックマークボタンのdata-tagに持たせ、それを読み込むことで取得している。また、ページに初めてログインした際に空のvalueを持ったものを自動生成している。
ボタン内のテキストはローカルストレージ内にそのエントリーがあるかどうかを判断し書き換えている。

リスト内にある星マークを用いてもブックマークリストの管理を行うことができる。
星マークを押してブックマークから削除した際はすぐには消さずに、再度登録できるようページ遷移時まではリストに表示するようにしている。押すたびにローカルストレージ内は書き換わっている。
エントリーを開いているときにリストの星マークからそのエントリーを外した時はボタンの文字が書き変わるようにしている。

より直感的なDnDを実現するためにマウスポインタと要素の位置を取得して要素の上半分にいる点でドロップしたら上に挿入され、半分より下にいる点でドロップしたら下に挿入されるようにしている。文字にすると分かりづらいが、つまり、２番目と3番目の要素の間にドロップされるのは2番目の下半分か3番目の上半分にいるときにドロップした場合である。
この判断基準を用いて項目がドロップされる位置が分かりやすいように赤い線を表示している。
ドラッグが分かりやすいようにハンバーガーが出力されるようにもしている。