はじめての
システムづくり 入門

1システムって何？ 全体像をつかむ

最初に、いちばん大事な「全体像」をつかみます。ここが分かると、後の細かい話が一気にラクになります。

会計の世界に「会計システム」がありますよね。仕訳入力・元帳・試算表・帳票出力…と、別々の機能が連携して 「経理」という1つの仕事をこなします。今回作ったものも同じで、複数の部品が連携して「旅行プランを作って届ける」 という1つの仕事をします。

登場する部品（これだけ覚えればOK）

仕事の流れ（5ステップ）

① データを読む（誰の・どんな条件か）
   ↓
② Claudeが行き先を選び、文章を書く
   ↓
③ それをHTML（きれいなページ）にする
   ↓
④ Netlifyに公開してURLを作る
   ↓
⑤ LINEでそのURLを届ける

このあとの章は、この5ステップに出てくる部品を1つずつ、ていねいに見ていきます。 「今どの部品の話か」を意識すると迷子になりません。

2インターネットとWebの基礎

Webページがスマホに表示されるとき、裏で何が起きているのか。ここは全ての土台です。

「お願いする側」と「応える側」

あなたがブラウザでURLを開く＝「このページください」とサーバーにお願い（リクエスト）し、 サーバーが「どうぞ」と返事（レスポンス）でページを返す。この往復がWebの基本動作です。

住所のしくみ：URL

分解すると――
・https:// … 通信の方式（sは「暗号化＝安全」の印）
・sss-family-trips.netlify.app … どのサーバーか（ドメイン名＝建物の名前）
・/seiha.html … その中のどのページか（部屋番号）

結果は数字で返る：HTTPステータス

今回のLINE設定中、「403」が出ました。これは「鍵が合わず受け付けを拒否」という意味。 鍵を正しく直したら「200（成功）」に変わり、設定完了が確認できました。 数字の意味を知っていると、トラブルの原因がすぐ絞れます。

3ページの作り方（HTML・CSS）

旅行プランの「雑誌みたいなページ」は、HTMLとCSSという2つの言葉でできています。役割がはっきり分かれています。

HTML＝中身と構造

<h1>箱根の旅</h1>        ← 大見出し
<p>涼しい高原へ。</p>       ← 段落
<img src="写真URL">        ← 画像

<h1>のように、タグで要素の種類を示します。開始タグと終了タグ（</h1>）で挟むのが基本です。

CSS＝見た目（デザイン）

h1 { color: green; font-size: 30px; }
   ↑どの要素に  ↑何を   ↑どうする

スマホ対応＝レスポンシブ

このページ自体もレスポンシブです。文字幅を読みやすい幅に抑え、スマホで自然に縦に流れるようにしています。

4ネットに公開するしくみ（Netlify）

作ったHTMLは、そのままでは自分のPCの中だけ。みんなが見るには「公開」が必要です。

今回は publish.py というプログラムが、できたHTMLを全部まとめてNetlifyへデプロイし、 https://...netlify.app という固定URL（毎回同じ住所）を保ちます。 だから、一度妻に送ったURLは、中身が新しくなってもそのまま使えます。

5データの持ち方（JSONという台帳）

「誰の・どこに行った・予算は」という情報は、JSONという形式のファイルに記録しています。

たとえば訪問記録 visited.json はこんな形です：

{
  "prefectures": ["東京都", "福岡県", "石川県"],
  "countries": ["シンガポール", "グアム"]
}

読み方のルール（これだけ）

• { } ＝ ひとまとまりの情報（オブジェクト）。会計でいう「1件のマスタ」
• [ ] ＝ 並んだ一覧（配列・リスト）。「明細行の並び」
• "名前": 値 ＝ 項目名と中身のペア。「勘定科目：金額」
• カンマ , で区切る。引用符 " で文字を囲む

6プログラムを動かす（Python）

「自動でやってくれる手順書」を書く言葉が、プログラミング言語です。今回はPythonを使いました。

