Keita Yagi - Google Apps Scriptのシステム開発ならKCompany

Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド

コメントする / Google Apps Script / By Keita Yagi

Googleフォームでお問い合わせフォームを作りたいですか？そんな方のためにこの記事をまとめました。この記事では Googleフォームでお問い合わせフォームを作成する方法を一通りまとめました。それぞれの方法でどのようにすればお問い合わせフォームが作成できるかも手順を追って説明しています。Googleフォームで素晴らしいお問い合わせフォームを作る秘訣を学び始めましょう!

Googleフォームでお問い合わせフォームを作る方法

Googleフォームは今日のビジネスにとって必要不可欠なツールとなっています。Google フォームはユーザーと回答者の両方にとって便利で、素早く簡単に情報を集めることができる素晴らしい方法です。Google フォームでは、ウェブサイトに埋め込む、既存のフォームにリンクする、あるいは独自のカスタムフォームを作成して使用する、などの方法でコンタクトフォームを作成することが可能です。

Googleフォームでお問い合わせフォームを作成する方法は以下の5つの方法になります。

リンクを埋め込む
HTMLコードを埋め込む
Gmailに埋め込む
自作フォームと連携する(HTML/CSS)
自作フォームと連携する（Vue.js)

①Googleフォームで作ったお問い合わせフォームにリンクさせる

この方法が最も手軽にウェブサイトにお問い合わせフォームを導入することができます。

Googleフォームでお問い合わせフォームの項目を入力して作成し、発行したURLをお持ちのウェブサイト上のテキストや画像などにリンクさせるだけです。

上場企業の採用募集ページやメルマガ登録でもこの方法でフォームを設けているところはあります。

素早く作成し既存サイトのテキストに載せるだけといった手軽さがメリットですが、リンククリックでの遷移となるため、ウェブサイト内で完結しない、外部サイト（Googleフォーム）へ遷移してしまう（そのためコンバージョンの計測もできない）、デザインはGoogleフォームで可能なカスタマイズに限られるためデザイン性に乏しいといったデメリットがあります。

具体的には下記のような方法で導入することができます。

【STEP①-1】Googleフォームでお問い合わせ用のフォームを作成する

まずGoogleフォームでお問い合わせに必要な項目を入力してお問い合わせ用のフォームを作成します。

上の画像の右上の「送信」ボタンを押すと下記のウィンドウが表示されます。

こちらで表示されている「リンク」のURLをコピーします。「URLを短縮」をクリックして短縮URLを使って頂いても問題ありません。

【STEP①-2】ウェブサイトでGoogleフォームで作成したお問い合わせ用のフォームをリンクさせる

上記はWordpressの投稿ページでの設定になりますが、リンクを指定したいテキストを選択して、先ほどコピーしたURLをリンク先に指定します。HTMLの場合はhrefでURLを指定します。

サイト側へ反映されれば指定したテキストがリンクテキストになります。

リンクテキストをクリックすることで、作成したGoogleフォームへ遷移します。
なお、作成したGoogleフォーム側では回答がきちんと集計されることを確認しておくと良いでしょう。

②Googleフォームで作ったお問い合わせフォームをhtmlコードで埋め込む

2番目の方法として、Googleフォームで作ったお問い合わせフォームをHTMLコードで埋め込む方法をご紹介します。

この方法を用いると、既存のウェブサイト内に作成したGoogleフォームを表示させることができるようになります。①で問題であったお問い合わせフォームが外部サイトに遷移してしまい既存サイト内で入力を実施することができないといった問題点を解消することができます。

とはいえ、Googleフォームを埋め込んでいることに変わりはないため、デザインはGoogleフォームで指定したデザインがそのまま表示されます。そのため、既存ウェブサイトのデザインと馴染まず違和感を覚えることになる可能性が非常に高いです。もしこの方法を利用する場合は、Googleフォーム側でデザイン面を既存サイトになるべく合わせるといった工夫が必要になります。

具体的には以下の方法で導入することができます。

【STEP②-1】Googleフォームでお問い合わせ用のフォームを作成する

基本的なやり方はSTEP①-1と同じです。今回はヘッダー画像を中心にテーマ設定を変えてみることにしてみます。なお、後述の表示にもあるように、画像の通りGoogleフォーム側でヘッダー画像を設定してみても、今回の方法ではヘッダー画像は反映されないことにご注意ください。（ヘッダー画像が反映されないことの確認のために、この記事ではあえてヘッダー画像を指定しています）

こちらもSTEP①-1同様に「送信」ボタンを押し、「＜＞」のアイコンでHTMLを埋め込む再のHTMLのタグを取得します。下記画像の「コピー」ボタンを押下でコピーをします。

【STEP②-2】Googleフォームでお問い合わせ用のフォームをHTMLで埋め込む

先ほど取得したHTMLを既存のサイト内に埋め込みます。下記はWordpressで埋め込んでいる様子です。

サイト側に反映することができれば、以下のように既存サイト内に直接Googleフォームで作成したお問い合わせフォームを表示することができるようになります。以下では本記事の冒頭にお問い合わせフォームを設置してみた様子です（現在は削除しているのでこのお問い合わせフォームは表示されていないことにご注意ください。）

【STEP②-3】Googleフォームでお問い合わせ用のフォームのサイズを調整する

さて、上記では特に問題はないのですが、場合によりサイトの横幅や縦幅の都合上、表示するGoogleフォームを調整したいといった場合があるかと思います。その場合の調整方法をご紹介します。

まず、調整したいサイトをGoogle Chromeで開き、調整したい画像などの上で右クリックをして「検証」からGoogle Developer Consoleを開いてください。

そうすると上記赤枠画像のようにサイズを確認することができます。今回はタイトルロゴ画像の横幅サイズに合わせるといったことをやってみたいと考えたとします。

STEP②-1でお伝えしたHTML取得の際に、幅を上記画像の表示サイズ973ピクセルに合わればOKです。

③Googleフォームで作ったお問い合わせフォームをGmailで送信する

3番目の方法として Google フォームで作ったお問い合わせフォームを Gmail で送信する方法についてお伝えします。

