Google Apps Script

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

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

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を使う方法です。以下の画像の右枠のように表示されるので、一見するとよさそうなのですが、、、

GoogleAppsScriptでトーストを使って進捗を表示する

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

 

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

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

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


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

GoogleAppsScriptで図形描画を使って進捗を表示する

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

あくまで個人的な主観ですが、トーストの毎回ポップアップしてくる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

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

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

先日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で作ったWebサイトにClassroom の共有ボタンを追加する

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やタイトルの内容を読み込ませ、共有ボタンから課題として投稿する際に自動的に読み込ませるといったことができるようになります。

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

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

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

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

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

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

 

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

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

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でStripe決済のシステムを開発する

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はカスタマイズ可能なのか詳しく調べてないので分かりませんが、デフォルトをそのまま出してます。
GAS_Stripe_01

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

GAS_Stripe_02

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

GAS_Stripe_03

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

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

GAS_Stripe_05

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でWebアプリのシステムを開発する

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にパラメーターを付加して処理してあげる必要があります。

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

GAS_Web_01

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

GAS_Web_02
GAS_Web_03
GAS_Web_04

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ドキュメントにカスタムメニューを追加します。

GAS_Web_05

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

GAS_Web_06
GAS_Web_07

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

GAS_Web_08

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

GAS_Web_09

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

GAS_Web_10

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

GAS_Web_11

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

GAS_Web_12

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

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

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

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

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

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

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

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

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

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

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

GAS_gmail_28

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

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

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

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

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

GAS_gmail_01

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

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

GAS_gmail_03

上記はスクリプト内で<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

Google Apps ScriptとGoogleフォームのシステムを開発する

Google Apps ScriptとGoogleフォームのシステムを開発する

Google フォームはウェブベースのアンケート作成・管理ソフトウェアです。組織内外のアンケートやテスト・クイズの回答を集めたりお問合せフォームの代替としても活用することができます。回答はスプレッドシートに集計されるため、スプレッドシートの機能をうまく活用することで集計作業の効率化が行えます。中にはアドベンチャーゲームを作るといったツワモノもいたりします。

実際に現場で使い込んでいこうとすると、例えばプルダウン項目が多量で手作業で入力(さらには更新)が面倒だとか、ちょこちょこつまづきポイントがでてきます。Google Apps Script(以下、GAS(ガス))を使えばこうした困り事も解決できます。

GASを使ってGoogleフォームを操作するといった場合にどんなことができるのか?、というのが今回のエントリーの趣旨になります。Googleフォームについては以前にも投稿したエントリーがあるのですが、今回は公式リファレンスを確認しつつ動作イメージとともにやれるこをまとめていくといったことをしたいと思います。

Google Apps Scriptを使ってGoogleフォームを使う場合の構造の把握

実際にできることを確認していく前にGoogleフォームの構造についておさらいをしておきたいと思います。

Googleフォームは以下の3つで成り立っています。

  • FromApp
  • Form
  • Item

それぞれの要素の配置は以下の画像のようになります。

GoogleForms_13

実際に意識することが多いのはフォーム上の要素であるItem(以下、アイテム)の部分かと思います。アイテムはいわゆる質問に該当します。質問には以下のようなものが使えますね。

  • 記述式
  • 記述式(段落)
  • チェックボックス
  • ラジオボタン
  • プルダウン

Google Apps Scriptを使ってGoogleフォームを新規作成する

さて、何はともあれ、Googleフォーム自体を作成しないことには始まりません。Google Apps Script(GAS)でGoogleフォームを作ってみます。

ちなみに、今回はスタンドアロン型のスクリプトで開発を進めてみました。Google Apps Scriptの使い方のエントリーにも書きましたが、GAS作成時はスタンドアロン型かコンテナバインド型か(ウェブアプリ型)を決めて作っていくことになりますが、今回は様々なGoogleフォームを作っていくことを主眼にしたので、スタンドアロン型で進めることにした次第です。

話はそれましたが、下記がスクリプトを実行した前後比較です。

GoogleForms_01
GoogleForms_02

今回はとりあえず空のフォームを作成しただけなので、ファイルを開くと下記のように何も設定されていません。

GoogleForms_03

次にGASを使って様々な選択肢や設定を追加してみます。今回は下記のような内容を反映してみました。

  • チェックボックスの質問を任意のテキストで追加
  • ラジオボタンの質問を任意のテキストで追加
  • ページの切り替えの追加
  • 日付入力の質問を追加
  • 記述式の質問を追加

上記をGoogleフォーム作成と同時に実行すると下記のように反映されます。

GoogleForms_04

回答する際のGoogleフォームの方も確認すると下記のような形で表示されています。

GoogleForms_05
GoogleForms_06

Google Apps Scriptを使ってGoogleフォームを作る場合に追加できる質問のまとめ

