先日、新たにブログサイトにカテゴリー欄を設置できたことで、ブログ初心者の私も少しばかり得意げになって、また新たな機能に挑戦しようと目論んでいました。
それは、最新の記事を公開した時に「新着」だとわかるような表示をすることです。
簡単に出来んじゃね？などと高をくくっていたら、はい、撃沈しました（泣）
なして〜(´༎ຶོρ༎ຶོ)？そんな難しいことですかぁ〜(´༎ຶོρ༎ຶོ)？？なんで出来ひんのぉ〜(´༎ຶོρ༎ຶོ)
傷心しながらも、いずれリベンジする時のために事の次第を記録します(╬◣д◢)ｳｵﾘｬｰ!


はじめに

知識ゼロ、ずぶの素人、頭の中はほぼ空っぽの超初心者がブログをやってみようと決意。

その過程で
「なんか難しすぎんかい？！」とつまずいた事、
「どゆこと？？」とよく分からなかったこと、
「へぇ〜、そういう感じなのね」と学んだこと、
「おっ？なんか身になったっぽい」と得られたことなど、あれこれ記録しています〜



前置き

初心者の私が選んだブログのやり方は、Hugo 、Cloudflare 、GitHub などといった、ツールやサービスを組み合わせて作る手法です。
いわゆる「静的サイトジェネレーター」という方式で、ブログを運営しています。
（静的サイトジェネレーターについては、こちらの記事でまとめています）


自分で組み立てるブログなので、ただ記事を書いていればいいという訳にはいきません。
自分であれこれ設定してやる必要があります。
今回のように新たな機能を追加するには、ターミナルでコマンドを実行していかなければなりません。（ターミナルについては、こちら）


初心者の私には難しいことばかりですが、出来た時の喜びは格別のものがありますし、何と言ってもほとんど無料でブログが出来ますヽ( ´￢`)ﾉ ﾜ～ｲ
故に、“お金はかからないが手間はかかる” とも言えますね〜


そんな訳で、新着の表示くらいパパッと出来るだろ？と思われる方もいらっしゃると思いますが、ボタン一つで設定できる類のものではない、ということをご承知おきいただければ幸いです〜┌|-.-|┐ﾍﾟｺｯ



事の始まり

日々、ブログ挑戦に取り組む中で、いきなり「カッコ良くて、おしゃれで洗練されたブログ」にはなれませんが、少しでも「読みやすい・見やすいブログ」を目指しています。
今はまだ始めたばかりで、記事数も少なく、ウルトラ・スーパー・シンプルなブログですが、成長してそれなりのブログになることを夢見ています。


そんな風に考えている中で、新着の記事を公開した際に「新着」とか「NEW」とか表示されたら「おっ、新しい記事が公開されたんだな」って分かりやすいし、そういうのってあるよね？！と思いつきました。


それに、そういう表示があると、このコンテンツは今も生きてる、というか、過去の時点で更新が止まってしまったコンテンツではなく、今も継続して更新されているコンテンツである、ということが分かりやすいし、画面上もペタっとした感じ → 動きがある、というような気がして、生き生きした感じがしそうだと思ったわけです。


「新着」とか「NEW」とかって表示させるだけなんだから、簡単に出来るっしょ！と、我ながら「ええこと思いついたなぁ」と、ニンマリ口元がゆるんでいました、この時は。



３つの選択肢

さて、ブログ記事を公開した際に「新着」だと一目で分かるような表示をする方法としては、３つあるようです。


A. 記事のフロントマターに手動で「NEW」印をつける
ただし「もう新着じゃなくなった」タイミングで自分で削除する手間あり。
（フロントマターについてはこちら）

B. 日付を見て自動で「NEW」をつける
「公開から7日以内の記事には自動でNEWマークを出す」という仕組み。一度設定すれば、以降は完全に自動で消す手間もなし。

C. お知らせ欄に「新着記事」として手動で書く
お知らせ欄を作ってそこに「〇月〇日 新しい記事を公開しました」と書く方法。


この３つの選択肢から私が選んだのは、B です。
一度設定すればいいだけだし、自分が思い描いていたものとピッタリだと思いました。
ただ、テーマのファイルを「上書き」するという作業が入るらしく、少し難易度が高そうです。
とはいえ、ひとまずやってみよう！という事で、早速行動開始です٩(`･ω･´)و



具体的な方法

私はこのブログを Hugo というツールを使って作っているのですが、その中で「PaperMod」というテーマを使用しています。
テーマはブログの骨組みや外観に関わる重要な要素のひとつです。
（テーマについてはこちら）


今回の作業では「PaperMod」のファイルの中身は直接触らず「オーバーライド」という仕組みを使って、テーマ本体は無傷のまま表示だけを変える、ということをやっていきます。


オーバーライドに関しては、こちらのサイト「「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典」の説明を一読していただければと思います。
理由は、

  1. 分かりやすくこの説明をするには、ずぶの素人で初心者の私には難しい　故に専門家のサイトをチェックしていただきたい
  2. 日頃から分からない用語は必ずこのサイトをチェックしていてお気に入りのサイトであること
  3. 実際の作業中は、自分が何をしているのかちんぷんかんぷんだったのが、このサイトの説明を読んで、自分がやっていたことの輪郭が見えたというか、イメージが掴めたから（完全に理解できたわけではありませんが… ^^;)

以上の理由から、ぜひ上記のサイトを一読していただければ、より私のブログの内容も伝わるのではないかと思っています。
その上で、敢えて私自身の言葉で「オーバーライド」を端的に説明するなら、


ホワイト影武者を作って上書きする　または　替え玉を使って上書きする


