FLEXSCHE

スタッフブログStaff Blog

FLEXSCHEで席替えアプリを作ってみた

2024/12/11
written by 樋口 陽介

樋口 陽介

以前のブログ「掃除と席替え」で弊社では定期的に席替えを行っていることをご紹介しました。今も変わらず行っているのですが、その方法が、、、トランプを引いたカードの席に移動するというアナログな方法でした。それはそれでゲーム感もあって楽しいのですが、同じ席にはならないようにするルールなので引き直しが発生するなど面倒な場面もちらほらあります。かりそめにもITに関わる会社がこのままの状態ではダメでしょう、ということで席替えアプリを作ることにしました。

初めはバックエンドはNodeJSで、フロントエンドはReactで作ろうと思っていたのですが、席替え自体はFLEXSCHEでもモデリングできそうだなーと思い、バックエンドをFLEXSCHEで、フロントエンドをFLEXSCHEに組み込んだWebコンポーネント(WebView2)で作成することにしました。

さっそく席替えをFLEXSCHEでモデリングしましょう。まず座席表にしたがって各座席を資源として登録します。

席替えは席が決まったら次の席替えまでその席を占有することになるので、ある時点のある人の席替えのイベントをオーダーとして登録してその作業が次の席替えまでの期間を任意の席を占有するように計画することにします。

例えば11/1~12/31の期間の座席順を決める場合は以下のようにオーダーを生成します。オーダーはスケジューリングルールに開始日時と終了日時のパラメタを持たせてスケジューリングメソッドでまとめて生成しています。

オーダーデータ.png

生成したオーダーの作業を各座席(資源)にランダムで割り振るようにスケジューリングすれば席替えは完了です。各座席に作業が割付けられて人が割り当てられていることがわかります。作業が割付いてない座席は空席ですね。

ガントチャート2.png

ただし今すでにトランプで決めた座席に座っているわけなので、同じ席にはならないようにするルールを守るのであれば現在の座席順を登録しておく必要がありそうです。現在および過去の座席順は作業実績の実績資源で与えることにしましょう。

作業実績データ.png

作業実績を登録することで今の座席順が反映されました。この状況から新たに1/1~2/28までの座席順を計画してみます。同じようにオーダーを生成しリスケジュールしてランダムに座席を選びます。ただし、同じ座席になった人がいた場合は再度リスケジュールします。資源ガントチャート上の実績作業が現在の座席順を表していて、実績の入っていない作業が新しい座席順を表しています。

ガントチャート.png

席替えアプリはこれで完成なのですが、座席順のイメージがないと正直わかりにくいですよね。フロントエンドとして座席表をFLEXSCHEに組み込んだWebコンポーネント(WebView2)にReactを使って表示することにします。

座席表は画像ファイルで与えられ、各座席は画像内のXY座標で示されます。資源マスタに座標を登録します。WebView2で実行されるスクリプトからはFLEXSCHEのオブジェクトにアクセスできるようになっているので、ReactアプリからFLEXSCHEのオブジェクトにアクセスして現在の座席順を取得します。その際に登録した座標を返してあげることで座席表のイメージの上に座席順を表示することができます。Reactで作成したページをFLEXSCHEのWebビューで開いてみましょう。現在の座席順が表示されました。

また表示だけでなくフロントエンド側で席替えや座席順の確定を行えるようにボタンも用意します。席替えボタンを押すとバックエンドであるFLEXSCHEでオーダーの生成とリスケジュールが行われ、新しい座席順が返されます。青い文字が現在の座席順で赤い文字が新しい座席順です。確定ボタンを押すとFLEXSCHEで作業実績を生成するスケジューリングルールを実行して現在の座席順を確定します。

これで完成です!いかがだったでしょうか。このようにFLEXSCHEは生産計画を立てるだけではなくモデリングできるものであれば色々な分野で活用できます。製造部門じゃないから、とか、うちは製造業じゃないから、なんて言わずにぜひ試してみてくださいね。

ユーザー

PAGETOP