上記はサンプル的にGASで追加できる質問の一部を使いましたが、他にも下記のような質問を追加することができます(クラス名やメソッドは開発者向けの内容です)。

質問の種類 クラス名 追加するメソッド
グリッド型のチェックボックス CheckboxGridItem addCheckboxGridItem()
チェックボックス CheckboxItem addCheckboxItem()
日付 DateItem addDateItem()
日付と時刻 DateTimeItem addDateTimeItem()
経過時間 DurationItem addDurationItem()
グリッド型のラジオボタン GridItem addGridItem()
プルダウン ListItem addListItem()
ラジオボタン MultipleChoiceItem addMultipleChoiceItem()
記述式(段落型) ParagraphTextItem addParagraphTextItem()
均等目盛 ScaleItem addScaleItem()
記述式 TextItem addTextItem()
時刻 TimeItem addTimeItem()

Google Apps Scriptを使ってGoogleフォームの質問を変更(更新)する

質問は追加するだけでなく、変更することもできます。上記で作成したGoogleフォームの最後の質問の内容を変えてみます。

  • 質問の「タイトル」を変更
  • 質問を「必須」にする
  • 説明テキストを追加

といったことをしています。左側がGoogleフォームの編集画面、右側がGoogleフォームの回答画面です。

GoogleForms_07
GoogleForms_08

Google

Google Apps ScriptとGoogle ドライブのシステムを開発する

Google Apps ScriptとGoogle ドライブのシステムを開発する

Google ドライブはパソコン、タブレット、モバイルデバイスからファイルやフォルダを保存・共有・共同編集することができるオンラインストレージサービスです。個人のGmailアカウントでは15GBから無料で使え、Google Workspaceの場合、Starterプランで30GBから利用可能です。

Google Workspaceのアプリ以外にも、Microsoft Office のファイル(Word、Excell、PowerPointなど)でも共同編集でき、ファイル形式を変換する必要もありません。他にも HTML、PDF、画像といった、100 種類以上のファイルを編集、保存できます。

非常に利便性が高い一方、特にGoogle Workspaceでの活用においては、企業側のセキュリティポリシの運用上、外部への共有に制限がかかり、社内共有に留まっている状況もあります(この点については、別途エントリーをまとめる予定です)。

今回のブログでは基本的なGoogle ドライブの使い方ではなく、また特段共有に制限がかかってないことを前提として、GoogleドライブとGoogle Apps Script(グーグルアップススクリプト、GAS)を使ってどんなことができるのかをまとめていきたいと思います。

ちなみに、実は以前にnoteでGoogleドライブを活用したGASの事例についてはまとめたことがあります。

今回は公式リファレンスを確認しつつ、GoogleドライブとGASを使ってどんなことができるのかを確認していってみたいと思います。以下の説明ではソースコードについては省略し、またGoogle Apps Scriptのスクリプトエディタに表示されるログの結果を元に説明を進めたいと思います。

GoogleドライブのフォルダIDとファイルIDについて

今後、Googleドライブを使って様々な処理を実現していきますが、その際にどのフォルダやファイルに対して処理をするのか、ということを指定しないといけません。これを何で指定するかというと、Googleドライブではフォルダやファイルに一意のIDが付与されますので、このIDを使っていくというわけです。

GASを開発する人にとっては必須の知識ですが、利用者の場合も知っておいて損はない事柄です。ファイルIDを意識することで、GASの操作や利用がスムーズに進むといったことがでてくるかと思います。

実際の確認方法を以下に示します。
まず、Googleドライブに特定のフォルダにアクセスすると、ブラウザでURLが確認できます。この時表示される下記の赤枠内の部分がIDとなります。

GoogleDrive_10

同様に、以下の[ID]の部分がフォルダIDになります。

https://drive.google.com/drive/u/1/folders/[ID]

ファイルIDについても同じように確認できます。スプレッドシートなどのGoogle Workspaceアプリの場合は、スプレッドシートを開いて以下のように確認できます。

GoogleDrive_11

同様に、以下の[ID]の部分がフォルダIDになります。

https://docs.google.com/spreadsheets/d/[ID]

GoogleドライブにアップしたPDFや画像ファイルの場合は、確認方法が少し異なります。Googldドライブのプレビューから「新しいウィンドウ」で開いたURLから確認することができます。

GoogleDrive_12
GoogleDrive_13

同様に、以下の[ID]の部分がフォルダIDになります。

https://drive.google.com/file/d/[ID]

以上がGoogle ドライブのフォルダIDとファイルIDの確認方法です。

 Google ドライブにあるファイルやフォルダをGoogle Apps Scriptで操作する

Google ドライブにあるファイルの情報をGoogle Apps Scriptで全取得する

それでは実際にGoogleドライブとGoogle Apps Scriptでできることを実例を交えて説明していきます。まずはGoogleドライブにあるファイルの名前を全て取得してみます。下記はログの一部ですが、ファイル名の一覧を取得しています。

