管理人がみんなに伝えたい!!と思った知識や学びを気ままに書いています(^^)

【超実践的!】電子印承認アプリの作りかた

【超実践的!】電子印承認アプリの作りかた

本記事はノーコードアプリ開発について全く知らなかった管理人が独学で勉強し、ここ大事!と感じた部分を記事にまとめています。

本ブログでは新UI画面で内容をまとめています。

新旧画面への切り替えは、下図を参考に該当アイコンをクリックしてください(^^)

新UI画面の説明

まずはじめに

本記事はこんな人におすすめ!!
  • アプリ開発の経験が少なくても実用的なアプリを作成したい人
  • 紙の回覧物を業務でなくしたい人
  • appsheetで出来ることのイメージを掴みたい人
本記事を読んで出来るようになること
  • Automation機能を使い、自動で書類を作成する方法が分かる

今回の記事は、Automation機能を使って書類を自動で作成する方法についてです。

書類には印鑑が必要なことが多い・・ ということで承認印を押す方法を検討してみました。

まだまだハンコ文化が根強い日本では、ことあるごとに押印を求められます。

そんな仕事を少しでも楽にできるアプリを作ろう!と思い立ったので、その方法をまとめました。

決裁書類イメージ

なるべく汎用性が高い設定でアプリを作成したので、色んなアプリで実装を検討していただけると嬉しいです。

それでは勉強していきましょう!

本記事は上級者向けの記事になります。先に参考記事レベルの知識がある方が理解が早いです

参考記事

データシートの作成

参照データの説明

申請内容シートのカラムの設定は以下になります。

申請内容シートの説明

名前のカラムに申請者のemailアドレスを取得するようにしておくのがポイントです。

そうすることで、Automation機能からデータの登録 → 登録内容を自動送信することが容易です(^^)

続いて、アプリユーザーシートのカラムの設定の紹介です。

アプリユーザーシートの説明

こちらのポイントは、申請者の上長のemailアドレスを入力することです。

先の名前カラムと合わせてAutomation機能から、メールの自動送信の実装が可能になります。

データシートの準備ができたらアプリの作成に移りましょう!


データタイプの修正

データタイプの修正

appsheetにデータを取り込みデータタイプの修正をします。

まずは、設定が簡単なアプリユーザーテーブルから修正していきましょう。

アプリユーザーテーブル
データタイプの詳細

赤枠で囲んだ部分は特に大事な部分です。実際の登録データのイメージを参考にしてください。

アプリユーザーのデータシート

続いて、申請内容テーブルを修正します。

こちらは修正が大変ですが、以下の流れを参考に1つずつ確実にこなしていきましょう(^^)

IDのShow?のチェックを外す
IDカラムの修正

IDカラムの情報は意味のない情報なのでアプリ上では非表示とします。

依頼日のデータタイプをDate、Initial Valueにtoday()を入力
依頼日カラムの修正
名前のデータタイプをRef、参照テーブルをアプリユーザーテーブルにする
名前カラムの修正
名前カラムの初期値

Initial Valueにはuseremail()を入力してください。

所属のInitial Valueに[名前].[所属]と入力
所属カラムの初期値

カラムを.(ドット)で繋ぐref挙動については、こちらの記事を参考にしてください

参考記事
社員コードのInitial Valueに[名前].[社員コード]と入力
社員コードの初期値
電子印のデータタイプをimage、App formulaに[名前].[電子印]と入力
電子印の初期値

App formulaにref構文を入力することで、テーブルに登録された電子印を表示させることが出来ます。

初期値を渡さないカラムのデータタイプを変更する
データタイプの変更一覧

赤枠を参考にデータタイプの変更をします。

上司印と上司コメントに編集権限を付与する
編集権限を付与する

Editable?に以下の関数を入力します。

any(select(アプリユーザー[管理者],[email]=useremail()))

この構文は、閲覧権限や編集権限を付与したいときに便利です。必ず覚えておきましょう!

ステータスのInitial Valueと申請中、Editable?にFalseを入力する
ステータスの初期値
ステータスの編集権限

EditableにFalseを入力したときの挙動については、こちらの記事を参考にしてください

参考記事

以上でデータタイプの編集は完了です。お疲れさまでした(^^)


アプリ画面を整える

view設定のメリット

