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

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

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

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

概要

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

仕様としては

  1. 座席はフリーアドレスではない席に対しては固定する為のフラグを用意(チェックボックスで管理)
  2. 名前のついていない空いている席をクリックして、キープを押すと席が確定しスプレッドシートに書き込まれる
  3. すでにキープ済みの時にはエラーを返す。
  4. 同じ社員番号での重複キープを防止するためのチェック機能
  5. 固定席のカラーは青や灰色、フリーアドレスはキープするとピンクに変化する
  6. 席の無いエリアおよび通路などは、要素のvisibilityをhiddenする事で実現
  7. 席の確保画面はjQuery Dialogで用意しておく。
  8. 退社時には席をリリースする機能
  9. 各BOXの座席IDはセルの番地とイコールにしておく
  10. 毎日深夜0時に座席データは固定席以外はクリアされる(スクリプトトリガーを使用)

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

※IDはG Suiteユーザならばメールアドレスをスクリプトで取得して、クリックするだけで入力不要にする事でより簡単にする事が出来ます。スプレッドシート側のユーザリストもメアドの登録としておけば、簡単ですね。

ソースコード

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表示名
AS400LOVEIBMユーザ
SUPERDOMEHPユーザ
INTL8080INTELユーザ
SUN50SUNユーザ

サンプルはこちら

関連リンク

共有してみる: