Google Apps Scriptで座席表を作ろう – ライブラリ編

働き方改革を推し進める一方、制度や仕組みだけがあっても、実際には運用上で次々に障害が出てきます。最近の流行り(IT業界じゃ昔から当たり前)の要素に「フリーアドレス」制度があります。座席を固定せずに、その日好きな席に座って作業をすると・・・。

しかしこの弊害として「誰がどこに座ってるかわからない」「座ってる人が誰なのかわからない」といったコミュニケーション上の問題が生じます(10名程度の小さな事業所ならば不要ですけれどね)。その日に出勤したら席を取ってもらうシステムを用意すれば解決します。カスタマイズ次第では、夢が広がる小さなシステムを作ってみたいと思います。

図:こんな感じのウェブアプリが簡単に作れます

難易度:


今回使用するスプレッドシートとライブラリ

また、G Suiteでは、現在ログインしてアクセスしているユーザのメアドを自動取得出来るので、社員ID入力を省略も可能です。社員IDではなくメアドをユーザ表に登録しておき、キープとリリースの2つのボタンを押すだけで済むものも作成しました(ご要望があったので、コードを少し改造し、余計なコードを削除してあります@2019/12/26)。ソースコードで掲示してる内容は改造前のものです。

概要

今回作成するのは、座席表アプリとしては非常に単純で最もシンプルな仕組みで実装しています。ライブラリとしては、Mansonryベースという「jQuery.ShapeShift」を使ってみました。このライブラリ自体はドラッグしてブロックを移動なんかも出来るのですが、今回はその機能はオフにして、スプレッドシート連動の座席表管理アプリを作っています。

仕様としては

  1. 座席はフリーアドレスではない席に対しては固定する為のフラグを用意(チェックボックスで管理)
  2. 名前のついていない空いている席をクリックして、キープを押すと席が確定しスプレッドシートに書き込まれる
  3. すでにキープ済みの時にはエラーを返す。
  4. 同じ社員番号での重複キープを防止するためのチェック機能
  5. 固定席のカラーは青や灰色、フリーアドレスはキープするとピンクに変化する
  6. 席の無いエリアおよび通路などは、要素のvisibilityをhiddenする事で実現
  7. 席の確保画面はjQuery Dialogで用意しておく。
  8. 退社時には席をリリースする機能
  9. 各BOXの座席IDはセルの番地とイコールにしておく
  10. 毎日深夜0時に座席データは固定席以外はクリアされる(スクリプトトリガーを使用)
  11. 自分の会社では確保済みシートをクリックした場合、社員の顔写真、電話番号、PC番号、メルアド、Teamsへの直URL Schemeなどが表示されるように別途ダイアログを用意したり、社内の様々な業務(健診予約)なども追加して、活用しています。
  12. 別にテレワーク者の登録画面などもあると便利(今日の外出先や業務内容、時間などを格納するものを用意して)
  13. 個人的には自由度の高いレイアウトを作れるイメージマップ編のほうがオススメです。

キープ済みの席をクリックすると誰なのか?内線番号やSkypeのIDなどを表示するようにすると、なお面白いと思います。基本はスプレッドシートに列を追加して拡張し、プログラム側で読み取ってダイアログに配置するだけの仕組みです。

ソースコード

GAS側コード

  • nowsheetlist関数は起動時やリフレッシュ時に呼び出され、現在のシート状の座席確保状況がHTML側に返されます。
  • getsheetman関数は、クリックされてキープされた時、シート上のユーザリストを探索し、ユーザがあれば座席リストを探索し、空いていれば確保する関数です。確保する時は、LockServiceでシートをロックしてるので、ダブルブッキングを防止します。
  • clearsheet関数は、毎日0時にスクリプトトリガーから呼び出され、自動的に座席確保状況をクリアします。
  • relsheetman関数はクリックされてリリースされた時、シート状のユーザリストを探索し、ユーザがあれば座席リストを探索、シートのユーザIDと一致する場合に、座席をクリアする関数です。

HTML側コード

seatchart.html:表示用のメイン

  • JavaScriptおよびCSSに関しては別のHTMLファイルに切り出して、起動時に読み込むようにしています。
  • そのため今回のウェブアプリケーションは、GAS側でHtmlService.createTemplateFromFileとしてロードしています。

