Open Chat
本サイトはJSPS科研費(課題番号23K02737)の助成を受けた研究成果を基に作成されています。
【重要】令和8年1月31日をもちまして無料のAIチャットボットは終了し、有料会員制での運用となりました。

GoogleスライドでGASコードを使ったWEBアプリ開発「ペタボード (PetaBoard)」:アナログボードを完全クラウド化する軌跡

「あの人、今どこにいるんだっけ?」「今日の担当、誰だっけ?」
多くの職場で見かける、ホワイトボードとマグネットを使ったアナログなスケジュール管理や人員配置。直感的でわかりやすい反面、「その場に行かないと見えない」「変更履歴が残らない」「誰かがぶつかってマグネットが落ちてしまう」といった課題を抱えています。

そんな現場の悩みを解決するために生まれたのが、Google Apps Script (GAS) とGoogleスライドを連携させたWebアプリ「ペタボード (PetaBoard)」 です。

障がい者支援施設での業務効率化という小さなアイデアから始まり、今やどんな業種でも使える汎用性の高いクラウドツールへと進化した「ペタボード」の全貌をご紹介します。

1. 開発過程:スライドを「データベース」にするという逆転の発想

きっかけは「現場のホワイトボード」

開発のスタート地点は、障がい者支援施設における日々のスケジュール管理でした。利用者の方々やスタッフが「誰が・いつ・どこで・何をするのか」を把握するため、現場には巨大なホワイトボードと色分けされた名前入りマグネットがありました。
しかし、現場を離れると状況がわからなくなり、毎日の配置換えも手作業で手間がかかっていました。これをなんとか手軽にデジタル化できないか、と考えたのが始まりです。

壁:Googleスライドの図形は「リアルタイム」に動かせない

最初は「Googleスライドを共有して、みんなで図形(マグネット)を動かせばいいのでは?」と考えました。しかし、スマホからの操作性が悪く、誤って背景を動かしてしまうなどの問題がありました。
そこで、GASを使って専用の「Webアプリ」を作ることにしました。しかし、GASの通信には数秒のタイムラグがあるため、Web上でドラッグしている図形をリアルタイムでスライドに同期させることは不可能です。

ブレイクスルー:仮想ボードと双方向同期

この壁を越えたのが、**「Webブラウザ上にスライドの偽物(プレビュー画面)を作り、そこで操作を完結させる」**という手法です。

  1. 読み込み時: スライド上にある図形(マグネット)の座標や色を取得し、Webアプリ上にHTML要素として描画します。
  2. 操作時: ユーザーはWebアプリ上でサクサクとマグネットをドラッグ&ドロップします(JavaScriptで処理するため遅延ゼロ)。
  3. 保存時: マウスから指を離した瞬間に、その新しい座標だけを裏側でGASに送信し、実際のGoogleスライド上の図形の位置を更新します。

この仕組みにより、「スライドファイルをデータベース代わりに使う」という画期的なアーキテクチャが完成しました。

Googleスライドを元にしてGASコードでWEBアプリを作成

進化:現場の要望を取り入れたアジャイル開発

初期バージョン完成後も、現場の使い勝手を追求して改良を重ねました。

  • 「スマホで見ると横に長くて使いにくい」→ PC用(横)とスマホ用(縦)の表示切り替え・別ファイル保存機能を追加。
  • 「他の業務でも使いたい」→ プログラムを書き換えなくても、Web画面上からユーザー自身で「背景画像」や「マグネットの色・名前」を自由に変更できる機能を実装。

これにより、単なる支援施設用ツールから、あらゆる現場の「配置ボード」として使える汎用SaaSレベルのアプリへと進化を遂げました。

2. 機能紹介:ペタボードの3つの強み

ペタボードは、極限まで「直感的な操作性」にこだわって設計されています。

① ドラッグ&ドロップの直感操作(スマホのタッチ対応)

