Webサービスを利用して、ワークフローシステムを自作しようと考えたことはありませんか。
自作する場合は、まずプログラムを作る環境を用意する必要があります。
どんなプログラミング言語を使うのか、プログラムを書くツールはどんなものが良いのか、Webサーバーはどんなものを用意したらよいのか、インフラの選定はどうしようか、など意外と考えること・やることが多いです。
Googleのプラットフォームを利用すると、簡単なスクリプトを組んで簡易的なワークフローを自作することが可能です。
GoogleFormを使って自作ワークフローの画面をデザインする
GoogleFormを使って自作ワークフローの稟議申請フォームを作りましょう。
スプレッドシートを使いデータ蓄積部分も作っていきます。
【完成イメージ】
手元に資料を用意しながらじっくり作業したい、という方は、こちらの資料もご参考ください。社内で共有するワークフロー図の作り方はもちろん、Googleのプラットフォームを使ったワークフローの作り方まで解説しています。
Googleにログインし、こちらのURLにアクセスします。
https://www.google.com/intl/ja_jp/forms/about/
「フォームに移動」をクリックします。
「新しいフォームを作成」で「空白」をクリックします。
無題のフォームが表示されます。
タイトルを「稟議申請」に変更します。
無題の質問のラジオボタンを記述式に変更します。
項目名を「部署名」に変更し、必須チェックをONにします。次にコピーをクリックします。
コピーした項目の「部署名」を「申請者名」に変更します。
同じように件名を作成します。ほかの項目も以下の表に沿って作ります。
| 項目名 | 入力形式 | 必須 |
| 部署名 | 記述式 | 必須 |
| 申請者名 | 記述式 | 必須 |
| 件名 | 記述式 | 必須 |
| 内容 | 段落 | 必須 |
| 金額 | 記述式 | 必須 |
| 添付書類 | ファイルのアップロード | なし |
| 備考 | 段落 | なし |
| 承認者のメールアドレス | 記述式 | 必須 |
プレビューアイコンをクリックし、作成したフォームを表示します。
次に設定タブをクリックしましょう。
設定タブでは、業務にあわせて設定すると良いでしょう。今回は「メールアドレスを収集する＞回答のコピーを送信＞常に表示」をONに設定しました。
左上の「無題のフォーム」をクリックし「稟議申請」に変更します。
回答をスプレッドシートに表示する設定をおこないます。「回答」タブをクリックし「スプレッドシートの作成」をクリックします。
「新しいスプレッドシートを作成」が選択されている状態で「作成」をクリックします。ファイル名は任意です。
スプレッドシートが作成されました。スプレットシートに表示されているタイムスタンプには、申請者がフォームの回答ボタンをクリックしたときの日時が入ります。申請日として処理できますね。またメールアドレスも自動で収集される設定にしたため、申請者のメールアドレスも記録できます。
テスト送信をしてみましょう。フォームの画面に戻り「プレビュー」アイコンをクリックします。
各項目を入力し「送信」をクリックします。
スプレッドシートをみてみましょう。回答が自動で登録されていることが確認できます。
これで自作ワークフローのデザイン部分とデータ蓄積部分が完成しました！次はメール送信機能を作りましょう。
メール送信機能を作成して自作ワークフローに実装する
自作ワークフローに簡単なプログラムを書いていきます。
GoogleFormのメニューアイコン「︙」をクリックし「スクリプトエディタ」を選択します。
スクリプトエディタが開きます。
エディタに記載されているスクリプトをすべて削除し、以下のスクリプトに書き換えます。GmailApp.sendEmail関数を使うと、Gmailにメールを送ることができます。
| function onFormSubmit () { console.log('Hello World!'); // 送信先のメールアドレス const mailadress = 'xxxxxx@example.com'; const subject = 'Hello'; let body = 'World!'; GmailApp.sendEmail(mailadress, subject, body); } |
フロッピーディスクのアイコンをクリックしプロジェクトを保存します。
プロジェクト名を変更しておきましょう。
次にトリガーを設定します。トリガーアイコン（時計のマーク）＞トリガー追加の順にクリックします。
「イベントの種類を選択」を「フォーム送信時」に変更し、「保存」をクリックします。
ポップアップのブロッカーが表示される場合は許可してください。
認証ポップアップが表示されるので、アカントを選択して許可します。
トリガーが作成され、一覧に表示されます。
先程作成したGoogleFormから稟議申請をしてみましょう。
GoogleFormに入力した内容がスプレッドシートに登録され、スクリプトに記載した宛先にメールが届きます。メールの件名と本文には、まだGoogleFormの内容を差し込んでいないので、以下のような内容が届きます。
GoogleFormの内容をメール本文に差し込もう
エディタアイコンをクリックし、エディタに戻ります。
GoogleFormから送られてきた内容を、メールに表示させてみましょう。先のどのスクリプトを以下のように書き換えます。自作なので文言は自由に設定できます。ワークフローっぽくするために、承認・否認ができるダミーリンクも追加しましょう。
| FormApp.getActiveForm() function onFormSubmit(e) { // プレーンテキストのメール本文 let body = "承認をお願いいたします。\n\n" // HTMLテキストのメール本文 let htmlBody = "<p>承認をお願いいたします。</p>" // GoogleFormから回答内容を取得します let itemResponses = e.response.getItemResponses(); let recipientMail = ""; let approverMail = ""; for (var i=0; i < itemResponses.length; i++) { let formData = itemResponses[i]; let formLabel = formData.getItem().getTitle(); let response = formData.getResponse(); switch (formLabel) { case "承認者のメールアドレス": approverMail = response; break; case "部署名": dept = response; break; case "申請者名": name = response; break; case "件名": title = response; break; case "内容": content = response; break; case "金額": price = response; break; default: note = response; break; } } let spreadSheetId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // スプレッドシートのID let spreadsheet = SpreadsheetApp.openById(spreadSheetId); let activeSheet = spreadsheet.getActiveSheet(); // ダミーのURL var url = "https://solutions.system-exe.co.jp/appremo"; body = body + "件名：" + title + "\n部署名：" + dept + "\n申請者名：" + "\n内容：" + content + "\n金額：" + price + "\n備考：" + note; htmlBody = htmlBody + "<span>件名：" + title + "</span><br><span>部署名：" + dept + "</span><br><span>申請者名：" + name + "</span><br><span>内容：" + content + "</span><br><span>金額：" + price + "</span><br><span>備考：" + note + "</span><br><br>"; htmlBody = htmlBody + "<a href=" + url + ">承認</a> <a href=" + url + ">否認</a>"; GmailApp.sendEmail(approverMail, title, body, {htmlBody: htmlBody}); } |
変更を保存し「デバック」をクリックします。
「権限を確認」をクリックします。
認証ポップアップが表示されるので、アカントを選択して許可します。
GoogleFormに申請データを入力し、テストしてみましょう。
送信ボタンをクリックし、スプレッドシートを確認してみましょう。データが登録されていますね。
メールも届きました。リンクが入ってワークフロー通知っぽくなりました。
自作ワークフローに承認機能を追加する
次に承認機能を作りましょう。メール本文のリンクをクリックしたら承認完了画面を表示できるようにします。
ファイル＞スクリプトファイルをクリックします。
ファイル名を入力します。
スクリプトファイルを次のスクリプトに置き換え保存します。ここでは、プラットフォームで用意されている「doGet()」という関数を利用します。
| function doGet() { let html = "<h1>承認完了</h1>" return HtmlService.createHtmlOutput(html); } |
この関数を一般公開しましょう。
左上、デプロイ＞新しいデプロイの順にクリックします。
歯車マーク＞ウェブアプリの順にクリックします。
新しい説明文、ウェブアプリに「ウェブアプリケーションにアクセスしているユーザー」、アクセスできるユーザーに「Googleアカウントを持つ全員」を選択し、最後に「デプロイ」をクリックします。
ウェブアプリのURLをコピーし、ブラウザーでアクセスしてみましょう。
先程書いたスクリプトがブラウザーに表示されます。
それでは実際に自作ワークフローに承認機能を追加していきましょう。スプレッドシートにステータスカラムを追加します。
最初に作成したスクリプトを以下のように修正します。
| let spreadsheet = SpreadsheetApp.openById(spreadSheetId); let activeSheet = spreadsheet.getActiveSheet(); // この行を追加します（スプレッドシートの最終行を取得する） let lastRowNo = activeSheet.getLastRow(); // URLを先程公開したDeploy as web appのURLに書き換えてパラメータを追加します。 let url = "https://script.google.com/macros/s/xxxxxxxxxxxx/exec?row=" + lastRowNo; |
承認と否認のパラメータを追加します。
| htmlBody = htmlBody + "<a href=" + url + "&status=approve" + ">承認</a> <a href=" + url + "&status=deny" + ">否認</a>"; |
編集が終わったら保存します。次に、approval.gsのスクリプトを変更します。
| function doGet(e) { let spreadSheetId = "xxxxxxxxxxxxxxxxxxxxxxxxxxx"; let spreadsheet = SpreadsheetApp.openById(spreadSheetId); let activeSheet = spreadsheet.getActiveSheet(); let html = ""; if (e.parameters.status == "approve") { html = "<h1>承認しました。</h1>"; activeSheet.getRange(e.parameters.row, 11).setValue('承認'); } else { html = "<h1>否認しました。</h1>"; activeSheet.getRange(e.parameters.row, 11).setValue('否認'); } return HtmlService.createHtmlOutput(html); } |
保存後、デプロイ＞デプロイを管理をクリックし、編集ボタンをクリックします。
バージョンで「新しいバージョン」を選択し「デプロイ」をクリックします。
承認機能の実装がおわりました。申請してみましょう。
メールが届いていますね。承認リンクをクリックしてみましょう。
承認画面が表示されました。
スプレッドシートを確認してみましょう。決裁ステータスが記録されていますね。
これで完成です。お疲れさまでした。意外と簡単にワークワークフローを自作することが体験いただけたと思います。次はぜひ差戻しの実装にもチャレンジしてみてください。
自作したワークフローのプログラムが動かないと思ったら
ワークフローを自作してみたけれど動かない！GoogleForm から送信したデータがスプレッドシートには登録されているのに、メールが届かない！といった場合は、トリガーのエラーをご確認ください。どこが悪いのかメッセージが残っている場合があります。
スクリプトの使い方はGoogleAppsScriptのドキュメントに掲載されています。わからなくなったら公式ドキュメントを確認してみましょう。
https://developers.google.com/apps-script/reference/document
ワークフローとは？メリット・デメリットを解説
まとめ
今回は「ワークフローを自作してみよう」というテーマをお届けしました。簡易的なワークフローは自作することが可能です。ぜひチャレンジしてみてください。（この記事で紹介した内容は2022年8月時点のものです。プラットフォームの仕様に変更があった場合は動かなくなる可能性があることをご了承ください。）
実際に作ってみて、やっぱり使いなれたエクセルのほうが良いかな？、承認者を複数指定したり、金額によって承認ルートを分岐したい、回覧機能が欲しい、もっと複雑なことがやりたい！もしそういったご要望がございましたら、ワークフローシステムAppRemoがお応えします！トライアルをご用意していますので、お気軽にお問い合わせください。
