AIとの対話でタイムテーブル作成ツール「TimeBlock」を作ってみた

タイムテーブル作成ツール「TimeBlock」を作りました。
これは、生成AI（Claude 3.7 Sonnet）との対話で開発し、単一HTMLファイルからあっという間に複雑なモジュール構造まで発展できました。
生成AIを活用すると、プログラミングの基礎知識をもとに、機能的なウェブアプリケーションが短期間で開発できます。

生成AIで「テコの原理」がはたらく「プログラミングの基礎知識」って何なんだろうね。
これまでの試行錯誤の経験なのかな。

1. オンラインツールTimeBlockを作った

週末の2日間で「Time Block」というオンラインツールを作りました。

一日のスケジュールや空き時間を画像形式でメッセージ共有するために特化したツールです。
PWAなので、ブラウザからインストールして利用することもできます。
すべてブラウザ内での処理で、データ保存にサーバは利用していません。

（参考）

Time Block – タイムテーブル作成ツール
（https://chiilabo.jp/time-block/）

カレンダーとの連携ではなく、さっとタップ操作で埋まっている時間帯を入れて、画像共有する使い方を想定しています。

「時間の積み木」みたいなイメージで命名したけど、他の人に使ってもらうなら「空き時間シェア」とか、もっとわかりやすい名前の方がいいかもね。

目次に戻る

1-1. 生成AIを活用して作った

業務後の時間を使うと、これまでだったら半月はかかりそうなものです。
しかし、生成AI（Claude 3.7 Sonnet）との対話を通じて段階的に開発したことで、すぐに形になりました。

単一のファイル（23KB）からスタートしたものが、わずか2日の間にプロジェクト（20ファイル：140KB）として発展しました。

それでも文字データは、写真などに比べると圧倒的に小さいです。
だいたい日本語だと 1文字が3バイト程度なので、140KBは約4万6千文字、小説だと約115ページ分ぐらいというイメージでしょうか。

コードを読む順番さえわかれば、十分に読み取れる分量ですね。

開発プロセスでは、各段階での開発内容をAIに理解させ、次のステップに進むための要件定義書が生成しました。
これらの要件定義書は、AIとの対話を継続するための橋渡しとなり、プロジェクトの一貫性を保つ役割を果たしました。

このプロジェクトは、プログラミングの専門知識が豊富でない一般ユーザーでも、AIの支援を受けながら機能的なウェブアプリケーションを短期間で開発できる具体例です。

目次に戻る

2. 単一HTMLファイルからの出発

TimeBlockプロジェクトは、たった一つのHTMLファイルから始まりました。
初期段階では、すべてのコード（HTML、CSS、JavaScript）が単一のファイルに含まれていました。

最終的なプロジェクトのファイル構造を見ると、複雑に見えます。
しかし、それぞれのファイルは1つのファイルを分割して、機能を追加し、また分割して、という流れで生まれていきました。

これは、既存のコードを読み解くうえでも大事な視点です。

初期のファイル構成（2025年3月21日バージョン1.0.0）:

シンプルなファイル構成からスタートすると、開発の初期段階では複雑なファイル管理や環境設定の必要がなく、すぐに機能の実装に集中できます。

/
└── index.html  # HTML, CSS, JSがすべて含まれた単一ファイル

HTML構造で文字やボタンを表示し、JavaScriptで処理内容を記述しています。
ブラウザ内で処理を完結するようにすれば、比較的かんたんに作れます。

これは特に、プログラミング初心者やプロジェクトを素早く立ち上げたいユーザーにとって大きなメリットですよね。

目次に戻る

2-1. 初期バージョンの機能（v1.0）

単一ファイルながらも、初期バージョンも一応動作できるようになっていました。

タイムテーブルの表示（時間グリッド）
イベントの作成、編集、移動、削除
色によるイベントの分類
画像としての保存機能

<!-- 初期バージョンのHTMLサンプル（一部抜粋） -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイムテーブル作成ツール</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        /* CSSスタイルがここに直接記述されている */
        body {
            padding: 20px;
            background-color: #f5f5f5;
        }
        .timetable {
            width: 100%;
            border-collapse: collapse;
        }
        /* 残りのスタイル... */
    </style>
</head>
<body>
    <!-- HTMLマークアップ -->
    <div class="container">
        <h1>タイムテーブル作成ツール</h1>
        <!-- UI要素... -->
        <div class="timetable-container" id="timetable-container">
            <!-- テーブル... -->
        </div>
    </div>

    <script>
        // JavaScriptコードがここに直接記述されている
        document.addEventListener('DOMContentLoaded', function() {
            // 変数の初期化
            let startHour = 10;
            let events = [];
            // 残りのコード...
        });
    </script>
</body>
</html>

まずは、動作するプロトタイプ（試作品）を作るのがコツです。

