AIによるコーディングが当たり前になった今、
「バックエンド（見えない仕組み）をどう設計するか」がとても重要になってきています。

でも、バックエンドってなんだか難しそう…と思う方も多いはず。
そこで今回は、最も手軽に学べるバックエンド言語「PHP」を題材に、
自分のパソコンで動かせる最小の開発環境 をつくってみましょう。

テンプレートはこちら

💬 注意：イカPOはPHP初心者です。
本記事は備忘録的にまとめているので、間違いがあればぜひ教えてください！

🧰 1. 事前準備

🐳 Docker Desktop をインストール

公式サイト：👉 https://www.docker.com/ja-jp/

Docker Desktopとは、あなたのPCの中に「仮想の小さなサーバー（＝コンテナ）」をつくるツールです。
ApacheやPHPを個別インストールしなくても、同じ構成をすぐ再現できます。

🧩 VS Code（エディタ）を準備

Docker拡張とも相性が良く、設定もシンプル。
初心者に最もおすすめのエディタです。

📁 2. 作業用フォルダを作る

Windowsの場合は、ユーザーディレクトリ配下がトラブル少なめです。
パスに日本語やスペースが無い場所を推奨します。

例：

C:\Users\あなたのユーザー名\Work\php-baseapp-min

このフォルダに、最小テンプレート一式を置きます。
この記事はすでにこの構成を前提にしています。

⚙️ 3. 最小テンプレートを配置する

以下の構成が、今回使用する イカPOオリジナルの最小PHPテンプレート です。
（このひな形はイカPOが独自に作成したものです）

フォルダ構成

docker-compose.yml
Dockerfile
public/
 ├─ .htaccess
 └─ index.php

🧾 docker-compose.yml

version: '3.8'

services:
  web:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./public:/var/www/html
    container_name: php83-apache-min
    environment:
      APP_ENV: local

ポイント

• build: . → カレントディレクトリの Dockerfile でビルド
• container_name: → コンテナ名（任意）
• ports: → ローカル8080 → コンテナ内80番（Apache）
• volumes: → ローカルpublicをコンテナのドキュメントルートへマウント
• environment: → 環境変数。getenv('APP_ENV') で参照可能

💡 public 内のファイルを編集すれば、ブラウザを更新するだけで変更を確認可能（自動リロードではなく手動更新で反映）。

🐘 Dockerfile

FROM php:8.3-apache
RUN a2enmod rewrite
WORKDIR /var/www/html

補足：

• ベース：php:8.3-apache
• a2enmod rewrite → .htaccess のURL書き換え機能を有効化
• WORKDIR → コンテナの作業フォルダを /var/www/html に指定

この3行で「PHP + Apache が動く最小のWebサーバー」が構築されます。

💬 public/index.php

<?php
date_default_timezone_set('Asia/Tokyo');
echo "<h1>PHP Minimal Starter</h1>";
echo "PHP version: " . phpversion() . "<br>";
echo "Time: " . date('Y-m-d H:i:s');
?>

最小の「動いていることがわかる」サンプルです。
編集して保存し、ブラウザを再読み込みすれば即反映します。

🧩 public/.htaccess

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [L]

存在しないURLをすべて index.php に転送するルールです。
これにより、PHP側でURLに応じた処理を記述できるようになります。

🚀 4. 起動してみよう

Docker Desktopを起動して

ターミナルでプロジェクトフォルダへ移動し、次を実行👇

docker compose up -d

初回はベースイメージのダウンロードで少し時間がかかります。
完了したらブラウザで：

👉 http://localhost:8080

を開きましょう。

表示例

PHP Minimal Starter
PHP version: 8.3.x
Time: 2025-10-18 12:34:56

よく使うコマンド

📘 主要3ファイルの説明

ここからは、今回のテンプレートを動かすうえで欠かせない
3つの設定ファイルについて、具体的に説明します。

🧩 .htaccess（Apacheの設定ファイル）

.htaccess は Apache サーバーの動作ルールをフォルダ単位で指定する設定ファイル です。
今回の Docker 環境では /var/www/html（＝public/）以下に配置され、
URLの書き換えやアクセス制御を行います。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.php [L]

これは「アクセスされたパスに実際のファイルやディレクトリがなければ、
すべて index.php に処理を渡す」という意味です。

✅ .htaccess は 「すべてのリクエストをPHPで受け止める」ための設定ファイル です。

🧱 Dockerfile（PHP+Apache環境を構築する手順書）

Dockerfile は PHP と Apache が動く環境を構築するための設定ファイル です。
Dockerはこのファイルを読み込み、指定された環境を自動的に作ります。

FROM php:8.3-apache
RUN a2enmod rewrite
WORKDIR /var/www/html

⚙️ docker-compose.yml（環境全体の構成設定）

docker-compose.yml は 複数のコンテナ（サービス）をまとめて起動・管理する設定ファイル です。
今回は PHP サーバーのみですが、MySQLなどを追加する場合もこのファイルで管理します。

version: '3.8'

services:
  web:
    build: .
    ports:
      - "8080:80"
    volumes:
      - ./public:/var/www/html
    container_name: php83-apache-min
    environment:
      APP_ENV: local

📦 10. ファイル名やプロジェクト名を変えるとき

Dockerは、フォルダ単位で環境を認識します。
そのため、フォルダ名やファイル名を変更しても動作しますが、
いくつかの注意点があります。

✅ プロジェクトを複製したい場合

1. 元のフォルダをコピーして、任意の新しい名前をつける php-baseapp-min → php-todoapp
2. ファイル名（docker-compose.yml、Dockerfile）はそのままでOK
3. ただし、container_name: は変更推奨 。同名のコンテナが重なると起動エラーになります。docker-compose.ymlは確認しましょう。
4. 起動時は、新しいフォルダへ移動してから docker compose up -d を実行すれば完了。

🧩 新しいPHPプロジェクトを作るとき

1. 新しいフォルダを作る（例：php-loginapp）
2. このテンプレートをコピーして配置
3. public/index.php を必要な内容に変更
4. docker-compose.yml 内の container_name を変更

💡 Dockerは「フォルダ＝1プロジェクト」として扱うため、
同じテンプレートを何度でもコピーして新しい環境を作れます。

❌ やってはいけないこと

🧭 11. まとめ

• Dockerを使えば、数分でPHP環境を再現できる
• docker compose up -d で起動 → http://localhost:8080 で確認
• public を DocumentRoot にすることで安全・シンプル
• フォルダ単位で複製・再利用できる（container_name は変更推奨）

本記事のテンプレートはイカPOオリジナル設計です。改善点等あれば教えてください。

▶ 次回予告

次回は、この環境を使って
シンプルなPHPアプリ（ログイン機能つき）を作っていきます。
お楽しみに🦑！

🛡️ 免責文

本記事は教育・情報提供を目的として作成しています。
内容の正確性には細心の注意を払っていますが、
動作環境やバージョンによる差異については保証できません。
実際の運用はご自身の責任で行ってください。

今回は 「ChatGPTとPythonを組み合わせて、画像とナレーションから自動で動画を作る方法」 を紹介します。

記事を ChatGPT で要約し、台本化したテキストを gTTS でナレーション音声に変換。その音声とスライド画像を MoviePy で結合すれば、ワンクリックで動画が完成します。

手順はシンプルで、

1. スライドを用意する
2. 原稿を用意する
3. Python スクリプトを実行する
   ──これだけです。

スライド内容の要約や原稿作成は ChatGPT に任せれば、制作スピードは一気に加速。発表のアーカイブや、社内向けの教育・共有コンテンツを短時間で動画化したい場面に最適です。

さらに記事内には サンプルコードとZIPファイル（bat付き） を添付しています。Pythonさえインストールすれば、そのまま実行できる仕組みになっていますので、ぜひ試してみてください。

ライブラリ紹介 — gTTS と MoviePy をかんたん解説

• gTTS：文章→音声への変換が得意。声のイントネーションや句読点もキレイに反映してくれるのが最高。
• MoviePy：動画編集がコードで完結。Slidesスライドの結合〜ナレーションとの合体まで、一気に処理できる優れもの。

どちらも「自動化」「再現性」「テキスト軸」の強みがあって、記事やスライドから動画コンテンツを自動生成したいって人には超おすすめです。

gTTS（Google Text-to-Speech）

Google 翻訳の読み上げ機能を Python から扱えるライブラリで、文章をそのまま MP3音声ファイル に変換できます。
lang="ja" を指定すれば日本語の読み上げも可能で、句読点を多めに入れるとより自然な読み上げになります。
軽量で導入が簡単であり、読み仮名や略語の補正など前処理で発音をコントロールできる点も特徴です。

インストールはターミナルまたはコマンドプロンプトで

pip install gTTS

と入力するだけです。
例えば、以下のコードで簡単に音声ファイルが作成できます。

from gtts import gTTS
tts = gTTS("こんにちは、ブログを音声にします。", lang="ja")
tts.save("output.mp3")

MoviePy（Pythonで動画編集まるごと）

Python で動画編集を自動化できるライブラリです。カット、連結、タイトル挿入、音声合成、速度変更などをスクリプトでまとめて処理できます。
GIF や MP4 など多数のフォーマットに対応し、裏では ffmpeg を利用して高品質な動画を生成します。直感的な API で、数行のコードでも複雑な編集が可能です。

インストールはターミナルまたはコマンドプロンプトで

pip install moviepy

としますが、もし

ModuleNotFoundError: No module named 'moviepy.editor'

というエラーが出た場合は、安定して動くこちらのバージョンを使ってください。

pip install moviepy==2.0.0.dev2

サンプルコード（画像→動画）

