おはようございます😄
今日は暖かくて、とてもいい天気ですね☀️
朝から気合を入れて、アプリの不具合解消に取り組みました🔧
そしてついに――足し算アプリの更新が完了しました! 🎉
スマホで表示するとボタンや数字が大きすぎて見づらかったため、
全体を少しコンパクトに調整しました📱✨
だいぶスッキリして、見やすくなったと思います。
ただ、本当は「数を図形で表す表示」を
5個ごとに折り返すようにしていたのですが、
画面サイズによって崩れてしまうことが判明…😅
レスポンシブ対応の難しさを実感しました。
この部分は今後の課題ですね。
それでも、ひとまずアップデートできたので一安心です😊
少しずつですが、確実に改善していきます。
一昨日から頑張って不具合解消しましたが、結局何が悪かったか問いいうと、私もよくわからなかったので😓AIにまとめていただきました。↓
独自ドメイン(kaotyan.com)で運用しているサイトに、
「足し算アプリ」を追加しようとしたらトラブル発生。
-
アプリにアクセスするとトップページへ飛ばされる
-
デザイン(CSS)が反映されない
-
GitHubの「DNS Check」が終わらない
なぜ起きたのか整理します。
① そもそもDNSって何?
DNSとは、
「この名前のサイトは、どのサーバーにありますか?」
を教えてくれる仕組み
のことです。
たとえば:
kaotyan.com
↓
GitHubのサーバー
と変換してくれます。
これを「名前解決」と言います。
② 正常なときのイメージ
ブラウザ
↓
kaotyan.com
↓
DNS
↓
GitHub Pages
↓
メインサイト
ポイントは、
✅ ドメインは1つ
✅ 配信元も1つ
ということ。
③ 今回やってしまったこと
アプリ用のリポジトリにも
同じ独自ドメインを設定してしまいました。
つまりこうなっていました:
kaotyan.com → メインサイト
kaotyan.com → 足し算アプリ
DNSからすると、
「え、どっちに行けばいいの?」😵
という状態。
これが原因で、
-
リダイレクトが起きる
-
DNS Checkが終わらない
という不安定な状態になりました。
④ CSSが効かなかった理由
アプリはこういうURLでした:
kaotyan.com/add-math/
でもCSSの読み込みが:
/style.css
になっていました。
これは「一番上の階層」を探しにいきます。
実際の場所は:
/add-math/style.css
なので、
❌ ファイルが見つからない
❌ デザインが崩れる
という結果に。
⑤ DNSはすぐ反映されない
DNSには TTL(生存期間) という仕組みがあります。
簡単に言うと、
古い情報をしばらく覚えておく仕組み
です。
なので、
設定を直してもすぐ直らないことがあります。
その場合は:
-
Ctrl + F5 で強制再読み込み
-
少し時間を置く
これが必要です。
⑥ 正しい構成はこれ
独自ドメインは1つのリポジトリだけに設定。
kaotyan.com
↓
メインサイト
├── /add-math/
├── /app2/
└── /app3/
これが一番シンプルで安定します。
↑
AI分析はとのことのことです。
最初は焦りましたが、
実践で起きたエラーは一番の勉強になりますね。