目次に戻る

2-2. ファイル分割とモジュール化への第一歩（v1.2）

プロジェクト2日目（2025年3月22日）には、最初の大きな構造変更が行われました。
保守性と拡張性を高めるために、単一ファイルから、HTML、CSS、JavaScriptを別々のファイルに分離する作業を実施しました。

ファイル分割後の構成（バージョン1.2.0）:

/
├── index.html          # HTMLマークアップのみ
├── styles.css          # CSSスタイル定義
└── script.js           # JavaScriptコード

これらのコードをサーバにアップロードし、ブラウザから動作することを確認しました。

今回のプロジェクトでは、「エントリーポイント」は index.html です。
したがって、「ファイル分割」では、新しいファイルをディレクトリ内に保存して、index.htmlから読み取るようにします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>プロジェクト名</title>
    <!-- 外部CSSファイルの読み込み -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- HTMLコンテンツ -->
    <!-- 外部JavaScriptファイルの読み込み-->
    <script src="script.js"></script>
</body>
</html>

外部CSSファイルは head タグ内で、外部JavaScriptファイルは bodyの終了タグ直前に配置するのが一般的です。
基本的には、ファイルを追加するたびに読み込む外部スクリプトファイルを追加します。

この変更は単純ですが、コードの管理と拡張性を大きく向上させます。
生成AIにコードを修正させる場合には、ファイルの粒度を小さくしておくことがコツだからです。

生成AIにはトークン制限があり、大きなファイルを読み込ませると、細部を見落としやすくなるからです。
それぞれのファイルが特定の役割に集中できるようになり、修正や機能追加が容易になるからです。

【基本】生成AIの「記憶の鮮度」を管理するコツ（コンテクストウィンドウ）

生成AIから目的に適った回答を得るには、詳細で具体的なプロンプトを与えるのが大切です。ただし、生成AIには一度に参照できる情報量に限界があり、会話が長くなるにつれ「脈絡のない答え」が増えてきます。適切なタイミングでチャットを仕切り直して、「記憶の鮮度」を維持する工夫が有効です。生成AIの基本的な性質について話したいと思います。最も伝えたいことは「プロンプトとチャットの長さ」という考え方です。YouTube動画でも話しています。生成AIとの会話の分量は長くなる生成AIは一つ一つ...

目次に戻る

2-3. 本格的なモジュール化とPWA対応（v1.3）

その後、AIとの対話を通じて、JavaScriptのコードは機能ごとにモジュール化され、構造化していきます。

モジュール化されたファイル構成:

/
├── index.html          # メインのHTMLファイル
├── styles.css          # スタイルシート
├── manifest.json       # PWAマニフェスト（新規追加）
├── service-worker.js   # サービスワーカー（新規追加）
└── js/                 # JavaScriptファイル（ディレクトリ化）
    ├── app.js          # アプリケーション初期化と管理
    ├── utils/          # ユーティリティ（サブディレクトリ）
    │   ├── debug.js    # デバッグとログ関連
    │   └── helpers.js  # ヘルパー関数
    ├── core/           # コア機能（サブディレクトリ）
    │   ├── storage.js  # データ保存と読み込み
    │   └── appointments.js  # 予定操作のコア機能
    └── ui/             # UI関連（サブディレクトリ）
        ├── rendering.js    # UI描画
        ├── modals.js       # モーダルとダイアログ
        └── interactions.js # ユーザー操作

ここでの重要な変化は、単一のJavaScriptファイルが機能ごとに分割され、ディレクトリ構造に整理していったことです。
この変更により、コードの可読性と保守性が大幅に向上しました。

「スマートフォン用アプリ」として手軽に使えるようにしたかったので、この段階で Progressive Web App（PWA）としての機能も追加しました。
manifest.jsonとservice-worker.jsが追加し、オフライン機能やホーム画面へのインストールができるようにしました。

ファイルにコードが追加して見にくくなったら分割する、という繰り返しで、どんどん構造化されていきました。
私の頭では、だいたい 400行（20KBほど）を超えて来ると見通しが悪くなってくるので、分割したくなってきます。
もちろん、コードの分割は細心の注意が必要で、分割後に同じ動作になるように整合性を確認するのは大変です。
しかし、ファイルサイズが大きくなると収集がつかなくなるので、必要な作業です。

目次に戻る

2-4. さらなる細分化と機能拡張（v1.4）

プロジェクトが進むにつれ、特にユーザー操作（interactions）部分が細かくなることがわかりました。
使いやすくするには、モバイルデバイスのタッチ操作対応など、複雑な条件分けが必要になるからです。

そのため、「interactions.js」を8つに細分化しました。

最終的なファイル構成:

/
├── index.html
├── styles.css
├── manifest.json
├── service-worker.js
└── js/
    ├── app.js
    ├── utils/
    │   ├── debug.js
    │   └── helpers.js
    ├── core/
    │   ├── storage.js
    │   └── appointments.js
    └── ui/
        ├── rendering.js
        ├── modals.js
        ├── interactions.js              # メインのインタラクションモジュール
        └── interactions/                # サブモジュールに分割（新規追加）
            ├── feedback.js              # 視覚的フィードバック管理
            ├── update.js                # DOM要素とデータの更新
            ├── calculate.js             # 位置・サイズの計算
            ├── detect.js                # ユーザー操作の検出・判別
            ├── appointment-handlers.js  # 予定操作関連
            ├── modal-handlers.js        # モーダル操作関連
            ├── settings.js              # 設定関連
            └── data-management.js       # データ管理関連

ユーザー操作の処理を「検出→計算→更新→フィードバック」というフローに沿って整理しました。

なかなか思った通りに動作してくれないときに、どのコードを修正するのかがわかりやすくなります。

目次に戻る

3. AIとのコラボレーションがもたらしたもの

生成AIの画期的なことは、専門的な開発スキルが不足していても、AIとの対話を通じて現代的なプログラミング手法を学びながら実践できることだと言えます。

もちろん、ユーザーにまったく知識がなくても作れるわけではありません。
コードの問題点をおおまかに理解したり、プロジェクトを進める方向性は理解していないといけません。
しかし、個別の技術的な内容に立ち入らずとも、動作するプログラムを完成させることができました。

知識のギャップを埋める:
AIが専門的な知識（モジュール化、PWA対応、タッチ操作の最適化など）を提供し、開発者は自分のペースで経験しながら実装できました。
段階的な複雑性:
単一ファイルからはじめて徐々に複雑化していくアプローチで、開発者は何がどこにあるのか段階的に理解して開発を進められました。
要件定義のサポート:
AIとの対話から生成された要件定義書が、次のステップに進むための明確な指針となりました。

[WordPress] 投稿月でグループ分けした月別PV集計表を見るためのカスタムプラグインを作った【ChatGPTと】

一ヶ月分のブログ公開がどれぐらいのページビューにつながっているのか、集計する自分用のWordPressプラグインを作成しました。自分にとっては未経験の分野でしたが、対話型AI「ChatGPT」に相談してみると、使える叩き台を用意してくれました。WordPressプラグインづくりははじめてでしたが、かなりの時間短縮。無事に完成しました。アクセス集計プラグイン一ヶ月分のブログ公開が、どれぐらいの成果になっているのか知りたいことがあります。これまでは、Google Analytic...

ふわっとしたイメージを具体的なコードに落とし込むサポートとして、生成AIが役に立つわけです。

目次に戻る

3-1. 実際の開発のようす

開発者は各段階で、実装したい機能や直面している課題をAIに伝え、AIからの提案やコードサンプルをもとに実装を進めました。

例えば、タッチ操作の対応については、AIが視覚的フィードバックの実装方法や長押し検出の仕組みを提案し、それを開発者が自分の理解に合わせて適用していきました。

// AIとの対話から生まれたタッチフィードバック実装例
function showTouchFeedback(x, y) {
  feedbackElement = document.createElement('div');
  feedbackElement.className = 'touch-feedback';
  feedbackElement.style.left = `${x - 50}px`;
  feedbackElement.style.top = `${y - 50}px`;
  document.body.appendChild(feedbackElement);
}

目次に戻る

3-2. 自分にとって使いやすいアプリを作れる

最終的に完成したTimeBlockアプリケーションは、単なる学習プロジェクトを超えた実用性を持っています：

5種類のテーマ（ライト、ダーク、パステル、カラフル、ミニマル）
タッチデバイス対応の直感的な操作
予定の重要度に応じた5段階の色分け
データのインポート/エクスポート機能
画像共有機能
オフライン使用可能なPWA対応

これらの機能は、いずれも自分にとって必要なアイデアをAIとの対話を通して実装方法を具体化していきました。

目次に戻る

3-3. 【考察】AIが変える開発の未来

TimeBlockプロジェクトは、生成AIが「プログラミングの民主化（誰でもプログラムを作れる）」にどのように貢献できるかを示す好例だと思います。
つまり、プログラミングの専門知識がそれほど豊富でなくても、AIとの対話を通じて段階的に学びながら、実用的なアプリケーションを開発できるようになったのです。

ただ、それにはコツがあります。
いきなり完成コードを作らせるよりも、単一HTMLファイルから始めるのが大事です。

それを徐々に複雑なモジュール構造へと進化させていくプロセスによって、ユーザーが自分の作っているソフトウェアを理解していくことができるのです。
「ファイル構成の進化」が視覚的に示すように、小さなステップの積み重ねが結果として堅牢なアプリケーションを生み出しています。