まず、ダミー画像をダウンロードして、スクリプトと同じフォルダに置きます。
📷 dummy_image.png をダウンロード

そのうえで、以下のコードを img_to_video.py として保存し、実行します。

# img_to_video.py
from moviepy.editor import ImageClip

# ダミー画像（同一フォルダの dummy_image.png）を5秒の動画に変換
clip = ImageClip("dummy_image.png").set_duration(5)

# mp4として出力（24fps）
clip.write_videofile("result_from_image.mp4", fps=24)

ディレクトリ構成（最小）

moviepy_image_sample/
├─ img_to_video.py # コード
├─ dummy_image.png      # ← ダウンロードした画像をここに置く
└─ result_from_image.mp4  # 実行後に生成

こんな感じのディレクトリ構成でサンプルは動きます。
了解。実装編を「必要なもの」中心に再構成しました。サンプルコードは出さず、**ディレクトリ構成（最小）**だけ掲載しています。

実装編。画像とナレーションテキストを用意して動画をつくろう

実際に画像とナレーションを用意して動画を作る方法を紹介します。サンプルコードも用意しているので試しに動かしてみてください。記事の最後にクリックで動くbat付きZIＰファイルを用意してるので、そちらも参考にしてください。

コードを動かすのに必要なものリスト

• Python 3.11
  本ワークフローは 3.11 系で動作確認しています。
• main_simple.py
  この記事で配布しているスクリプト。narration.txt の本文をそのまま gTTS で読み上げます。
• ナレーションテキスト（input/narration.txt）
  セクションは # で区切り、1行目がタイトル／2行目以降が本文。本文が音声になります。
• 画像（任意）
  input/slide_0.png, input/slide_1.jpg… のように番号付きで置くと、そのセクションの静止画として差し込みます。画像が無いセクションは自動生成のタイトルカード（黒地＋タイトル）になります。

ディレクトリ構成（最小）

project/
├─ main.py
├─ input/
│  ├─ narration.txt      # 原稿（本文）— 「#」で区切り、1行目=タイトル／以降=本文
│  ├─ slide_0.png        # 任意：セクション0の画像
│  └─ slide_1.jpg        # 任意：セクション1の画像…
├─ output/               # 自動出力（final_video.mp4）
└─ temp/                 # 中間ファイル（音声など）

サンプルコード

import os
from gtts import gTTS
from moviepy.editor import (
    AudioFileClip, ImageClip, CompositeVideoClip, ColorClip,
    concatenate_videoclips, vfx
)
from PIL import Image, ImageDraw, ImageFont
import numpy as np
import contextlib

# ===== 設定 =====
INPUT_DIR  = "input"
OUTPUT_DIR = "output"
TEMP_DIR   = "temp"
SIZE       = (1280, 720)
FPS        = 24

os.makedirs(OUTPUT_DIR, exist_ok=True)
os.makedirs(TEMP_DIR, exist_ok=True)

# ===== タイトル画像生成（スライドが無い場合用） =====
def make_title_clip(title: str, duration: float, size=SIZE):
    w, h = size
    img = Image.new("RGB", size, (0, 0, 0))
    draw = ImageDraw.Draw(img)

    font_candidates = [
        "Yu Gothic UI.ttf", "YuGothR.ttc", "Meiryo.ttc",
        "/System/Library/Fonts/ヒラギノ角ゴシック W6.ttc",
    ]
    font = None
    for path in font_candidates:
        try:
            font = ImageFont.truetype(path, size=64)
            break
        except:
            pass
    if font is None:
        font = ImageFont.load_default()

    max_w = int(w * 0.9)
    lines, line = [], ""
    for ch in title:
        tw, _ = draw.textbbox((0, 0), line + ch, font=font)[2:]
        if tw <= max_w:
            line += ch
        else:
            lines.append(line)
            line = ch
    if line:
        lines.append(line)

    total_h = sum(draw.textbbox((0, 0), l, font=font)[3] for l in lines) + 10 * (len(lines) - 1)
    y = (h - total_h) // 2
    for l in lines:
        _, _, tw, th = draw.textbbox((0, 0), l, font=font)
        x = (w - tw) // 2
        draw.text((x, y), l, fill=(255, 255, 255), font=font)
        y += th + 10

    return ImageClip(np.array(img)).set_duration(duration)

def find_slide_image(index: int):
    for ext in (".png", ".jpg", ".jpeg", ".webp"):
        p = os.path.join(INPUT_DIR, f"slide_{index}{ext}")
        if os.path.exists(p):
            return p
    return None

# ===== 原稿読み込み =====
with open(os.path.join(INPUT_DIR, "narration.txt"), "r", encoding="utf-8") as f:
    raw = f.read()

# 「#」区切りでセクション分割
sections = [s.strip() for s in raw.split("#") if s.strip()]

video_clips = []

for i, section in enumerate(sections):
    lines = section.splitlines()
    if not lines:
        continue

    title = lines[0].strip()
    body = "\n".join(lines[1:]).strip()
    if not body:
        continue

    # 音声生成
    voice_path = os.path.join(TEMP_DIR, f"voice_{i}.mp3")
    tts = gTTS(body, lang="ja")
    tts.save(voice_path)

    audio_clip = AudioFileClip(voice_path)
    duration = audio_clip.duration

    # 画像
    image_path = find_slide_image(i)
    if image_path:
        img_clip = ImageClip(image_path).set_duration(duration)
    else:
        bg = ColorClip(size=SIZE, color=(0, 0, 0), duration=duration)
        title_clip = make_title_clip(title, duration)
        img_clip = CompositeVideoClip([bg, title_clip.set_position("center")], size=SIZE).set_duration(duration)

    clip = img_clip.set_audio(audio_clip)
    video_clips.append((clip, audio_clip))

# ===== 出力 =====
if not video_clips:
    raise RuntimeError("動画にできるクリップがありません。")

final = concatenate_videoclips([vc for vc, _ in video_clips], method="compose")
final = final.fx(vfx.speedx, 1.5)

out_path = os.path.join(OUTPUT_DIR, "final_video.mp4")
final.write_videofile(out_path, fps=FPS)

# 後片付け
with contextlib.suppress(Exception):
    final.close()
for vc, ac in video_clips:
    with contextlib.suppress(Exception):
        vc.close()
        ac.close()

print(f"[done] {out_path}")

メモ（調整ポイントだけ）

• 再生速度は main.py の終盤、vfx.speedx(1.5) の係数を変更（等速=1.0）。
• 出力サイズは SIZE = (1280, 720) を変更（例：縦動画は (720, 1280)）。

以上を揃えれば、原稿と画像を置くだけで動画が書き出せます。

画像ついての注意点

簡単に実行手順

Pythonの知識は不要です。ZIPを解凍して下記の順に進めるだけでOK。

サンプルコードはこちら

1. Python 3.11 をインストール
   • 公式サイトから入手
   • インストール時に「Add Python to PATH」に必ずチェック
   • 確認：python --version → Python 3.13.x と表示されればOK
2. 添付のZIPファイルを解凍
   解凍後のフォルダに main.py、run.bat、input フォルダがあります。
3. ナレーションテキストに原稿を貼る
   • input/narration.txt に動画化したい原稿を貼り付け
   • # 原稿（本文）— 「#」で区切りで
4. スライド画像を入れる
   • input/slide_0.png、input/slide_1.jpg… の形式で置くと、そのシーンに反映
   • 無ければ自動でタイトルカード生成
5. run.bat をクリック
   • 初回は必要なライブラリが自動インストールされます
   • 完成動画は output/final_video.mp4 に出力

ナレーションテキストのルール

1. 区切りは「#」
   • 各セクションは # から始めます。
   • # の行は「スライドタイトル」になり、動画に表示されます。
2. 読み上げは本文のみ
   • # 行（スライドタイトル）は読み上げません。
   • 読ませたい場合は、タイトルを本文にも書きます。
3. 空行は無視
   • 空白行は自動的にスキップされます。
4. 日本語はそのまま書けばOK
   • gTTS が自然に読み上げます。
   • 読みにくい場合は句読点（、。）を増やすと自然になります。

サンプル（input/narration.txt の例）

# はじめに
はじめに
この動画では Python と MoviePy を使って、
画像とナレーションから動画を自動生成する方法を紹介します。

# ライブラリについて
ライブラリについて
まず gTTS で日本語音声を生成し、
MoviePy で動画に合成します。

# まとめ
まとめ
Python と数行のコードで、
スライドつきのナレーション動画が作成できます。

まとめ

ChatGPTで作成した原稿を gTTS で音声化し、MoviePy で画像と結合することで、誰でも手軽にスライド付きの動画を自動生成できます。画像がなくても自動でタイトルカードを生成でき、速度やサイズもコードの一部を変えるだけで調整可能です。発表のアーカイブや社内資料の動画化など、時短に役立つワークフローなのでぜひ活用してみてください。

サンプルコードはこちらから

「AIって流行ってるけど、結局何ができるの？」「自分の仕事には関係ないんじゃ？」と思っている人や、「試してみたけど、あまりうまく使えなかった」という人に向けて、義肢装具士として現場で働きながら感じたリアルな感想をお届けします。

ChatGPT Plusをどう活用？利用環境とスタイルを徹底紹介

使っているAIはChatGPT Plus

ChatGPT Plus（有料版）を使っています。対話の上限数を増やすために課金しました。あとは単純。課金してるから「使わなきゃ損」という気持ちでいろいろ試してきました。

PC・iPad・iPhone別｜ChatGPTが最も“使える”シーン

• PC（Windows）
  自宅や事務所などで、腰を据えて作業するときに使用。マルチモニター環境が一番快適です。
