1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@uni928

ファイルを置くだけ「職員向けカンタンチャット」ページを作成してみる

Last updated at Posted at 2025-12-01

共有フォルダに置くだけ！

HTML 1ファイルで「職員向けカンタンチャット」ページを作った話

はじめに

「ちょっとした連絡やメモを、職員同士でもう少し気軽にやり取りしたい」

  • でも、Slack や Teams を新しく導入するのはハードルが高い
  • 外部サービスに業務の情報を載せるのも少し不安
  • サーバを用意して本格的なチャットシステムを作るほどの工数もない
  • 共有フォルダはすでに運用している

そんな状況を想定して、

共有フォルダに 1つの HTML ファイルを置くだけで使える「簡易チャットページ」

を作りました。

この記事では、その仕組みと工夫をまとめます。

デモとソースコード

実際に動くもの＆コードは、以下に公開しています。

※この記事では実装のアイデアや構成に絞り、ソースコード全文は上記リンクを参照する形にしています。

やりたかったこと

今回のゴールは次のとおりです。

  1. 職員同士で、ちょっとしたメッセージをチャット風にやり取りできる
  2. 自分の名前はブラウザ側で覚えておいてほしい
    • 何度も入力するのは面倒
    • でもサーバは用意したくない
  3. ログはテキストファイルとしてやり取りできる
    • ネットワークやブラウザが違っても、
      テキストファイルさえ共有できればログを統合可能にする
  4. 見た目は「それなりにちゃんとしたチャット」に見えること
    • 左側に相手の吹き出し
    • 右側に自分の吹き出し
      といった、よくあるチャットの見た目を目指す

結果として、HTML + CSS + JavaScript のみで、
「自分の名前は IndexedDB に保存」「メッセージログはエクスポート/インポート」という構成に落ち着きました。

全体構成のイメージ

画面構成はざっくり次のようになっています。

  1. 上部ヘッダー

    • タイトル（職員メッセージボード）
    • 「オフライン保存（IndexedDB）」といったステータス表示
    • 「最新へ」ボタン（スクロール補助）

  2. 上部パネル

    • 自分の名前の入力欄
      • 入力するとリアルタイムで IndexedDB に保存
    • ログ共有パネル
      • 「エクスポート」ボタン（メッセージを txt で保存）
      • 「インポート」ボタン（txt から読み込み）

  3. メインエリア

    • メッセージ一覧（チャット風表示）
      • 自分の名前と一致するメッセージは 右側
      • それ以外のメッセージは 左側
    • 入力欄＋「送信」ボタン
      • Enter で送信
      • Shift+Enter で改行

これだけで、業務連絡のちょっとした投げ合いを「チャットっぽく」見せることができます。

技術的なポイント

1. 自分の名前だけ IndexedDB で永続化

「名前くらいなら localStorage でもよいのでは？」という選択肢もありますが、今回は後々設定を増やしたくなるかもしれないことも考えて、IndexedDB を使いました。

  • データベース名：staffMessageBoard
  • オブジェクトストア：settings
  • キー："myName"
  • 値：{ key: "myName", value: "〇〇" }

動きとしてはシンプルで、

  1. ページ読み込み時に IndexedDB を開く
  2. "myName" の値があれば、それを名前入力欄に反映
  3. 入力欄の input イベントで、入力のたびに myName を更新保存

これだけで、

  • 一度名前を入力すれば、ブラウザを閉じても再度開いたときに再入力不要
  • 名前を変えてもすぐに保存される

という、ちょっとした「ログインしている感」を出せます。

なお、保存されるのは名前だけで、メッセージ内容は IndexedDB には保存していません。

2. メッセージの管理と表示ロジック

メッセージは JavaScript 側で次のような情報として扱っています。

  • 時刻（例：2025/12/01 09:00:00）
  • 名前
  • メッセージ本文

内部的には、単純な配列としてメモリ上に持っています。

  • 送信ボタン、または Enter キーで送信
  • 現在時刻を文字列でフォーマット
  • 「自分の名前欄の内容」とメッセージ本文をまとめて配列に push

再描画時に、**現在の「自分の名前」**と各メッセージの name を比較して、そのメッセージが右側（自分）なのか左側（相手）なのかを決めています。

  • name === myName → 自分の吹き出し（右寄せ・青っぽいグラデーション）
  • それ以外 → 相手の吹き出し（左寄せ・ダークな吹き出し）

名前を変更すると、その瞬間から「自分扱い／他人扱い」が切り替わるのがちょっと面白いポイントです。
（厳密な意味でのユーザー認証ではなく、「今このブラウザで名乗っている名前」ベースの表示、と割り切っています。）