この方法を用いると指定したメールアドレスに対して、メールの本文の中もしくはリンクテキストでお問い合わせフォームを送ることができます。

メールですので、既存のウェブサイトのデザインとは独立してお問い合わせフォームを送ることができます。

ただし、こちらの方法もこれまでご紹介してきた方法と同様にデザインのカスタマイズ性は乏しいです。最低限カラーイメージを揃えるなどしか行うことはできません。これらの制限は特に気にせず手早くメールでお問い合わせフォームを送りたいという場合に適しているでしょう。

具体的には以下の方法で導入することができます。

【STEP③-1】Googleフォームでお問い合わせ用のフォームを作成する

まず前述してきた方法と同様にお問い合わせフォームを作成します。そして、右上に表示されている「送信」ボタンをクリックします。

【STEP③-2】Googleフォームでお問い合わせ用のフォームをメールで送信する設定を行う

送信方法でメールのアイコンを選択しましたら各項目を埋めていきます。

① 送信先を指定します。こちらにはメールアドレスを指定することができます。メールアドレスはコンマで区切ることによって複数の送信者に対して送ることができます。

②次に件名を決めます。そのままメールの件名となりますので、相手にとってわかりやすい件名を心がけるとよいでしょう。

③その次にメッセージをきめます。こちらは本文のお問い合わせフォームないしお問い合わせフォームへのリンク前に掲載されます。シンプルなものがよいでしょう。

④最後にフォームをメールに含めるかどうかを決めます。「フォームをメールに含める」のチェックをクリックすることでメールで送信される際に、メールの本文にお問い合わせフォームが表示されるかどうかを選択することができます。

最後に送信ボタンを押すことによって指定した送信先にメールが送信されます。

【STEP③-3】メールでGoogleフォームで作成したお問い合わせ用のフォームが送信されることを確認する

こちらは「フォームをメールに含める」を選択した場合に送信先に受信されるメールになります。ご覧のようにメール本文の中にお問い合わせフォームの内容が反映されています。

そしてこちらは「フォームをメールに含める」にチェックを入れなかった場合のメールになります。ご覧の様にメールの中にはお問い合わせフォームは含まれずフォームに記入するというリンクだけが表示されています。

「フォームをメールに含める」にチェックを入れるかどうかはケースバイケースで、ご自身のご利用状況に合わせて選ぶのがよいでしょう。

…

Google Apps ScriptでJSONファイルを作成し保存（ダウンロード）する方法

コメントする / Google Apps Script / By Keita Yagi

GASでGoogleドライブの情報をJSONファイルとして作成し保存する

Googleドライブ上にフォルダやファイルを格納し、その情報をGASで取得し、JSON形式でファイル保存するということをこの記事では紹介していきます。

JSONとは

MDN Web DocsのJavaScript オブジェクト入門における定義を引用すると下記の通りです。

JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいて構造化されたデータを表現するための標準のテキストベースのフォーマットであり、ウェブサイト上でデータを表現し、送信するために一般的に使用されます (すなわち、サーバーからクライアントへデータを送信して、その結果ウェブページ上に表示することができます)。

具体的な扱い方などについてはJSON の操作が詳しいです。アプリケーション間でデータをやり取りするときに一般的に用いられているデータ形式ですね。

今回作成したもののご紹介

Googleドライブ内にあるフォルダやファイルの名前・IDを取得して、最終的にJSONファイルを作成します。

Googleドライブの形式は以下となります。親フォルダとなるRootのフォルダがあり、カテゴリー＞タイトルのフォルダという3階層になります。タイトルフォルダには、png, mp3, txtの3ファイルがあるといった形です。

Root – index.json
├Folder A (Category)

│├Folder a (Title)
│ │└a.png , a.mp3 , a.txt
│└Folder b (Title)
│ 　└b.png , b.mp3 , b.txt

├Folder B (Category)

│├Folder c (Title)
│ │└c.png , c.mp3 , c.txt
│└Folder d (title)
│ 　└d.png , d.mp3 , d.txt

(略)

イメージとしては以下のようになります。

大まかな処理の流れとしては以下の通りです。

GoogleドライブでRootフォルダIDを指定して、直下のフォルダとファイルの情報を取得する。
取得した情報をGoogleスプレッドシートに書き込む。
Googleスプレッドシートに書き込まれた情報を元にJSONを生成し、JSONファイルとして保存する。

事前準備として、スプレッドシート側では下記のようにシートを定義しておきます。

また、同じく事前準備として、Rootフォルダ名、RootフォルダID、上書き時に保存するJSONファイルのIDをスクリプトエディタ内にて記述しておきます（スプレッドシートに設置したIDを読み込むようなことももちろんできますが、今回はそこまでやってません）。

それでは、実際にフォルダ名やフォルダ・ファイルのIDを取得していきます。カスタムメニューの「リスト更新」を実行します。

すると、下記のようにスプレッドシートに各種値が記述されます。

最後のJSONファイルで保存する部分ですが、前述のカスタムメニューの画像内にあるように、以下の3種類を作ってみました。

Rootフォルダに新規作成する。
RootフォルダにあるJSONファイルのファイルIDを指定して上書き保存する。
HTMLダイアログからダウンロードする。

カスタムメニューの「JSONをドライブに新規出力」を実行すると以下のように指定したGoogleドライブ内にJSONファイルが保存されます。

それでは、RootフォルダにあるJSONファイルのファイルIDを指定して上書き保存してみます。先程のファイルではdurationの指定がありませんでしたので、スプレッドシート側で直接記入をして値設定をしておき、ファイルをアップデートしてみます。

カスタムメニューの「JSONをドライブで上書きする」を実行すると以下のように指定したGoogleドライブ内にあるJSONファイルの内容が保存されます。今回はdurationの値が変更されていることが確認できました。

最後に、HTMLダイアログを使って、JSONファイルをローカルドライブへダウンロードしてみます。今回もとりあえず値の変更を確認するために、durationの値を任意の値に変更します。

カスタムメニューの「JSONをダウンロード」を実行すると以下のようにHTMLダイアログが表示されます。HTMLダイアログ内にある「ダウンロード」リンクをクリックすると、ローカルドライブへのダウンロードを行うことができます。