• iPad（第10世代）
  出先や移動中の作業に活用。画面も大きく、軽く使うには十分です。
• iPhone SE（第3世代）
  隙間時間にメモ代わりに使ったり、文章のアイデア出しなど簡易的な用途に便利。Apple Intelligence は使えませんが、GPTで十分です。

ChatGPT便利ワザ5選で業務効率化

【メリット①】メール・報告書を秒速仕上げ！ChatGPT文章術

メールや報告書、ブログ記事など、文章を書く時間が大幅に減りました。
書きたいことをざっと箇条書きにして渡せば、用途に合わせた文体で整えてくれる。
特に「上司向け」「報告書用」「ブログ向け」といった指示で、それっぽく仕上げてくれるのがありがたいです。
義肢装具士の仕事は“文章でお金を稼ぐ”わけではないので、ここが短縮できるのは本当に助かります。

【メリット②】AI壁打ちでアイデア整理がはかどる理由

業務アイデアの整理はもちろん、ブログ運営や引っ越し計画、ダイエット、家族イベントの段取りまで──とにかく何でも ChatGPT に壁打ちしています。やり方はシンプルで、

1. 思考の“素材”をそのまま投げる
   • 例）「来月引っ越すか迷ってる。メリット・デメリットを箇条書きで整理したい」
   • 例）「ブログのネタが渋滞中。カテゴリ別に優先順位を付けて一覧化して」
2. GPTが骨組みを作る
   • 引っ越しなら“家賃／通勤時間／保育園の空き状況”など評価軸をテーブル化
   • ブログなら“検索ボリューム／競合性／自分の得意度”でスコアリング
3. 自分の視点を上書き
   • 「家賃は多少上がっても通勤が楽ならOK」など条件を追記
   • GPTが再度リストを更新、優先順位を再計算

メモリー機能を絡めると、さらに便利

• 過去の計画を自動で持ち出す
  「去年立てた“体脂肪率18％計画”と今回のダイエット案、どこが変わった？」と聞くと、前回の食事スケジュールや運動メニューを引用しながら違いを比較してくれる。
• “思考ログ”としての役割
  週1で「今週やったこと／来週やること」を GPT にメモするだけで、自分用の業務週報が出来上がる。1か月後に振り返ると「先月は勉強時間が足りてなかったですね」と GPT が指摘し、改善案を提案してくれるのが地味に刺さる。
• 家族タスクの進捗管理にも転用
  引っ越し準備リストをメモリーに保存 → 新しい ToDo を投げると「それは『粗大ごみの手配』ステップですね」と紐づけてくれる。妻との共有メモをわざわざ更新しなくても、会話を進めるだけで自分専用の進捗表が育つ感覚。

要は 「頭の中のモヤ → 具体的な文字列」 へ瞬時に変換してくれるので、考える労力より“判断するエネルギー”にリソースを割ける のが最大のメリット。メモリー機能を併用すると、過去の自分との“差分”が見える→PDCAが自然に回る 感覚がクセになります。

【メリット③】コードも丸投げもやり方次第！プロトタイプ生成時短効果

趣味で Web制作や会社のコンテンツづくりもしていますが、GPTがいないともう無理です。
「こういうことをしたい」と投げると、サンプルコードを一瞬で作ってくれる。
そこからちょっとずつ改良していく、という使い方が定着しました。
プロトタイプ（試作品）は丸投げしてもそこそこの形に仕上がるので、スピード重視の時は非常に便利。

例えばこんな感じのプロトタイプも一瞬で作ってくれます。

See the Pen Untitled by ysk tmzw (@ysk-tmzw) on CodePen.

【メリット④】受注データを自動集計！ChatGPT×Python活用例

下肢装具の受注データを集計する作業があり、GPTに具体的な要件を渡して Python スクリプトを書かせたら、なんと動きました。
「担当者別・装具別の月次集計」「法別の集計」など、細かい条件を一つずつ指定し、それを確認させながら進めることで思った通りの表が完成。
これはかなり感動しました。

実際にGPTに投げたプロンプトは、以下のようなものです：

このプロンプトを投げて、GPTの出力内容を確認しながら「条件を理解しているか？」を逐一チェック。
そのうえで Python スクリプトを書かせたところ、想像以上に正確な出力が得られました。

このように、「やってほしいことを明確に言語化する」ことで、AIとのやりとりは格段にうまくいくようになります。
逆に、こちらの曖昧な指示がミスの原因になることも多いので、言葉にする力（プロンプト力）が大事だと感じた事例でした。

【メリット⑤】メモリー機能で“専属AI化”！回答精度が劇的UP

Plus版ではメモリー機能が使えるので、私の職業や住んでいる地域、過去の相談内容などを覚えたうえで会話ができます。
ちょっとしたお出かけの相談でも「その距離なら疲れそうですね」と返ってきたり、転職や家計の見直しも“前提”を踏まえて考えてくれる。
まさに「相棒」的な存在になってくれています。

ChatGPTの落とし穴4つと対策｜ハルシネーション・疲労感ほか

【デメリット①】ハルシネーション対策：嘘を見抜くチェック法

とにかく、真偽が怪しい情報を平気で出してきます。
コーディングでも、文章でも、「一見それっぽいけど中身が違う」ということは日常茶飯事。
人間が最終確認しないと、普通に事故ります。
これはChatGPTだけでなく、他のAIにも共通する課題だと思います。

対策としては：

• 丸投げしすぎない
• 出力を必ず自分の目で確認する
• 必要に応じて別の専門AIを使う

です。

【デメリット②】コピペが意外とめんどくさい

メールの文章を生成して、それをコピペして貼る。
コードを生成して、それをIDEに貼る。
これ、回数が増えると地味に面倒です。
「コピペすらめんどくさい」と感じるくらい、楽に慣れてしまったんですね。

解決策としては、GPTと直結したアプリ（Gmail、Notion、VSCodeなど）やAPIを使うと、かなり楽になります。

【デメリット③】スマホで使いにくい？PCマルチモニター最強説

スマホや iPad でも ChatGPT は動くので「どこでも使える」のは確かです。
ただ──がっつり作業する場面ではデメリットが目立ちます。

• 画面が狭い
  プロンプト欄と回答欄でほぼ画面が埋まり、スプレッドシートや資料を並べて確認できない。結局「戻る→確認→また戻る」の往復でストレス倍増。
• キーボード入力が遅い
  長文プロンプトやコードを打つとき、ソフトウェアキーボードでは指がつってしまうレベル。外付けキーボードを常に持ち歩くなら話は別ですが、荷物が増えて本末転倒です。
• アプリ切り替えの手間
  メール返信→GPT→メールにコピペ──のような流れで、アプリを行ったり来たり。PCならウィンドウを横に並べるだけで済むのに、スマホでは毎回スワイプ祭り。
• マルチモニター不可
  情報量が多いタスクでは「GPT 出力」と「編集対象ファイル」を同時表示できるかが勝負。スマホ画面ではどう頑張っても一望できず、集中力が削がれる一方です。

要するに、“消費”にはスマホが最適でも、“創造”にはPCがまだまだ最強。
私は「下書きのメモ取り」「移動中の簡単な質問」まではスマホで済ませ、本格的なプロンプト作成や結果の精査はPC＋デュアルモニターと割り切っています。

【デメリット④】AIを使うと、めちゃくちゃ疲れる

これは完全に個人的な話なんですが、ChatGPT を使うと脳がめっちゃ疲れます。
仮説→検証→結果確認→再検証、のサイクルが早すぎて、思考体力を消耗してしまうんですね。
あと、意思決定の連続が脳のリソースを奪っていく感覚があります。

私の対策は「意思決定の省略」

• 朝昼は同じメニューを食べる
• 通勤ルートを固定する
• 服装をルーチン化する
  など、“考えないで済む”生活習慣を意識しています。

4. まとめ：ChatGPTは「正しい使い分け」で最強の業務効率化ツールに

ChatGPTは魔法の道具ではありません。
でも「やりたいことを言語化できる人」にとっては、ものすごく便利なツールです。

義肢装具士のように実際に身体を動かす仕事でも、「文章を書く」「考えをまとめる」「事務を効率化する」などの場面では、強力な相棒になってくれます。

使いこなすためには：

• 嘘を前提に、出力を疑う力
• 作業を切り分け、AIに頼れるところを選ぶ判断
• 疲れないための工夫と習慣づくり

こうした視点を持てば、AIは“敵”ではなく、味方になります。
小さな作業から、少しずつ試してみてはいかがでしょうか？

HTML フォームを作ろう

まずは form.html をプロジェクトに追加し、下記のようなシンプルな問い合わせフォームを用意します。Bootstrap 5 を読み込んでいるので、ほぼ手を加えなくても見栄え良く整います。

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <!-- Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  </head>

  <body class="container py-5">
    <h1 class="h4 mb-4">お問い合せ</h1>

    <!-- ★ ここがポイント -->
    <form method="POST" action="<?!= deployURL ?>">
      <div class="mb-3">
        <label for="name" class="form-label">お名前</label>
        <input type="text" id="name" name="name" class="form-control" required>
      </div>

      <div class="mb-3">
        <label for="email" class="form-label">メールアドレス</label>
        <input type="email" id="email" name="email" class="form-control" required>
      </div>

      <div class="mb-4">
        <label for="msg" class="form-label">メッセージ</label>
        <textarea id="msg" name="msg" rows="4" class="form-control" required></textarea>
      </div>

      <button type="submit" class="btn btn-primary">送信</button>
    </form>
  </body>
</html>

ここだけは押さえよう — フォームの核心ポイント

