ヘッダーロゴ
ちょっと変えてみました

ちょっと変えてみました

2026年04月19日

お疲れ様です。かさたたです。
最近昼にバーキン食べた日は午後仕事中眠くならないことに気づきました。自分だけですかね。

ということでタイトルの通り、ブログの見栄えと機能を少し変えてみました。
まず見栄えのところですが、行間を少し広くしてみました。自分の記事をスマホで読んでみたら、ちょっと字が詰まりすぎだなと感じたのでpタグのデフォルトからline heightを2にしてあります。noteと同じくらいの行間が読みやすいかなと思い調整しました。

Before
image
After
image
言われてみないとわからない違いかもしれませんね。こうやってシミュレータでPC上でWebkitのシミュレーションできるの、Macのめちゃくちゃいいところだと思っています。仕事でiPadメインで使うシステム作ってた頃、WebkitだけCSSがバチバチに崩れる事象にあたって苦労しました。会社のPCWindowsだったし社内NWに変な制限かかってて実機デバッグするときにいちいち開発サーバーにデプロイして確認しないと行けなかったから本当に面倒だった。話がだいぶそれましたね。

そして機能のところですが、コメント機能をつけてみました。誰もコメントせんやろって思いましたが、CSRFとかバリデーションとかの勉強がてらつけた次第です。Claude Codeで爆速実装しました。

名前とコメントを入れれば投稿ができます。コメントの文字数制限は50文字です。コメントの履歴と一緒にリクエストヘッダのログをしっかり残してるので、内容にはお気をつけください。(そんなやばいこと書く人いないと思いますが。)
image
image

以上、他にもブログ読んでてサイトの仕様的に気になったところ、こうしたらもっと良くなるんじゃないかっていう意見があればぜひコメントしてみてください!ではまた。

2026/04/19追記
早速とてもいいコメントをいただいたので言及します。(意外と長文になってしまいましたが、私はこのコメントを好意的に捉えています。コメント、マジでありがとうございます。)
image

これ、記事のリンクをタップしたらタブが増えるようにしたのには意図がありました。というのも、私はブログみたいな読み物をするときに、一覧が載っているページから別タブで記事ページを開いて、それが読み終わったら記事ページのタブを閉じて元の一覧ページに戻ってまた別の記事を探す、という挙動をします。ですが、よくよく考えるとこれやるのってパソコンで見てるときだけなんですよね。スマホで見るときはあまりやりません。スマホで見るときは、シンプルにブラウザバックして記事一覧に戻ります。

そして実はこのブログ、どこのIPアドレスからどんな端末でアクセスされているかを記録していて、(GitHubのコード見てもらえればどういう仕組みで記録してるか見ることができます。)それを見るとこのブログの読者の端末ってほとんどiPhoneなんですよね。

また、これを機に普段見てるサイトはどうなってるかざっと見てみました。結果は以下のとおりです。
note→同一タブ
Ameba→同一タブ
YouTube→同一タブ
Amazon→同一タブ
ニトリネット→同一タブ
www . yodobashi . com→別タブ
ほぼ同一タブでした。ヨドバシのECサイトはPCで見る人が多いんですかね?色々調べてみたんですけど、スマートフォンの普及により、同一タブで開くサイトが増え、そしてそれが一般的になったようです。スマホでタブを開いたり閉じたり、ってPCに比べると頻繁にやらないし、一覧に戻るときはブラウザバックしますよね。

となると、よりユーザーフレンドリーなのは同一タブで開く仕様ってことになります。パンくずリスト(ヘッダーの下にある「記事一覧>タイトル」みたいなリンク)あるのに別タブで開くって仕様、ちょっとおかしいな。ということで早めに修正したいと思います。多分何行か書き換えるだけなのでしばしお待ちを。
→爆速で実装・デプロイしました。デスクの上とCI/CDは整っているほどいい。

記事を別タブで開くか、同一タブで開くかというシンプルな問いですが、私の生業であるソフトウェア開発においては、ソフトウェアのシンプルな挙動に対して考えを巡らすことは結構大事なことで、なんですけど開発やってるとデバッグ作業で操作に慣れてしまうので、シンプルなバッドUIに気付けないってことがしばしばあります。今回の別タブで開くか同一タブで開くかにも通じることです。
このブログ作ったのは仕事のための勉強って意味合いが強いので、それでいうとめちゃくちゃいい機会になりました。マジでありがとうございます。これからもコメントお待ちしております。

GitHubのコードはこちらにあります。PR投げてもらっても構いませんが、Approveするかはわかりません。
kasa-blog-app


コメント

おすすめ記事