実際にファイルを開いてみると、durationの値が変更されたJSONファイルを確認することができました。

Googleドライブへの新規ファイルやファイル更新については、トリガー設定を行うことで定期実行するような処理に向いてそうですね。一方で、HTMLダイアログを用いることで、直近の値をすぐに取得したいというニーズに応えることができるのではないかと思います。

参考

スプレッドシートからjsonを作る
 コピペでスプレッドシートをJSON形式のAPIにする方法
 create nested json from array of

…

Google Apps Scriptでスプレッドシートのコピーを高速に実行する方法

コメントする / Google Apps Script / By Keita Yagi

Google Apps Scriptでスプレッドシートのコピーを高速に行うにはSheets APIを使おう

GASでスプレッドシートのコピーを実装したものの、1０万件、100万件などの大量データをコピー＆ペーストしようとしたら、処理に10分くらい時間がかかってしまった。そんなお悩みをもつ方に朗報です（もしまだ下記の方法を試していなければ、ですが）。もし下記の方法を試せば、データ量によっては、実行時間をかなり短縮することができます。

その方法とは、見出しの通りなのですが、Sheets APIを使うというやり方です（以降ややテクニカルな内容になります）。

通常、GASでスプレッドシートを取り扱う際はSpreadsheetAppクラスを使うことが一般的です。ですが、後述する参考サイトの報告によると、Sheets APIを使う方が大量データの読み書きについては高速になるということでした。

実際に筆者も以下のようなデータを用いて試してみました。コピー元となるスプレッドシートに10万行×13列(130万セル)、10万行×26列(230万セル)のデータを用意し、それぞれコピーを実行してみました。

SpreadsheetAppを用いた場合
- 130万セル：1分44秒
- 260万セル：5分25秒
Sheets APIを用いた場合
- 130万セル：36秒
- 260万セル：1分05秒

このように上記のデータですと、Sheets APIを使うSpreadsheetAppを使った場合の時間の20-35%で済みました。逆に、SpreadsheetAppを使うとSheets APIよりも2.9-5.0倍時間がかかってしまうということになります。

SpreadsheetAppとSheets APIの比較ベンチマークテスト

こちらのサイトに詳細な比較結果がでています。以下にサマリーの部分の和訳を抜粋します。

Spreadsheetから値を読み出すための処理コストについて
- Spreadsheet ServiceのgetValues()とgetSheetValues()の処理コストは、ほぼ同じである。
- Sheets APIのvalues.getとvalues.batchGetの処理コストは、ほぼ同じである。
- Sheets APIのメソッドは、Spreadsheet Serviceのメソッドから約35%の処理コストの削減が可能である。
Spreadsheetから値を書き込む際の処理コストについて
- Sheets APIのvalues.update、values.batchUpdate、values.appendはほぼ同じ処理コストである。
- Sheets APIのメソッドは、Spreadsheet Serviceのメソッドより約19%処理コストを削減することができる。
- Spreadsheet ServiceのsetValues()とSheets APIのメソッドの間には、点対称が存在する。
  - データサイズが小さい場合は、setValues()が値の書き込みに適している。
  - データサイズが大きくなると、Sheets APIのメソッドが値の書き込みが適している。

上記の結果はGoogle Apps Scriptでの実行結果であるため、他の環境だと結果が異なるかもしれないという点についても言及しています。

面白い点としては、書き込みについてはデータサイズが小さい場合は、SpreadSheet Serviceの方がSheet APIより優れているという点ですね。

なので、なんでもかんでもSheet APIを使うというよりも、大量データの書き込みが必要になってきたら、Sheet APIを使う（切り替える）などの使い方をすることで高速化を実現できるということになりそうです。

Sheets APIを使う方法

Google Sheets APIはAdvanced Google servicesの中の１つのサービスです。例えば、Googleドライブを操作する際に利用するDrive APIなんかもこの一部です。

Advanced Google serviceを使うにはスクリプトエディタを開いてServicesから追加する必要があります。具体的には下記の図のように左側のメニューから「サービス」を選択します。

そしてダイアログが表示されたらGoogle Sheets APIを選択して追加をクリックします。

左側メニューに「Sheets」が追加されていれば成功です。なお、appsscript.jsonを用いて追加する方法もあります。

Sheetsをクリックすると、現在のバージョンやIDの確認が行えます。

Sheets APIのリクエスト制限

公式ドキュメントによればリクエスト制限は下記のようになります。

1プロジェクトあたりの読み込み
- 1日あたりの制限：無制限
- 1分あたりの制限：300リクエスト
- 1ユーザー/1分あたりの制限：60リクエスト
1プロジェクトあたりの書き込み
- 1日あたりの制限：無制限
- 1分あたりの制限：300リクエスト
- 1ユーザー/1分あたりの制限：60リクエスト

割当を超過した場合は、429エラーがかえってくるようです（超過するようなケースでは以前の本ブログでも一部触れていたexponential backoff algorithmの実装で後で試すことが推奨されています）。

Sheets APIのコスト

同じく上記の公式ドキュメントによれば、追加でかかるコストないとのことです。

参考

Benchmark: Reading and Writing Spreadsheet using Google Apps Script

setValues

…

Google Apps Scriptでプログレスバーを表示し進捗状況を可視化する

コメントする / Google Apps Script / By Keita Yagi

Google Apps Scriptで様々なアプリを作っていると（使っていると）、一瞬(数秒)で処理が終わるものだけではなく、十数秒〜数分(GASの実行制限時間である6分)までかかるといったことが、ままあります。

もちろん開発者としては、これらを可能な限り高速化できるようにすべきところですが、exponential backoffのようにリトライ間隔を後退させるような処理を実装した場合、どうしても時間がかかってしまうといった状況があります。例えば、筆者の場合は先日こんなことがありました。スプレッドシートをPDFとしてエクスポートするスクリプトを開発したのですが、数十件と処理するような場合、途中から429エラーで帰ってきてしまうという現象です。こちらのStack Overflowとほぼ同様の現象で、解決策としてスレッドにあるようなコードを反映させることで解決しました。その結果、429エラーは出現しなくなりましたが、当然のように時間はかかるようになるわけです。

