[ブログ運営] 2020年2月 運営報告
Nプログラマ(@Nprog128)です。
今回は2020年2月のブログ運営報告になります。
そういえば今年はうるう年なので、2月29日なんですね〜。
前回2020年01月の振り返り記事はこちら。
立春やら節分、ほろ苦いお菓子のイベントなどが一瞬にして過ぎ去ってしまいました。
そう思い、gitのログを見たら色々やっていたので、これを見ながら振り返っていこうと思います。
記事数90記事を達成！
ようやく90記事になりました。
前回の振り返り時点で公開している記事数は87でしたので、1週間に1本のペースで書けば到達できるだろうなぁと思っていました。
今月は少し書くモチベーションが下がっていたので、自分の古いブログから記事の引っ越しもしました。
これで90を超えてしまった感じです。
まぁ、こういう時があってもいいですよね。
収益はどうですかね？
前回懸念していたもしもアフィリエイトの未承認の成果がようやく承認され、ちょっとホッとしました。
Adsenseは基本閑古鳥、、、と思いきや、一回だけポーン！と来てちょっと驚きました。
アクセスはどうですかね？
これは先月と同じくらいでした。
読んでもらっている記事の傾向が見えてきたので、来月はそれに関連したものを書いてみようかなと思います。
あと、全期間でのアクセスの推移を見てみたのですが順調に上へ少しずつ伸びている感じです。
よくネットでブログのPVの推移を載せているのを見かけるのですが、あれに近い感じです。
自分も頑張ればできた！という達成感が得られて良かったと思います。
今月書いた記事
それでは、2020年02月に書いた記事を振り返ってみましょう。
各記事とざっくり説明
サイドバーに表示されている記事数達成で取得したメダルのコレクションページを作りました。
画像を並べるだけで終わらせようとしたのですが、達成したメダルを光らせたり、未達成のメダルをグレー表示にしたりと、やりたいことが増えていきました。
なのでページを書くというよりは、JSとCSSを作る方に時間がかかりました。。。（汗）
そして、メダルを達成するまでの一言コメントを、モーダルダイアログっぽく表示したらカッコ良くね！みたいなテンションになったので、さらに時間がかかることに。
ただ、もう少しこういうページは早めに作りたかった。。。
最初の頃の記憶があんまり覚えていないので、一言コメントがわりと雑い。。。
あ、ちなみにダイアログの表示はsweetalert2を使っています。
ページ読み込み後に実行しないとうまく表示されない、と気がつくまで時間を要しました。
作りたいショートコードがあって、それには各記事に固有のidが必要だったのでそれをスクリプトで付与した、という内容の記事です。
その作りたいショートコードとは、、、
というか、この記事を書いている時点でそのショートコードを使っています。
また記事に書くので、楽しみにしていてください。
hogoの深いネストのconfigやdataのmap型に対してindex関数を使い、ドット区切りの指定でデータを引っ張ってくるというショートコードを作りました。
今思いついたのですが、hugoのドキュメントにあるネストしたshortcodeのサンプルを参考にすれば、ネストのデータ取得部分は全部共通化できるかもしれないですね。
ただ、ショートコードを必ず開始と終わりのタグで囲まないといけないので、ちょっと記述が面倒になりそうですが。
今回作ったこの処理はショートコード内でひたすらクルクルとループ処理をしているので、ショートコードを使う箇所が増えると本番用ビルドが重くなってくると思います。
今の所ビルドは3秒くらいで終わっているので、10秒を越してきたら別で考えている処理に引っ越しをしようと思っています。
これは日記の方に書いていた記事を引っ越ししてきたものです。
下書きでほったらかしになっていたので、ちょっとだけ加筆と修正を行いました。
プレイした作品が増えてきたら、この記事に追記していくつもりです。
引用はmarkdown形式で書けばラクに書けるのですが、上下に画像を表示させてみたかったのでショートコードを作りました。
以前から作成して使っていたのですが、作った処理に無駄が多いコードだったのでかなり修正しました。
cssをゴリゴリ書いていたのですが、bootstrapのデザインを基本にして、そこにほんの一部だけコードを追加することでスッキリと作ることができたと思います。
ブログのカスタマイズ
モジュールバンドラーの調整
ログによると2月上旬は、モジュールバンドラーを色々と弄っていたようです。
今までは各JSに共通モジュールを入っていた状態だったのですが、それを共通モジュールに分割して各JSはそこから参照するように設定しました。
ついでにベンダープレフィックスも自動付与するようにしたので、ブラウザの違いによるレイアウト崩れも少なくなったはずです。
行間を広げました
文章の装飾をすると窮屈な感じがするので、思い切って行間を広げるようにcssを変更しました。
キツキツな印象がだいぶとマシになったと思います。
highlight.jsを削除
ソースコードのハイライトを、hugoに標準搭載されているhiglight機能を使うことにしました。
スマホサイズになるとレイアウトが崩れる、という現象に長い間悩んでいましたが最近ようやく解決しました。
使っているテーマのcssのbody部分を一部変更したら、すんなりと表示されるようになりました。
hugo baseof.htmlに集約
single.html, list.html, terms.htmlの共通する構造をbaseofに移動させました。
同じコードをコピーして書いてあったので、各ページ毎に微妙な違いが発生していました。
これをbaseofに集約したので、一箇所の変更で全ページに反映されるようになりました。
トップ一覧の各記事のリンク
各記事のカテゴリをリンク化して、カテゴリページに遷移できるようにしました。
またglyphiconsを使い、カテゴリっぽいアイコンも表示するようにしています。
それは、各記事の要素全体がリンクできるようになっていたので、せっかく作ったカテゴリリンクが押せない状態になってしまいました。
要素全体リンクの部分は自分で拡張して作ったのですが、読み返してみるとよく分からない処理になっていました。
有り体に言えば、よく動いていたな、と。
なのでごっそりと不要な部分を削除し、各記事へのリンクでクリックできる範囲をアイキャッチ画像とブログタイトルの部分だけにしました。
修正後は、各記事のカテゴリリンクがクリックできるようになりました。
configの一部をdataへ引っ越し
configが肥大化しているので、その一部をdataに引っ越ししました。
ここら辺でfswatchを使わなくてもdataを使えばよかったんじゃないか？、、、と思い始めるようになりました。
これを作った頃はHugoを触り初めたばかりだったので仕方がない、と思うことにします。
徐々に引っ越ししていけば、configはスッキリすることでしょう。
それに合わせていくつか分散していたショートコードも一つにまとめ、引数で分岐処理をすることでスッキリさせました。
大変だったのが、不要になったショートコードを新しいショートコードに置き換えるコトです。
エラーが出てくれるので修正漏れの心配はないのですが、数が多い。。。
一括置換出来たらラクだったのですが、引数が増えたり、変わったりしたので対応できず、、、残念！
他にもあるけど省略
細かい部分を含めるともうちょいあるのですが、あまり多くてもアレなんでここら辺にしておきます。
おわりに
今回は、 2020年2月のブログの運営報告、という内容でした。
いつも通りgitのログはほぼ毎日更新となっているので、自分頑張ってんな〜と思いながら振り返ることができました。
モチベーションが下がりつつも目標としていた記事更新数の3 - 4記事くらいも達成できましたし、今月も満足のいく結果となりました。
今月書いたHugo系の記事の続編もあるので、来月はそれも書けるといいですね。
それでは、このへんで。
バイナリー！
