GoogleForm を使ってワークフローを自作してみよう(Vol.26)

 2020.12.22  株式会社システムエグゼ

Webを利用したワークフローシステムを自作しようと考えたことはありませんか。自作する場合は、まずプログラムを作る環境を用意する必要があります。どんなプログラミング言語を使うのか、プログラムを書くツールはどんなものが良いのか、Webサーバーはどんなものを用意したらよいのか、インフラの選定はどうしようか、など意外と考えること・やることが多いです。Googleのプラットフォームを利用すると、簡単なスクリプトを組んで簡易的なワークフローを自作することが可能です。

GoogleFormを使って自作ワークフローの画面をデザインする

GoogleFormを使って自作ワークフローの稟議申請フォームを作りましょう。スプレッドシートを使いデータ蓄積部分も作っていきます。

 

【完成イメージ】

Googleにログインし、こちらのURLにアクセスします。
https://www.google.com/intl/ja_jp/forms/about/

 

「Googleフォームを使ってみる」をクリックします。

Googleフォームを使ってみる

 

「新しいフォームを作成」で「空白」をクリックします。

新しいフォームを作成で空白をクリック

 

無題のフォームが表示されます。

無題のフォーム

 

タイトルを「稟議申請」に変更します。

タイイトルを稟議申請に変更する

 

無題の質問のラジオボタンを記述式に変更します。

無題の質問のラジオボタンを記述式に変更する

 

項目名を「部署名」に変更し、必須チェックをONにします。次にコピーをクリックします。

無題の質問を部署名に変更し必須項目にする

 

コピーした項目の「部署名」を「申請者名」に変更します。

コピーした項目の編集

 

同じように件名を作成します。ほかの項目も以下の表に沿って作ります。

項目名 入力形式 必須
部署名 記述式 必須
申請者名 記述式 必須
件名 記述式 必須
内容 段落 必須
金額 記述式 必須
添付書類 段落 なし
備考 段落 なし
承認者のメールアドレス 記述式 必須

 

プレビューアイコンをクリックし、作成したフォームを表示します。

プレビューボタンがどこにあるかの画像

 

次に設定アイコンをクリックしましょう。

編集ボタンがどこにあるかの画像

 

全般タブで設定を追加します。ここは業務にあわせて設定すると良いでしょう。今回は「メールアドレスを収集する>回答のコピーを送信>常に表示」をONに設定しました。最後に「保存」をクリックします。

Formの設定ダイアログ

 

フォーム名も修正しておきましょう。

フォーム名を修正する

 

回答をスプレッドシートに表示する設定をおこないます。「回答」タブをクリックし「スプレッドシートの作成」をクリックします。

回答タブとスプレッドシートの作成

 

「新しいスプレッドシートを作成」が選択されている状態で「作成」をクリックします。

スプレッドシートを作成する

 

スプレッドシートが作成されました。スプレットシートに表示されているタイムスタンプには、申請者がフォームの回答ボタンをクリックしたときの日時が入ります。申請日として処理できますね。またメールアドレスも自動で収集される設定にしたため、申請者のメールアドレスも収集できます。

スプレッドシートの画面

 

テスト送信をしてみましょう。フォームの画面に戻り「プレビュー」アイコンをクリックします。

image017

 

各項目を入力し「送信」をクリックします。

各項目を入力して送信

 

スプレッドシートをみてみましょう。回答が自動で登録されていることが確認できます。

スプレッド-シートに回答が書き込まれている画像

 

これで自作ワークフローのデザイン部分とデータ蓄積部分が完成しました!次はメール送信機能を作りましょう。

メール送信機能を作成して自作ワークフローに実装する

自作ワークフローに簡単なプログラムを書いていきます。

GoogleFormのメニューアイコン「︙」をクリックし「スクリプトエディタ」を選択します。

フォームの設定からスクリプトエディタを開く

 

スクリプトエディタが開きます。

スクリプトエディタが開いた状態

 

スクリプトを削除し、以下のスクリプトに書き換えます。

function onFormSubmit () {
    console.log('Hello World!');
    // 送信先のメールアドレス

    const mailadress = 'xxxxxx@example.com';
    const subject = 'Hello';
    let body = 'World!';
    GmailApp.sendEmail(mailadress, subject, body);
}

 

