【個人開発】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);
}
}