そこで、Google Apps Scriptでプログレスバー（進捗バー）のような形で、現在の処理の進捗状況を可視化するにはどのような方法があるのか調査し、いくつかGASを使って表現できることをまとめてみました。

結論からすると、GAS標準のトーストでもよいのですが、よりリッチな見せ方にする場合は何らかライブラリを利用してHTML/CSS/JSを使って表現していくしかないのかなというのが現状のようです。

Google Apps Scriptでトーストを使ってプログレスバーを表示する

まずはGoogle Apps Scriptで提供されているメソッドのtoastを使う方法です。以下の画像の右枠のように表示されるので、一見するとよさそうなのですが、、、

以下の動画で動作を確認していただくとわかるのですが、右下で処理がアップデートされる度にポップアップがポコポコ表示されるので、（あくまで個人の意見ですが）ユーザー体験としては暑苦しく感じてしまいました。動作もモサモサしてる感じもあるので、もうちょっとスッキリしたやり方がないかな、というのが正直なところです。

トーストの利点としては、公式に提供されているメソッドなので安心して使えたり、実装は簡単なので、工数を抑えつつとりあえず表示をさせたい！といった場合で利用ユーザー側もこれで納得感があるようであれば、使うのはありじゃないかな、という位置づけでしょうか。

Google Apps Scriptで図形描画を使ってプログレスバーを表示する

2020/04/02にスプレッドシートサービス内で図形に関するパラメーターを操作する事ができるクラスであるDrawing Classがリリースされました。このDrawing Classを用いることで、シート上の図形のサイズを変更したり、位置を変更することができます。サイズを変更できるということは、シートに図形描画した長方形のサイズを処理状況に応じて、長くしたり（短くしたり）することができるわけです。これを使ってプログレスバーを作ってしまおう、というのがこの方法です。

以下の画像では、進捗を示すのが緑色の図形、全体を示すのが青色の図形となっています。

実際の動作イメージは下記のようになります。

あくまで個人的な主観ですが、トーストの毎回ポップアップしてくるUXよりは、シート内で表示する分シームレスに感じました。ただ、図形描画特有のバタ臭い感じというか野暮ったさのようなものはこのサンプルだとまだ残っている感じもあります。この点は、図形描画自体を洗練させたものにすることで多少は改善可能かもしれません。

トーストはあくまで右下固定のポップアップであるのに対して、こちらの方法だと図形は自由にドキュメント内に設置することができるので、UI的な自由度は高まりますね。

Drawing Classクラスを使うことで、プログレスバーだけに限らず、処理の実行中はドキュメントにさわらないように図形を画面いっぱいに広げてしまうとか、データのステータスに応じて様々応用をきかせることができそうです。

ただ、やはり上述2つの方法よりももう少しUI/UX的にリッチにさせていきたいなと感じるのが正直なところです。
以降では、Webベースでプログレスバーを表現できるライブラリを用いたものを見ていきたいと思います。
Webベースという意味では、使っているライブラリが違うだけ、と言われれればどれもやっていることは同じではありますね。
なので、こちらに紹介したもの以外でも、様々に実現する方法はあるかと思います。

Google Apps Scriptでsvg-progress-barを使ってプログレスバーを表示する

最初は、svg-progress-barを用いたものです。svg-progress-barは、サークルや棒のプログレスバーを実装できるコンポーネントライブラリです。下記では、ラインとサークルの2種類をベタで表示させるようにしています。

以下は実際に実行した動画の様子です。

やはりトーストや図形描画に比べると、UI/UX的にいい感じですね。
ただ、現状の作りだとHTMLをモーダルダイアログで呼び出してるので、進捗バーを表示しつつ他のことをシートで触りたいといった場合には、別の工夫が必要になってくるのではないかと思います。

Google Apps Scriptでvue-progressbar-overlayを使ってローディングを表示する

出落ち気味で申し訳ないのですが、vue-progressbar-overlayはプログレスバーではなくローディングオーバーレイのためのコンポーネントライブラリです。なので、本来はこのエントリーでとりあげるべきか迷ったのですが、過去に使ったことあり、使いやすかったので取り上げてみた次第です。画像だとちょっとわかりにくいかもしれませんので、動画をみていただくとよいかもしれません。

以下が動作している様子です。

きれいにくるくるしてくれますね。テキスト側と組み合わせることで、残り何パーセントであるかといったことは表現できるかもしれません。このくるくるでプログレスバーっぽく表現できないかなと探していて下記のライブラリをみつけました（もしかしたら同じことがvue-progressbar-overlayでもできるかもしれませんが、そこまで調べきれてないです）。

Google Apps Scriptでprogressbar.jsを使ってプログレスバーを表示する

progressbar.jsもSVGパスベースできれいなプログレスバーを作ることができるライブラリです。直線や丸だけでなく、カスタムで色々と形を作ることができるようです。（サンプルではハートマークもあってびっくり）。

今回は、くるくるさせながら進捗状況を可視化するものをサンプルで動かしてみました。
下記の画像で、濃いグレー部分が進捗となっていて、時間経過でこの濃いグレー部分が伸びていくイメージになります。

下記が動作している動画になります。

個人的にはこれが一番お気に入りかもしれません。

なお、本記事の作成にあたっては、後述の「参考」にあるサイトを確認させて頂きました。ご自身でカスタマイズをされたい方は各サイトをご確認いただけるとよさそうです。

なお、今なら、メールマガジンのご登録特典として、本記事でご紹介したスプレッドシートおよびコードを共有いたします！ご興味のある方はぜひご登録くださいませ。

※ご登録頂いた方の中で、当ドメイン（kcompany.work）からのメール送信がエラーになる方がいらっしゃいいます。メルマガ登録したにも関わらず、メールが届かないという場合は、登録頂いたメールアドレスやメール受信のドメイン設定等のご確認をお願いいたします。それでも解消しない場合は、以下のお問い合わせページより改めてご連絡いただければ幸いです。

また、本記事でご紹介したスプレッドシートの詳細の解説やプログレスバーを用いたGAS開発のご相談については、こちらのお問合せページよりご連絡いただければ幸いです。