GoogleDrive_01

ファイル名だけではなく、IDやURL、MIME Type、最終更新日など、ファイルに関する様々な情報も取得することができます。下記は、取得した情報をオブジェクトとしてまとめてログ出力したものです。これらの取得した情報を元に、スプレッドシートにURLを出力するとか、ファイル種別で絞り込みをかけるとか、最終更新日の日付をみて動作条件を変えるといった後々の処理に役立てることができます。

GoogleDrive_02

Google ドライブにある特定のフォルダのファイルの情報をGoogle Apps Scriptで取得する

先ほどはGoogleドライブにある全てのファイルの情報を参照しましたが、実際に何かを作ろうと思った場合、いちいち全ての情報を参照しにいくのはリソースの無駄ですし、利用用途としてはあまり一般的ではないかと思います。実際は、ある特定のフォルダを基準にして様々な処理を行っていくという方が自然です。
Google Workspaceのアプリ(例えばGoogleドキュメントやGoogle スプレッドシート)には、それぞれ固有のIDが存在しており、Googleドライブのフォルダにも当然ですがIDはあります。GASで特定のフォルダを指定する場合には、このIDを指定する場合が多いです。

以下はマイドライブ直下にある「Google Apps Script」というフォルダ内のファイル名を全て取得してきた結果です。左側が実際のGoogleドライブのファイルで、右側がGASのスクリプトエディタのログ上の結果になります。

GoogleDrive_04

Google ドライブにある特定のフォルダで新しいファイルをGoogle Apps Scriptで作成する

先ほどはファイルの一覧を取得したGoogleドライブのフォルダに新しいファイルを作成してみます。ファイル作成はGoogle ドライブで対応しているMIME Typeであれば一通り作成することができます。GoogleスプレッドシートやGoogleドキュメントはもちろん、PDFなんかも大丈夫です。また、フォルダも作成することができます。

今回は先ほどのフォルダに新しいフォルダを作成し、その中にHTMLファイルを作成してみます。
今回は一つのファイルだけを作成していますが、複数のファイルを一括で作成するといったこともできます。
新しいフォルダを作成しつつ、同時にファイルを作成するといったこともできますね。
筆者の場合だと、あるスプレッドシートにGASを使ってCSVやGoogleドライブの情報を収集し、定期的に実行するトリガーを使って、新しいファイルを複数作成する、みたいな使い方をすることが多いでしょうか。

GoogleDrive_05

Google ドライブにある特定のフォルダで一定時間以内に更新されたファイルをGoogle Apps Scriptでゴミ箱に移動する

ファイルを大量に作成できるようになると、今度はフォルダ内のファイル整理が課題となってきます。

以下では、現在の時刻とファイルの更新時刻を比較して1時間以内のファイルはゴミ箱に移動するといったことを行っています。また、逆にゴミ箱から元のフォルダに戻すといったことも自動で行えます。下記の画像では一番左がゴミ箱移動前、真ん中がゴミ箱移動後、右側がゴミ箱から戻した状態です。

GoogleDrive_07
GoogleDrive_08
GoogleDrive_09

定期的に古い情報のファイルをゴミ箱に移動するといった用途は多そうですね。この際、日付や時刻で参照する以外にも、ファイルのタイプ種別やファイル名などで絞り込みをかけて実行するといったこともできます。

Google ドライブのフォルダ・ファイルの共有範囲と権限について

Googleドライブのフォルダ・ファイルには共有範囲と権限があります。
共有範囲というのは、フォルダやファイルを「インターネット上の誰もが検索してアクセスできる」か「許可されたユーザーのみがアクセスできる」のかといった指定のことです。
権限というのはフォルダやファイルに対して「編集者」なのか「閲覧者」なのかといったパーミッションのことです。

Googleドライブのフォルダ・ファイルの共有範囲について

公式リファレンスのEnum Accessに一覧が乗っていますが、以下にも概要を示しておきます。
プロパティ 説明
ANYONE インターネット上の誰もが検索してアクセスできる
ANYONE_WITH_LINK リンクを知っている全員がアクセスできる
DOMAIN
Google Apps Scriptの使い方とシステム開発の基本

Google Apps Scriptの使い方とシステム開発の基本

本記事は、これからGoogle Apps Scriptの開発を始めてみたい、GASがどのように動いているのか興味があり理解したいといった方向けのエントリーになります。

Google Apps Scriptの使い方とシステム開発の基本

Google Apps Scriptを使うための準備

Google Apps Scriptを使うには、Google Workspaceのアプリ等に接続しつつ実現したいことを実行するコードをスクリプトエディタに記述(プログラミング)していく必要があります。ですので、下記の環境が必要になってきます。

  • パソコン/ブラウザ
  • インターネット
  • GmailアカウントもしくはGoogle Workspaceアカウント

