TimeBlock – 空き時間をパッと共有できるタイムテーブルツール

TimeBlockは予定の詳細を隠しながら空き時間だけを画像で共有できるシンプルなウェブアプリです。
タッチ操作でブロックを配置し、5段階の色分けで予定の重要度を表現できます。
LINEやTwitterなどに直接共有でき、複数人でのスケジュール調整に最適です。

TimeBlockを使ってみる: TimeBlock

1. アプリの概要と目的

「今日いつ会える？」というLINEのメッセージをもらって、Googleカレンダーをチェックしたものの、予定の詳細を知られたくなくて手入力で空き時間を伝える…。
そんな経験はありませんか？

そこで開発したのが「TimeBlock」。
今日の空き時間をパッと共有できるオンラインツールです。

TimeBlockを使ってみる: TimeBlock

プログラミングの日曜大工として作ってみましたが、意外と使いやすく、日常的に使えるツールになりました。
このアイコンは、生成AIでSVG形式で作りました。

どことなく「ドラえもん」っぽいね。

目次に戻る

1-1. 「今日の空き時間をパッと伝える」というコンセプト

TimeBlockは「予定の詳細を表示せず、空き時間だけをすぐに共有する」という一点に特化したアプリです。

タッチやクリック操作でブロックを配置し、画像として共有できるシンプルな設計になっています。

複雑な予定管理ソフトではなく、「今日会えるのはこの時間」「これがタイムスケジュール」を手軽に伝えるツールとして開発しました。

目次に戻る

1-2. Googleカレンダーとの違い

Googleカレンダーは素晴らしいツールですが、以下のような課題がありました：

予定の詳細を共有したくない場合がある：
「医者の予約」「面接」など、詳細を知らせずに「この時間は埋まっている」と伝えたいケースがある
画像として共有するのが面倒：
スクリーンショットを撮って編集する必要がある
見た目をカスタマイズしにくい：
予定ごとに色分けする程度の視覚的表現に限られる

TimeBlockでは、これらの課題を解決し、「予定の中身を他人には伝えにくい」ときでも、空き時間だけをすぐに共有できるようにしています。

目次に戻る

2. ユースケース

TimeBlockは以下のようなシーンで活躍します：

友人との約束調整
「今日のいつなら会える？」というメッセージを受け取ったとき、すぐに空き時間だけを画像にして送れます。
予定の詳細を入力せず、「13:00-15:00と18:00以降なら空いてる」が視覚的に伝わります。
チームでの空き時間共有
「今日のミーティング、みんなはいつが良い？」という問いに対して、自分の空き時間を画像で共有できます。
日常のタイムスケジュール管理
「今日はこの時間を作業に使おう」「この時間は休憩」といったタイムブロッキングにも活用できます。
営業時間や対応可能時間の共有
フリーランスやコンサルタントなど、「今日の対応可能時間」を顧客に伝える場合にも便利です。

画像1枚で「今日はこの時間なら対応できます」が伝わります。

目次に戻る

3. 主な機能の紹介

目次に戻る

3-1. タッチ操作でのブロック配置

TimeBlockは、タッチデバイス（スマートフォン、タブレット）での操作に最適化されています。

長押しで新規ブロックを作成
タップで編集モード
ドラッグで移動
ハンドル操作で時間の調整

PCでも直感的な操作が可能で、クリックやドラッグ＆ドロップで同様に操作できます。

目次に戻る

3-2. 色分けによる予定の重要度表示

5段階の色分けで予定の重要度や種類を表現できます：

薄い水色 (#A8D8FF) – 予定を入れたい時間帯
薄い緑 (#A2E8B8) – 空き時間
黄色 (#FFF0A5) – 予定あり（通常の予定）
薄い赤 (#FFB6A8) – 重要な予定
濃い赤 (#D95E5E) – 大事な予定

色の選択はヘッダーまたはコンテキストメニューから行え、デフォルトの色も設定できます。

目次に戻る

3-3. 画像共有機能

作成したタイムテーブルは、共有ボタンをタップするだけで画像として共有できます。
Web Share APIに対応しているブラウザでは、LINEやTwitterなどの各種SNSにダイレクトに共有することも可能です。

対応していない環境では自動的に画像のダウンロードに切り替わります。

目次に戻る

3-4. カラーテーマのカスタマイズ

5種類のテーマから選べるため、好みの見た目にカスタマイズできます：

ライトテーマ – 明るい背景、標準的な配色
ダークテーマ – 暗い背景、目の疲れを軽減
パステルテーマ – 柔らかな色合い、優しい印象
カラフルテーマ – 鮮やかな色使い、活気のある印象
ミニマルテーマ – 白黒ベース、シンプルでクリーン

さらに、開始時間のカスタマイズも可能で、自分の生活リズムに合わせたタイムテーブルを作成できます。

目次に戻る

4. 技術的な実装のポイント

TimeBlockは、シンプルながらも堅牢なウェブアプリケーションとして設計されています。

技術的な特徴をいくつか紹介します。

目次に戻る

4-1. タッチ操作の最適化

タッチデバイスでの操作性を向上させるため、以下の工夫をしています：

視覚的フィードバック – 長押し時のアニメーション
拡大リサイズハンドル – タッチしやすい大きなハンドル
スクロールとドラッグの分離 – 意図した操作を検出
ダブルタップ対応 – 素早い予定作成

目次に戻る

4-2. データの永続化

作成したタイムテーブルはlocalStorageを使って保存されるため、ブラウザを閉じても再度開くと前回の状態から継続できます。
また、データは以下の形式でエクスポート/インポートできます：

{
  "appointments": [
    {
      "id": "1647889012345",
      "title": "ミーティング",
      "startTime": "10:00",
      "endTime": "11:30",
      "colorIndex": 2
    },
    // ...他の予定
  ],
  "settings": {
    "theme": "light",
    "startHour": 9,
    "defaultColorIndex": 2
  },
  "customStartTimes": ["8:30", "12:30", "15:00"]
}

// ドラッグ移動処理（簡略化したコード）
function handleDragMove(deltaY) {
  // 絶対位置を計算
  let newTop = state.originalPosition + deltaY;

  // 境界チェック
  newTop = Math.max(0, Math.min(newTop, maxHeight));

  // 15分単位にスナップ
  const snappedNewTop = Math.floor(newTop / QUARTER_HOUR_HEIGHT) * QUARTER_HOUR_HEIGHT;

  // 位置を更新
  updateDraggedPosition(appointmentId, snappedNewTop);
}

目次に戻る