こんにちは！インターン生の丸田です。
今回は、Toyokumo kintoneApp認証機能を活用したトヨクモ流・インターン生のシフト管理方法についてご紹介します。
もちろんシステムの作り方も大公開！
初心者の私が理解できるくらいのちょ〜〜〜ていねいな説明＆キャプチャ付きなので、一緒に作ってみましょう！
ちょ〜〜〜〜〜ていねいに書きすぎてなかなかのボリュームになっていますが、内容自体はそんなに難しくないのであんまり身構えないでくださいね。
kintoneのライセンスがないユーザーでもシフト登録や変更がカンタンにできちゃうシステムなので、大勢のアルバイトさんやパートさんを抱える企業のみなさんはぜひ参考にしてみてください！
【テンプレート内容】
・【kintone】シフト管理アプリパック
・【kViewer】シフト管理ビュー
・【FormBridge】シフト入力フォーム
・【FormBridge】シフト編集フォーム
・【kViewer】外部公開APIビュー
・社員情報アプリ_サンプルデータ
いざ、シフト入力！
さっそく、実際の画面と動き方を見ていきましょう！
まずはログインです
メールアドレスでログインします。
ログインすると、kViewerのカレンダービューが出てきました！
これまでに登録しているシフトはすでにカレンダーに表示されていますね。(日付のボックス内に名前が表示されているのが登録済みのシフトです)
左上の「勤務予定の新規登録はこちら」をクリックしてシフトを入力していきます。
なんと！この画面では「インターン」生であること、氏名、メールアドレスが初期値として入力されているではないですか！(グレーの文字で記入されていて、編集不可となってます)
この仕組みこそ、Toyokumo kintoneApp認証の応用なのです。
のちほど詳しく説明いたします！
実際に入力するのは出社予定日時のみなので、非常にカンタンなフォームとなってます！
左下の緑の「登録する」ボタンを押して、カレンダービューに戻ると…
3月3日(金)に勤務予定が無事登録されました！
ちなみに、管理者側のkintoneレコード一覧画面はこのようになっています↓
3月3日に追加されていますね！
やっぱり修正したい…
せっかく入力したけど、どうしても避けられない予定が入ってしまって出社できそうにない(時間を変更したい)…
そんな場合も大丈夫！
カレンダービュー上の自分の名前をクリックすると予定の詳細と編集ボタンが出てきます。
右上、緑の「予定を編集する」ボタンを押して…
取り消す場合は「取り消し」のチェックボックスにチェックを、時間の変更は出社日時を変更します！
こちらのフォームにも「インターン」であること、氏名、メールアドレスが初期値として入力されていますね。
左下の「編集する」を押してカレンダービューに戻ると…
無事に予定を取り消すことができました！
予定を取り消した場合の管理者側のレコード画面も見てみましょう↓
こちらも予定が消えています！
Toyokumo kintoneApp認証とは
シフト管理システムの作り方の詳しい説明に入る前に、Toyokumo kintoneApp認証について説明します！
Toyokumo kintoneApp認証は、特定のユーザーのみにフォーム(フォームブリッジで作成)やビュー(kViewerで作成)を公開したい場合に利用します。
ユーザーは一度Toyokumo kintoneApp認証を通ることで、認証のかかったフォームやビューを、行き来することが可能です。
詳しくはこちら
今回のシステムでは、Toyokumo kintoneApp認証を活用して
- シフト入力フォーム/シフト編集フォーム(フォームブリッジ)に初期値を入れる設定
- シフトカレンダービュー(kVeiwer)で自分のシフトのみ表示する設定
をおこないます！
シフト管理システムのレシピ
では、システム作成を始めます！
この記事の順番で構成してもらえれば、必ず形になりますので一緒にがんばりましょう！
使用ツールと材料
《使用ツール》
《材料》
❶【kintone】社員情報(氏名、メールアドレスなど)を管理するアプリ
❷【kViewer】外部公開APIビュー
❸【kintone】シフト管理アプリ
❹【フォームブリッジ】シフト入力フォーム
❺【kViewer】カレンダービュー
❻【kViewer×フォームブリッジ】シフト編集フォーム
説明のため、番号付けと色分けをしています。頭の片隅に置いておくと分かりやすいかも！
kintoneで❶社員情報アプリを作る
まずは、社員情報をまとめるアプリを作成しましょう。
今回最低限必要な情報は、「種別」「氏名」「メールアドレス」の3つなので、ぱぱっと作ります。
「はじめから作成」をクリック
今回はシンプルに「種別」「氏名」「メールアドレス」の3項目で作ってみました。必要に応じて追加でカスタマイズしてみてください。
設定タブからAPIトークンを取得します。この時、「レコード閲覧」にチェックを入れることをお忘れなく！
保存してアプリを更新を押したら❶社員情報アプリの完成です。
kViewerで❷外部公開APIビューを作成する
次は、外部公開APIビューを作成します。後ほど、フォームブリッジのkViewerルックアップ機能を利用する際に必要になります！
kViewerを立ち上げて、「外部公開API」をクリック。
先ほど作った❶社員情報アプリのURLとAPIトークンを登録します。
画面が切り替わるので、「公開情報を構成する」タブをクリックし、数字の順に操作していきます。
①：公開するフィールドの選択
②：変更の保存
③：ビューを公開する
これで❷外部公開APIビューの作成は完了です。
kintoneで❸シフト管理アプリを作成する
もう一度kintoneに戻ります。
今度は❸シフト管理アプリを作成します。
「はじめから作成」を押して、こんな感じにフィールドを配置します。
❶社員情報アプリに入力した3項目と、「出勤予定日時」「退勤予定時刻」「出勤予定」というフィールドを追加しました。
このあと必要になるので、上の画像「設定」タブからAPIトークンを取得しておきましょう。
その時、APIトークンに「レコード追加」「レコード編集」「アプリ管理」の権限をつけておくとスムーズです。
ついでに、「一覧」タブからレコード一覧の設定も完了させておきましょう。
タブ上部のプラスマークを押します。
画面が切り替わるので、数字の順に設定をしていきます。
①カレンダー形式にチェック
②日時は「出社予定日時」、タイトルは「出勤者」
③絞り込みで「出勤予定」のフィールドで「取り消し」のチェックが付いた場合表示しないよう設定
必ず「保存」して、「アプリを更新」させてから次のステップに進んでください。
フォームブリッジで❹シフト入力フォームを作成する
❸シフト管理アプリと連携させてフォームブリッジを作成します。
この❹シフト入力フォームから入力された情報が❸シフト管理アプリに蓄積される仕組みです。
まずは「はじめから作成」です。
❸シフト管理アプリのURLとAPIトークンを入力します。
なんとなくフォームが出来上がりました！
こちらのフォームはこのあとの操作後にまた編集をしますので、一旦このまま保存ボタンを押して次の工程に進んでください！
❹シフト入力フォームにToyokumo kintoneApp認証を設定する
画面はそのままで、Toyokumo kintoneApp認証の設定をします！カンタンです！
端的に言えばメールアドレスを登録するのですが、3通りの方法があります。
- 手入力
- kintoneアプリから同期する
- CSVを読み込む
今回はkintoneアプリから同期する方法でやってみたいと思います。
その他の方法はこちらを参考にしてみてください。
早速設定してみましょう。
「ユーザー管理」タブを開いて、「Toyokumo kintoneApp認証を利用する」にチェックを入れます。
すると、「kintone同期」のボタンがクリックできるようになりますので、押してください。
このような画面が出てくるので、❶社員情報アプリのURLとAPIトークン(「レコード閲覧」の権限付与が必須です！)を入力します。
「次へ」を押すと、社員情報アプリ内に登録されているメールアドレスが一覧で表示されます。
今回は1件しか登録していないので、1件のみの表示です。
画面下の「保存して同期」を押せばメールアドレスの登録はこれで完了です。
ただし！この設定をするだけでは名前やメールアドレスの初期値を入力したフォームはできません。
Toyokumo kintoneApp認証タブの画面上部、ヒント枠の下線部分に注目です。
フィールドコード：__kintoneAppAuthenticationEmail__
と書いてあるので、コード部分をコピーしておきましょう。後ほどこのコードを使用して初期値を入力したフォームを作ります。
❹シフト入力フォームにkViewerを連携する
詳しい設定>「kViewer」タブから、連携を完了させます。
数字①〜③の順にクリックをしていきます。
①を押した際に確認のウィンドウが出ますが、フォームや設定の編集中でなければ続行していただいて構いません。
❹シフト入力フォームにkViewerルックアップフィールドを設定する
「フィールド」タブに「kViewerルックアップ」フィールドがあります。
こちらをドラッグ＆ドロップして、フィールドに配置していきます。
1つのフォームに1個でOKです！え、3つも自動入力させたいフィールドあるのに？？大丈夫、安心して1つだけ置いてください。
kViewerルックアップフィールドの設定はこちら。
①フォームの回答者に見えないようにします。なのでフィールド名はそのままでOK！
②ドロップダウンで、作成した❷APIビューを選択します。
③kViewerから引用したいデータを選択します。
④必ずメールアドレスを設定します。他のデータが設定されていると初期値が入力されなくなります。チェックボックスも忘れずに！
⑤kViewerとフォームブリッジのフィールドを合致させます。(一番下の+マークを押すとフィールドの数を増やすことができます)
そしてそして！一番大事なこちらの設定！
フィールドコードに、Toyokumo kintoneApp認証タブのヒント内にあったコードを入力します！
【__kintoneAppAuthenticationEmail__】
あと少しでフィールド設定は完了です！
「種別」「出勤者」「メールアドレス」を回答者に編集させないようにします。
それぞれのフィールドの設定画面で、「編集不可にする」にチェックを入れるだけです。
「出社予定日時」「退社予定時間」は初期値設定をしておくとユーザーに優しいかもしれないです。
また、「出勤予定」は❹シフト入力フォームには不要なので、フィールド設定画面で「フィールドを表示しない」にチェックを入れておきます。(非表示設定をするとフィールドがグレーに網掛けされます)
これらの設定が完了したら、「閉じる」ボタンを押して「保存」「編集の完了/取消」ボタンをクリックしてフォームに反映させましょう。
フォームを「公開」したら、プレビュー画面で確認します！
プレビュー画面でメールアドレスを選択して仮ログインすると…
初期値入力できました！！やったね！！
kViewerで❺カレンダービューを作成する
やっと終わりが見えてきました！あとちょっとがんばりましょう！
回答者が、登録したシフトを確認できるカレンダービューを作成していきます。
まずはkViewerでカレンダービューを選択。
❸シフト管理アプリのURL、APIトークンを入力します。
画面が変わったら、Toyokumo kintoneApp認証タブをクリックしてこちらも設定しちゃいましょう！
❹シフト入力フォームで行ったものと手順は同じなので説明は省略します。(忘れちゃったらこちらからどうぞ！)
ビューの見た目を設定していきます。
コンテンツ配置はヘッダーコンテンツ＆メインコンテンツにします！
レコード一覧は、赤枠部分をお忘れなく設定してください。
プレビューとして、先ほどフォームブリッジから登録した2月1日のシフト情報が出てきています！
ヘッダーコンテンツはこんな感じにしてみました。
①では「タイトル」「リッチテキスト」「HTML」が選択できます。今回はURLを埋め込みたいので「リッチテキスト」にします。
②は実際に❹シフト入力フォームのURLを埋め込んでいます。
レコード詳細画面はこんな感じ。
これは、ユーザー(回答者)がカレンダーにある自分の名前をクリックすると見える詳細情報の画面です。
表示条件も設定します。
後ほど作成する❻シフト編集フォームからユーザーによる出勤予定の取り消しがあった場合、ユーザーが見ているカレンダービュー画面でその予定を非表示にする必要があります。
そのため、「条件」枠は「取り消し」を「含まない」よう設定しておきます。
また、「Toyokumo kintoneApp認証を使用した絞り込み条件」も設定します。他の方の情報が見えてしまうことを防ぎます。
❻シフト編集フォームを作る
使うのは、❸シフト管理アプリとフォームブリッジ！
新しくフォームを作成していきます。
こちらの設定は❹シフト入力フォームとほとんど同じなので、復習しつつやってみましょう！
「はじめから作成」を押して、❸シフト管理アプリのURLとAPIトークンを入れたらこんな感じ。
❻シフト編集フォームとkVieweを連携する
「kViewerと連携する」タブから「kViewerとの連携情報を更新する」ボタンを押して「保存」「設定完了」します。
❻シフト編集フォームにkViewerルックアップフィールドを設定する
再度フィールド設定に戻って、「kViewerルックアップ」フィールドを1つ追加します。
設定は以下の通りです。
- フィールドは表示しない
- APIビューは❷外部公開API「シフト管理」を選択
- 表示するkViewerのフィールドは「氏名」「種別」「メールアドレス」
- 検索対象フィールドは「メールアドレス」
- 「完全一致したレコードのみを検索する」にチェック
- フォームブリッジとkViewerの対になるフィールドを選択
- フィールドコード「__kintoneAppAuthenticationEmail__」を入力
❻シフト編集フォームにToyokumo kintoneApp認証を設定
❶社員管理アプリからkintone同期をします。
Toyokumo kintoneApp認証、忘れちゃった！な方はこちらをご覧ください！
フォームを公開して、プレビュー画面で確認しましょう！
2回目となればもうバッチリですね！
kViewerと❻シフト編集フォームを連携する
これで最後です！
kViewerの画面をご覧ください。
「フォームブリッジと連携する」タブから、kViewer上の情報を編集できるボタンとフォームを作成します。
数字の順番で設定を完了していきます。
①チェックボックスを入れると以下の設定が可能になります。
②❻シフト編集フォームのURLを入力する(必ず❻シフト編集フォームを「公開中」にすること)
③ユーザー画面に表示されるボタンを自由に作成します。
この画面の一番下にある「保存」、右上の「編集の完了/取消」を押してから、プレビュー画面を確認します。
カレンダー上の予定(名前)をクリックすると…
画面右側に「編集」ボタンができました！
押してみます…
❻シフト編集フォームを表示できました！
これでシフト管理システムの構築は完了です！お疲れ様でした！
まとめ
いかがでしたか？
難しいコードいらずでカンタン＆便利なアプリが完成しましたね。
でも細かい設定が多すぎて大変だった…と思うのはきっと私だけじゃないはず。
kintoneやプラグインでどんな設定ができるのか、頭ではわかっていても実際に使用するアプリやシステムを作るのは難しいものです。
私自身もまだまだ勉強中ですので、一緒に頑張ってkintoneをマスターしましょう！
今回のシステム作成で使用したフォームブリッジとkViewerは30日間無料お試しが可能です。
下のフォームからお申し込みののち、ぜひもう一度上から読んで設定してみてくださいね！