参考
【GAS】スクリプトの進行状況を表示する
 GoogleAppsScriptのDrawing Classでつくってあそぼう!
Vue.jsでサークルや棒のプログレスバーを実装する「svg-progress-bar」
導入しやすいローディングオーバーレイ「vue-loading-overlay」の使い方

…

Google Apps ScriptとLINE NotifyでLINE通知を送るシステムを開発する

コメントする / Google Apps Script / By Keita Yagi

先日noteで【そのまま使える】Google Apps Scriptで特定のGmailを検索しLINEに通知を送るという記事をアップしました。

本ブログでは上記のnote以外にもGoogle Apps ScriptとGoogle Workspaceアプリを使って、LINE通知を行うシステムについて、どのようなものが考えられるのか検討をしてみたいと思います。

システムの組み合わせと業務のテーマ次第でなんとでもアイデアは量産できてしまいそうですが、代表的なものを考えて言ってみたいと思います。

以下ではアイデアメモ書き・ブレスト的なノリで記載をしていってみたいと思います。

Gmailの内容をGoogle Apps ScriptでLINEに通知を送る

Google Apps Scriptを使って、Gmailを一括送信するメルマガ配信システムを作り、そのメール送信が完了（もしくはエラー）発生したらLINEへ通知する。
Google Apps Scriptを使って、Gmailを一括下書きするシステムを作り、処理が完了（もしくはエラー発生）したらLINEへ通知する。
Gmail で使用できる検索演算子を参照して、検索条件を指定して、定期的に特定のメール受信をLINEへ通知する（これはnoteの内容とほぼ同じです）。
- 検索条件は、「件名」「ラベル」「日付（期間区切りも可）」「送信者」「本文に含まれるキーワード」「添付ファイル」「重要マーク」「スター」などなど、組み合わせは自由に行えます。

Gmailについては、受信と送信でそれぞれやることを変えられそうですね。送信作業をGASで自動化した場合、完了したかどうかの通知をしてもらえると送信漏れがなくなるでよさそうですね。受信については検索条件次第でなんとでもなるので、漏れが発生しないようにしたり重要な事項をアラートさせたりという風に業務の精度を高めることに使えそうです。

Googleカレンダーの内容をGoogle Apps ScriptでLINE通知する

今日一日のGoogleカレンダーの予定を毎朝LINEに通知させる。
- 今週分をまとめて月曜日に送るといったこともできそうですね。
Googleカレンダーに登録された予定の直前10分前に LINEに通知させる
- Googleカレンダー自体にも通知機能がありますが、見落としが多かったりするかと思うので。
その日のGoogle ToDo リストをカレンダーの予定と合わせてLINEに通知する
- 厳密にはToDoリストとカレンダーは別物ですが、予定と合わせて活用するというシーンは考えられそうです。

案外カレンダーをWebで開くのもちょっとした時間がかかるので、予定とToDoのLINE通知があると便利かもしれません。

Googleスプレッドシートの内容をGoogle Apps ScriptでLINE通知する

Google スプレッドシートに記述した内容を、シート内で図形描画したボタンを押下することで、LINEに通知する
Google スプレッドシートに記述した内容を、トリガーを用いて、定期的に送信する。
Google スプレッドシートに記述した内容をランダムに、LINEへ送信する。

スプレッドシートにあるテキストをLINE通知するというのが基本的な使い方になりそうですが、スプレッドシートの場合は、スプレッドシート側でデータ集計ができるため、後述するGoogleフォームでの回答であったり、Google Analyticsの集計データであったり、どこかからスクレイピングした結果をスプレッドシート側にまとめて、その結果を毎日（毎朝）LINEに通知する、みたいな使い方がLINE Notifyとの相性がよさそうですね。

Googleフォームの回答をGoogle Apps ScriptでLINE通知する

Googleフォームの回答がスプレッドシートに反映されたら、その内容（の一部）をLINEに通知する
稟議承認などのワークフローとしてGoogleフォームを用いている場合(*1)、稟議承認用のWeb側URLをLINEに通知する
- (*1) 稟議承認などのワークフローは以下のようなイメージです。Googleフォームで備品購入などの稟議の回答を受け付けるとします。回答があったら、稟議承認者がその稟議の可否が必要になりますので、その可否用のWebアプリをGASで作ります。回答があった際にそのWebアプリのURLをLINEやGmailに通知し、Webアプリで稟議承認者が可否を実行する、という流れです。

Googleフォームについては基本回答を受け付けたことをLINE通知するといった使い方になりそうです。フォーム自体を発展させて上記のようなワークフローシステムを構築した際は、そのワークフロー上で通知する仕組みを組み込むといった使い方になるでしょうか。

Google Classroomの内容をGoogle Apps ScriptでLINE通知する

Google Classroomのお知らせへの投稿内容をLINEに通知する
Google Classroomに課題の投稿があった場合に、LINEに通知をする
Google ClassroomでGASを使ってクラスを一括で作成したり変更するといった際に完了通知をLINEに行う。

お知らせや課題へ投稿があったことを、メール・アプリでの通知に加えて、LINEに行うことで先生や生徒の読み忘れ防止につなげることができそうです。

また、Google Apps ScriptでClassroomの更新情報取得は、クラス数が大量にあると時間がかかるため、それらの処理が完了したことをシステム管理者側に通知するといった使い方もできそうです。

Google Driveの内容ををGoogle Apps ScriptでLINE通知する

Googleドライブでファイルが追加や更新された際に、LINEへ通知する
Googleドライブ内の検索を定期実行し、対象のファイルがみつかった場合に、LINE通知する
Googleドライブ内のファイルやフォルダを定期削除するGASを実行する前に、確認用の通知をLINEに送る

Googleドライブの場合はやはり変更通知が一番用途としては使いやすそうですね。何らか定期実行の承認プロセスをLINEに通知するというのもありそうです。ワークフローとして動作させる意味ではフォームの場合と同じ発想になりますね。

なお、GoogleドキュメントやGoogleスライドについても何かしらLINE通知することは技術的にはできそうでしたが、利用するシーンをあまり思いつけなかったので割愛いたします。

今後も何らかおもいついたらこちらの投稿に反映していきます。