3. エクスポート：テキストファイルでログを保存

ログの共有方法としては、単純な txt ファイルでのエクスポートにしています。

エクスポート形式は次のようなイメージです。

  • 1行目以降は以下の形式で1メッセージずつ

    • 時刻 TAB 名前 TAB メッセージ

  • メッセージ内に改行がある場合は \n に変換して保存

例：

  • 2025/12/01 09:00:00 総務 太郎 おはようございます
  • 2025/12/01 09:05:00 企画 花子 今日の打ち合わせは 10:30 からです\n会議室Aにお越しください

※実際には \t がタブ文字です。

この形式にしておくと、後からエディタで開いても内容が読みやすく、Excel に貼り付けて表形式で見ることもできます。

4. インポート：テキストファイルからログを統合

インポートでは、エクスポートしたファイルを逆に読み込んで messages 配列に追加します。

  • <input type="file"> を見えない状態で用意しておき、
  • 「インポート」ボタンからその input をクリック
  • 選ばれたファイルを FileReader で読み込む
  • 行ごとに分割し、TAB で分解 → time / name / message
  • メッセージ欄の \n を本来の改行に戻す
  • そのまま messages 配列の末尾に concat

この仕組みによって、

  • A さんが自分のブラウザでメッセージを書いてエクスポート
  • そのファイルを共有フォルダなどで B さんに渡す
  • B さんが自分のブラウザでインポート

という流れで、**それぞれの環境でメッセージログを「マージ」**できます。

「共有フォルダに置いて使う」という運用イメージ

ここまで読んでいただいて分かる通り、このチャットはサーバサイドの仕組みを前提としていません。

その代わりに、

  • HTML 1ファイル（今回だと index35.html 相当）を共有フォルダに配置
  • 職員はそのファイルをブラウザで開くだけ
  • 自分の名前は各自のブラウザが覚えてくれる
  • 必要に応じて「エクスポート」でテキストファイルを出力し、
    • 共有フォルダに保存したり
    • メールやチャットツールで送り合ったり
  • 他の人のログを「インポート」で取り込んで、自分の画面に統合

といった運用ができます。

こんな使い方が考えられます

  • 朝の「おはようございます」「本日の予定」などの軽い連絡
  • 遠隔の職員同士でのちょっとしたメモの送り合い
  • 部署内の簡易連絡板（メモ程度で良いもの）
  • 研修やイベント時の簡易コメントボード

「がっつりしたチャット導入まではいらないけど、共有フォルダを活かして手軽にやり取りしたい」というニーズには、なかなか相性が良いと感じています。

見た目のこだわりポイント（ざっくり紹介）

CSS 側では、以下のような点に気をつけてデザインしています。

  • 全体をダークテーマベースにして、目に優しく
  • 上部ヘッダーやボタン周りにグラデーションやグラスモーフィズム風の表現を少し入れて「ツール感」を演出
  • 自分側の吹き出しはブルー系のグラデーションで「強調」
  • 相手側の吹き出しは落ち着いたダークグレー
  • スマホ幅にも対応できるよう、レイアウトはレスポンシブ

あくまで業務用ツールなので派手すぎない範囲で、
「使っていてちょっと楽しい」「ちゃんと作られている感じがする」UIを意識しました。

実際のコード

実際のコードは以下で公開しています。

Qiita ではコード全文を載せるとかなり長くなってしまうため、
実装の流れや狙いをこの記事で説明し、細かな実装は GitHub 側で確認できるようにしています。

まとめ

本記事では、

  • 職員同士の「簡易チャット」ページを
  • HTML 1ファイル + IndexedDB（名前保存） + テキストエクスポート/インポートだけで実現する方法

を紹介しました。

ポイントを整理すると：

  • 自分の名前はブラウザ側（IndexedDB）に保存しておける
  • メッセージはチャット形式で表示され、自分の名前と一致するものは右側に表示
  • ログはテキストファイルとしてエクスポート/インポート可能
  • サーバを用意しなくても、共有フォルダに HTML を置くだけで運用できる

「本格的なチャットサービスまでは不要だけれど、軽い連絡をもう少し便利にしたい」という職場では、
こういった “HTML だけの簡易チャット” も一つの選択肢になると思います。

興味があれば、ぜひ GitHub のコードをベースに、自分の職場に合わせたアレンジ（部署名の表示や、既読っぽい表示など）を加えてみてください。

📘 関連リンク（再掲）

👉 今まで作ったサイト

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?