Simplicityを少し改造してみた 番外編 par22 閲覧履歴を追加してみる

公式フォラームに「サイドバーに閲覧履歴を表示させたい」というのがあり、作ってみました。

既に当サイトで表示してあるので気づかれた方もおられると思います。
昨日まで当サイトで表示していたので気づかれた方もおられると思います。

本来はlocalStorageでやる予定でしたが、ひとまず、タブ(あるいはブラウザ自体)を閉じればデータが無くなるsessionStorageで実装してあります。

localStorageは、意図としてデータを消去しない限りは、ブラウザを初期化状態にしないと無くならないと思います。そのため、今回のスクリプトではlocalStorageがデータを作った場合、それが読み取れる状態にあれば削除するためのボタンを入れるようにしてあります。

該当ファイル

2016/06/24 14:23 javascript2.jsを追加しました。
2016/06/22 17時13分 最新ファイルに更新しました。cssはそのまま

スクリプト: javascript.js
スクリプト2: javascript2.js
css: style.css

名称をjavascript.js、style.cssにしていますが、中身を子テーマの各javascript.js、style.cssに追記して下さい。

※ javascript2.jsは、閲覧履歴ではなく、閲覧記録にして、それまでの閲覧したページで重複なしの表示になっています。
※ javascript2.jsは、それまでの履歴データの中で現在見ているページと同じものがある場合はデータの追加を行いません。

動作説明

これはsessionStorageを作る用の準備ですが、まずここから。

sessionStorageあるいはlocalStorageは、その後に、.getItem(“key”);とすることでそのデータを読み取れます。ここにある式は、三項演算子といいまして、

(条件) ? 真の時 : 偽の時;

と言う感じになります。ifで言えば、

これと同じことです。なので先ほどの条件は、「access_dataと言うキーでデータが取得できたら ? そのデータをパースしてobjectと言う変数に代入 : そうでない時は { items[] } としてobjectと言う変数に宣言」というような感じです。

javascriptやjQueryでは、{}はオブジェクト型の宣言です。そこにitems[]と言う配列を入れる準備をします。

ここらの仕組みがちょっとややこしいですが、jsonとして次のようなデータを作るための準備です。

これらは、object.itemsでアクセスできるようになります。itemsは配列なので、javascriptのpushを使うことができます。pushは、配列の最後尾にデータを追加するものです。

更につくるデータは新たにdataと言うオブジェクトを作って、そこにurlやその他を入れます。これらurlその他のデータを持ったオブジェクトを配列の中にpushすることで、様々なデータを持った変数を配列の中に入れることができるというわけです。

で、sessionStorageにデータを書き込む関数を呼び出す際、関数に引数で最大表示数を渡せます。この最大数と比較して、先のobjectの中にあるitemsが同じか超えた場合はjavascriptのshiftで最初のアイテムを除去してから新たなデータをpushすることで表示数を整えてます。

設置方法

Simplicityの場合、テキストウィジェットに、

とだけ入れたものを任意のウィジェットエリアに入れるだけです。
ウィジェットのタイトル等は入れる必要はありません。入れない場合はデフォルトの「閲覧履歴」と表示されます。試してませんが、何かしらウィジェットのタイトルを入れてある場合はデフォルトの「閲覧履歴」と言うのは入りません。

jQueryが動作した際に、#b-historyを探して、そこにリストを入れる準備をします。ここからウィジェットエリアはどこでもイケると思います。ただし、サイドバーを想定してスタイルしているので、記事の付近に出す場合は別途それ用にスタイルし直す必要があるかと思います。

表示件数はデフォルトで5件ですが、これは、

のsetLocalStorage(5);の5を変更すれば変えられます。localStorageとありますが、呼び出し先のsetLocalStorage()関数の中身がデフォルトでsessionStorageになってますから、このままで問題ありません。また以下の方法でsessionStorageとlocalStorageの切り替えを行っても、関数名はそのままで大丈夫です。

時間表示部分が不要な場合

で時間部分を非表示にできます。

New Old表示が不要な場合

Newは、

Oldは、

とすることで非表示にできます。

ここらは自分しか見えない部分なので、好きにデザインできます。

sessionStorageとlocalStorageの切り替え方法

3箇所 5箇所のコメントアウトとその次の行を入れ替えるだけで切り替えられます。
1つ目は、

2つ目は、

同じ記述が、elseを挟んでもう一つ下にあります。

4、5つ目は、

ここのifの中身と、var json部分。この5箇所になります。

これらを前後コメントアウトの入れ替えでsessionStorageとlocalStorageを入れ替えられます。