• <form method="POST" …>
  フォーム送信時に HTTP POST を使う指定です。
  doPost(e) が受け取るのは POST データなので、ここを GET にしてしまうと doGet(e) が呼ばれ、パラメータが URL に丸見えになります（セキュリティ面・文字数制限の両方で不利）。
• action="<?!= deployURL ?>"
deployURL はサーバー側（Code.gs のテンプレート）で差し込むウェブアプリの公開 URL。
  ウェブアプリは再デプロイのたびに URL が変わるため、アドレスを直書きするとすぐ動かなくなるのが落とし穴。テンプレートに埋め込んでおけば、コードをいじらずに常に最新の URL へ自動追従できます。
• input / textarea 各フィールド
  name="name", name="email", name="msg" は キー となり、GAS 側では e.parameter.name / e.parameter.email / e.parameter.msg として受け取れます。
• required
  ブラウザレベルの簡易バリデーション。空欄で送信ボタンを押すと警告を出してくれるので、スクリプト側のチェックを減らせます。
• Bootstrap の読み込み
  CDN を 1 行書くだけでフォームが即“それっぽく”整います。GAS の HTMLService は外部 CSS の読み込みも OK なので、今回は最小構成として CDN を採用しています。

doGet でフォームを表示する

まずは Code.gs に次の関数を用意します。これで先ほど作った form.html をブラウザに表示できるようになります。

function doGet(e) {
  // ① テンプレート（form.html）を読み込む
  const template = HtmlService.createTemplateFromFile('form');

  // ② デプロイ URL をテンプレートに渡す
  template.deployURL = ScriptApp.getService().getUrl();

  // ③ テンプレートを評価して HTMLOutput を生成
  const htmlOutput = template.evaluate();

  // ④ スマホ対応＆タイトル設定（お好みで）
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  htmlOutput.setTitle('フォームだよ');

  // ⑤ ブラウザへ返却
  return htmlOutput;
}

template.deployURL の役割

• 何をしている？
  template.deployURL = ScriptApp.getService().getUrl(); で取得しているのは、ウェブアプリをデプロイしたときに発行される 公開 URL（例：https://script.google.com/macros/s/AKfycb.../exec）。
• なぜ必要？
  ウェブアプリは再デプロイのたびに URL が変わるため、HTML 側に URL を直書きするとすぐ動かなくなります。
  deployURL をテンプレート変数として渡しておけば、form.html の <form method="POST" action="<?!= deployURL ?>"> がテンプレート評価時に 最新の URL に自動置換 され、フォームは常に正しいエンドポイントへ POST できます。
• ポイントまとめ
  1. サーバー側（doGet）で URL を取得 → テンプレート変数に格納
  2. クライアント側（form.html）でその変数を展開し action に埋め込む
  3. 再デプロイしてもコード修正ゼロで動き続ける

これでフォームの表示は完成です。続いて doPost を実装し、入力内容をスプレッドシートへ保存しましょう！

HTMLの表示方法については以下の記事でも紹介しています。

【GASの小技】テンプレートHTMLでラクラクWebアプリ化！HtmlService.createTemplateFromFile()の基本と使い方

Google Apps Scriptの HtmlService.createTemplateFromFile() の最小構成からスプレッドシート連携・Bootstrap適用までを徹底解説。テンプレートHTMLを活用してノンプログラマーでもリッチなWebアプリを簡単に作る手順とポイントをまとめました。

shoelab.jp

2025.06.08

【GAS小技】createHtmlOutputFromFile / createTemplateFromFile 徹底活用 ─ CSS/JS分割と共通ヘッダー・フッターで更新爆速化！

Google Apps ScriptでCSSとJavaScriptを別ファイル化し、include関数でヘッダー・フッターをコンポーネント化。Bootstrap併用でも崩れない設定とコピペOKコードで保守性と開発効率を一気に向上！

shoelab.jp

2025.06.14

スクリプトをウェブアプリとしてデプロイする

1. エディタ右上［デプロイ ▸ 新しいデプロイ］をクリック
2. 「説明」はメモ程度で OK（例：初回公開）
3. 種類を選択 ▸ ウェブアプリ
4. 実行するユーザー：自分
   • 自分の権限でスプレッドシートに書き込むため
5. アクセス権：全員（匿名可）
   • 社外に公開しない場合は「組織内のみ」でも可
6. ［デプロイ］→ 表示された 公開 URL をコピー
   • これが ScriptApp.getService().getUrl() で取得できる URL
7. 完了！　この URL にアクセスすると doGet() のフォームが開きます。

ポイント
再デプロイ（コード更新→バージョンアップ）のたびに URL が変わるため、フォームの action を固定文字列にしないのが鉄則です。

doPost でスプレッドシートに書き込む

Code.gs に次の関数を追記します。

function doPost(e) {
  // 1 受信パラメータを取得
  const name    = e.parameter.name  || '';
  const email   = e.parameter.email || '';
  const message = e.parameter.msg   || '';

  // 2 シートに追記
  const sheet   = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  const nextRow = sheet.getLastRow() + 1;          // 最下行の 1 つ下
  sheet.getRange(nextRow, 1, 1, 3)                 // A〜C 列 1 行
       .setValues([[name, email, message]]);

  // 3 応答を返す
  return HtmlService.createHtmlOutput('保存しました！');
}

① 受信パラメータを取得

• e.parameter.<name属性> でフォームの値を取り出します。
• || '' は「値が空または undefined のときは空文字を入れる」保険です。

② シートに追記

1. シート取得 const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
2. 書き込み行決定 const nextRow = sheet.getLastRow() + 1;
3. 範囲指定 & 書き込み sheet .getRange(nextRow, 1, 1, 3) // A〜C列の 1 行 .setValues([[name, email, message]]); // まとめて書き込む [[name, email, message]] という 2 重配列 を渡すことで、
   name → A 列, email → B 列, message → C 列 が一発で書き込まれます。

③ 応答を返す

• HtmlService.createHtmlOutput('保存しました！') を返して、送信後のブラウザに完了メッセージを表示します。
• 複数行の HTML を返してサンクスページを作っても OK です。

このページも参考にしてください。

【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方

スプレッドシートを3分でWEBページ化！GASのHtmlService.createHtmlOutput()を使い、最小コードと表表示サンプルで初心者にも解説。

shoelab.jp

2025.06.01

doGet と doPost の違いを理解しよう

• doGet(e)
  ブラウザが HTTP GET でアクセスしたときに呼ばれ、パラメータは URL の末尾に付く。主に 表示専用 の処理に使います。
• doPost(e)
  フォームが HTTP POST で送信したときに呼ばれ、パラメータはリクエストボディに入る。データの 追加・更新・削除 などサーバー処理に最適です。

フォーム入力 → 保存 という典型的な “書き込み処理” では GET で表示／POST で保存 のペアが王道パターンです。

まとめ

これで HTML フォーム → doPost → スプレッドシート保存 という最小構成が完成しました。流れをもう一度振り返ると──

1. フォームを用意
   method="POST" と action="<?!= deployURL ?>" を忘れずに。
2. doGet でフォームを表示
   ScriptApp.getService().getUrl() で最新の公開 URL をテンプレートに渡す。
3. ウェブアプリとしてデプロイ
   実行ユーザー：自分／アクセス権：用途に合わせて設定。
4. doPost で受信 & 追記
   e.parameter で値を取り出し、sheet.setValues() で A〜C 列に一括書き込み。

⚠️ 公開範囲に注意： フォームをインターネット公開すると、URL を知っている誰でも書き込み可能になるので、公開範囲には注意してください。

この基礎が動けば、スマホで在庫管理・社内アンケートなど応用は無限大。まずは試しにフォームを送信し、スプレッドシートにデータが増える様子を確認してみてください！

CSS と JavaScript を“別ファイル化”する方法

ソースを分けて管理してみよう。

① style.html と script.html をちゃちゃっと作成

CSSとJavaScriptだけを別のファイルに記述します。
今回はCSS用のstyle.htmlとJS用のscript.htmlの2つを作成します。（※ 原文の “funtion.html” という表記は誤植なので修正しています）
cssは タグ、jsは タグでしっかり囲ってください。
特別な記法はありません。最終的に 1 つの HTML ファイルに CSS と JS をインラインで書き込んだのと同じ形でブラウザに渡るイメージで記述すればOKです。

style.html

<style>
  body { padding: 1rem; }
  /* ───────────  テーブル全体  ─────────── */
  #itemTable {
    --bs-table-striped-bg: #f6faff;   /* 奇数行色 */
    --bs-table-hover-bg:   #edf4ff;   /* ホバー色 */
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 .125rem .75rem rgba(0,0,0,.05);
  }
  /* ───────────  ヘッダー  ─────────── */
  #itemTable thead th {
    background: #0d6efd;
    color: #fff;
    font-weight: 600;
    position: sticky; top: 0; z-index: 2;
  }
  /* ───────────  セルの配置調整  ─────────── */
  #itemTable tbody td:nth-child(1){text-align:center;}
  #itemTable tbody td:nth-child(4){text-align:right;}
  /* ───────────  カテゴリーをバッジ風  ─────────── */
  #itemTable tbody td:nth-child(3){
    font-weight: 500; padding:.35rem .75rem; border-radius:9999px;
    background:#e8f1ff; color:#0d6efd;
  }
</style>

script.html

<script>
  // デモ用：ダミーデータで行を追加
  document.getElementById('addRowBtn').addEventListener('click', () => {
    const tbody = document.querySelector('#itemTable tbody');
    const newRow = tbody.insertRow();
    const idCell = newRow.insertCell();
    const nameCell = newRow.insertCell();
    const categoryCell = newRow.insertCell();
    const stockCell = newRow.insertCell();

    const nextId = 1000 + tbody.rows.length;
    idCell.textContent = nextId;
    nameCell.textContent = 'デモ用品';
    categoryCell.textContent = 'テスト';
    stockCell.textContent = Math.floor(Math.random() * 10) + 1;
  });
