【初心者】GAS勤怠管理アプリケーションを作りました。＋Figmaでデザインアイデア
こんにちは、イオリです！今回は3日間開催された「GAS (Google App Script) を使った簡単な従業員の勤怠管理アプリケーションを作ってみよう！」というイベントに参加し、GAS初心者なりにアプリケーションを作成しました！
私はこれがGAS初めてだったので、実際に作る前に以下の2つの動画を見て基礎知識を勉強しました。
1. はじめに
スプレッドシートと連携したコンテナバインド型（*1：下記）で作成しました。
GAS内のLibrariesやServicesは使っていません。
最終成果物です。
2. アプリケーション設計【イベント中】
2.1. 初期の状態
初期段階では、以下のような構成でした。
一覧ページ
・事業所名称
・「従業員一覧」というテキスト
・従業員番号と名前が並んだテーブル
詳細ページ
・従業員の名前
・種別（出勤、休憩開始、休憩終了、退勤）とその打刻日時が並んだ「今月のタイムレコーダー履歴」テーブル
・勤怠チェックメモ＆登録ボタン
・対象日時を2つの<input>で入力し、登録種別を<select>で上記4つから選択する「タイムレコーダー」＆登録ボタン
2.2. 機能の追加
イベントは3日間のみでしたが、初心者なりに頑張って追加しました。
ひたすら作った
結果…
一覧ページは変更せず詳細ページに機能を追加し、新しく共有ノートページという全員に向けてシェアするようのメモを一覧するページも作りました。
具体的には以下を追加しました。詳細ページについては青の矢印部分を追加しました。
詳細ページ
・従業員の役職
・今月の勤務時間（休憩時間除く）
・共有ノートinput＆共有ボタン＆共有ノートページへのリンク
・今月の収入
共有ノートページ
・チェックした共有ノートを従業員全員に送信する用のボタン
・チェックボックス、従業員番号、共有ノートの内容、日付が並んだテーブル
（画像だとテーブルの右端に「Likes」とありますが、1人1回にするための仕組み作りに断念し、イベント後の開発では削除しました。
1人1回にするにはユニークユーザーの情報を取得する必要があり私だけで開発しているので無理なのでは？また、もし可能だとしてもログイン情報を登録する仕組みを作る必要があるのでは？など色々考え私の技術力でできるものか疑問に思ったので諦めました。）
・チェックされた共有ノートを全従業員のGmailに送信
3. アプリケーション設計【イベント後】
3.1. Miroで機能の整理
「OOUI オブジェクト指向UIデザイン──使いやすいソフトウェアの原理」（本の詳細は下記）を参考にしました。本で紹介されているワークは思考力をビシバシ鍛える内容で、私はまだまだ伸びしろいっぱいです…😭
本では「オブジェクト指向UIの設計ステップ」が3ステップに分けて解説されていたので、できる限りこの解説に沿ってUIの理解を進めていきました。
※3日間のイベントの成果物時点でのタスク・オブジェクトの整理をMiroで行いました。
ステップ 1．オブジェクト の 抽出
①名詞を抽出 ＝太文字にする
②「名詞」とそれらの関係を抽出する
③「名詞」を汎化し、粒度を揃える
④「名詞」の関係性をつなげ、オブジェクトを特定する
⑤オブジェクトの中で「メインオブジェクト」になるものを特定する
⑥メインオブジェクトの多重性を特定する ＝「＊」をつける
⑦メインオブジェクトに付随するオブジェクトをプロパティ（注🙋♀️）とする
⑧タスクからアクションを見つける
（注🙋♀️）
メインオブジェクトに付随するものとして、サブオブジェクトをまとめます。
これらをプロパティと呼び ます。
ステップ 2．ビューとナビゲーションの検討
本を読んでいくうちに、この辺りで「私のアプリケーションはそもそものタスク数が少ないし規模も小さい！」と感じ、本で扱われているアプリケーションよりもずっと簡易的な作りだと考えたためここからのステップは結構カットしました。
代わりに、追加したい機能がクリアに想像できていたためFigma（下記掲載）にフライングしました。ここでFigmaにすぐ行かない方が良かったのかな？と今振り返ってみて思いました。
もう少し追加したい機能の整理の段階で熟考していれば何か別の視点が得られたかも知れません。
①眺める（＝コレクションビュー）＆よく見る（＝シングルビュー）を考える
②メインオブジェクトに「 コレクション」と「 シングル」のビューを 与える
③コレクションビューとシングルビューの呼び出し関係を検討する
④実際の画面を想像しながら、ナビゲーションとして必要な呼び出し関係を定義
⑤メインオブジェクトの中からルートナビゲーション項目を選定する
ステップ 3． レイアウトパターンの適用
ステップ3では配置や表示形式など6つの項目について解説されていましたが、私が実践したのは以下4つです。これらはFigma内で作成しました。
コレクションビューの表示形式
コレクションのフィルタリング
シングルビューの表示形式
アクションの表示形式
3.2. 自分のレベルでできることを開発
イベント中に「この機能がほしいな～」「見た目こうしたいな～」など色々とアイデアが浮かんでいたのでNotionにそれらをストックしておき、自分の技術力で再現できるものか否か区別しました。
追加した機能は以下の通りです。
一覧ページ
・一覧ページ/共有ノートページに行くリンク付きヘッダー
・従業員のプロフィール画像、氏名、読み仮名、性別、、従業員番号、役職、今月の総勤務時間、連絡先
・従業員の検索機能
詳細ページ
・一覧ページ/共有ノートページに行くリンク付きヘッダー
・従業員のプロフィール画像、氏名、性別、、従業員番号、役職、連絡先、今月の総勤務時間、今月の収入
・現在の日付＆時刻
・4つの種別ボタン（クリックで「更新中…」⇒ 「登録しました」を表示）
・勤怠チェックメモと共有ノート入力をモーダル化
共有ノートページ
・通常従業員番号でどの人か判断することはないと考え、テーブルの項目を従業員番号から氏名に変更
動画
3.3 できないことはFigmaでデザイン化
アイデア出しの際に思い浮かんだものの、私のレベルで実装できない機能はFigmaでデザインとして作成しました。
一覧ページ
・プロフィール画像と一緒に勤務中/休憩中/勤務外を表すステータスアイコン
詳細ページ
・プロフィール画像と一緒に勤務中/休憩中/勤務外を表すステータスアイコン
・ヘッダーにヘルプページアイコン
・view形式（Time LineとCalendar）をクリックでtoggleできる
・出勤をクリックすると、その日の売り切れの商品や食材が表示される
最後のアイデアに関しては新しいスプレッドシートページを作成して、そこに商品や食材のIDと名前を記入すればいいのでは？と思いました。
しかし、そうなると
・IDと名前を登録するためのページも必要になる
・それ自体が存在感が大きな機能なので、出勤時にちょこっと見えるだけじゃもったい
など考えてしまい、要件定義やサービスの範囲を決めるって難しいんだなあと改めて感じました。
共有ノートページ
・長い文はクリックすると全文表示にしてより多くの共有ノートが一度に見れるように
こちらのFigma内の「デザインアイデア 実装できない」でプロトタイプを作りました。プロトタイプはリンク内でご確認いただけます！
https://www.figma.com/file/A9h3ny7J9z8FiGBpftStia/note%E7%94%A8?type=design&node-id=0%3A1&mode=design&t=2try918xdjBx2JrF-1
7. まとめ
今回は従業員の勤怠管理アプリケーションというタスク指向（前述の本で学んだ言葉です。）的要素が強いテーマでしたが、これがtoC向けなど、よりオブジェクト指向が強いテーマだと本の実践ワークが濃く活きると感じました。
Figmaの作成段階で最初にしっかりと、どんな機能でどんな役割を持つコンポーネントを作るのかという定義ができておらず作業の途中でやりなおしするということが何度かありました。設計のプロセスというのは非常に全体の効率にとって大事なのだなと学びました。
最後までお読みくださりありがとうございました！
8. 参考資料
*1 GASには以下の2種類があります。
①コンテナバインドスクリプト
②スタンドアロンスクリプト
『OOUI オブジェクト指向UIデザイン──使いやすいソフトウェアの原理』2020年発売
ソシオメディア株式会社 (著), 上野 学 (著, 監修), 藤井 幸多 (著)
この記事が気に入ったらサポートをしてみませんか？