ってイメージです。
正確性という観点からは外れた説明かと思いますが、素人の頭で理解するにはこういうイメージになりました。
要は、大本のファイルには触れず、良い影武者ファイルを作って、そいつを使ってやりたいことを実現させる仕組みってことかな〜、という理解です。


AI によると、Hugo には「同じ場所・同じ名前のファイルを自分のサイト側に置くと、テーマのものより優先される」という仕組みがあるんだそうです。
AI はこの仕組みのことを「オーバーライド」と表現しました。
もし何か失敗しても、自分が作ったファイル（ホワイト影武者）を削除するだけで完全に元通りになる、という安全なやり方なんだそうです。

まあ、つまるところ同じようなことを言っているんでしょうね〜



作業開始

【ざっくり作業手順】

  1. テーマ（私の場合は PaperMod ）のファイルを、決まったフォルダにコピーする
  2. コピーしたファイル（ホワイト影武者）を編集する

ざっくり言うとこうなんですが、実際の作業は複雑で、AI に言われるがまま何かをしてはいるのですが、自分が今いったい何をしているのかちんぷんかんぷんでした（´ρ｀）ぽか～ん


今振り返ってみると、ホワイト影武者ファイルに「経過時間が7日未満なら、赤い小さなNEWを表示する」という意味の情報を付け加えていたようです。
これだけなら、凄く簡単そうに見えますよね？！
ところが、そうは問屋が卸さないのが世の常です。

以下、試行錯誤の過程。

  • 当初 AI のミスリードで、作る必要のないフォルダを作ってしまう
  • コピーしたはずのファイルが見つからない
  • この間、AI との毎度お馴染み「ひたすら状況確認の繰り返し沼」にはまる
  • 原因発覚後、やり直し
    （ちなみに原因は、AI が参照していた PaperMod の情報が古いバージョンで、フォルダ構成が変わっていたことに対応出来ていなかった為、コピーする場所が間違っていた）
  • 正しい場所にコピーし直し、ファイルを開いて編集するも、プレビュー表示は画面真っ白で何も表示されず
  • また「状況確認の繰り返し沼」
  • 原因発覚後、やり方を変更
    （原因は、編集に使ったアプリが「TextEdit」で、しかも「リッチテキストモード」のまま保存してしまったことにより、TextEdit が勝手に不要な情報を大量に埋め込んでしまい、正しく機能しなかった）
  • nanoとかいう新たなツール（シンプルな編集ツールらしい）に変更して、TextEdit でしくじった中身を消そうと画策も、素人の私が不安を感じ途中で断念
  • ファイル全体を消して丸ごと貼り付けという方法はやめ、一旦 TextEdit で壊れる前の正しいコードの状態に戻してから、再度 nano で特定の場所に１行だけ追加する方法に変更



その結果がこちら↓

mistake_NEW

惜しいぃー（泣）
あちこち文字が切れてるぅー（泣）



涙を堪えて決断

ここまで思いのほかストレスフルな作業だったため、このまま進むか一旦、新着表示を諦めるかの岐路に私は立っていました。


この記事内には全く記していませんが、コードというのか、ソースコードというのか知りませんが（というより知りたくもねぇー、見たくもねぇー ＞_＜)、実はこの英字・数字・記号の羅列を嫌というほど見させられて、頭痛がしそうなほどだったんです。


なんとなく、こういうのって楽譜と似てるのかな？と思いました。
というのも楽譜が読める人は、楽譜を見れば頭の中でそのメロディーや音楽が流れると思うんですが、苦手な人や楽譜を読めない人の場合、ただ五線譜の上をおたまじゃくしが泳いでるように見えるだけ、みたいな。


このコード？もそんな感じで、プログラミングとか IT とかの専門の知識がある人や得意な人が見ると、何か分かるものがあるんでしょうが、私には五線譜のおたまじゃくしと同じです。
大量のおたまじゃくしが一度に私に襲いかかってきたようなものです Σ(´Д｀；)　うあﾞ


ブログを運営するために、これまでもターミナルで色々なコマンドを実行してきましたが、それらは結構短い文字列だったので、まだ許容範囲でした。
ところが今回の文字列は長いし、よく分からんしで、見るだけで頭痛がしそうな奴らで、もうこれ以上は危ないかもしれない、と「撤退」の2文字が頭に浮かんでいました。


最初は「ええこと思いついたな♪」とルンルンで作業を始めたはずが、沢山のコードらしきものに襲われ戦意喪失した私は、ここで一旦、態勢を立て直すためにも涙を堪えて撤退することを決めました。

めちゃくちゃ悔しいんですが、闇雲に作業し続けてもやぶ蛇になりかねないし、成功には届かなかったものの、意外に学びも多かったので全く収穫が無かったわけではありません。
いつか必ずこの雪辱を果たすべく、今は英気を養ってその時に備えようと思います(ง🔥Д🔥)ง うおりゃーー!



まとめ

記事公開時に「新着」だと分かる表示をしたいと挑戦したら、以下の学びが得られた。

  • 方法は１つじゃない、代替手段あり（手間は掛かるも、手動で新着表示をさせることは可能）
  • 「オーバーライド」という仕組みについて知った
  • ファイルの編集に「TextEdit」は相性が良いとは言えない

今回の経験を通して、以前こちらの記事でも触れた

「 VS Code（ Visual Studio Code ）」

の導入を考えてみてもいいのかもしれない、と思い始めました。
これまで「TextEdit」を使っていた部分を試しに「VS Code」に変えてみて、どんな感じなのか様子を見つつ、新ツールに慣れることが出来れば理想的なんですが、どうでしょうね〜


いろんな収穫もありつつ、今回の「新着表示機能」の挑戦は失敗に終わりましたが、腐ることなく、いずれリベンジするべく自分を奮い立たせるためにも、最後にこの言葉を記しておきます。


臥薪嘗胆