</script>

コード解説

• <style> / <script> タグを使う点は通常の HTML と同じ。
• GAS ではファイル拡張子が .html であればテンプレートとして読み込めるため、CSS も JS も “HTMLラッパー” に包むのがポイントです。

② コピペOK！include(filename) 関数を用意

今度はコード.gsにinclude関数を作成します。includeは関数の名前なので何でもいいです。

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

この関数の役割は極めてシンプルです。
指定されたファイルの中身を取得し、HTML として返します。これだけです。
ここで返される HTML はエスケープされずにそのままテンプレートへ差し込まれるため、<style> や <script> に限らず、共通パーツの <header> なども自在に読み込めます。

コード.gs全文

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('table');
  const htmlOutput = template.evaluate();
  htmlOutput.addMetaTag('viewport', 'width=device-width, initial-scale=1');
  htmlOutput.setTitle('WEBページだよ');
  return htmlOutput;
}

function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename).getContent();
}

コード解説

• HtmlService.createTemplateFromFile('table') で table.html をテンプレートとして読み込みます。
• include() は GAS テンプレートの中からだけ呼び出せるヘルパー。
• 返り値は文字列なので、<?!= … ?> タグで “エスケープなし” で展開します。（<?= … ?> との違いに注意！）

doget内でtable.htmlを読み込んでます。htmlの表示方法は別の記事を参考にしてください。

【GASの小技】テンプレートHTMLでラクラクWebアプリ化！HtmlService.createTemplateFromFile()の基本と使い方

Google Apps Scriptの HtmlService.createTemplateFromFile() の最小構成からスプレッドシート連携・Bootstrap適用までを徹底解説。テンプレートHTMLを活用してノンプログラマーでもリッチなWebアプリを簡単に作る手順とポイントをまとめました。

shoelab.jp

2025.06.08

③ include() で CSS／JS をページに注入

include関数を呼び出し、ファイル名を指定しましょう。
今回スタイルとJSを適応させたい、ファイルはtable.htmlなので、table.htmlに以下のコードを追加します。

<?!= include('style') ?>
<?!= include('script') ?>

解説

• <?!= … ?> は テンプレート式の“非エスケープ出力”。style.html / script.html の中身をそのまま挿入します。
• ファイル名は拡張子なしで OK。include('style') と書けば style.html が対象になります。

table.html コード全文

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 5 CDN -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

  <title>WEBアプリだよ</title>

  <?!= include('style') ?> <!-- GASのテンプレートでCSSを読み込み -->
</head>
<body>
  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr><th>商品ID</th><th>商品名</th><th>カテゴリー</th><th>在庫数</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>シャンプー</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>リンス</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>

  <?!= include('script') ?> <!-- GASのテンプレートでJSを読み込み -->
</body>
</html>

ポイント

• テーブルに Bootstrap 5 のクラスを当てつつ、細かいデザインを style.html で上書きしています。
• 行追加ボタンは script.html のハンドラで動的に行を増やします。

STEP2｜共通ヘッダー＆フッターを部品化して更新ラクラク

複数のページで使いまわす、ヘッダーとフッター要素をコンポーネント化することで、編集が楽になります。

① header.html と footer.html を作成

header.html

<!-- header.html  -->
<header class="mb-4">
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
      <!-- サイトタイトル／ロゴ -->
      <a class="navbar-brand fw-bold" href="<?= deployURL ?>">イカPOアプリ</a>

      <!-- スマホ用ハンバーガーボタン -->
      <button
        class="navbar-toggler"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarNav"
        aria-controls="navbarNav"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <!-- メニュー -->
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ms-auto gap-lg-2">
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>">ホーム</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>?page=list">一覧</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="<?= deployURL ?>?page=about">このアプリについて</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

footer.html

<!-- footer.html -->
<footer class="bg-light text-center py-4 mt-auto shadow-sm">
  <div class="container small text-muted">
    <div class="mb-2">
      <a href="<?= deployURL ?>?page=privacy" class="link-secondary me-3">プライバシーポリシー</a>
      <a href="<?= deployURL ?>?page=contact"  class="link-secondary">お問い合わせ</a>
    </div>
    <div>
      &copy; <script>document.write(new Date().getFullYear())</script> イカPO All&nbsp;Rights&nbsp;Reserved.
    </div>
  </div>
</footer>

header.htmlとfooter.htmlを用意します。

② include() でヘッダー／フッターを読み込み

あとはCSSとjsと同じく

<?!= include('header') ?>
<?!= include('footer') ?>

追加したいところにこのコードを書きましょう。

table.html コード全文 ヘッダーとフッター追加版

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>WEBアプリだよ</title>
  <?!= include('style') ?>
</head>
<body>
  <?!= include('header') ?>

  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr><th>商品ID</th><th>商品名</th><th>カテゴリー</th><th>在庫数</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>1001</td>
          <td>シャンプー</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
        <tr>
          <td>1002</td>
          <td>リンス</td>
          <td>風呂</td>
          <td>1</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>
  <?!= include('footer') ?>
  <?!= include('script') ?>
</body>
</html>

まとめ｜これでメンテナンスが爆速に！

ヘルパー関数を作成することで、別ファイルのCSSとJSを呼び出すことができます。
同じ関数を使ってヘッダーやフッターをコンポーネント化して別のページでも使いまわすこともできます。
return HtmlService.createHtmlOutputFromFile(filename).getContent(); の仕組みを使うだけ。便利なテクなので、開発のお供に是非。

それでは、また

こんにちは、イカPOです。
今回は HtmlService.createTemplateFromFile を使うと、テンプレートファイルを使用して HTML をブラウザに表示できます。

テンプレートファイルを作成するとコードの管理が楽になります。GAS で HTML を表示させるなら、前回紹介した HtmlService.createHtmlOutput() よりもおススメです。

HtmlService.createTemplateFromFile（）の最小構成

ここでは「とにかく 1 画面出すだけ」の最短サンプルを示します。テンプレ分離のイメージをつかんでください。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
</head>
<body>
  <h1>WEBアプリだよ</h1>
</body>
</html>

• <base target="_top"> … 外部リンクを「親タブ」で開くためのおまじない。必須ではありませんが、Apps Script では入れておくのが通例です。

コード.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('index');
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

手順①：テンプレート HTML を作成する

HTML ファイル（ここでは index.html）をプロジェクト内に用意します。

その際に

<base target="_top">

を入れておくと、テンプレート内リンクが iframe ではなく親ウィンドウで開くようになります。“GAS で HTML を表示するときのお作法” と覚えておくとラクです。

手順②：doGet / doPost でテンプレートを読み込む

doGet(e) 内で、先ほど作ったテンプレートファイルを読み込みます。

const template = HtmlService.createTemplateFromFile('index');

HtmlService.createTemplateFromFile('ファイル名') で使用できます。今回作成したファイル名は「index」なので ('index') と書きます。

const htmlOutput = template.evaluate();

読み込んだ HTML ファイルを HtmlOutput オブジェクト に変換します。doGet() / doPost() では 文字列 ではなく このオブジェクトを return する のが約束事です。

return htmlOutput;

変換したオブジェクトを表示します。

まとめ
“ファイルを読み込む → テンプレートを展開する → return でブラウザに返す”
これが createTemplateFromFile の基本フローです。

生出力タグで GAS 生成のテーブル HTML をそのまま描画する

<?!= … ?> をテンプレート内で使用すると、GAS で作った HTML 要素をそのまま出力できます。以下に実例を載せます。

使用例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">

  <title>WEBアプリだよ</title>

  <style>
    body { padding: 1rem; }
  </style>
</head>
<body>

  <h1>WEBアプリだよ</h1>
  <p>以下のように &lt;table&gt; タグで作成できます。</p>

  <div>
    <?!= itemTable ?>
  </div>

</body>
</html>

• <?!= itemTable ?> … エスケープせずに生 HTML をそのまま挿入します。

コード.gs

function doGet(e) {
  const template = HtmlService.createTemplateFromFile('table');
  template.itemTable = getItem();        // ← getItem() が返すテーブル HTML を渡す
  const htmlOutput = template.evaluate();
  return htmlOutput;
}

getItem() ― スプレッドシート → HTML テーブル変換

/**
 * 商品一覧シートからデータを取得し、HTML テーブル文字列を返す
 */
function getItem() {
  // ① アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // ② 「商品一覧」シートを取得
  const sheet = ss.getSheetByName('商品一覧');
 
  // ③ シート全体の値を 2 次元配列で取得
  //    data[0] がヘッダー行、data[1] 以降がデータ行
  const data = sheet.getDataRange().getValues();

  // ④ 先頭行（ヘッダー）を取り出し、残りをデータとして保持
  const headers = data.shift();   // headers = ["商品ID", "商品名", "カテゴリー", "在庫数"]

  // ⑤ ヘッダー名 → 列インデックス の対応表を生成
  //    例: headerMap["商品名"] === 1
  const headerMap = {};
  headers.forEach(function(header, index) {
    headerMap[header] = index;
  });

  // ⑥ <thead> 部分 ─ ヘッダー配列を <th> で包み、空文字区切りで連結
  const thRow = headers
    .map(function(head) { return `<th>${head}</th>`; })
    .join('');

  // ⑦ <tbody> 部分 ─ 各データ行を <tr><td>…</td></tr> 形式の文字列に変換
  const tdRow = data
    .map(function(itemData) {
      return `
      <tr>
        <td>${parseInt(itemData[headerMap["商品ID"]], 10) || 0}</td>
        <td>${itemData[headerMap["商品名"]]}</td>
        <td>${itemData[headerMap["カテゴリー"]]}</td>
        <td>${parseInt(itemData[headerMap["在庫数"]], 10) || 0}</td>
      </tr>`;
    })
    .join('');

  // ⑧ 最終的な HTML テーブルを組み立て
  const html = `
    <table id="itemTable" class="table table-striped table-hover align-middle">
      <thead class="table-primary">
        <tr>${thRow}</tr>
      </thead>
      <tbody>${tdRow}</tbody>
    </table>`;

  // ⑨ 呼び出し元へ HTML 文字列を返す
  return html;
}

