【個人開発】DB・ログイン不要！友達と「空きコマ」を一瞬で重ね合わせて視覚化するモダンな時間割調整アプリ

こんにちは！個人開発をしている者です。

学生の皆さん、あるいは学校やサークル活動でスケジュール調整をする際、こんな悩みはありませんか？

「友達と空きコマを合わせて、一緒にランチしたり自習したりしたい！」
「タイムラインやLINEで全員の空いている時間を調整するのは面倒くさい……」
「日程調整ツールや時間割アプリは、全員がアカウント作成やアプリインストールをしないと使えないものが多くて、友達にお願いしづらい……」

こうした「アカウント登録の壁」や「プライバシーの懸念」を取り除き、**「ログイン不要」「データベース不要」「友達から送られたコードを貼り付けるだけで、何人でも空きスケジュールを重ね合わせできる」**という完全フロントエンド完結の時間割アプリを作りました。

この記事では、このWebアプリのこだわり機能と、サーバー不要で動作するデータ共有などの技術的な裏舞台を詳しく解説します！

🚀 開発したWebアプリについて

アプリ名: 時間割メーカー (zikanwari)
URL: https://iceteam.cc/zikanwari/
利用料金: 完全無料（ログイン不要で即座に使えます）
技術スタック: HTML5 / CSS3 (Vanilla CSS) / JavaScript (Vanilla JS) のみ（フレームワークなし）

💡 このアプリが解決する課題と、こだわりの機能

一般的な時間割アプリは単に「自分のスケジュールを管理するだけ」ですが、このアプリは**「友達とつながることで価値が生まれる」**機能を搭載しています。

1. 友達との時間割重ね合わせ（3人以上の複数人マッチング）

本アプリの看板機能です。LINEやメッセージで送られてきた短いコードを貼り付けるだけで、画面上に友達のスケジュールが重なって表示されます。2人だけでなく、3人以上（何人でも）同時に重ね合わせることが可能です。

【利用者の操作フロー】

左メニューの「自分の共有コードをコピー」をワンクリック（Base64の暗号のような文字列がクリップボードにコピーされます）。
そのコードをLINEなどで友達グループに送る。
友達から送られてきたコードを貼り付けて「追加」し、名前を入力。
サイドバーに友達が追加され、チェックを入れたメンバーのスケジュールが一瞬で重なり合います！

【ビジュアル面のこだわり】

授業が入っているコマ：その時間に授業があるメンバー全員の授業内容が、それぞれの設定カラーのミニカード（名前、教室、科目名付き）で一覧表示されます。
空いている人の表示：コマの下部に「空き: 自分, たろう」のように、その時間に動けるメンバーの名前が分かりやすくリスト化されます。
全員空きコマのハイライト：選択しているメンバー全員がスケジュールフリーの時間帯は、**ゴールドに優しく点滅（ネオングロー）**して「全員空き！」と直感的に教えてくれます。グループワークやランチの時間を探すのが一瞬で終わります。

2. 今期の履修状況・単位カウンター

ただ授業を登録するだけでなく、「今学期は合計何単位履修しているか」「卒業要件に対して順調か」を管理できます。

左サイドバーの基本設定から「目標単位数（例: 20単位）」を設定。
授業ごとに「単位数（0〜4単位）」と「科目分類（専門科目 / 一般教養 / ゼミ / その他）」を設定して保存します。
右パネルの**円形進捗メーター（美しい紫〜ピンクのグラデーション）**と、分野別の進捗バーがリアルタイムに伸び縮みし、履修上限や目標値までの距離が視覚的にわかります。

3. 授業に連動するインテリジェントメモ帳

時間割の授業カードをシングルクリックすると、右下のメモ帳が自動的に「その授業専用のノート」に切り替わります。

講義ごとのZoomのURL、教員の連絡先、毎回の課題提出期限などをメモするのに最適です。
時間割の余白や枠外をクリックすると、選択が解除されて全体の「自由メモ帳」に戻ります。
面倒な保存ボタンはなく、入力したテキストはすべてリアルタイムにローカルストレージに自動保存されます。

🛠 技術的な裏舞台と実装の解説

「サーバーを持たず、データベースを使わずに、どうやって友達のデータを読み込んで重ね合わせているのか？」という技術的な実装について解説します。

① データベースなしで実現する「Base64データ共有」

ユーザーのプライバシーを守り、開発者のサーバー維持費をゼロにするため、スケジュールデータは全てクライアントサイド（ブラウザ）で処理しています。

データを1つの文字列にするために、以下のステップを踏んでいます：

時間割の名前、曜日数、時限数、および登録されているすべての授業セルデータを1つのJSONオブジェクトにまとめる。
日本語（全角文字）が文字化けしないよう、encodeURIComponent と unescape を使用して安全なバイナリ文字列にエンコードする。
btoa 関数を使い、テキスト形式の Base64 文字列 に変換して共有コードを発行する。

【コード例：共有コードの作成 (JavaScript)】

function copyShareCode() {
  const tt = getActiveTimetable(); // アクティブな時間割データを取得
  
  const shareData = {
    name: tt.name,
    daysCount: tt.daysCount,
    periodsCount: tt.periodsCount,
    cells: tt.cells
  };

  try {
    const stringified = JSON.stringify(shareData);
    // 日本語の文字化けを防ぐためのUnicodeセーフエンコード
    const unicodeString = unescape(encodeURIComponent(stringified));
    const base64Code = btoa(unicodeString); // Base64エンコード

    // クリップボードへコピー
    navigator.clipboard.writeText(base64Code).then(() => {
      alert("共有コードをコピーしました！");
    });
  } catch (e) {
    console.error("エンコード失敗", e);
  }
}