kの雑記ブログ本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事！と感じた部分を記事にまとめています。
本ブログでは新UI画面で内容をまとめています。
新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)
まずはじめに
- 従業員の行き先を把握したいニーズがある人
- 社内DXとして気軽なアプリを作成したい人
- 難しい設定や複雑な操作がなく、直感で操作ができるアプリを作りたい人
- UI/UXが高いDesk top modeの使い方
- ユーザーに迷わせないアプリ作成の考え方
リモートワークの普及率は全国平均で25％前後だそうです。
日本でリモートワークが普及しない原因として、
- 根強い紙文化
- 社内コミュニケーションの問題
- 勤怠管理が大変
が挙げられるそうです。（情報はこちらの記事を参考にしています）
ようするに、マネジメント層が管理しきれないということですね。
それだったらチームメンバーが何をしているのか確認できるツールを作ればいい
ということでサクッと作ってみました(^^)
久々にアプリ作成記事をまとめましたが、個人的にはビジュアルも使い勝手も問題なし！！
そんなアプリに仕上げていますので、ぜひ参考にしていただければと思います。
それでは勉強していきましょう！
リモートワークを助けるアプリを別記事でまとめています
回覧が必要な書類の確認履歴を残すアプリの作成方法をまとめています(^^)
【超実践的！】電子印承認アプリの作りかた
出勤や退勤の記録を残すアプリの作成方法が学べます(^^)
【実用レベル】appsheetで出勤アプリを作ってみよう
データシートの作成
今回使うデータシートは2つです。
色々と検討しましたが、この2シート構成で落ち着きました(^^)
こちらのシートは、従業員の名前や所属などを登録するシートです。
アプリのイメージがつきやすくなるように適当にダミーデータを入力しています(^^)
各カラムのイメージです。
- 社員番号：Key値
- 所属部署：従業員が所属する部署
- 所属チーム：従業員が所属するチーム
- 名前：従業員の名前
- email：従業員のメールアドレス
- 出社時間：従業員が業務を開始する時間（フレックス制度を想定）
- 退社時間：従業員が業務を終了する時間（フレックス制度を想定）
- メモ：従業員から他のメンバーに伝えたい連絡事項（休みの日などを入力）
- ステータス：現在の就業状態を表すカラム
読者の皆さんは必要に応じてカラムを追加したり、削除したりしてください。
黄色下線のカラムは、個人的にはあったほうがいいかな？と思います。
続いてステータスシートの説明です。
このシートはデジタル掲示板シートに登録するステータスカラムにアイコンを送るためのシートです。
このシートはなくても大丈夫ですが、視認性向上のため、あったほうがいいです(^^)
用意するシートは以上です。
読み込むデータの作成が完了したらappsheetに読み込みましょう。
データカラムの設定とアクションボタンの作成
appsheetに情報を送ったら、カラムのデータタイプの設定とアクションボタンの作成をするのがセオリーです。
以下に私が行った手順をまとめたので、参考にしてください(^^)
データカラムの修正
アイコンカラムのTypeをImageに変更
この設定変更のみでOKです！続いてデジタル掲示板シートの修正を行います。
各カラムのデータタイプの設定を行います。
個人的にはこの設定で問題なしと判断していますが、このアプリの使用用途によっては適宜変更をしてください。
名前カラムをLabel値、emailカラムをTextに変更します
データタイプTextに変更した理由は、Detail Viewで登録者のメールアドレスを確認する際、テキスト情報として表示させたほうがいいと判断したためです。必要がなければEmailのままでもOK！
Ignore secondsにチェック
退社時間カラムも同じくチェックを入れておきましょう。
ステータスカラムのEditable?にfalseを入力
Editableにfalseを入力したときの解説は、こちらの記事を参考にしてください(^^)
【TIPS】Editableに関数を入れたときの挙動
ステータスに連動したアイコンを作成し、アプリユーザーのUXを高めます。
TypeをimageにしてApp formulaに以下の関数を入力
any(select(ステータス[アイコン],[ステータス]=[_thisrow].[ステータス]))
any(select())関数を使った、必ず習得しておきたい内容を学べます(^^)
【脱初心者！】select()関数で依存型ドロップダウンリストを作成する方法
アクションボタンの作成
続いて、ステータスの状態を変更するためのアクションボタンを作成します。
赤枠の部分を参考にアクションボタンを新規で作成します。
例として出社のアクションボタンを作成したので、Duplicateを使って他のステータス変更を行うアクションボタンを作成します。
変更するのはアクション名とステータスカラムにセットする値
本記事では、出社、外出、在宅、休暇、フレックス、退社の6つのステータスを想定しています。
次にもともとあるアクションボタン（System Generated）の設定を変更します。
この設定はユーザーの誤作動をなくすための設定です(^^)
AddのProminenceをDo not displayに変更
DeleteのProminenceをDo not displayに変更
変更先の参照テーブルはデジタル掲示板なのでお間違いなく(^^)
EditのOnly if this condition is trueに[email]=useremail()と入力
これでデータタイプとアクションボタンの設定は完了です。
お疲れさまでした(^^)
Viewの修正
次にアプリのView画面を整えます。
アプリ開発者次第でアプリの印象がガラッと変わってしまう設定です。
ユーザー視点に立って設定すると大きな失敗はないので、設定後Viewの確認をすることをクセにしておくといいです(^^)
新規でViewを作成したら次はView Optionの設定です。ここの設定は非常に重要です。
赤枠部分を参考に設定を行います。
普段であればここでViewの確認をして完成です！としたいのですが、最近デフォルト設定にされているDesktop modeを使用したいと思います。
Desktop modeの詳細は、こちらの記事を参考にしてください(^^)
【プレリリース！】Desktop modeの基本を学ぶ(^^)
Setttings → General → Desktop modeをOn
これでViewの設定は完了です。お疲れさまでした(^^)
Viewの確認
設定が完了したら全画面でアプリを開いてみましょう。
非常にスッキリしたViewになっています(^^)
私も最初に見たときは「これ本当にappsheet？」と戸惑いましたが、使ってみると昔のViewには戻りたくない！と思えるくらい満足度の高いものとなっていました！
実際のアプリ利用手順はこんな感じです。
出社している場合は出社アイコンをクリックすると・・
就業状況がわかるアイコンが表示されます。
使い方としては以上です。
シンプルにしたほうが見栄えもよくこの仕様に落ち着きました(^^)
まとめ
以上、デジタル掲示板アプリの作成の記事でした。
構想10分、作成20分くらいでさくっと作れましたが、中々面白いアプリを作れたなって自負しています笑
- 中小企業では従業員の就業状況を一画面で管理
- 従業員数の多い大企業では従業員の連絡先の閲覧
こういう使い分けでも十分に使用価値があると思います。
特に難しい設定もしていないので、当ブログの読者の人には簡単な内容だと思います。
可能な限りシンプルに。でもより良い仕様に
appsheetの記事は、これをモットーにまとめていくつもりです。
社内DXで苦戦している人は、まずこのアプリを作ってみて自信を付けてみてはいかがでしょうか？
記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。
わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです！
勉強お疲れさまでした(^^)