ポイント

• ⑥で <thead>、⑦で <tbody> を個別に組み立てると、後でスタイルを付けやすくなります。
• 数値列には parseInt() をかませておくと “空セル → 0” のフォールバックが効きます。

まず、前回も使用した 商品一覧シート → HTML テーブル文字列 を返す getItem() でテーブルを作成します。

template.itemTable = getItem();

その後、doGet 内で itemTable を定義し、テーブルの HTML 要素をテンプレートに渡します。

index.html 内の

<div>
  <?!= itemTable ?>
</div>

で itemTable を呼び出しています。

HtmlService.createHtmlOutput() と HtmlService.createTemplateFromFile() のちがいについて

用途まとめ

• createHtmlOutput() … デバッグ用、ワンライナーで済ませたいとき
• createTemplateFromFile() … 本番 UI、複数ページ、リッチ画面を作るとき

createHtmlOutput()についての記事はこちらも

【GASの小技】スプレッドシートをWEBページ化！HtmlService.createHtmlOutput()の基本と使い方

スプレッドシートを3分でWEBページ化！GASのHtmlService.createHtmlOutput()を使い、最小コードと表表示サンプルで初心者にも解説。

shoelab.jp

2025.06.01

スタイル & JavaScript の組み込み

以下は Bootstrap + カスタム CSS + JavaScript の例
コードは原文そのまま掲載し、誤記タグのみ訂正しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <base target="_top">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap 5 -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">


  <title>WEBアプリだよ</title>

  <style>
    body { padding: 1rem; }
    /* ───────────  テーブル全体  ─────────── */
    #itemTable {
      --bs-table-striped-bg: #f6faff;   /* 奇数行色 */
      --bs-table-hover-bg:   #edf4ff;   /* ホバー色 */
      border-radius: .5rem;
      overflow: hidden;
      box-shadow: 0 .125rem .75rem rgba(0,0,0,.05);
    }
    /* ───────────  ヘッダー  ─────────── */
    #itemTable thead th {
      background: #0d6efd;
      color: #fff;
      font-weight: 600;
      position: sticky; top: 0; z-index: 2;
    }
    /* ───────────  セルの配置調整  ─────────── */
    #itemTable tbody td:nth-child(1){text-align:center;}
    #itemTable tbody td:nth-child(4){text-align:right;}
    /* ───────────  カテゴリーをバッジ風  ─────────── */
    #itemTable tbody td:nth-child(3){
      font-weight: 500; padding:.35rem .75rem; border-radius:9999px;
      background:#e8f1ff; color:#0d6efd;
    }
  </style>
</head>
<body>

  <h1 class="h4 mb-3">WEBアプリだよ</h1>
  <p class="mb-4">以下のように &lt;table&gt; タグで作成できます。</p>

  <div class="table-responsive">
    <?!= itemTable ?>   <!-- テーブルを挿入 -->
  </div>

  <div class="d-flex gap-2 mt-4">
    <button id="addRowBtn" class="btn btn-primary btn-sm">行を追加</button>
  </div>

  <script>
    // デモ用：ダミーデータで行を追加
    document.getElementById('addRowBtn').addEventListener('click', () => {
      const tbody = document.querySelector('#itemTable tbody');
      const newRow = tbody.insertRow();
      const idCell = newRow.insertCell();
      const nameCell = newRow.insertCell();
      const categoryCell = newRow.insertCell();
      const stockCell = newRow.insertCell();

      const nextId = 1000 + tbody.rows.length;
      idCell.textContent = nextId;
      nameCell.textContent = 'デモ用品';
      categoryCell.textContent = 'テスト';
      stockCell.textContent = Math.floor(Math.random() * 10) + 1;
    });
  </script>
</body>
</html>

テンプレートファイル内に CSS と JavaScript を自由に書けるので、Bootstrap も組み合わせれば簡単にリッチな Web ページが作れます。外部ファイルにまとめて読み込む方法もありますが、それはまた別の記事で！

【GAS小技】createHtmlOutputFromFile / createTemplateFromFile 徹底活用 ─ CSS/JS分割と共通ヘッダー・フッターで更新爆速化！

Google Apps ScriptでCSSとJavaScriptを別ファイル化し、include関数でヘッダー・フッターをコンポーネント化。Bootstrap併用でも崩れない設定とコピペOKコードで保守性と開発効率を一気に向上！

shoelab.jp

2025.06.14

まとめ

1. テンプレートファイルを分離すると、HTML/CSS/JS と GAS ロジックをきれいに分けられる。
2. createTemplateFromFile() → evaluate() → return の 3 ステップが基本形。
3. <?!= … ?> タグで GAS から渡した生 HTML をそのまま描画できる。
4. Bootstrap などの外部ライブラリも普通の HTML と同じ要領で利用可能。

この記事では 1) とりあえずページが出る最小構成 と 2) スプレッドシートのデータをテーブルに出す実践サンプル の２本立てで解説します。

1. HtmlService.createHtmlOutput() の最小構成

// 最小構成
function doGet(e) {
  return HtmlService
    .createHtmlOutput('<h1>Hello from GAS Web App!</h1>');
}

ここがポイント 🔍

• たった１行で HTML を返せる
  createHtmlOutput() に文字列を渡すだけ。超シンプルです。
• 必ず doGet(e)（または doPost(e)）の中で返す
  GAS Web アプリの入口はこの２つ。ここから返したものがブラウザに届きます。

2. doGet(e) と doPost(e) の違い

ページ表示だけなら doGet(e) だけ覚えれば OK です。

3. スプレッドシートを読み込んで HTML に表示するサンプル

3-1. コード全文

function doGet(e) {
  // ① テーブル部分の HTML を作る
  const html = getItem();
  // ② そのままブラウザに返す
  return HtmlService.createHtmlOutput(html);
}

/**
 * 商品一覧シートからデータを取得し、HTML テーブル文字列を返す
 */
function getItem() {
  // ① アクティブなスプレッドシートを取得
  const ss = SpreadsheetApp.getActiveSpreadsheet();

  // ② 「商品一覧」シートを取得
  const sheet = ss.getSheetByName('商品一覧');

  // ③ シート全体の値を２次元配列で取得
  const data = sheet.getDataRange().getValues();

  // ④ １行目（ヘッダー行）を取り出す
  const headers = data.shift();   // → ["商品ID","商品名",…]

  // ⑤ ヘッダーと列番号の辞書を作る
  const headerMap = {};
  headers.forEach((header, index) => headerMap[header] = index);

  // ⑥ ヘッダー行を <th> で包む
  const thRow = headers.map(h => `<th>${h}</th>`).join('');

  // ⑦ データ行を <tr><td>…</td></tr> に変換
  const tdRow = data.map(item => `
    <tr>
      <td>${parseInt(item[headerMap["商品ID"]], 10) || 0}</td>
      <td>${item[headerMap["商品名"]]}</td>
      <td>${item[headerMap["カテゴリー"]]}</td>
      <td>${parseInt(item[headerMap["在庫数"]], 10) || 0}</td>
    </tr>`
  ).join('');

  // ⑧ テーブル完成
  const html = `
    <table border="1" cellspacing="0" cellpadding="5">
      <thead><tr>${thRow}</tr></thead>
      <tbody>${tdRow}</tbody>
    </table>`;

  // ⑨ HTML 文字列を返す
  return html;
}

3-2. スプレッドシートをコードに取り込む４ステップ

1. シートを指名（②）
   const sheet = ss.getSheetByName('商品一覧');
   → 職員室で「商品一覧の名簿ください！」と声を掛けるイメージ。
2. データを全部コピー（③）
   getDataRange().getValues() で A1 から右下端まで を２次元配列として取得。
   例：data[0][1] は「１行目２列目」のセル。
3. ヘッダー行を抜き取る（④）
   const headers = data.shift();
shift() は先頭行をスポッと抜いて返す。data からはヘッダーが消え、純粋データだけが残る。
4. 列名⇔番号の辞書を作る（⑤） const headerMap = {}; headers.forEach((h,i)=>headerMap[h]=i); // → { "商品ID":0, "商品名":1, "カテゴリー":2, "在庫数":3 } これで item[headerMap["商品名"]] のように「名前で列を指定」でき、列順が変わっても安全。

マッピングについてはこちらの記事も参考に

[GASの小技] 1行目をヘッダーに！取得した配列データを加工してスプレッドシートに書き込む方法

Google Apps Script（GAS）を使ってスプレッドシートを操作する際に便利なヘッダー取得とマッピングの方法を解説。配列の扱い方やスプレッドシートへの書き込み時の注意点も丁寧に解説しています。初心者にも分かりやすく、コードを劇的に読みやすくするための小技を紹介します。

shoelab.jp

2025.03.09

3-3. HTML テーブルを組み立てる３ステップ

1. ヘッダーを <th> に包む（⑥）
   headers.map() で包み紙を付け、.join('') で連結 → <th>商品ID</th>… が完成。