…

Google Apps Scriptで作ったWebサイトにClassroom の共有ボタンを追加する

コメントする / Google Apps Script / By Keita Yagi

Google Classroom(クラスルーム)の共有ボタンとは

ブログや各種サイトで表示されるFacebookやTwitterなどのSNS共有ボタンのように、Google Classroomにも共有ボタンが存在しています。

公式サイトの説明によれば、「Classroom の共有ボタンは、ボタンのサイズや読み込み方法の変更など、ウェブサイトのニーズに合わせて追加およびカスタマイズできます。ウェブサイトに Classroom の共有ボタンを追加すると、ユーザーが自分のコンテンツをクラスで共有し、サイトへのトラフィックを増やすことができるようになります。」とあります。

ざっくりとですが、URLやタイトルなどを共有ボタン用のHTMLタグの中で指定することで、その内容をGoogle Classroomに対して課題やお知らせとして投稿することができる、といったことができます。

例えば、サイト側で課題のファイルの一覧と共有ボタンを用意することで、生徒が容易に課題作成をすることができたりします。今回はまさにこれをサンプルとして作ったものをご紹介します。

Google Apps Scriptで作ったWebサイトに、課題投稿用のClassroomの共有ボタンを設置する

せっかくですのでGoogle Apps Scriptを使ってWebサイトを構築し、サイト内にClassroomの共有ボタンを設置します。GASを使うメリットとしては、今回の実装では省略していますが、Googleドライブにある課題用のファイルを読み込ませ表示するといったことを気軽に実装できるようになります。

また、Classroomの共有ボタンでは、課題として投稿するGoogleドキュメントやスプレッドシートのURLやタイトルの内容を読み込ませ、共有ボタンから課題として投稿する際に自動的に読み込ませるといったことができるようになります。

動作のイメージとしては下記のようになります。

ボタンはとりあえず３つ表示させるようにしています。URLやタイトルを指定すると課題投稿やお知らせ投稿時に反映されていることが確認できます。

GASのWebサイトClassroomの共有ボタンを実装する際の注意点

大元の実装についてはこちらのブログを参考にさせて頂きました。当初は公式サイトにあるg:sharetoclassroomタグを使う方法での実装を考えていましたが、将来的なことも見据えてVueでの実装をしているため、単純に実装とはいきませんでした。解決策は上述のサイト内に詳しく記載があります。

Vueを使うことで、前述したGoogleドライブやその他のGAS/Googleアプリとの連携ができるため、Googleクラスルームをより積極的に活用していくことができますね。

もしClassroomの共有ボタンを実装したいという方がいらっしゃいましたら、お問合せフォームよりご連絡いただければ幸いです。

…

WordPressにStripe決済を導入する方法

コメントする / Google Apps Script / By Keita Yagi

WordPressにStripe決済を導入したページの公開について

商品一覧というページを公開しました。
一覧といっても2022年6月3日現在、まだ一つしかありませんが、、、随時追加していく予定です！ネタはあるのですが、時間に追われてなかなか記事追加をしていく余裕がありません。

なお、上記の商品一覧ページでは、コンテンツの直販サイトのようなイメージで、noteの記事を少しだけ値下げして販売しています。WordpressでStripe決済を導入することで、どのように価値提供を高められるか探っていきたいと考えています。

WordPressにStripe決済を導入するためのプラグインAccept Stripe Payments

本サイトはWordpressで構築しているのですが、WordpressでStripe決済を導入する方法がないか検索してみたところ、こちらのブログを発見しました。大変参考にさせて頂きました。ありがとうございます。
上記の記事内でStripe Paymentsという名称でプラグインが紹介されていましたが、現在はAccept Stripe Paymentsという名称に変わっているようでした。
また、Accept Stripe Paymentsでは日本語化がされているようで（ところどころ英語ですが）、基本は上記のブログを見ながら設定していけば問題なく反映させることができました。

また、Stripe自体は、当サイトのブログ記事「Stripe決済をGoogle Apps Scriptを使って作る方法」で開設済みでしたので、導入はすんなりいきました。

WordPressにStripe決済を導入する際にハマったこと

と、いいたいところなのですが、いざ商品ページを作って購入ボタンを押そうとしたのですが、ボタンを押しても反応がありません。。。
しかし少し前にこの手のパターンは大体他のプラグインが悪さをしているという最近の学びもあったので、Autoptimizeあたりかな？と当たりをつけて検索してみると関連しそうなサイトをみつけました。
念のため、現在のPageSpeed Insightsで現在の値を取得し、Autoptimizeを無効にしてみます。

Autoptimizeを無効したら見事にボタンが表示され、決済用のポップアップ画面も表示されました。ちなみに、PageSpeed Insightsを無効にしたら案の定、特にモバイルのパフォーマンスが低下してしまったので、今後の課題です。

…

Google Apps ScriptでStripe決済のシステムを開発する

コメントする / Google Apps Script / By Keita Yagi

Stripeはオンライン決済サービスを提供するプラットフォームです。StripeソフトウェアとAPIの利用が手軽で導入が簡単なことから、利用している企業の規模はスタートアップから大規模企業まで様々です。海外ではGoogleやAmazon、Uber、日本ではSmartHRやDeNA、freeeや日経新聞など名だたる企業が利用をしています。

オンライン決済ではPaypalが有名ですが、Stripeは利用の開始が最短で当日行えたりダッシュボードやセキュリティ周りのテクノロジーの品質が優れており、導入側のメリットは大きいです。また、手数料が3.6%と低いといったことも上げられます。

小規模事業者やそれこそちょっとしたイベントでの支払いでクレジットカード払いを手軽に導入したい、といった場合に活用できるのではないかと思います。

私自身もStripeの機能に明るいわけではないのですが、StripeにはPaymentsという個別決済機能、Invoicingというオンライン請求機能、Billingというサブスクリプション機能があります。実際に使うには、これらを利用用途に分けて導入していく形になるでしょうか。

今回は上記のうち個別支払いであるPaymentsについて、GASを使ってWebページに導入し、決済を行えるようにするということをやってみます。