メニュー>ファイル>保存をクリックし、画像のように「onFormSubmit」を選択します。

関数を選択する画像

 

次にトリガーを設定します。時計のアイコンをクリックします。

トリガーをボタンをクリクする

 

トリガーを設定する画面が開きます。「トリガーを追加」をクリックしましょう。

トリガー一覧画面

 

「イベントの種類を」選択を「フォーム送信時」に変更し、「保存」をクリックします。

トリガーの追加

 

認証を求められたら、アカントを選択して許可します。

アカウントの選択

認証の手順詳細画面を開く

承認者へメールを送信するリンク

Googleログインダイアログ

 

トリガーが作成され、一覧に表示されます。

トリガー一覧画面

 

先程作成したGoogleFormから稟議申請をしてみましょう。

GoogleFormに入力した内容がスプレッドシートに登録されて、メールが届きます。メールの件名と本文には、まだGoogleFormの内容を差し込んでいないので、画像のようなメールが届きます。

メールが受信できていることを確認

GoogleFormの内容をメール本文に差し込もう

GoogleFormから送られてきた内容を、メールに表示させてみましょう。先のどのスクリプトを以下のように書き換えます。自作なので文言は自由に設定できます。ワークフローっぽくするために、承認・否認ができるダミーリンクも追加しましょう。

FormApp.getActiveForm()
function onFormSubmit (e) {
    // プレーンテキストのメール本文

    var body = "稟議申請の承認をお願いいたします。\n\n";
    // HTMLテキストのメール本文

    var htmlBody = "<p>稟議申請の承認をお願いいたします。</p>";

    // GoogleFormから回答内容を取得

    var itemResponses = e.response.getItemResponses();
    var recipientMail = "";
    var approverMail = "";

    for (var i=0; i < itemResponses.length; i++) {
        var formData = itemResponses[i];
        var formLabel = formData.getItem().getTitle();
        var 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;
        case "添付書類":
            attachedDocument = response;
            break;
        default:
            note = response;
            break;
        }
    }

    var spreadSheetId = "xxxxxxxxxxx"; // スプレッドシートのID
    var spreadsheet = SpreadsheetApp.openById(spreadSheetId);
    var activeSheet = spreadsheet.getActiveSheet();

    // ダミーのURL
    var url = "https://solutions.system-exe.co.jp/appremo";


    body = body + "件名:" + title + "\n部署名:" + dept + "\n申請者名:" + "\n内容:" + content + "\n金額:" + price + "\n添付書類:" + attachedDocument + "\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>添付書類:" + attachedDocument + "</span><br><span>備考:" + note + "</span><br><br>";
    htmlBody = htmlBody + "<a href=" + url + ">承認</a> <a href=" + url + ">否認</a>";
    GmailApp.sendEmail(approverMail, title, body, {htmlBody: htmlBody});
}

 

このまま実行すると、スプレッドシートへのアクセス権限が足りないため実行エラーとなります。アクセスできるようにマニフェストファイルにスコープ設定を追加します。

メニュー>表示>マニフェストファイルを表示 をクリックします。

マニフェストファイルを表示する

 

マニフェストファイルに以下のコードを追加し保存します。

    "oauthScopes": [
        "https://www.googleapis.com/auth/spreadsheets.currentonly",
       "https://www.googleapis.com/auth/spreadsheets",
       "https://www.googleapis.com/auth/forms",
       "https://www.googleapis.com/auth/gmail.send",
       "https://www.googleapis.com/auth/gmail.compose",
       "https://www.googleapis.com/auth/gmail.modify",
       "https://mail.google.com/",
   "https://www.googleapis.com/auth/gmail.addons.current.action.compose"
    ],

マニュフェストファイルにURLを設定する

 

スクリプトエディタに戻り、デバックボタンをクリックします。

デバッグ実行する

 

認証を求められたら、アカントを選択して許可します。

アカウンの選択

このアプリは確認されていません

アカウントへのアクセスリクエスト

 

テストしてみましょう。

GoogleFormでテストする

 

送信ボタンをクリックし、スプレッドシートを確認してみましょう。データが登録されていますね。

スプレッドシートに値が追加されている画像

 

メールも届きました。リンクが入ってワークフロー通知っぽくなりました。

メールを受信した画像

自作ワークフローに承認機能を追加する

