Keita Yagi

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

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

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 Apps ScriptでJSONファイルを作成し保存する方法1
大まかな処理の流れとしては以下の通りです。
  1. GoogleドライブでRootフォルダIDを指定して、直下のフォルダとファイルの情報を取得する。
  2. 取得した情報をGoogleスプレッドシートに書き込む。
GoogleAppsScriptでスプレッドシートのコピーを高速に実行する方法

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

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

GASでスプレッドシートのコピーを実装したものの、10万件、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の中の1つのサービスです。例えば、Googleドライブを操作する際に利用するDrive APIなんかもこの一部です。
Advanced Google serviceを使うにはスクリプトエディタを開いてServicesから追加する必要があります。具体的には下記の図のように左側のメニューから「サービス」を選択します。
 
Google Sheets APIを利用する方法1

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

Google Sheets APIを利用する方法2

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

Google Sheets APIを利用する方法3

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

Google Sheets APIを利用する方法4

Sheets APIのリクエスト制限

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

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

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

Sheets APIのコスト

同じく上記の公式ドキュメントによれば、追加でかかるコストないとのことです。
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 Scriptでvue-progressbar-overlayを使ってローディングを表示する

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

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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