Neumorphic Designっぽいやつ

デザインを変えようとしたら…
Dockerビルド環境の構築
UIデザインの刷新
文章の生成や修正
まとめ

リノベーション前

リノベーション後

デザインを変えようとしたら…

気まぐれにテーマを変更してみたら、どれも横幅が狭くて、PCで見ると見づらいことに気づいた。

それで、色々変更したりCSSをいじったりしてみたが、どうもしっくりこない。

というか、記事を修正してcommit＆pushし、CIがGitHub Pagesを更新するという作業サイクルが遅くて、面倒だったので、ローカルビルド環境を用意した。

今まではそんなのどうでもよかったけど、まあ、AIさんに頼めばやってくるってことで、ちょっとやる気になり、サイトのリノベーションを行うことにした。

作業コストを考えるとやる気にならないことも、多少やる気になるというのは良いことかもしれない。

Dockerビルド環境の構築

GitHub Actionsがページをビルドして更新するのを毎回待つのは面倒なので、claude code に DockerでJekyllのビルド環境を作らせた。

Dockerfile (Ruby のツールだったのか…)

FROM ruby:3.2-alpine
# Install dependencies
RUN apk add --no-cache \
    build-base \
    git \
    linux-headers
# Set working directory
WORKDIR /app
# Copy Gemfile and Gemfile.lock
COPY Gemfile* ./
# Install gems
RUN bundle install
# Copy the rest of the application
COPY . .
# Expose port 4000
EXPOSE 4000
# Default command
CMD ["bundle", "exec", "jekyll", "serve", "--host", "0.0.0.0", "--port", "4000", "--livereload", "--force_polling"]

compose.yml

services:
  jekyll:
    build: .
    ports:
      - "4000:4000"
      - "35729:35729"
    volumes:
      - bundle_cache:/usr/local/bundle
    environment:
      - JEKYLL_ENV=development
    command: bundle exec jekyll serve --host 0.0.0.0 --port 4000 --livereload --force_polling
    develop:
      watch:
        - action: sync
          path: ./
          target: /app/
          ignore:
            - .git/
            - .github/
            - .idea/
            - .vscode/
            - .claude/
            - .envrc
            - .DS_Store
            - tmp/
            - Dockerfile
            - bin/
volumes:
  bundle_cache:

docker compose watch

これで修正直後に http://localhost:4000 で画面を確認できるようになった。

普通にWEBアプリケーション開発するなら最初にやるけどな。

claude code に頼んだら、他にも docker compose を叩くためのシェルスクリプトみたいなのを生成してた。

よくわからんが、AIの都合上あったほうが楽なのかもしれない。

UIデザインの刷新

Jekyllのテーマは便利だけど、とにかく横幅が狭いのと、気に入るものが無かった。

探せばあるのかもしれんが、気軽に切り替えて試せない。

カスタムCSSを使えるというのは知っていたので、AIに頼んでデザインを刷新してもらった。

ニューモーフィックデザイン

「Neumorphic designで頼む」と頼んだら、サイドメニュー、目次、テーブル表示のデザインが改善された。

個人的に、ニューモーフィックデザインに詳しいわけではないけど、AIに頼めば言葉と雰囲気を知っているだけで使える。何事もそうだが、人々が時間をかけて生み出した概念にちゃんと名前がついていることがありがたい。

目次の折りたたみ時の動作は、当初カクカクしていたので、スムーズにアニメーションするように調整した。シンプルなブログツールでも、 script タグで自由にスクリプトを使えるのは、便利やな。

テーブルデザイン

ニューモーフィックデザインを適用したテーブル

ヘッダ1	ヘッダ2	ヘッダ3
データ1	データ2	データ3
データ4	データ5	データ6

これは結構気に入っている。

最初、縦の区切り線が無かったので、さすがに薄い縦線を入れてくれと頼んだ。

ナビゲーションの改善

従来の単純なリストから、カテゴリー別に整理されたナビゲーションへ変更
ソーシャルアイコンとかをSVGアイコン化
マウスホバー時の浮き出る効果とアニメーション追加
外部サイトへのリンク、サイト内の別ページへのリンク、ページ内へのリンクを明確に区別するマークを追加

目次の追加

TOC( Table of Contents )を自動生成
```
* toc
{:toc}
```
という、謎の ”おまじない” 的記述を追加することで目次が自動生成される。

kramdownの機能なのかな。
折りたたみ

TOCを自動生成すると、目次が長くなりすぎて邪魔なときもある。

デフォルトで閉じておき、必要な場合のみボタンで開きたいんだが、 details タグで上の ”おまじない” を囲むと、TOCが生成されない。

というわけで、TOC部分を後からdetailsタグでwrapするという、キモいスクリプトを追加した。

生成したTOCには、 markdown-toc というIDが付与されるが、detailsタグ配下にあるときだけ表示されるようにCSSで制御すれば良い。

Chromeのデベロッパーツールなどで、#markdown-toc 周辺を見てもらえると、detailsタグに囲まれていて、その前にstyleタグ、その後ろにscriptタグがあることがわかると思う。

シンタックスハイライトの修正

Rougeによるシンタックスハイライトが動作するよう設定。

markdown: kramdown
kramdown:
  input: GFM
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    css_class: 'highlight'
    line_numbers: false
highlighter: rouge

ローカルビルド用にgemfileにRougeを追加したりした
```
gem 'rouge'
```
コードブロックの言語指定も、ちゃんと文法の名前を書くように見直した

文章の生成や修正

既存の文章の修正はもちろん、記事の生成もAIを使っている。

そんなもん書く意味があるのかという気にもなるが、以下の点で一応意味がある気がする。

書きたいことだけを書いて、構造や体裁やレビューなどめんどいことやってくれるので、そもそも書くのが楽だから試しに書いてみている。

自分が良いと思ってる書かせ方は、こんな感じ。（別にこの通りにしてないけど）

情報源・ネタ・ソースを与える
- 書きたいことを喋ってテキスト起こししたり
- 箇条書きにしたり
- とにかく一旦テキストにする
- 画像を与えたりすることもある
- ファイルやタイトルは先に作る
次に見出しを作らせる
- この時点で、修正したり、させたりする
- タイトルも変えたりする
その後、見出しごとに内容を書かせる
- 例えばサンプルコードなど、部分的に細かく注文したりする
- 他に必要な見出しや内容があれば、追加させる
レビューさせる
- 文章の流れや内容を確認する
- ここで、AIに「この文章はどう？」と聞いてみることもある
- AIが指摘してきた内容を修正したり、追加したりする
最後に、全体を通して読みやすくなるように修正させる

まとめ

AIツールを活用することで、通常なら面倒でやる気にならないような改善作業も、やる気になる。
開発環境の構築がすぐに終わる
デザインの実装とかも勝手に試行錯誤してほっといたらいい感じになる
記事作成も構造化されたアプローチで品質向上
既存の記事の内容の校正や改善も簡単にできた
本当は、ルール・基準・フローに従って、ほぼ全自動で勝手にやっといてほしい。