専用の道具箱：仮想環境

今回は requests（ネット通信）、python-dotenv（鍵の読み込み）、Pillow（画像作成）などを 道具箱（.venv）に取り寄せて使いました。ゼロから作らず既製部品を組み合わせるのが、現代の開発の基本です。

7AIに作らせる（Claude・サブスク）

行き先を選び、文章を書き、HTMLまで作る「執筆者」がAI（Claude）です。ここで重要なコスト判断もしました。

プロンプトには「子は2歳」「未訪問から選ぶ」「写真は実在のものを」「夫婦の年齢は書かない」など、 細かい条件を全部書いてあります。AIはこの指示書に従って毎回ゼロから作るので、指示書の質がそのまま品質になります。

いちばん大事な判断：サブスク vs API

8LINEと連携する（ボットの心臓部）

「LINEで地名を送ると返ってくる」――この自動応答のしくみを、順を追って。

3つの「送り方」

依頼の流れはこうです：地名を受信 → すぐリプライで「作成中」→（裏でAIが数分かけて生成）→ 完成したらプッシュでURLを送る。生成に時間がかかるため、即レスと完成連絡を分けているのがポイントです。

受信のしくみ：Webhook

本物か確かめる：署名チェック

9自宅PCを世界とつなぐ（サーバー・トンネル）

第8章で「受け取る公開URLが要る」と分かりました。でも、家のPCは普通インターネットから直接見えません。その解決策です。

なぜ直接つながらないのか

家庭のPCは、いわば「大きなビルの中の一室」。ビルには代表住所（プロバイダ）はありますが、 個々の部屋（PC）には外から届く表札がありません。だから外（LINE）から直接ノックできないのです。

10自動で動かす（スケジューラ・常駐）

「何もしなくても月・木の12時に届く」――この自動運転のしくみです。

今回は受付サーバーの中に「時計を1分ごとに見る」処理を組み込み、 月・木の12時になったら自動で配信を始めます。別々の仕組みを増やさず、すでに常駐しているサーバーに役割を持たせた形です。

11つまずき大全（今回ハマった話）

初心者がよく出会う「あるある」を、今回の実例で深掘りします。ここを読むと“なぜ”が腹落ちします。

① 日本語が「萓・」に化ける（文字コード）

コンピュータは文字を「数値（バイト）」で記録します。「あ」を何番にするかの取り決めが文字コード。 代表がUTF-8（世界標準）と、Windows日本語の古いcp932（Shift-JIS系）。 書いた時と読む時で規格がズレると、数値の解釈が食い違い、文字化けします。

② 鍵の取り違え

「サブスクで動かすべき所」に「古いAPIの鍵」が渡ってしまい失敗（第7章）。 鍵は種類と用途があり、正しい鍵を正しい窓口へ渡すのが鉄則です。

③ ポートのバッティング

同じ窓口番号（8788）で2つのサーバーを起動しようとして衝突。「1つの窓口に受付は1人」。 古い方を止めてから起動して解決しました。

④ 順番の罠

LINE設定で「Webhookを有効化」しようとしたら「先にURLを登録して」と言われ、 逆に「URL登録」には「先に有効化」が要りそう…という“鶏と卵”に。 正解は「固定URLを先に決めておけば、URL登録 → 有効化 の順で進める」でした。 手順の前後関係を見抜くのも実務スキルです。

12セキュリティの基本

いちばん大事な話。鍵の管理を間違えると、他人にサービスを悪用されます。

• 鍵はすべて .env という1ファイルに集約し、人に見せない・チャットに貼らない・SNSに載せない。
• .gitignore に .env を登録し、うっかり公開を防止。
  用語：.gitignore

  「このファイルは共有・公開の対象にしない」と指定するリスト。
• 万一漏れたら、各サービスの管理画面で鍵を作り直す（再発行）。番号を変えれば古い鍵は無効になります。

13用語ミニ辞典