ブログを書くところに気が回らないまま2020年の3分の1が終わり、しかも世の中は世界的に大混乱です。どうしてこうなった。
読んだ本の話とか、課金始めてから1年使いこなせたRemember the Milkの話とか、いろいろ書きたいことはあるんですが。 その前に前から気になってた、はてなブログの最終更新日時表示を表示する作業をやってみたので記事にしておきます。
TL;DR
jsが長いのでgistにしました。7行目のURLを自分のサイトに合わせて設定画面から組み込んでください(雑)。
js上手な人だったらもっときれいにかけるかも。
jsのコード(フッタに追加) gist.github.com
cssのコード(デザインCSSに追加) gist.github.com
このコード何してんの
概ねこちらのコードを参考にさせていただいたのですが、ちょっと弄ってます。 kurokinomizuiwa.hatenablog.com www.tsubasa-note.blog
記事からsitemap_periodical.xmlのURL(というかクエリストリングのパラメータ)を特定して、そこから最終更新日時を拾って記事の公開日時と比較、最終更新日時の方が新しければ更新日時をappendする感じ。ちょっとものぐさしたので私の実装では記事URLに日付が入ってるのが前提になっちゃってるんですが、汎用性を求めるなら後続処理のとおり普通にmetaタグのタイムスタンプから引けよという感じではあります。
元記事からの主な変更点は以下のとおり。
- jQueryはブログのテンプレート側(たぶん)で読み込まれてるので、手作業での読み込みはなし
- はてなブログ側で用意されているアイコンフォントでいい感じのアイコンがあったので、それを使うようにしてFont Awesomeの読み込みもなし
- sitemap.xmlを経由せず、開いた記事の情報からsitemap_periodical.xmlのパラメータを生成するように変更
- 最終更新日時をappendするときに記事の作成日時とフォーマットを合わせるように修正
- これやらないと、テーマ変更したときに記事の公開日時と見た目が揃わない
あとは勉強がてらというか、コピペじゃなくて基本的に自分でコードを書いてます、と言う感じですね。
アイコンフォントの話はこちらからどうぞ。 shirokai.hatenablog.com
更新かけた記事の見た目はこの記事とかを見ると分かりやすいかなと思います。…って思ったんだけど日付一緒だけどこの記事もちょっと追記したので上の方見ても分かりますね。
onloadのタイミングで処理してるのでしゃーないのですが、読み込みまでちょっと時間使うのが若干気に食わないポイントではあるのですが、突き詰めると多分サーバサイド処理になって、はてなのスタッフにでもならない限り手が出せないよなぁという感じではあります。もしかしたら非公開API的な何かがあるのかもですが。
あと、今のところ記事ページだけで、リストのページには対応してないのも改善したいところ。
それからモバイルで見ると更新日時出ないぽいのでその辺はさすがに直した方がいいかなって思うんですがもう今日は疲れたのでおしまい。
