WORKS 04

なかまボード

町内会・PTA・サークルのための、無料で使える仲間の連絡・共有ボード

実際に使ってみる(公開中)

なかまボード のメイン画面

種別

Webアプリケーション(無料公開・オープンソース)

使用技術

Google Apps Script / Googleスプレッドシート / JavaScript / HTML・CSS / PDF.js

制作期間

約1週間

担当

企画・設計・開発・公開・紹介ページ制作(AIと協働)

つくった理由

町内会やPTA、サークルの連絡は、LINEグループと紙のプリントが中心のところが多いと思います。LINEでは大事なお知らせがすぐに流れてしまい、行事の予定は紙で配り、集会所の鍵や備品の貸し借りはノートで管理する。そんな場面をよく見てきました。
専用のグループアプリもありますが、小さな団体には月額の費用が重く、データを外部の会社に預けることに抵抗がある方もいます。
そこで、Googleの無料のサービスだけで動き、データは自分たちのGoogleドライブに残る連絡アプリを作りました。どの団体でも使えるように、プログラムと設置手順はGitHubで無料公開しています。

できること

掲示板・お知らせ

投稿とコメント、画像やPDFの添付、既読数の表示。重要なお知らせはメールでも届けられます

予定(カレンダー)

毎日・毎週・毎月のくり返しや、「この日だけ」の変更に対応。グループだけの予定も作れます

メッセージ・グループ

LINEグループのように自由にグループを作成。1対1とグループのトーク、既読表示つき

共有カード(借りる・返す)

鍵・備品・地図などをカードで共有。返却期限と使用履歴つきで、地図にはペンで書き込めます

資料箱

規約・申込みフォーム・名簿などを棚ごとに整理。役員だけが見られる棚も作れます

招待制と役割の分担

招待コードで登録。Googleアカウントがない人も使え、カレンダー編集者などの役割も任命できます

スマホ表示

スマホのブラウザで使い、「ホーム画面に追加」するとアプリのように開けます。画面下のタブで、ホーム・掲示板・メッセージ・予定・カードを行き来します。

ホーム(お知らせ・これからの予定・未読)
ホーム(お知らせ・これからの予定・未読)
掲示板(全体/お知らせ/グループ)
掲示板(全体/お知らせ/グループ)
共有カード(貸し出しの状況)
共有カード(貸し出しの状況)
地図カードへの書き込み
地図カードへの書き込み

つくり方

サーバーを用意せずに動かすため、Google Apps Script(GAS)でサーバー側の処理を、Googleスプレッドシートをデータの保存先にしています。画面はGASのWebアプリとして配信し、HTML・CSS・JavaScriptで作りました。PDFの表示には PDF.js を使っています。
メンバーはアプリ独自のIDとパスワードでログインします。パスワードはハッシュ化して保存し、ログインの失敗が続いたときのロックや、すべての操作でのログイン状態と権限の確認を入れています。入力された文字は、スプレッドシートの数式として動かないように保存しています。
無料のGoogleアカウントには、メール送信が1日約100通などの上限があります。通知を1日2回のまとめメールにし、上限が近いときは返却が必要な人を優先するなど、制限の中で困らない作りにしました。
設計・実装・レビューには AI(Claude)を併用しています。プログラムはMITライセンスでGitHubに公開し、紹介ページ(LP)とnoteの紹介記事も、AIと相談しながら作りました。

制作の裏側をnoteで読む
 ポートフォリオ一覧 次の実績は準備中です

こういうものを、作れます。

「自分の仕事だとこう使えそう」が浮かんだら、その段階でご相談ください。実現できるかどうかからお答えします。

相談してみる