2. データ行を <tr><td> に変換（⑦）
   data.map() 内でテンプレートリテラルに流し込み、.join('') で tbody 用の長い文字列に。
   数値列は parseInt()＋|| 0 で安全に整数化。
3. テーブルを組み立てる（⑧）
   <thead> に thRow、<tbody> に tdRow を入れてテーブル完成。
   装飾は Bootstrap などを使うならクラス名に差し替えれば OK。

4. 使用方法

1. スプレッドシートに 「商品一覧」 シートを作成
   列は 商品ID / 商品名 / カテゴリー / 在庫数（順番厳守）。
2. スクリプトエディタに上記コードを貼り付ける
3. デプロイ → 新しいデプロイ → ウェブアプリ を選択
4. 公開 URL を開くと、シートの内容が表になって表示されます 🎉

URLをクリックしてスプレッドシートの内容が表示されていれば成功です。

5. まとめ

• HtmlService.createHtmlOutput() で GAS だけでも簡単に Web ページが作れる。
• まずは doGet(e) に HTML 文字列を返す だけで OK。
• スプレッドシートと組み合わせれば、在庫リストや一覧表もサクッと表示。

スプレッドシートのデータをそのまま Web ページ化すると、「表示に特化した専用ビュー」 が手に入るので視認性がグッと向上します。
とくに――

• 現場のスマホ閲覧
  画面の小さなスマホでも余計な列やメニューを省いたテーブルだけを表示できるため、スクロール地獄から解放。
• リンク１発で共有
  「シートを開いて、フィルタを掛けて…」という手間がなく、URL をタップすれば即ダッシュボード。
• 編集と閲覧の役割分担
  シート側は “データ入力専用”、Web 側は “見る専用” と切り分けられるので、誤操作や表示ズレのリスクが減ります。

たとえば 見本品の一覧や在庫表 を管理しているケースなら、営業や製作スタッフが外出先・作業現場でも「在庫いくつ？」「最新の貸出ステータスは？」を一目で確認できます。業務の合間にスプレッドシート全体を開く時間を削減できるため、“探す時間” が “判断する時間” に置き換わり、結果として業務効率が大幅アップ。

「現場ですぐ見たい！」と少しでも感じたら、今回のコードをコピペしてまず動かしてみてください。たった数十行で、あなたのスプレッドシートが即席の Web ダッシュボードに早変わりします。

それでは、また。

テンプレートを使った方法はこちらの記事から

https://shoelab.jp/%e8%a3%9c%e8%a3%85%e5%85%b7%e3%83%bb%e7%be%a9%e8%82%a2%e8%a3%85%e5%85%b7%e9%96%a2%e4%bf%82/%e3%80%90%e3%80%91gas%e3%81%ae%e5%b0%8f%e6%8a%80%e3%80%91%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88html%e3%81%a7%e3%83%a9%e3%82%af%e3%83%a9%e3%82%afweb%e3%82%a2%e3%83%97%e3%83%aa%e5%8c%96

shoelab.jp

「プロンプトを使って “思考” をテンプレ化し、エネルギーを節約する方法」

をまとめます。
前回までに 「絵本を1冊作る道のり」 は体験済み。やってみて痛感したのは “毎回ゼロから指示を書くと頭がしんどい” という現実でした。そこで、生まれたのが今回のプロンプトです。

これまでの試行錯誤をテンプレにしたプロンプトを作成

第1回・第2回の学びを“ぜんぶ盛り”した決定版プロンプト

今回作成したプロンプトです。

何を根拠に必須項目を決めたのか？Deep Researchを使ったデザイン法

今回の絵本デザインの下敷きは、ChatGPT の Deep Research 機能で作成した
『0〜2歳児向け絵本デザインのための調査レポート（全32 ページ）』。
発達心理・市場動向・ベストセラー分析まで一気に掘り下げた私家版資料です。
“論文レベルの厳密エビデンス” とまでは言えませんが、自分で読んで腑に落ちた ので今回のテンプレに採用しました。

PDF は記事末尾に置いておくので、数値や引用元を深掘りしたい方はぜひ。
むしろ「ここ違うかも？」という検証コメント、大歓迎です。

7つの必須要素 ― ざっくり解説

1. オノマトペ
   「ワンワン」「ゴロゴロ」など、音と意味が直結した言葉を多用すると、耳に入った瞬間に情景が浮かびやすく、0〜2歳児の語彙取り込みがスムーズになります。
2. 繰り返し構造
   同じ展開を2〜3回くり返し、4回目で変化やオチを入れるパターン。
   先が読める安心感と、“おっ！”という意外性を両取りできるので、最後まで集中が切れません。
3. シンプル背景
   余計な装飾をそぎ落とし、主役だけを大きく配置。
   視線が散らからず、キャラクターや仕掛けにフォーカスできます。
4. 原色＋大図形
   ビビッドな赤・青・黄などを、はっきりした形で示す。
   乳児は高コントラストが大好物。ページをめくった瞬間に興味をグッと引き込めます。
5. 語数ガイドライン
   1ページ3〜13語の短いリズム文にすることで、聴覚への負荷を下げつつテンポ良く読み進められます。長文だと飽きやすいので注意。
6. 大きめの字＋短文
   1ページ1〜2文、フォントは大きく太め。
   親が指でなぞり読みしやすく、子どもも「これが文字なんだ」と気づきやすいレイアウトです。
7. 三の法則的リズム
   「同じ→同じ→同じ→変化！」という4拍子リズム。
   反復で理解を深めたところに変化を差し込むと、最後に「わっ！」と情緒を刺激できます。

これら7項目は、Deep Researchで作成した調査レポートの実験・市場データにもとづいて抽出。テンプレに組み込み、毎回ゼロから悩まずに絵本構成を再現することを狙っています。

なぜテンプレが必要なのか

テンプレを導入すると何がラクになるの？

• ページ構成の確認
  • 都度考えると…
    • 「タイトルは何ページ目？」「おまけページを入れる？」で毎回迷う
  • テンプレ化すると…
    • 固定フォーマットに当てはめるだけ。迷う余地ゼロ
• 画像仕様の指示
  • 都度考えると…
    • dpi／アスペクト比／SEED などをその都度ググってコピペ
  • テンプレ化すると…
    • 指示は最初から埋め込み済み。出来上がった画像の良しあしだけ判断すればOK
• 発達エビデンスの挿入
  • 都度考えると…
    • 論文を探して要約し、文章に手動で差し込む手間が発生
  • テンプレ化すると…
    • 引用文と出典リンクを雛形に格納済み。必要なら項目をON/OFFするだけ

目的は時短ではなく “脳みその省エネ”。
たとえば10冊シリーズを作るなら、最初の1冊で徹底的にテンプレを育て、2冊目以降は “中身の発想” にだけ集中できる――そんな運用を目指してプロンプトを作成しました。

まとめ – 「考えないための考え方」

手間のかかる操作はAIに押し付け、“ここは人間が決めたい” コア部分だけに思考リソースを注ぐ。

シリーズ第1回・第2回で味わった試行錯誤を、テンプレという形で“脳の外”に追い出しました。
これで次に絵本を作るときは 「テーマを差し替える → 走らせる → 目視チェック」 の3ステップでOK。ぜひ皆さんも自分流に改造して、量産フェーズの相棒 にしてみてください。

今回作った調査レポートのPDF

関連記事

第1回 ChatGPTで子供用の絵本を作ってみた：ストーリーとキャラ設定編

ChatGPTで子供向け絵本をゼロから制作！ストーリー構成の考え方や主人公キャラの作成方法を、実際の会話ログとともに詳しく解説しています。AI初心者でも絵本づくりの第一歩が踏み出せる内容です。

shoelab.jp

2025.04.06

第2回：ChatGPTで子供用の絵本を作ってみた：画像生成編

※この記事は前回の続きです。前編ではストーリーとキャラ設定を紹介しています。イラストの製作を依頼してみた基本設定やストーリーを元に、イラスト製作の依頼をしてみます。早速問題発生。1ページから3ページまでのイラスト製作何も考えずに「1ページか...

shoelab.jp

2025.04.13

前編ではストーリーとキャラ設定を紹介しています。

イラストの製作を依頼してみた

基本設定やストーリーを元に、イラスト製作の依頼をしてみます。
早速問題発生。

1ページから3ページまでのイラスト製作

何も考えずに「1ページから3ページまでのイラストを作成して」とお願いしました。

出力された画像です。

メッチャ見切れてる。。。

あまりに見切れているので、スライドすれば見切れているところは勘違いしたほどです。
実はChatGPTの画像生成機能では、よくある現象のようです。

大きめの画像を作成しようとすると、枠内に収まらず見切れる現象が発生してしまいます。
合計3枚の画像を作成してもらうつもりで依頼しましたが、1ページ目から3ページ目をまとめて1枚の画像で出力してくれようとした結果、見切れてしまった…のかなと考察しています。

しかし、キャラクター、ストーリーの進め方は私の狙いどおりの回答だったので、この画像を1枚ずつ出力するように依頼しなおします。

1ページずつ画像を作成するように再依頼

出力してくれた画像が見切れて見えないことと、1枚ずつ出力してほしいことを伝えています。

１枚目

2枚目

3枚目

狙い通りの3枚を作成できました。

探検に出かける → 茂みの中に隠れてる動物に注目する → 動物を見つけるのパターンを完全に理解し、イラストを出力しています。
文言も絵本でよく見かける文言らしくてばっちりです。

ChatGPTで次のシーンをそのまま作っていく

赤いきつねを見つけたので、次は青いペンギンを登場させるシーンを作ることにしました。
ここでもChatGPTに指示を出して、4ページ目「ペンギンを探しているシーン」のイラストを作成してもらいます。

