今回は以下の内容を掘り下げます。
⑦ エラーが出たらどうする？
自動実行中にエラーが出たとき、気づける仕組みは必要？
→ 誰も見ていない朝6時に動くので、失敗してもわからないのでは……？
⑧ スマホで見たときのデザインは？
パソコン向けに作ったページをスマホで見ると崩れることがある。
→ スマホでも見やすくするには何が必要？
『⑦ エラー対処：失敗したときに気づける仕組み』について
朝6時に自動で動く、ということはその瞬間、誰も画面を見ていません。
エラーが出ても誰も気づかない、ということです。
翌朝ブラウザを開いたら「昨日のニュースが表示されていない」という状態になって初めて気づく、というのは避けたいかも……。
そこで、ログファイルを残す仕組みを入れます。
ログファイルとは
ログファイルとは、誰しもわかる通り、プログラムが実行されたときの記録を残すファイルです。
「いつ実行されたか」「成功したか」「エラーが出たなら何のエラーか」をテキストファイルに記録しておけば、何か起きたときに追えますもんね！
Pythonには logging というログを記録するための標準ライブラリがあるそうです。
相棒（AI）にお願いして、参考内容を以下の通り出力してもらいました。
import logging
from datetime import datetime
# ログの設定
logging.basicConfig(
filename=f"logs/digest-{datetime.now().strftime('%Y-%m-%d')}.log",
level=logging.INFO,
format="%(asctime)s %(levelname)s %(message)s",
encoding="utf-8"
)
# 使い方
logging.info("ニュース取得を開始しました")
logging.error("エラーが発生しました：RSSの取得に失敗")
実行後に logs/ フォルダの中を見ると、以下のような記録が残るとのこと。
2026-05-18 06:00:01 INFO ニュース取得を開始しました
2026-05-18 06:00:03 INFO ITmedia から 10件取得しました
2026-05-18 06:00:05 INFO Geminiで要約しました
2026-05-18 06:00:06 INFO data/digest-2026-05-18.json に保存しました
2026-05-18 06:00:06 INFO 完了しました
エラーが出たときは ERROR と記録されるので、翌朝ログファイルを開けば何が起きたか確認できます。
よし、採用！！
『⑧ スマホ対応デザイン：レスポンシブデザインを使う』について
なぜスマホで崩れるのか
パソコン向けに作ったHTMLをスマホで見ると、崩れることがあります。
原因はシンプルで、スマホとパソコンでは画面の幅が全然違うからです。
パソコンは1000px以上の幅があるのに対し、スマホは375〜430px程度です。
パソコン向けに横並びで作ったカードが、スマホでは画面からはみ出してしまう、というのが典型的な崩れ方です。
レスポンシブデザインとは
画面サイズに応じてレイアウトを自動で切り替える仕組みのことです。
パソコンでは横3列のカード表示、スマホでは縦1列に並び替える、
というようなことをCSSの設定だけで実現できます。
HTML/CSSは、昔に独学で少し手を付けていたので、なんとなく理解できそうな予感です。
最低限やること2つ
① viewportの設定
HTMLの <head> の中に、以下の1行を入れるだけです。
これを入れないと、スマホで見たときに文字が極小になります。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【この一行は……】
定番のおまじないです！
最近のWeb開発では、ほぼ100%のHTMLテンプレートに最初から入っています。「なぜ入れるか」を深く考えて書いている人はほとんどいなくて、「ないとスマホで崩れるから入れる」という暗黙の了解です。
② メディアクエリの設定
CSSにこういう書き方をすると、「画面幅が600px以下のときだけこのスタイルを使う」という設定ができます。
/* パソコン向け：カードを横並びにする */
.card {
width: 30%;
}
/* スマホ向け：画面幅600px以下のときは縦1列にする */
@media (max-width: 600px) {
.card {
width: 100%;
}
}
viewportタグと似ていますが、こちらは決まった型があるわけではなく、画面幅に応じて自分でスタイルを切り替えられます。この @media を使った書き方をメディアクエリといいます。レスポンシブデザインの基本的な手法です！
この①と②の2つを入れるだけで、パソコンでもスマホでも見やすいページになります。
スマホで確認する方法
実際にスマホを使わなくても、パソコンのブラウザで確認できます。
Chromeの場合、F12キーを押して開発者ツールを開き、スマホのアイコン（「デバイスツールバーを切り替える」）をクリックすると、スマホ表示のシミュレーションができます。
まとめ
- エラー対処はログファイルを残す仕組みで対応する
- ログを見れば「いつ・何が起きたか」が後から確認できる
- スマホ対応はviewportの設定とメディアクエリの2つを入れるだけで基本的に対応できる
- スマホ表示はブラウザの開発者ツールで確認できる
これで①〜⑧の疑問が全部整理できました！
次回
次回はいよいよ、整理した内容をもとにCursorへの要件定義プロンプトを完成させます。