実際の導入については、GASでStripe決済をゼロから爆速で実装を参考(ほぼそのまま)にさせていただきました。開発をする上での実装方法等は元記事をご確認いただければ幸いです。

Google Apps Scriptを使ってStripe決済を導入し、Spreadsheetに転記する

さて、実際に上記の記事を元に導入を行ってみました。テスト環境で問題なく動作したことを確認したので、本番環境でも動作できるかテストしてみました（自分のカードで自分に支払いをしてみました）。

まず、下記は元記事同様ですが、決済用のWebページです。Pay with Cardはカスタマイズ可能なのか詳しく調べてないので分かりませんが、デフォルトをそのまま出してます。

上記の「Pay With Card」を押すと、同一ページ内で下記の支払い用のウィンドウが開きます。たまたま間違えてカード番号を入力してしまったのですが、この時点で「テストカードなのでは？」といったエラーが返ってきます。なかなか優秀ですね。

実際に300円を支払ってみると、先程紹介した記事で設定しているように下記の完了メッセージが表示されています。こちらでは紹介しませんが、元記事で二重決済防止機能を実装して頂いており、当然ながらこちらも問題なく動作しました。

こちらも元記事にありましたように、決済内容をGoogle SpreadSheetに書き出すというものでしたので、実際に行われているか確認をします。下記のようにきちんと反映されていますね。

Stripeダッシュボード側にいってみると、こちらも当然ですが、決済内容が反映されています。

Stripeのダッシュボードはとても優秀で、こちらから返金対応もできますし、様々な不正対策も行えます。例えば、決済されたカードが実は不正利用されたものだったといった場合、Stripe側で検知されたり、リスクが高い支払いだといった内容も教えてれます。このあたりはPaypalとは大きく異る点だと思います。

Google Apps Scriptを使ってStripe決済を導入して使う案

上記のように単純な決済であれば、非常に手軽にGASで導入することができることがわかりました。実際はどういった導入事例が考えられるでしょうか？

元記事のさらに元ネタになりますが、Google Formsで請求する仕組みを考えるでは、Googleフォームで支払い方法を集計した際に、クレジットカード払いであれば、Stripe決済が行えるWebページのURLをGASでメール送信し支払ってもらうというものです。これはGoogle WorkspaceアプリとGASを組み合わせたとても良い事例ですね。

決済そのものではありませんが、Stripe APIを使ってStripe顧客情報をGoogle SpreadSheetに格納する(GASによるStripeのAPI連携)という方法もありますね。こちらはもう既にStripeを導入している人向け（業務効率化）でしょうか。

その他にも、販売方法や内容に応じて色々と実装はできそうです。

また思いついたらこちらに追記していきます。

…

Google Apps ScriptでWebアプリのシステムを開発する

コメントする / Google Apps Script / By Keita Yagi

Google Apps Scriptでは、Webアプリケーションの開発も行えます。GoogleスプレッドシートなどのGoogle Workspaceのアプリ内でのWeb UI化もできますし、HTMLページとしての公開も行えます。GASでは一般的なウェブ言語（HTML、CSS、JavaScript）を使って開発を行えます。必要に応じて、BootstrapやVueといったフレームワークを活用することで、よりモダンなWebアプリを構築することもできます。