zaseki.html : 座席用のテンプレート

  • 行単位(横)でセクションを作っていく点に注意!!
  • 特定のdivにはnothingやcabinetなどを指定し、固定席としています。
  • それぞれのidは、スプレッドシート側のセル番地と対応しています。

javascript.html:クライアント側スクリプト

  • jQuery.Shapeshiftライブラリで描画させ、GAS側から呼び出した座席リストを各DOM要素のIDに一致する席に確保済みユーザを表示させるようにしています。
  • 席の確保、解放それぞれに対する処理を記述しています。
  • 一度、シートの確保を行うと、LocalStorageに社員IDをキープしてあります。
  • 座席の確保やリリースはそれぞれ用のダイアログを用意して表示するようにしています。jQuery Dialogを利用しています。

CSS側コード

  • ダイアログ用のBox用のCSSおよびShapeShift用のCSSが記述されています。
  • cabinetが灰色のBOXで表示される固定確保されてる席を表現
  • nothingがBOX自体をvisibility:hiddenで非表示にする対象。通路などのBOXはこれを適用します。

使い方とサンプル

セットアップ

使用する前にスプレッドシート上でセットアップが必要です。また、毎晩0時に座席データのクリアを自動実行する為にはスクリプトトリガーの設置が必要です。以下の作業をしてから利用しましょう。

  1. スプレッドシート上のメニューより「座席表Plus」⇒「setup」を実行。スプレッドシートのIDがスクリプトプロパティに格納されます。
  2. 同じく「座席表Plus」⇒「リセットトリガー設置」を実行。スクリプトトリガーが設置されます。ただし、複数名が実行しないように注意してください。

サンプル

白いタイルは、フリーアドレスの席い該当するので、確保する事が可能です。ただし、ユーザリストに該当の社員IDが登録されていない場合には、確保する事ができません。

現在テスト用の社員IDとして以下のユーザを登録してあります。

ID 表示名
AS400LOVE IBMユーザ
SUPERDOME HPユーザ
INTL8080 INTELユーザ
SUN50 SUNユーザ

サンプルはこちら

関連リンク

共有してみる:

Google Apps Scriptで座席表を作ろう – ライブラリ編” に対して5件のコメントがあります。

  1. ノア より:

    こちらとても有用な情報で嬉しく思っています。
    なんとか自分の環境に対応させたのですが、
    ※IDはG Suiteユーザならばメールアドレスをスクリプトで取得して、クリックするだけで入力不要にする事でより簡単にする事が出来ます。スプレッドシート側のユーザリストもメアドの登録としておけば、簡単ですね。
    ▲これも実装したいのですが、具体的な手法を教えていただくことは可能でしょうか?
    ※当方HTMLとcssが書ける程度の初心者です。

  2. akanemaru2017 より:

    ノアさん、おはようございます。

    今回のサンプルは、手動で毎回IDを入れてそれを基準に探す仕様にしてました。という事で、G Suiteで利用できるSession.getActiveUser();を使って、メアドを自動取得⇒それを元に探索、キープ、リリースできるようにした改造版を掲示しました。

    主な改造点は

    • var manid = Session.getActiveUser();として、manidを自動取得のメアドに置換
    • LocalStorageを使う部分や、jQuery DIalogのID入力部分の削除

    これくらいです。ただ、今回の自動でメアドを取得して探索して返す手法は、非常によく利用するものなので、ぜひ他のシステムでも流用すると、利用者の余計な負担が減って、利用率も上がると思います(何より、IDは流用できますが、メアドはログイン認証してないと、なりすましができませんから)

    1. ノア より:

      ありがとうございます!望んだ通りの結果になりました。

      毎日使うものだとたった数秒の手間でも、労力の積み重ねがすごいですものね。。。
      これを使えるようになると、今の業務も便利になりそう。。。
      今日で仕事納めですから、お正月休みの間にじっくり研究します!

      本当にありがとうございました!

      1. akanemaru2017 より:

        このアプリは本当に座席表のみですが、色々と機能を追加していくと、非常に便利になると思うので、ぜひ拡張してみてください。
        フリーアドレス推進してる割には、この手のアプリがソリューションでべらぼうに高かったりするので、価値はあると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。