データタイプの編集が終わったら、次はViewの設定を行います。

まずはアプリユーザーViewを整えます。手順は以下を参考にしてください。

新規のViewを立ち上げる
新規view

参照テーブルはアプリユーザーを選択

card viewの設定

今回はCard Viewでアプリユーザーを管理する設定で試みます。

アプリユーザーを登録する(上長がいる人の場合)

Viewの作成が完了したら次は実際にアプリを使うユーザーの登録をします。

アプリユーザー登録画面1
アプリユーザー登録画面2

各カラムのデータ入力が完了したらSaveボタンを押して保存します。

アプリユーザーを登録する(上長がいない人の場合)

STEP.2と同じようにアプリユーザーの登録を行います。

STEP.3は上長がいない人の登録画面になります。

上長の登録画面1
上長の登録画面2

STEP.2とSTEP.3を繰り返し、アプリを使うユーザーを登録していきましょう!

アプリユーザーViewの画面

アプリユーザーのView画面に戻ると、上の写真のように登録ユーザーが一覧で表示されるようになります(^^)


新規登録された申請を上司に知らせる

Automationのイメージ

次に、申請書が作成されたら上長に自動でメールを送信するAutomationを作成します。

注意点として、Automationによる自動化はデプロイしていないと使用できません

デプロイについては、こちらの記事を参考にしてください

参考記事

Automationを作成する際に重要な点を抑えていきましょう。

Automationの発動条件をデータの新規登録時にする
新規BOTの作成
  • Data ChangeのAddsを選択
  • Tableは申請内容テーブルを選択
メール送信先を申請者の上司に設定する
Automation機能の設定
  • Task categoryはSend an email
  • Email TypeはCustom templateを選択
  • Toに[名前].[上長]と入力
EmailのSubjectとBodyを編集する
メールのタイトルと本文

この記事内では、メールの文章はStep.4のEmail Body Templateに入力します。

Emailに入力する文面を作成する
テンプレートの作成

Email Body TemplateのCreateをクリックします。

テンプレートのviewを選択

自動で生成されたドキュメントの編集をするためにViewをクリックします。

email body template

このドキュメントの編集内容がメールの文面になります。

TIPS

登録されたデータのリンク先を貼り付ける際に<<_ROW_WEB_LINK>>と入力すると便利です(^^)

<<_ROW_WEB_LINK>>は大文字で入力しないと、Automationエラーが出るので注意!!

上司に届くメール内容を確認する

先ほど作成したEmail Body Templateの表示を確認します。

メール文面

<<_ROW_WEB_LINK>>がClick Hereとなり、リンクが自動で生成されます。

これで登録した案件の自動メール送信の設定は完了です!


上司印と上司コメントを入力するアクションボタンを作成する

承認フロー

次は申請中の案件を上司が確認して、レスポンスをするアクションを作成します。

考えられるアクションとしては

  • 申請内容を承認する場合
  • 申請内容を却下する場合

が考えられます。この2パターンを想定してアクションを作り込んでみたいと思います(^^)

上司が承認する場合

まずはこちらから機能を実装していきたいと思います。

ステータスを承認に変えるアクションを作成する
承認するアクションボタンの作成

赤枠の部分の変更をしてアクション作成します。

上司印と上司コメントのポップアップを表示させるアクションボタンを作成する
inputアクションの作成

上司コメントには[_input].[上司コメント]、上司印には[名前].[上司印]を入力します。

inputの設定

Advancedにあるinputsに上司コメントの設定をしておきましょう。

STEP.1とSTEP.2で作成したアクションを1つにする
grouped actionの作成

Actionsは上にステータスを承認に変えるアクションをセットしてください。

条件式の入力

Only if this condition is trueには以下の構文を入力します。

and(any(select(アプリユーザー[管理者],[email]=useremail())),[ステータス]<>承認)

この構文の意味するところは、

  • 1.役職が上長であること
  • 2.ステータスが承認ではないこと

この2つの条件を満たしたときだけアプリに表示されます。

これで上司が承認するルートは完了です。お疲れさまでした(^^)

続いて、申請したけど却下を受けたときを考えてみましょう。

上司が却下する場合

このパータンも大事なので、作成を試みます。

設定としては、承認ボタン作成とほぼ同じです。