Web画面に表示されたマグネットは、PCのマウスはもちろん、スマホやタブレットのタッチ操作でも指でなめらかに移動できます。ホバー(長押し)で現れる「×」ボタンで簡単に削除も可能。物理的なマグネットを操作する感覚をそのままデジタルで再現しています。

② デバイスに合わせた最適化レイアウト(縦横切替)

  • スマホモード(縦): 画面上部に操作パネル、下部にA4縦比率のボードを表示。はみ出した部分は指でスワイプして見渡せる安全設計。
  • PCモード(横): 画面幅を最大限に活かしたワイド設計(1180px)。左側に設定パネルを固定し、広い作業領域で全体を見渡しながら配置シミュレーションが可能です。

③ 究極のカスタマイズ性(ノーコード設定)

プログラムの知識が一切なくても、Webアプリ上の「⚙️設定メニュー」から以下の変更が可能です。

  • 背景画像の変更: エクセルで作った表や、オフィスの見取り図のスクリーンショットなどをアップロードするだけで、オリジナルのボードが完成します。
  • 区分の自由設定: 「営業(青)」「アルバイト(緑)」「早退(赤)」など、現場の用途に合わせてカラーパレットから色を選び、自由にマグネットの種類を追加・編集できます。「文字のみ(背景透明)」のマグネットも標準搭載しています。

3. 様々な機関での活用アイデア(ユースケース)

「背景画像を変えるだけ」で、ペタボードはあらゆる業務の管理ツールに早変わりします。

🏫 学校・教育現場で

  • 教職員の行先掲示板: 職員室の黒板の代わりに。「出張」「年休」「体育館」などの背景にし、先生のマグネットを動かすだけ。出先からでもスマホで同僚の居場所がわかります。
  • 掃除当番・座席表シミュレーター: 教室のレイアウト図を背景に設定。学期末の席替えや班決めの際、先生がPC上で生徒のマグネットを動かしながら視覚的にシミュレーションできます。

🏥 医療・福祉・介護施設で

  • デイサービスのスタッフ配置表: 「入浴介助」「送迎」「フロア」などの業務枠に、スタッフのマグネットを配置。当日の急な欠勤にも、朝礼でサッと組み直せます。
  • 病床・ベッドコントロール: 病室の見取り図を背景にし、患者名や担当看護師のマグネットを配置。ナースステーションのホワイトボードを完全にデジタル化できます。

🏢 一般企業・オフィスで

  • フリーアドレスの座席管理: オフィスの平面図を背景に設定。出社した社員が自分のマグネットを座っている席に動かすだけで、「今日、誰がどこにいるか」が一目瞭然に。
  • 社用車・会議室の利用ボード: 「1号車」「A会議室」の枠に、利用者のマグネットを置くことで、鍵の管理ボード代わりとして機能します。

🏗️ 現場・イベント運営で

  • 建設業の作業員配置: 「A現場」「B現場」の枠に、職人さんのマグネットを配置。誰がどこに向かっているかを一括管理。
  • イベントのポジションマップ: 会場図を背景にし、運営スタッフのマグネットを配置。広い会場でのトランシーバーでの指示出しの際、「指令ボード」として絶大な威力を発揮します。

4. まとめ:GAS×Googleスライドがもたらす無限の可能性

「ペタボード (PetaBoard)」は、大掛かりなシステム開発を行わずとも、Google Workspaceの標準機能(GASとスライド)を組み合わせるだけで、ここまで現場にフィットした実用的なアプリケーションが作れるという証明でもあります。

特別なサーバーの契約も、専用アプリのインストールも不要。ブラウザのURLを共有するだけで、チーム全員が同じボードを見つめ、リアルタイムに情報を更新できる世界が手に入ります。

今、目の前にある「ホワイトボード」の写真を撮って背景に設定してみてください。その瞬間から、あなたのアナログな業務が、どこからでもアクセスできる便利なクラウドツールへと生まれ変わるはずです。

会員サービスからダウンロードできます。

プロ・グループ会員の方はこちら

一般会員の方はここから

このスプレッドシートは、認証作業が必要です。

コメント

タイトルとURLをコピーしました