今回のブログでは、公式リファレンスを確認しつつGoogle Apps Script(グーグルアップススクリプト、GAS）を使ってどんなウェブアプリケーションの開発ができるのかをまとめていきたいと思います。

本エントリーの想定読者は、開発者ではなく、GASを使うと具体的にどんな事ができるのかイメージを膨らませたいという読者向です。そのため、以下の説明ではソースコードについては省略し、実際の実行結果の画面とGoogle Apps Scriptのスクリプトエディタに表示されるログの結果を元に説明を進めたいと思います。もし本エントリーのファイルやソースコードについて確認したいという方がいらっしゃいましたら、お問い合わせフォームよりご連絡いただければ幸いです。

Google Apps ScriptでメニューつきのWebページを公開する

Google Apps Scriptを用いてHTMLページ（Webページ）を作成する際に単一のページを作るだけであれば、doGetという関数を用いて作成したhtmlファイルを読み込ませればすんなり表示してくれます。しかしながら、複数ページとなると少し工夫が必要になります。というのも、GASのWebページを公開した際に生成されるURLは一つだけとなっているためです。ページ遷移を実現するにはURLにパラメーターを付加して処理してあげる必要があります。

細かい実装方法は省略しますが、サンプルページはこちらよりご確認いただけます。

ページ上部にあるそれぞれのメニューをクリックすると以下の各ページへ擬似的に遷移します。

Google Apps ScriptでGoogleドキュメントにHTMLのサイドバーやダイアログを追加し動的処理を行う

ここではGoogleドキュメントにサイドバーやダイアログを追加してみます。ここで紹介するサイドバーやダイアログはGAS内のHTMLファイルを読み込み表示をさせています。HTML内で入力内容を受け付けるフォームやボタン動作の受け付けをすることで、Googleドキュメント内に値を反映させていくということをやっていきます。

なお、題材としてGoogleドキュメントで行っていますが、サイドバーやダイアログを追加することは、Googleドキュメント以外に、Googleスプレッドシート、Googleフォーム、GoogleスライドといったGASでのUI追加に対応しているGoogle Workspaceのアプリであれば同様のことが実現できます。

Google Apps ScriptでGoogleドキュメントにHTMLで構築したサイドバーやダイアログを表示する

まずは、Googleドキュメントにカスタムメニューを追加します。

「サイドバー」と「ダイアログ」のメニューをそれぞれ実行すると、HTMLファイルに反映した本文テキストやGASで指定したタイトルが表示されます。

次に「サイドバー」の方を変更してみたいと思います。サイドバーで「見出し」「段落」を入力し、「ドキュメントへ反映」ボタンを押すと、Googleドキュメント側に内容が反映されるというものにしてみます。まずはサイドバーに入力フォームを追加します。また、HTMLそのままだと見た目があまりきれいではないので、CSSで背景色などの設定を行います。

入力フォームにテキストを入力して「ドキュメントへ反映」ボタンを押すと、Googleドキュメントに該当の文字が反映されます。ドキュメント反映時に段落の方はハイライトの色を変更してみます。ボタンを押した分だけ値が反映されていることがわかります。

次に、ダイアログメニューの方を変更します。ダイアログメニューでは、Googleドキュメントの内容を取得できるようにします。また、ダイアログメニュー上で取得したテキストをクリックしたら、「テキスト削除済み」という文字に変更するようにしてみます。

上記のダイアログで「ページの要素一覧を表示」を押すと、下記のようにGoogleドキュメント内のテキストを取得できます。

さらに、それぞれのテキストをクリックすることで、該当テキストの値の変更を行います。ここでは「テキスト削除済み」の文言に変更しています。

いかがでしょうか？この他にもできることは様々にあります。今後も定期的にこのブログでGASでできる様々なことをアップデートしていきます。また、こんなことはできないの？といった疑問やご質問、ご意見などあればコメント欄かお問い合わせ頂けますようお願いいたします。

なお、冒頭でもご説明しましたように、上記で紹介したGoogle Apps Scriptをご利用になれたい方は、お問い合わせフォームよりご連絡いただければ、ファイルをシェアいたします。お気軽にご連絡ください！

…

Google Apps ScriptとGmailのシステムを開発する

コメントする / Google Apps Script / By Keita Yagi

Gmail(Gメール)はGoogleのフリーメールサービスです。パソコン・スマートフォン問わず様々なデバイスのブラウザで利用することができ、オフラインでも利用することができます。なんと現在では毎日10億人以上のユーザーが利用しているようです。セキュリティやプライバシー保護の面では、送受信のされる全てのメールに業界最高水準の暗号化技術が適用され、最先端のフィッシング対策機能も利用可能です。生産性向上という意味でも、Gmail自体の優れた検索性等に加えて、他のGoogle Workspaceアプリやツールとの連携が上げられるでしょう。

Google Workspaceユーザーであれば、Business Starter, Standard, Plus, Enterpriseいずれのプランでも「Gmail ビジネス用メール」「ビジネス用のカスタムメール」「99.9% 以上の攻撃をブロックするフィッシングおよび迷惑メール保護機能」「広告なしのメール機能」という主要な機能の利用が可能です。

今回のブログでは基本的なGmailの使い方ではなく、公式リファレンスを確認しつつGmailとGoogle Apps Script(グーグルアップススクリプト、GAS）を使ってどんなことができるのかをまとめていきたいと思います。

Google Apps Scriptを使ってGmailを操作する前提知識

GASを使ってGmailを操作していくためにはGmailの重要な概念を把握しておく必要があります。それは、スレッドととメッセージです。1通ずつ送る（受信する）いわゆるメールに該当するのがメッセージ、メールへの返信などのやりとりをひとまとめにしたものがメッセージとなります。

実際の画面イメージで考えると以下のようになります。赤枠部分がGmail全体を指すGmailAppというクラス、紫がスレッドを指すGmailThreadというクラス、青色がメッセージを指すGmailMessageというクラスになります。

開発者向けの話になりますが、操作の対象がスレッドなのかメッセージなのかで、できることが異なりますし処理方法も変わってきます。以下が一覧になります。

操作	GmailApp	スレッド	メッセージ
新規メールを送信する	○
返信する			○
転送する			○
受信トレイに移動する		○
アーカイブに移動する		○
迷惑メールに移動する		○
ゴミ箱に移動する		○	○
重要にする/重要を外す		○
既読にする/未読にする		○	○
スターを付与する/スターを外す			○

Google Apps Scriptを使ってGmailを送信する

Google Apps Scriptを使ってシンプル（プレーンな）Gmailの送信を行う

まずは手始めに、非常にシンプルな件名、宛先(To)、本文を指定しただけのメールを送ってみます。

Google Apps Scriptを使ってGmailでHTMLメールを送信する

GmailではHTMLメールを送ることができます。GASを使ってカスタマイズしたHTMLメールを送ることができます。GASでHTMLメールを作成する場合、gsファイルまたはHTMLファイルを用いてスクリプトエディタ内で定義したりGoogleドキュメントを使う（後述）といった方法があります。まずはシンプルにgsファイル内で定義して送信してみます。

上記はスクリプト内で<h1>Hello World</h1>を記載してHTMLメールとして送信したものになります。

Google Apps Scriptを使ってGmailで添付ファイルを送信する

通常のメール送信と同様、GASを使ってファイルの添付も可能です。Google Workspaceのアプリ（GoogleドキュメントやGoogleスプレッドシート）およびGoogleドライブに格納したPDFファイル等にはIDが付与されますので、そのIDを使ってファイル添付することができます。今回は先ほどのHTMLメールを拡張して、GoogleドライブにあるPDFファイルを添付して送信してみます。

なお、今回はnoreplyもonにすることで返信不要のメールアドレスを生成もしています。noreplayについてはGoogle Workspaceアカウントであれば設定可能です（Gmailアカウントでは不可）。noreplay以外にもreplayToなどの設定もできます。

さて、今後、さきほどのメールを拡張するようなイメージでGASを使ってGmail送信をするスクリプトを作っていくのですが、その前に注意点があります。それはGASの制約です。

Google Apps ScriptのGmailの制約(割当と制限)について

以前に「Google Apps Scriptの制約〜GASを使う上での注意点〜」というエントリーを掲載しました。この中にあるように、GASを使ってメール送信する場合、1日あたりの割当と制限があります（最新の情報についてはQuotas for Google Servicesに掲載されています）

Gmailに限ると、メールの受信数が無料のGmailアカウントや旧Gsuiteは100回、Google Workspaceアカウントの場合は1,500回までといった制限がります。さらに、Google Workspaceアカウントであっても、課金累計額が100ドルを超えておりかつ課金して60日以上が経過していないと無料のGmailアカウントと同じ扱いになるようです。

思ったより送信できる回数は少ないので、どの程度メール配信の残りがあるのかは確認していきたいところです。残りのメール送信回数を確認するためのメソッドが用意されており、getRemainingDailyQuota()を使うことになります。

例えば、下記はスクリプトエディタでログ出力をした結果になります。残り65回送信できるということになりますね。

Google Apps

…