パソコン/ブラウザ(PC環境)については正確にはスクリプトエディタが開きプログラミング可能なデバイスなら何でもいけるのではと思います。

Google Apps Scriptのスクリプトのタイプ(種別)

Google Apps Scriptの開発に入る前に知っておく必要があることの一つにスクリプトのタイプがあります。
Google Apps Scriptのスクリプトには3つの種類があります(参考)。

  • スタンドアロン型
  • コンテナバインド型
  • ウェブアプリ型

スタンドアロン型は、後述するコンテナバインド型と異なり、Google スプレッドシートやGoogleドライブなどのGoogle Workspaceのアプリと紐付かないスクリプトです。もしアプリと紐付けたい場合は、逐一アプリのID等を読み込みにいかないとけません。ライブラリ化したいものだったり、特段Googleのアプリと紐付ける必要のないものはスタンドアロン型を選択するのが好ましいです。

コンテナバインド型は逆に、特定のGoogle Workspaceのアプリと紐づくスクリプトになります。例えば、あるスプレッドシートを開いてそのファイルのメニューからGASのエディタを開くと、それはそのスプレッドシートのファイルに紐付いたコンテナバインド型のスクリプトとなります。Googleのアプリと連動させる場合は、ほぼほぼコンテナバインド型を選択すると思います。

上記2つのスタンドアロン型とコンテナバインド型とは少し軸が異なるのですが、ウェブアプリ型もあります。ウェブアプリ型は、スタンドアロン型もしくはコンテナバインド型とも連携して動かすことができます。例えばスプレッドシートでCSVファイルを読み込むようなインターフェースを作りたいといった場合、HTMLファイルでアップロード画面を作る必要があります。この時、コンテナバインド型スクリプトの中で、ウェブアプリ型のスクリプトを動作させるといった具合です。

やりたい事や状況に応じて、どのスクリプトのタイプを使っていくのかを選択していく必要があります。最初のうちは、コンテナバインド型を使うシーンが多いのかなとは思います。

Google Apps Scriptのスクリプトエディタを開く

Google Apps Scriptのスタンドアロン型のスクリプトエディタを開く方法

以降、ブラウザはChromeでの利用を前提として説明していきます。
まず、ブラウザのタブを開き、右上から利用したいアカウントを選択し、Google Workspaceのアプリを選択できるウィンドウからGoogleドライブを選択します。

scriptEditor_01

Googleドライブが開いたら、左上のメニューから「新規」を選択します。

scriptEditor_02

メニューが開いたら「その他 > Google Apps Script」を選択します。

scriptEditor_03

すると、GASのスクリプトエディタが開きます。「無題のプロジェクト」となっているので、プロジェクト名を変更しましょう。赤枠部分をクリックします。

「プロジェクトの名前を変更」のウィンドウが開いたら任意のプロジェクト名を付けて「名前を変更」を押します。これでプロジェクト名が変更されます。

今回は、「Hello World」をログに出力させるコードを記述して実行してみます。①は文字を出力させる関数です。②で実行ボタンを押すと、③で結果が出力されることが確認できます。

scriptEditor_06

以上が、スタンドアロン型のスクリプトエディタを開きプログラムを実行する方法になります。

Google Apps Scriptのコンテナバインド型のスクリプトエディタを開く方法

次にコンテナバインド型のスクリプトエディタを開く方法です。今回はスプレッドシートを使って説明していきたいと思います。

まずGoogle スプレッドシートを開いてメニューから「拡張機能 > Apps Script」を選択します。

すると、先ほどのスタンドアロン型と同様に、スクリプトエディタが開きます。プロジェクト名を変更したら、コード記述していきましょう。

今回は、スプレッドシート上でアラート画面を表示させ、「Hello World」を表示させてみます。

下記のようにコードを記述したら、実行ボタンを押して、先ほどのスプレッドシートに戻ります。

すると、下記の画面のように、アラート画面にHello Worldを記述することができます。

scriptEditor_09

コードに関する細かい説明は省略しますが、スタンドアロン型でも上記の画面を表示させるといったことはできるのですが、コンテナバインド型の方がコードの記述量も少なくなりスムーズな開発が行えます。

以上が、コンテナバインド型のスクリプトエディタを開きプログラムを実行する方法になります。

Google Apps Scriptをコードを書かないで開発するには

なお、コードをどうしても書きたくない!という場合は、、、(出来ることは限られますが)スプレッドシートにもマクロ機能があるのでそれを利用するか、コードを書いてくれる人にお願いをするといったことになります。もし公開されているアドオンでニーズに適うものがあれば、それを使うといった方法もありますね。

もちろん、当オフィスにお問合せいただくのも大歓迎です!お困り事があればお気軽にご連絡くださいませ。