お願いした内容に対して、GPTはちゃんとストーリーの流れを理解してくれていて、
期待通りの「影に隠れているペンギンを探す」シーンを出力してくれました。

続いて5ページ目。

こちらはペンギンが登場して、仲間になるシーンです。少しだけ色味が違いましたが、今回は良しとしています。

そのまま6〜9ページ目も、順調に出力されました。

黄色い動物を探す

黄色いぞうを発見

上空からの集合写真

という流れで、ストーリー構成もイラスト内容もばっちり。
「なにかな？」「〇〇さんだー！」という絵本らしい展開も抜群です。

急に絵柄が変わる！？画風はSEEDで固定せよ

さて、最後の「おしまい」のページを依頼したところ、ここで問題発生。
ChatGPTが急にこれまでと違うタッチのイラストを出力してきました。

ちょっとこれは……違う。画風が一気に変わってしまっています。

このような事態を避けるため、画像生成時の「SEED値」を固定するという方法を使います。
SEEDとは、画像を生成する際のランダム要素を決定する「タネ」のようなもの。
これを固定することで、似た雰囲気のイラストを連続して作成できるようになります。

🔗 参考：
画像生成のSEED値とは？ – romptn.com

「同じ構図・テイストでSEEDを指定した状態で、最後のページを作りたい」と依頼したところ、
再び狙い通りのテイストで画像を生成してくれました。
ややズレた部分もありましたが、これは愛嬌ということで。

表紙も依頼して完成！

最後に、表紙のイラストも依頼しました。

• タイトルは「いろいろ みーつけた！」

• 葵ちゃんは仁王立ちで、首から双眼鏡を下げている

• 動物たちは茂みに隠れて、お尻だけが見えている

といった細かな希望を伝えてみたところ、イメージ通りの表紙が完成しました。

印刷してみた

完成した絵本をコンビニで印刷。
紙芝居風に仕上がった絵本を娘に渡すと、めちゃくちゃ喜んでくれました（そしてすぐ分解されました……笑）。

あとで気づいたのですが、製本を意識した余白調整などは全然できておらず……
「絵本」というよりは「紙芝居」に近い出来でした。
このあたりは今後の課題ですね。

まとめ：ChatGPTで絵本を作るときのポイント

最後に、今回の制作で得られたポイントをまとめます。

• ChatGPTに役割を持たせると、良い回答が返ってくる（例：絵本作家になってもらう）

• 出力の進行はこまめに確認

• 1ページずつ依頼することでミスを防げる

• SEED値を使って画風を固定すると安定する

• 印刷を前提にするなら余白・裁ち落としの配慮が必要

ChatGPTは、まさに「東大卒の新入社員」的な賢さとズレをあわせ持つAIです。
こちらの意図を丁寧に伝えれば、すごいポテンシャルを発揮してくれます。

🧵 引用元：
https://www.threads.net/@tomomi.insta_/post/DIEZqz7TSYS

最後に

絵本を作って、印刷して、娘に見せたとき。
こちらの熱意が伝わったのか、すごくニコニコしてくれて嬉しかったです。

「自分で作ったもので人に喜んでもらう」
これ、義肢装具士（PO）の仕事にも通じるところがありますよね。

前回の記事

第1回 ChatGPTで子供用の絵本を作ってみた：ストーリーとキャラ設定編

ChatGPTで子供向け絵本をゼロから制作！ストーリー構成の考え方や主人公キャラの作成方法を、実際の会話ログとともに詳しく解説しています。AI初心者でも絵本づくりの第一歩が踏み出せる内容です。

shoelab.jp

2025.04.06

絵本作成用のプロンプトはこちらの記事を参照

第3回・総仕上げ！Deep Research発の“絵本プロンプト”で思考を省エネ化する

ChatGPTのDeep Researchを活用した「0〜2歳児向け絵本」制作テンプレート術を公開。第3回完結編では、毎回の指示作成を省エネ化し、思考リソースを最大化するプロンプト活用法を解説します。

shoelab.jp

2025.04.20

※この記事は全2回の分割構成です。
第1回ではストーリー作りとキャラクター設定までを、
第2回では画像生成から印刷・製本までを紹介しています。

こんにちは、イカPOです。

ChatGPT-4の画像生成機能が大幅にパワーアップして話題になりました。
あちこちで取り上げられています。

参考リンク：
https://chatgpt-lab.com/n/n8447382996d2
https://note.com/subarasikiai/n/nc3914aef9253

さて、我が家には、今年1歳になる娘がいます。毎日絵本を読んで、毎日かじっています。
家賃、食費、雑費、バイクのローン、ChatGPT Plusの月額料金、ポケポケのプレミアムパス、アマプラの年会費…。

欲望まみれの現代社会では節約も難しく、安月給の私には、新しい絵本を買う余裕はなかなかありません。
娘は、自分でかじったボロボロの絵本を楽しそうに読んでいますが、 親としてはやっぱり新しい絵本も買ってあげたい…。

そこで、ひらめきました。

「あれ？せっかくChatGPT Plusに入ってるなら、子供用の絵本を作れって言えば、作ってくれるんじゃね？」

今回は、ChatGPTと一緒に絵本を作った製作の足跡を紹介します。
同じ手順を踏めば、絵本が作れるはずなので、読み終わったあとはお試しください。

ストーリー製作を頼んでみた。

まずはストーリーを考えて、そのストーリーを元にイラスト考える手順で、絵本製作を進めることにしました。（chatGPTは言語で指示を出す必要があるのでその手段が妥当だと判断）

絵本のテーマやイラストのスタイルなど絵本の基本情報を決める

まずは、ものすごく雑に「イラストを作りたい」。と依頼しました。すると、絵本の構成や、イラストのスタイルについて聞いてくれました。

とりあえず絵本を作ることは理解してくれました。
絵本をつくるのに必要な要素について色々と提案してくれたので、その提案に乗っかり次の質問を渡します。

ChatGPTに「売れっ子絵本作家」のロールを持たせて、ストーリーを整理してもらう

次にGPTに特定の役割「売れっ子絵本作家」を持たせて、絵本作家の視点から回答してもらうよう依頼しました。
GPTからの質問には、とにかく思いついたことをどんどん羅列するスタイルで返しました。

子供は淡い色よりも原色のほうが認識しやすいって、以前保健師さんが言ってたのを思い出して、原色を使ってほしいとも伝えています。
あと、子供が「いないいないばあ」を喜ぶ理由について、『センスの哲学』に書かれてた理論を思い出して、「隠れて→出てくる」っていう仕組みを取り入れたら、娘への受けもよくなるんじゃね？と思って、そんな原案を提出しています。

ザックリとしたタイトル案や、ストーリーの流れをつくってくれました。
大体の流れは概ね気に入ったのと、GPTがポイントとして提供してくれた「色・動物・隠れる→見つかる→仲間になる という反復構造で、赤ちゃんにとって覚えやすく、安心感のある展開」ってやつが、まさに自分の意図通りだったので、「GPT、これは狙いを理解してくれてる……！？？」ってなりました。
ということで、ストーリーの流れは修正せず、そのまま次の質問でイラストのスタイル指定に進めることにしました。

娘の写真をベースに絵本の主人公のキャラクターを作成

娘の写真GPTに渡して主人公のキャラクター作成を依頼しました。
イラストのテイストも指定してます。特に子供はアンパンマン様のような丸い形のデザインを視認しやすいと、保健師さんが言っていたので、それを参考にGPTにデザインを依頼しています。
後は原色重視かつできるだけシンプルであること、ダメ押しで対象年齢も指定しています。
後々に印刷することも踏まえて、印刷する旨も伝えています。大きめの画像を作ってもらうことを指示しています。

大体狙い通りのキャラクターができあがりました。服装を再現しつつ色だけ変更してくれているのに凄みを感じます。

キャラクター・構成の理解をGPTに整理してもらった

このキャラクターが気に入ったのと、GPTがこれまでの会話を理解しているか、不安になったので、会話の流れの整理を依頼しました。

GPTは、丸いデザイン、原色重視の配色、いないいないばーの原理（＝発見とよろこびの連続）、動物と色のリンクなど、絵本作りで自分が大事にしていたポイントをすべて理解してくれていました。
ここから先は、いよいよ本格的にイラスト制作を進めていく流れになります。

第1回まとめ：ChatGPTにここまでお願いしたこと

第1回では、絵本づくりの準備段階として、ChatGPTに以下のことをお願いしました。

• 絵本制作の相談（テーマ・ページ数・スタイル）
• 「売れっ子絵本作家」ロールでストーリー構成を整理
• 娘の写真を元にした主人公キャラクターの作成
• 構成・色使い・表現コンセプトの再整理と理解チェック

この段階では、ChatGPTは「構成ディレクター兼絵本作家」的な役割で動いてくれてます。
次回は、いよいよ画像生成から印刷・製本まで！

第２回はこちらの記事

第2回：ChatGPTで子供用の絵本を作ってみた：画像生成編

※この記事は前回の続きです。前編ではストーリーとキャラ設定を紹介しています。イラストの製作を依頼してみた基本設定やストーリーを元に、イラスト製作の依頼をしてみます。早速問題発生。1ページから3ページまでのイラスト製作何も考えずに「1ページか...

shoelab.jp

2025.04.13

絵本作成用の記事はこちらから

第3回・総仕上げ！Deep Research発の“絵本プロンプト”で思考を省エネ化する

ChatGPTのDeep Researchを活用した「0〜2歳児向け絵本」制作テンプレート術を公開。第3回完結編では、毎回の指示作成を省エネ化し、思考リソースを最大化するプロンプト活用法を解説します。

shoelab.jp

2025.04.20