ブログ用の記事投稿数 可視化の仕組みを作る

2026/03/28 開催 花見LT in 大宮公園 ～春の風を感じながらゆるっとLT～ で話した内容です。
https://odekake-tech.connpass.com/event/382540/

Transcript

1. ブログ用の記事投稿数 可視化の仕組みを作る 2026/03/28 花見LT in 大宮公園 ～春の風を感じな がらゆるっとLT～ @__yumechi
2. X: @__yumechi misskey: @__yumechi@misskey.systems 自己紹介 • X: __yumechi • 渋谷の SaaS 企業に勤めるエンジニア ◦ CRE(Customer Reliability Engineer) を目指している ◦ PHP とかをしています • 各地のカンファレンスとか勉強会に行くのが好き ◦ 東葛.dev でこのイベントを知りました ◦ おでかけテック自体は去年、小山（おやま）の勉強会で聞いたかも
3. X: @__yumechi misskey: @__yumechi@misskey.systems 今日話すこと • GitHub にホスティングしている自分のサイトがある ◦ https://www.yumechi.work/ ◦ ブログを書いている（はてな, Qiita, Zennとかに乗せないメモレベル） ◦ はてなとかに乗せるとあるサービスの解析が入ってちょっと面倒なため ▪ これがペインになっている • 一方でブログ書いた数を可視化したり、集計したいモチベーションが ある
4. LT会場のみのページが ありましたがWeb公開 版では削除
5. X: @__yumechi misskey: @__yumechi@misskey.systems ブログの構成要素 • リポジトリ ◦ https://github.com/yumechi/yumechi.github.io • サイト自体 ◦ TypeScript + Docusaurus(FacebookのOSSで静的サイトを作れる) ◦ ブログ周りはプラグインを入れている ◦ md ファイルに対しては textlint で文章のチェック可能 • 可視化部分 ◦ Python + altair + vl-convert-python ◦ Seaborn とかでもできるが、今回は他の技術を試した
6. X: @__yumechi misskey: @__yumechi@misskey.systems できたもの
7. X: @__yumechi misskey: @__yumechi@misskey.systems できたもの
8. ちなみに3月は 花粉症と 技術書典のあれこれで 全然進捗なし…
9. X: @__yumechi misskey: @__yumechi@misskey.systems 仕組み Docusaurusのログ記事のディレクトリは blog/YYYY/MM-DD-slug/index.md という命名規則に従っています。 ブログ解析ツールはこの規則を利用し、年ディレクトリを^\d{4}$、記事 ディレクトリを ^(\d{2})-(\d{2})-という正規表現でスキャンすること で、ファイルシステムだけから投稿日（年・月・日）を正確に抽出でき ます。
10. X: @__yumechi misskey: @__yumechi@misskey.systems 仕組み
11. データベースいらずで 実現できている！
12. X: @__yumechi misskey: @__yumechi@misskey.systems 試行錯誤して失敗したもの • Python 以外でうまくやりたかったが… ◦ Julia 試してみたものの日本語フォントがグラフにうまく反映されない ▪ 統計とか強いと聞いていたのに… ◦ TypeScript ▪ ブラウザ経由してダウンロードになるので実現コストが高い ▪ 一応できなくはないことは確認できている
13. X: @__yumechi misskey: @__yumechi@misskey.systems ふりかえりと展望 • これほとんど AI に投げて実現できたので良かった ◦ ブログページの構成 ◦ ブログページの構成から簡単に可視化できるようにするとか • 日本語フォントの取り扱いは難しい ◦ 実はCIから出してみたら文字化けしていることに気がついた ◦ 直しておきたい… • そもそもブログをいっぱい書こうね ◦ 技術書典終わったら各種イベントの資料とか読み漁る予定
14. X: @__yumechi misskey: @__yumechi@misskey.systems ほか • ファイルパス命名をきれいにしておくことで統計データをDBなしの解 析のみで実現できるケースもある ◦ 何でもDBからの発想の転換 • 更新がなく寂しい時期ができるのは避けたい… • あとは年度末にはタグ別で出せるようにしてみるのも面白いかも ◦ 自分がどういう傾向のものに興味があるのかを可視化する
15. X: @__yumechi misskey: @__yumechi@misskey.systems 利用情報 • スライド作成: Google Slide https://www.google.com/slides/about/ • フォント: BIZ UDGothic https://fonts.google.com/specimen/BIZ+UDGothic • 紹介したOSS ◦ Docusaurus: https://github.com/facebook/docusaurus ◦ Altair: https://github.com/vega/altair ◦ Vl-convert: https://github.com/vega/vl-convert • 補足ですが、Altair のバージョンアップにより Vl-convert に依存が生じたので 参照しているという形です ◦ https://altair-viz.github.io/user_guide/saving_charts.html