ステータスを却下に変えるアクションを作成する
却下ボタンの作成

赤枠の部分の変更をしてアクションボタンを作成します。

上司コメントのポップアップを表示させるアクションボタンを作成する
ポップアップのアクションボタン作成

上図を参考にしつつ、アクションボタンを作成します。

inputの設定

Advancedにあるinputsに上司コメントの設定をしておきましょう。

STEP.1とSTEP.2で作成したアクションを1つにする
却下ボタンの作成

Actionsは上にステータスを却下に変えるアクションをセットしてください。

条件式の入力

Only if this condition is trueには以下の構文を入力します。

and(any(select(アプリユーザー[管理者],[email]=useremail())),[ステータス]=申請中)

この構文の意味するところは、

  • 役職が上長であること
  • ステータスが申請中であること

この2つの条件を満たしたときだけアプリに表示されます。

これで上司が却下するルートの作成は完了です。

実際のアプリでは、このあと”再申請”をするのでその設定が必要になってきますが、この記事では割愛します。


上司承認後に自動で書類を作成する

申請書の自動作成

今回の記事で一番重要な設定です。

ここまでスマートにデータでのやり取りが出来ているので、このまま申請書も自動で作ってしまおう!というのが今回最もやりたいことです。

  • 上司が承認をしたタイミングでAutomationが発火
  • 申請者に申請内容をまとめた申請書兼承認書がメールで送付される

こういう機能を実装していきたいと思います。

Automationの発動条件をデータ更新時にする
Automationの条件式

Conditionには以下の構文を入力してください。

and([_thisrow_before].[上司印]<>[_thisrow_after].[上司印],isnotblank([上司印]),[ステータス]=承認)

上記の構文を入力することで、

  • 上司印カラムが空欄ではなく画像が更新
  • ステータスカラムが承認のとき

これらの条件を満たすときのみBotが発火します。

AutomationのTIPSは参考記事にまとめています

参考記事
メール送信先を設定する
taskの設定

Toには申請者である[名前]をセットします。

EmailのSubjectとBodyを編集する
メールの文面の編集
メールに添付するファイルを作成する

ここが一番大事な設定です。細かく見ていきましょう(^^)

create file

Attachment TemplateのCreateをクリックします。

ファイルの編集

自動で生成されたドキュメントのViewをクリックします。

ドキュメント1
ドキュメント2

Googleドキュメントで作成したいPDFの雛形を作成

注意点として、appsheetに登録したデータの値を入力したい場合は << >> の括弧でくくる必要があります。

これで自動で書類を作成する設定は完了です。お疲れさまでした(^^)


アプリ動作の確認

アプリ動作の検証

最後に作成したアプリの動作検証を行いたいと思います。

申請する案件を新規に登録する
新規登録1
新規登録2

必要事項を記載してSaveを押します。

申請されたデータを察知し、BOTが自動メールを送信
自動送信メール内容

上の写真の内容で上司に自動でメールが送信されます。

上司が送信されたメールを確認し、承認もしくは却下の判断をする

STEP.2で届いたメールのリンクをクリックすると以下の画面に遷移します。

承認判定

届いたメールのリンク先から上司は承認または却下の判定をします。

今回は承認を押した場合を想定して進めます。

申請者に申請書類が添付されたメールが届く
承認メール
添付ファイルの内容
メールに添付されているPDFの画面

申請者と承認者に押印がされた申請書が自動で作成されます(^^)


まとめ

以上、申請案件について電子印の捺印までデータ上で管理し、最後は自動でPDF化する方法についての記事でした。

今回はかなりハイレベルな内容となりました。

最後までしっかりついて来られた読者の方は、既に立派なノーコードアプリ開発者だと思います(^^)

今回の記事では割愛しましたが、他にも考慮すべき点として

  • 上司に却下された時の自動メールの送信
  • 上司がチェックしていない時のリマインドメールの設定
  • 見積書など書類を添付する設定

このあたりの設定もやってあげるとより高度なアプリになります。

記事内容について何かありましたらページ下にあるコメント欄からコメントをお願いします。

わかりにくかった部分や間違った情報などご指摘いただけると嬉しいです!

勉強お疲れさまでした(^^)

ファイルを作成するときのTIPSを参考記事にまとめました

参考記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA