サイトを作っていて、地味に困ることがあります。
完成したのに、誰にも見せられない。
自分のPCの中では、ちゃんと動いています。ボタンも動くし、アニメーションもある。「お、いいじゃん」と思う。
でも、それを誰かに見てもらおうとした瞬間、急に困ります。
スクショでは動きが伝わらない。画面共有では、相手の時間をもらうことになる。
「ちょっと触ってみてください」――これができたらな……。
AI先生に聞いてみた
最近こういう小さな悩みは、とりあえずAI先生に聞くようにしています。
AIを友達とか、優秀な部下っていう人がいるけど、僕にとっては先生。とくにWeb制作については分からないことは何度でも教えてくれる。AI様さま。
「作ったサイトをURLで送れるようにしたいんですけど、何か方法ないですか？」
そう聞いてみました。
GitHub Pagesという答え
返ってきたのは、GitHub Pagesという言葉でした。
GitHubはコードを置いておく場所。そのくらいの認識だったので、少し意外でした。
「え、GitHubってサイトになるの？」
言われた通りに設定してみると、数分後にはURLがひとつ発行されていました。
それを別の端末で開いてみます。
さっきまで自分のPCの中にしかなかったサイトが、普通にブラウザで表示されました。
これは、結構びっくりしました。GitHubで公開できるとは。
……と思ったら壊れてた
喜んだのも束の間。開いたサイトの様子が、なんだかおかしいのです。
- 画像が出ない
- CSSも当たっていない
- JavaScriptも動いていない
ローカルでは完璧だったのに、公開した瞬間に別物になっていました。
一瞬、「あ、これ詰んだやつだ」と思いました。
AI先生と原因探し
AI先生に聞いてみます。
「画像とかCSSとか全部動かないんですけど、何が原因っぽいですか？」
パスを見てみてください。返ってきたのは、シンプルな答えでした。
/assets/logo.png
これが、原因でした。
なぜGitHub Pagesだと画像が404になるの？
パスの書き方には、大きく分けて2種類あります。絶対パス（/assets/logo.pngのように「/」から始まる書き方）と、相対パス（assets/logo.pngのように、今いる場所を基準にする書き方）です。
ローカル環境では、サイトのルートが自分のPCそのものになるので、絶対パスでも問題なく動いてしまいます。ところがGitHub Pagesでは、サイトがユーザー名.github.io/リポジトリ名/という、少し奥まった場所に公開されます。
絶対パスのまま「/」から始めてしまうと、本来見るべき場所とはズレたところを見に行ってしまう。だから、画像やCSSが見つからず404になってしまうんです。
直したら、たった一文字だった
原因が分かれば、あとは早いものでした。
/assets/... を assets/... に。
ファイルの構成は変えていません。変えたのは、「/」だけ。
もう一度公開すると、今度はちゃんと動きました。ローカルと同じ見た目が、そのまま出てきました。
たった一文字で、ここまで変わるのか。思わず笑ってしまいました。
まとめ
今回一番大きかったのは、エラーを直したことではありません。GitHub Pagesという仕組みを知ったこと。それに尽きます。
ローカルで作ったものを、そのままURLで共有できる。スクショも、画面共有もいらない。URLをひとつ送ればいい。
それだけで、確認のやり取りが一気に軽くなりました。
そして、もうひとつ気づいたことがあります。
クライアントごとに確認ページを分けられたら、もっと便利かもしれない。
これは次の話で、またAI先生に聞いてみることにします。
コメント