次に承認機能を作りましょう。まずは、メール本文のリンクをクリックしたら承認完了画面を表示できるようにします。
メニュー>ファイル>スクリプトファイル をクリックします。

新しいスクリプトファイルを作成する

 

ファイル名を入力します。

ファイル名を入力する

 

スクリプトファイルに以下を書き、保存します。ここでは、プラットフォームに用意されている「doGet()」という関数を利用します。

function doGet() {
    var html = "<h1>承認完了</h1>"
    return HtmlService.createHtmlOutput(html);
}

 

この関数を一般公開しましょう。
メニュー>公開>Webアプリケーションとして導入 をクリックします。

ウェブアプリケーションとして導入を選択しデプロイ準備をする

 

バージョン名を入力し、全ユーザーを選択してから「Deploy」をクリックします。

スクリプトをデプロイする

 

こちらのURLにアクセスします。

デプロイ先のURL

 

先程書いたスクリプトがブラウザーに表示されます。

遷移先で承認完了が表示される

 

それでは実際に自作ワークフローに承認機能を追加していきましょう。スプレッドシートにステータスカラムを追加します。

決裁ステータスカラムの追加

 

最初に作成したスクリプトを以下のように修正します。

    var spreadsheet = SpreadsheetApp.openById(spreadSheetId);
    var activeSheet = spreadsheet.getActiveSheet();
    // この行を追加します(スプレッドシートの最終行を取得する)

    var lastRowNo = activeSheet.getLastRow(); 

    // URLを先程公開したDeploy as web appのURLに書き換えてパラメータを追加します。
    var 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) {
    var spreadSheetId = "1URfQiy3m0r8yIPoamy54Xoy8oNL_Xu5diK3LUlIbqjA";
    var spreadsheet = SpreadsheetApp.openById(spreadSheetId);
    var activeSheet = spreadsheet.getActiveSheet();

    var 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);
}

 

保存後、メニュー>公開>ウェブアプリケーションとして導入 をクリックします。ProjectVersionでNewを選択し変更点を入力後、更新をクリックします。

新しいバーションのデプロイ

 

承認機能の実装がおわりました。申請してみましょう。

テスト申請

 

メールが届いていますね。承認リンクをクリックしてみましょう。

承認のリンクをクリック

 

承認画面が表示されました。

承認されたことを示すメッセージの表示

 

スプレッドシートを確認してみましょう。決裁ステータスが記録されていますね。

スプレッドシートに承認ステータスが追加された様子

 

これで完成です。お疲れさまでした。意外と簡単にワークワークフローを自作することが体験いただけたと思います。次はぜひ差戻しの実装にもチャレンジしてみてください。

自作したワークフローのプログラムが動かないと思ったら

ワークフローを自作してみたけれど動かない!GoogleForm から送信したデータがスプレッドシートには登録されているのに、メールが届かない!といった場合は、トリガーのエラーをご確認ください。どこが悪いのかメッセージが残っている場合があります。

トリガーエラー画面

 

スクリプトの使い方はGoogleAppsScriptのドキュメントに掲載されています。わからなくなったら公式ドキュメントを確認してみましょう。
https://developers.google.com/apps-script/reference/document

まとめ

今回は「ワークフローを自作してみよう」というテーマをお届けしました。簡易的なワークフローは自作することが可能です。ぜひチャレンジしてみてください。(この記事で紹介した内容は2020年12月時点のものです。プラットフォームの仕様に変更があった場合は動かなくなる可能性があることをご了承ください。)

実際に作ってみて、やっぱり使いなれたエクセルのほうが良いかな?もっと複雑なことがやりたい!もしそういったご要望がございましたら、ワークフローシステムAppRemoがお答えします。トライアルをご用意していますので、お気軽にお問い合わせください。

CTA

RECENT POST「ノウハウ」の最新記事


ノウハウ

ワークフローシステム導入で面倒な申請作業が楽になる!仕組みを解説

ノウハウ

経費精算業務の効率化を図るならワークフローシステムを導入しよう

ノウハウ

申請・承認業務をシステム化して働き方改革の促進を

ノウハウ

ワークフローシステムの選び方 あなたの比較検討をサポートします!(Vol.39)

GoogleForm を使ってワークフローを自作してみよう(Vol.26)