本記事ではGoogleのノーコードツール「AppSheet」を使用して最低限の機能を持った勤怠管理アプリを作成していきます。
この記事を読んでいる人達は勤怠管理の必要性、行う理由などはご自身の考えがあり、その考えにあったアプリや仕組みを探されていると思いますので、勤怠管理の必要性などの説明は省きます。
まずは記事の題材にした実際の勤怠管理アプリの入力と入力後のデータが見れるリンクを用意しているので、ぜひ操作をしてみてください。
目次
アプリ体験
AppSheetで作られた勤怠管理アプリの使用感はどのようなものか、この後紹介する方法で作成したアプリを実際に使ってみてもらえたらと思います。
AppSheetを使用したことがあり、勤怠管理アプリの作り方を早く知りたいと言う人は次の章からご覧ください。
以下それぞれのリンクから使用できるのでAppSheetで作成したアプリを使用したことがない人はぜひ使ってみてください。
PCのブラウザ、スマホやタブレットでアプリをダウンロードすると使用できます。
（不特定多数の方に見てもらうことを想定していますのでくれぐれも個人情報は入力しないでください。）
勤怠入力体験（ブラウザ版）
https://www.appsheet.com/start/cfbbdbde-856c-4cf8-8a5d-baa814b022d9
勤怠入力体験（アプリ版）
https://www.appsheet.com/newshortcut/cfbbdbde-856c-4cf8-8a5d-baa814b022d9
ブラウザ版だと以下の手順で進めると入力が出来ます。
アプリ版でも大きな違いはありません。
①右上のAddをクリック
②入力ページが開くので名前欄の右にある▼をクリック
③名前をどれか選ぶもしくはNewから名前を入力 時間、日時はアプリを開いた日時が自動で入力されます。
変更も出来るので各欄の右側にある時計やカレンダーのマークをクリックして操作をしてみてください。
④出勤/退勤/休みのどれかをクリック
⑤コメントは任意入力なので入れたい文章があれば入力
⑥右上の青いSAVEをクリック
入力ページが閉じて入力内容が記載されていれば完了です。
入力したデータの保管先が以下になります。（Googleスプレッドシート）
どのように保管されるか入力をした後に見てみてください。
（反映に数分かかる場合があります。）
https://docs.google.com/spreadsheets/d/1PnmVfNEguE3WsfaAi3O4yxXAgJ5RzYEiNmaXfXnQeSU/edit?usp=sharing
AppSheetとは
AppSheetとはGoogleが提供するノーコードツールで、プログラミング等の高度な専門知識無しで簡単にモバイルアプリやウェブアプリを制作できます。
Google提供のツールなのでスプレッドシートやGoogleカレンダーなどのGoogleWorkspaceツールとの連携も可能です。
Googleのアカウントがあれば誰でも無料で始められるので、低コストでの導入が実現できます。
（無料では入力できるアカウント数に制限があります）
詳しくはこちらの記事で紹介しています。
GoogleのノーコードツールAppSheetって何が出来る？
ぜひこの後説明する操作方法を真似してアプリ制作を体験してみてください。
スプレッドシート用意
AppSheetはアプリ上で入力されたデータを蓄積するスプレッドシートを元に制作するのが簡単だと思いますので、今回もスプレッドシートを元に制作していきます。
以下が今回使用するスプレッドシートです。
アプリ体験の項にデータの保管先として用意したスプレッドシートと同じです。
勤怠管理に最低限必要だと思われる以下を1行目に入力しています。
名前・日付・時間・出勤/退勤/休・コメント
アプリを作り始めてからも変更は可能ですが、この項目がアプリでの入力欄となりますので必要な内容を最初に入力しておくと制作が進めやすいです。
それと忘れがちなのがスプレッドシートのファイル名とシート名です。
初期のままだと「無題のスプレッドシート」「シート1」となっていて、変更をしないとこのままアプリに反映されるのでAppSheetの操作に入る前に任意の名称に変えておくのがオススメです。
（AppSheetの操作に入ってからも変更は可能です。）
AppSheet制作
AppSheet立ち上げ
元となるスプレッドシートの用意が出来たらAppSheetを作っていきましょう。
①準備したスプレッドシートの上部にある「拡張機能」をクリック
②Appsheetをクリック
③アプリを作成をクリック
そうしたらAppSheetが開いて以下のような画面が出るので右下の「Customize with AppSheet」をクリックします。
AppSheetの制作画面になるので左端の三つ重なっているようなマークのデータボタンをクリックします。
そうするとたくさんの項目やチェックボックスが出てきます。
それぞれ説明をするととても長くなってしまうので、今回は必要な部分の操作だけ説明をします。
まず右側の青いプラスがある場所は、制作しているアプリを使用する際の実際の画面です。
プラスをクリックすると制作中アプリの入力欄が出てきます。
スプレッドシートの1行目に入力した名前、日付、時間等の項目があれば問題なくスプレッドシートからのAppSheet立ち上げが出来ています。
入力方式設定
そしてそれぞれの項目の内容ですが、まずNAMEは項目名となります。
TYPEは入力する方式です。今はTextとなっているので空欄に直接文章を入力できるようになっています。
このTYPEを変更することで入力方式を選択式にしたり、画像をアップするなどが出来るようになります。
右側のプラスをクリックすると制作中のアプリのデモ画面が出ます。
項目名はこのままでいいかなと思います。
TYPEを変更して適切な形の入力がしやすいようにしていきます。
Textの欄にある▼をクリックするとたくさんの選択肢が出てきます。
ここから各項目に合わせた入力方式を選びます。
一旦名前はTextのままで、日付をDate、時間をTime、出勤/退勤/休をEnumにします。
Enumは選択肢の中から1つ選択する方式です。今回は一度の入力時に出勤/退勤/休のどれか一つを入力するのでEnumにして選択式で簡単に入力が出来るようにしました。選択式にすることで入力者ごとの入力文のズレや入力間違いを防げます。
TYPEを変更すると右側のアプリのデモ画面も各項目の変更が反映されます。
変更したらどのように入力出来るのか試してみます。
右上のSAVEで保存をしてからその下の四角に矢印があるブラウザーで開くをクリックして実際の入力画面で試すか、このページでそのまま入力することも可能です。 ブラウザでの入力は冒頭の例にあるので、今はこのページで入力をします。
変更が反映されていたデモ画面のカレンダーや時計のマークをクリックするとそれぞれの入力が出来る画面が出るので日付や時刻を入力します。
ちなみにTYPEをDateTimeにすれば一つの欄で日時が入力出来るので試してみてください。
しかし、出勤/退勤/休を開くと選択肢が無く入力出来ないです。これを出勤/退勤/休が選んで入力出来るように設定します。
出勤/退勤/休のボタン入力(Enumの設定)
NAMEの入力欄の横に鉛筆マークがあるのでそれをクリックすると、各項目をより詳細に編集する画面が開きます。
ここで編集をして出勤/退勤/休をクリックして入力出来るようにします。
①ValuesのAddをクリック
②入力欄が出来るので「出勤」と入力
③もう一度Addをクリックして追加の欄を出す
④「退勤」「休」を入力
⑤Input modeのButtonsをクリック
⑥編集画面の右上部にある「Done」をクリック
そうするとポップアップで出ていた画面が閉じて、右側のデモ画面が以下のようにボタンクリックで出勤/退勤/休を入力出来るようになります。
Buttonsを選択したInput modeでStackは縦並び、Dropdownを選ぶとこの例として用意したアプリの名前の項目の形で入力が出来るようになります。
Dropdownは後ほど別項目で使うのでそこでも説明ます。
入力必須の設定
最低限必要な入力項目の用意は出来ました。
あと簡単に出来る設定として一部項目の入力忘れを防ぐために「名前、日付、時間、出勤/退勤/休」を入力必須にしましょう。
これまで操作をしていたデータの画面右にスクロールするとRequire?と言う欄があります。
この欄でチェックを入れた項目は入力が必須となるので、「名前、日付、時間、出勤/退勤/休」にチェックを入れましょう。今回コメントは自由入力としました。
必須になっていると項目名の横に青い＊が付きます。
実際のアプリ使用時に必須項目を入力せずに完了しようとすると入力されていない欄に「This entry is required」とアラートが出て入力の完了が出来ません。
これで最低限の勤怠入力が出来るアプリが完成しました。
手入力を最低限にする
前項までの内容で勤怠情報を入力すると言うことは出来るようになりました。
ただ毎日最低でも2回(出勤と退勤)入力をするとなると、まだまだ使い勝手が悪くタイムカードなどのアナログ方式が楽となって社内に浸透しないのではないかと思います。
例えば名前をいちいちテキストで打ち込む、日時を選択しないといけないは面倒ですし入力ミスや名前がテキストだと日によってスペースがあったり無かったりがあるなどの入力揺れが起きる可能性があります。
そうすると効率化のためにアプリを作成して導入したのに集計作業が煩雑になったり、必要なデータが揃わないなんてことも起こりやすくなるのでもう少し使用しやすい形に編集します。
名前入力を選択式にする
まずは名前の入力を毎回テキストで入力するのではなく選択式に出来るようにしましょう。
現在、社員名簿があり基本的に出勤をしてタイムカードのように一箇所で打刻をしている場合に有効な方式です。
冒頭にリンクがある作成例は選択式で作っています。
選択式にすると以下画像のように決まっている選択肢からの入力が出来るので、入力揺れが無くなりテキストで入力するよりも簡単です。
新入社員が入ったなどで名簿にない名前の入力が必要になった場合はNewから新規登録ができます。一度登録をすればスプレッドシートの名簿シートにも反映されるので次回以降は選択肢から選んで入力が出来ます。
この新規登録も冒頭の例で体験できるのでぜひお試しください。
それでは選択肢を作っていきます。
まず社員名簿を別シートに用意します。
スプレッドシートに用意したらAppSheetに戻って
①Dateを追加するプラスボタンをクリック
②GoogleSheetsをクリック
③検索窓に「社員名簿」と入力
④欲しいシートが入っているファイルをクリック
⑤「Select」をクリック
⑥ファイルの中身を選択するページになるので「社員名簿」にチェックを入れて
⑦「Add 1 table」をクリック
Dataに社員名簿が反映されました。
データ追加の方法を説明するために、AppSheet立ち上げ後スプレッドシートに名簿を追加しましたが、Appsheet立ち上げ前にこの状態（同じスプレッドシートのフォルダに勤怠記録シートと名簿がある状態）にしてAppSheetを立ち上げればこの章で説明をした追加の作業は不要です。なので最初から必要なデータが分かっている時はスプレッドシート内に用意してからAppSheetを立ち上げると効率よくアプリ制作が出来ます。
社員名簿に基づいた選択肢の設定(refの設定)
続いて読み込んだ名簿にある名前をドロップダウンで選択できるようにします。
AppSheetのDataページに戻ってTextやDateの設定をしたTYPEを開いて「Ref」を選択します。
Refを選択するとポップアップで詳細の設定画面になるので
①Souurce Table欄の▼をクリック
②社員名簿を選択
③下にスクロールしてDropdownを選択
④右上のDoneをクリック
名前の入力欄右横に▼が出てクリックすると名前を選択できるようになりました。
Enumの時と同じようにDropdownを選択した場所で他の形式にすれば選択の形式を変更できるので入力のしやすい方法にしてもらえたらと思います。
日時の自動入力(TODAY関数、TIMENOW関数)
最後に日付と時間の入力を手動ではなくアプリを開いた日時が自動で入力されるようにします。
入力の手間を省き正確な日時の入力がされるようになります。
どちらもほぼ同じ手順になりますが、まず日付の自動入力を設定します。
①Dataページで右にスクロール
②INITIAL VALUEの列を見つけ日付の欄をクリック
③ポップアップで出たExpression Assistantのページにある灰色の欄に「TODAY()」を入力もしくは下のExaplesからTODAY()を見つけてInsertをクリック
④Saveをクリック
これでアプリを開くと自動で日付が入力されています。
続いて時間です。日付と同じ手順でINITIAL VALUEに「TIMENOW()」を設定します。
設定が完了するとデモ画面に自動で日付と時間が入力されています。
以上で完成となります。
ここまでの作業を問題なく完了すると冒頭の作成例と同じアプリが作れています。
おわりに
いかがでしたでしょうか。
初めてAppSheetを触ったと言う人には少し難しく感じる箇所もあったかもしれませんが、Googleアカウントがあれば誰でもプログラミング知識無しでアプリが作れるAppSheetの便利さを実感してもらえたのではないかと思います。
今回紹介した機能以外にもSuicaやPASMOで認証が出来るNFC機能や名前の入力ではなくアプリを立ち上げた人のメールアドレスで認証をする、他のGoogleツールと連携して複合的なアプリの作成なども可能です。
ぜひ今回の記事でAppSheetって便利と思ってもらえたら日々の業務で効率が悪いと感じている作業に対し、アプリを作成して解決に取り組んでもらえたらと思います。
しかしAppSheetに関して日本語の情報は豊富とは言えないため、アプリを制作しようとしてもやり方が分からず制作が進まない場合も多いです。
OfferOnlineではAppSheetでのアプリ制作の代行、アドバイスなどの支援を行っております。
作りたいアプリはあるが、ノウハウや人手が不足していて制作が進まない、AppSheetで作れるのか分からないなどのお悩みがあればお気軽にお問い合わせフォームよりご相談ください。
コメント