居酒屋シフト提出の紙をいい感じにするWebサイトを作る

こんにちは、居酒屋勤務（ガチ）をしているエンジニア的な人です。

参考: エンジニア社長がコロナ禍下で人生初の居酒屋バイトを始めた話

以前、居酒屋のシフト提出周りをいい感じにするLINE Botを作ってみました。

紙で申請を出す居酒屋店員のシフト希望と管理業務をちょっとスマートにする

この時は紙で提出するシフトを写真を撮ってLINE Botに送ることで管理をしやすくする仕組みを作ってみました。

とはいえ紙業務は無くなっておらず、紙を印刷するタスクは継続中 でした。

シフトの紙、印刷業務

シフトの紙を印刷して、スタッフに配布するという業務は継続的に残っています。

こんな感じで希望を紙に書いて提出しています。

この紙自体もこんな感じで印刷してカットしてます。

日付設定の手間。エクセルからWebへ

シートはエクセルで作っていますが、毎回スタッフは日付をいじってシートを作っていて、かなり面倒な状態でした。

話を聞くとカレンダー的なUIがあって、 自動的にカレンダーに日付が反映されてたら印刷するだけでめちゃ助かるとのことだったのでそんな感じのWebサイトを作ってみました。

サンプルを探して改変していく。

まずはカレンダー実装は世の中的に色々出てるので、ググって出てきたページを参考に実装してみます。

HTMLでカレンダーを使う方法を解説！作り方や埋め込み方法など

まずはサンプルを実装してみる

側だけできた感

省略
       <tr>
        <th>月</th>
        <th>火</th>
        <th>水</th>
        <th>木</th>
        <th>金</th>
        <th>土</th>
        <th>日</th>
      </tr>

      <tr class="day">
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
      </tr>
省略

JS実装

結構勉強になりますね

• 指定の日付から曜日の取得
  • https://colo-ri.jp/develop/2010/01/javascript_this_month_and_last_month.html
• 月末の日付を取得
  • 31日なのか30日なのか28日なのか知りたいですよね。
  • https://qiita.com/akase244/items/f558b9b3c51804103d16

特にシフト業務に関していうと、当月ではなく翌月の話になるので、翌月の末日を知るは実装的に参考サイトが助かりました。

	//翌月末を知りたい
	const dt = new Date(); // 「今日」のインスタンスを取得
	// console.log(dt);
	const lastDayNextMonth = new Date(dt.getFullYear(), dt.getMonth() + 2, 0);
	const lastDayVal = lastDayNextMonth.getDate();
	console.log(lastDayVal); // Fri Feb 28 2014 00:00:00 GMT+0900 (東京 (標準時))

一旦出来たページ

あんまり上手く使えてないけど勉強がてらSvelteで作ってます。

一旦出来たけどCSS調整がまだ出来てないですね。シフトの紙に希望休を書き込むスペースが作れてなく、このままだと使いにくい感じになってると思います。

まとめと来月

一旦そんなWebサイトを作りましたが、毎月15~20日頃にならないとシフト用紙を印刷するルーチンがないので、クリスマス時期の今は実運用としていい感じなのか？を試せないです。

来月にスタッフの人に試してもらってダメなのか有効なのかを確かめたいと思います。

少しでも作業負荷が減ると嬉しいですね。

それでは！