🎴

なるべく楽に出退勤をコラボフローに記録する

2022/12/10に公開

この記事はコラボフロー Advent Calendar 2022 の 9日目の記事です。

突然ですが世の中は脱リモートワークの色が濃くなってきましたね。
本当に突然ですが、私が所属する株式会社コラボスタイルでは働く場所/時間に関して、会社で制限を設けていないので、私はもっぱらリモートワークを選択し自宅で働く場合が多いです。　自宅最高ですよね。
そんな自宅大好き人間でリモートワーク主体といっても何かしらの理由でオフィスへ出社する機会は定期的に存在します。
そんな時にオフィスに出社した事をコラボフローを利用して如何に楽に記録できるかのアイデアを考えてみました。

仕様とゴールをざっくり考える

必要な情報の整理

まずはフォームをイメージします。
難しい事は考えずに記録したい情報を捻り出してみた所、以下4つを必要な情報とします。

出社したのか退社したのか
利用したのは誰か
利用日時
備考

自分の要望

なるべく書類に手動記載を行わずにボタンをポチッで記録したい
時々備考とかを書きたいから枠は欲しい
見た目はどうでも良い

こんな感じで自分勝手な欲望を具体的にすると、備考以外の項目を自動入力する事ができれば解決しそうですね。

フォームを作る

作りたい申請書のイメージはできたので早速作っていきます。

エクセルでフォームを作る

はい、できました。　デザイン性は皆無ですが必要な情報は揃っています。

コラボフローでフォームを設定する

とりあえずフォームを用意する

コラボフローにはコラボフロー活用支援サイトという便利なサイトが存在するので、下記記事を参考に一度フォームを完成させます。

上記記事を参考にしつつ、Excelフォーム作成画面では下記のように設定値しました。

「出退勤の選択」にはラジオボタンパーツ
「利用者」にはテキスト(一行)パーツ初期値に「userName」を設定こちらを参考
「利用日時」には日付パーツデフォルト日付を「当日にセット」を設定
「備考」にはテキストエリアパーツ

この時点で「利用者」と「利用日時」は自動で入力されるようになっています。
残りは「出退勤の選択」をなんとか自動で行うだけです。

カスタマイズ js を用意する

「出退勤の選択」の自動選択の方法を数分考えた所、URLクエリパラメータに出社・退社を入力してカスタマイズ JS でラジオボタンを自動チェックする方法を思いついたのでササっと作っていきます。

カスタマイズ js は以下のコードを利用しました。


const urlParams = new URLSearchParams(window.location.search);
const radioValue = urlParams.get('fid1');

// 出退勤の選択
if (radioValue) {
    const radioElement = document.querySelector(`input[type="radio"][name=fid1][value=${radioValue}]`);
    radioElement.checked = true
}

フォームにカスタマイズ JS をアップロードする

下記記事を参考にしつつファイルをアップロードします

動作チェックをする

アップロードが完了したら早速動作チェックを行いつつ出社用と退社用のURLを用意していきます。

https://cloud.collaboflow.com/hogehoge/...&fid1=出社
https://cloud.collaboflow.com/hogehoge/...&fid1=退社

試しに出社用のURLにアクセスしてみると・・・

上手く出社にチェックが入っている！！
単純な実装ですが上手くいった時はいつでも嬉しいですね

そして活用へ・・・

用意したURLをQRコードに変換し下記のような画像を用意しIDケースの裏面などに入れておきます。
これでURLを忘れることはないし、脳死で出退勤を記録できますね！

最後に

ササっとやりましたが、URLクエリパラメータで値を自動セットする方法は色々活用できそうですね。
今回紹介した方法以外にも同様の実装は可能なので、機会があれば試してみてください。

コラボフロー Advent Calendar 2022 の 10日目は@collabo-naoyaさんの「検証がてら記事化できそうなヤツコラボフロー＆カスタマイン＆kintone」です。　お楽しみに〜