Skip to content

web をビルドの無い静的サイトにする - #27

Merged
ryuuji merged 1 commit into
masterfrom
modernize-web
Aug 2, 2026
Merged

web をビルドの無い静的サイトにする#27
ryuuji merged 1 commit into
masterfrom
modernize-web

Conversation

@ryuuji

@ryuuji ryuuji commented Aug 2, 2026

Copy link
Copy Markdown
Member

1ページの静的サイトに Parcel のビルドを挟む必要が無かったので、コンパイル済みの CSS を直接置く形にしました。

先にダッシュボードの設定変更が必要です。 下の「マージ前にお願いしたいこと」を参照してください。

ビルドの廃止

sass は 260 行で、変数1つとメディアクエリ用のミックスインだけでした。コンパイル結果を web/css/style.css として置けば足ります。

変更前 変更後
ビルド Parcel（npm run build） なし
依存 176 パッケージ / node_modules 125 MB 0
構成 web/src/ → web/build/ web/ をそのまま配信

ビルドが無くなるので、Node のバージョンや依存の更新でビルドが壊れる経路そのものが消えます。先ほど #26 で入れた .node-version と .npmrc も不要になったので削除しました。

GitHub Pages の撤去

本番は Cloudflare Pages（openbookcamera.com）で、calil.github.io/openbookcamera/ は実質使われていなかったため、ワークフローごと削除しました。npm ビルドに依存していたので、残すなら書き換えが必要でした。

Pages サイト自体の無効化は、この PR のマージ後に行います。

直した不具合

内容
og:image 相対パスで、SNS 側が画像を解決できない状態でした → 絶対 URL に
<html lang="en"> 中身は全部日本語（og:locale は ja_JP）→ ja に
viewport maximum-scale=1.0, user-scalable=no でページを拡大できませんでした → 削除
alt="Gitbhub" → GitHub
Google Analytics UA-32412597-10 は 2023年7月に停止済み。動かないコードが残っていました → 削除

アクセス解析は Cloudflare Web Analytics に寄せます（ダッシュボードで有効にするとタグが自動で入るため、リポジトリ側の作業はありません）。

消したもの

  • web/src/js/main.js — MDN のチュートリアルの残骸で、どこからも参照されていませんでした 
    var iceCream = 'チョコレート';
if (iceCream === 'チョコレート') { alert('やった、チョコレートアイス大好き！'); }
  • web/src/test.html — 空のひな形
  • img/techspecs.svg（143 KB）と img/spec-arduino.svg — 未参照

画像は指示どおりそのままです（書影のスキャン見本なので圧縮していません）。

見た目が変わっていないことの確認

CSS の意味比較 — 63 セレクタすべて一致しました。差は Parcel の最小化による表記ゆれだけです。

#cccccc ↔ #ccc / bold ↔ 700 / transparent ↔ 0 0
max-width: 768px ↔ width <= 768px   ← Parcel が新しい範囲記法に書き換えていた

スクリーンショット比較 — 外部通信を遮断して撮影条件を揃えたうえで、3つの幅で撮り比べました。

幅 平均差 最大差 差のある画素
1400px 0.000 0 0 / 1,680,000
768px 0.000 0 0 / 921,600
390px 0.000 0 0 / 468,000

いずれもピクセル単位で完全一致です。

マージ前にお願いしたいこと

Cloudflare Pages の設定変更が必要です。設定を変えてからマージしてください（順序が逆だとビルドが失敗します）。

設定 → ビルド:

項目 変更前 変更後
ビルドコマンド npm run build （空）
ビルド出力ディレクトリ build /
ルートディレクトリ web web（変更なし）

あわせて、アクセス解析を使う場合は Web Analytics をこのサイトで有効にしてください。

残っている課題（今回は触っていません）

style.sass に、コンマの抜けで意図した指定が効いていない箇所が2つありました。直すと表示が変わるため、そのままコンパイルして持ってきています。

  • #home #specs .hardware に display: flex が当たっていない
  • #home #specs .size p に width: 45% が当たっていない

🤖 Generated with Claude Code

https://claude.ai/code/session_018pZeLKL6PG2mQ7prMqL68V

@ryuuji
web をビルドの無い静的サイトにする
56e285e 
1ページの静的サイトに Parcel のビルドを挟む必要が無かったので、
コンパイル済みの CSS を直接置く形にした。

## ビルドの廃止

sass の中身は 260 行で、変数1つとメディアクエリ用のミックスインだけ。
コンパイル結果の CSS を web/css/style.css として置けば足りる。

  - Parcel と sass を削除（package.json ごと）
  - web/src/ を web/ 直下へ移動
  - 依存 176 パッケージ（node_modules 125 MB）→ 0

ビルドが無くなるので、Node のバージョンや依存の更新でビルドが壊れる
経路そのものが消える。先に入れた .node-version と .npmrc も不要になった。

## GitHub Pages の撤去

本番は Cloudflare Pages（openbookcamera.com）で、
calil.github.io/openbookcamera/ は実質使われていなかったため、
ワークフローごと削除した。npm ビルドに依存していたので、
残すなら書き換えが必要だった。

## 直した不具合

  - og:image が相対パスで、SNS 側が画像を解決できない状態だった
  - html の lang が en なのに中身は日本語（og:locale は ja_JP）
  - viewport の maximum-scale=1.0, user-scalable=no でページを拡大できなかった
  - GitHub のリンクの alt が "Gitbhub"
  - Google Analytics が UA-（2023年7月に停止済み）で、動かないコードが残っていた
    → Cloudflare Web Analytics に寄せる（ダッシュボードで有効にすると自動で入る）

## 消したもの

  - web/src/js/main.js … MDN のチュートリアルの残骸。どこからも参照されていない
  - web/src/test.html … 空のひな形
  - img/techspecs.svg (143 KB) と img/spec-arduino.svg … 未参照

## 見た目が変わっていないことの確認

  - CSS を意味レベルで比較し、63 セレクタすべて一致することを確認した
    （差は Parcel の最小化による表記ゆれのみ。#cccccc↔#ccc、bold↔700、
    　max-width:768px↔width<=768px など）
  - 幅 1400 / 768 / 390 px でスクリーンショットを撮り比べ、
    いずれもピクセル単位で完全一致（差 0）

## 残っている課題（今回は触っていない）

style.sass に、コンマの抜けで意図した指定が効いていない箇所が2つあった。
直すと表示が変わるため、そのままコンパイルして持ってきている。

  - #home #specs .hardware に display:flex が当たっていない
  - #home #specs .size p に width:45% が当たっていない
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Aug 2, 2026

Copy link
Copy Markdown

Deploying openbookcamera with  Cloudflare Pages  Cloudflare Pages

Latest commit: 56e285e
Status:🚫  Build failed.

View logs

@ryuuji
ryuuji merged commit c854078 into master Aug 2, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ryuuji