Google Apps Script

WP見出し用画像_ブログVol.22

Webフォーム作成ツール5選!無料・有料問わず、徹底比較してみた

Webフォームの作り方

Web フォームはウェブサイトの訪問者や顧客からデータを収集するための優れた方法です。お問い合わせフォームはもちろん、顧客へのアンケートやイベント登録、メルマガ購読の案内といった使い方が代表的でしょうか。最近ではこうしたマーケティングリードを獲得する以外に、FAQやチャットルームといったカスタマーサクセスの文脈でも利用される場合もあります。このように、Web フォームは人々がウェブサイトで何を探しているのか何を必要としているのかどのようにすれば彼らの体験を改善できるのかを理解するのに役立ちます。

しかしどのようにすれば Web フォームを作成することができるでしょうか。もちろん自作をするという方法もありますが、それにはお金や時間といった学習コストがかかります。そうした場合には、Web フォーム作成ツールを使えばいいのです。このブログでは無料有料問わず17種類の Web フォーム作成ツールをご紹介します。これらのツールの詳細と、どのツールがあなたに適しているのか、ご覧ください。

Webフォーム作成ツールの種類

一口に Web フォーム作成ツールと言っても様々な種類があります。ここでは、最近の一般的なWebフォーム作成ツールの種類について挙げていきたいと思います。

最近主流でかつ人気なWebフォーム作成ツールはなんと言っても、ノーコード系のものでしょう。基本的にWebフォームの項目をドラッグアンドドロップで設計でき、任意でテキストや画像、その他のデザインを指定するだけで簡単にカスタムフォームをデザインすることができます。ノーコードというようにコーディングのスキルは必要とされません。

次にウェブサイトの所有者や開発者が WordPress やその他の CMS(コンテンツ管理システム)に直接フォームを追加することを可能にする、フォームビルダープラグインがあります。Wordpressなどではプラグインを追加し、管理画面でノーコードツールと同様に基本的にコーディング不要で設置することができます。

また、ツールではありませんがコーディングを行い独自のフォームを開発するという方法もあります。HTMLコーディングが基本ですが、最近は様々なフロントエンド技術の発展により以前よりも柔軟性が高くセキュリティ要件も担保しつつ開発を行うことが可能な環境が整ってきているのではないでしょうか。

また、ツールではなくサービスとなるため、上記にあげたものとは少し毛色は異なりますが、アンケートやリサーチだけを目的とするならば、オンラインアンケートサービスを使うという方法もあります。アンケートを取得したい項目を指定すれば一定期間でアンケート結果が得られるというものになります。

Webフォーム作成ツールのメリット

Webフォーム作成ツールは、利用する企業にとって多くのメリットがあります。

  1. 専門知識がなくても多種多様なフォームが簡単に作成できる
  2. 集計や管理が楽に行える
  3. 効果測定や検証も行うことができる
  4. セキュリティ面の対策がなされている

まずノーコード系ツールに代表されるように、専門的な知識がなくても簡単にフォームを作成することができる点が挙げられます。様々な種類のテンプレートが用意されているため、デザインに時間をかけることなく、必要なフォームをすぐに作成することができます。

そして、アンケート結果や顧客データを、スプレッドシートやデータベースに手入力することなく、簡単に顧客データを収集することができます。Webフォーム作成ツールの中には、自動化機能として御礼メールやステップメールなどのワークフロー機能を備えているものもあります。

さらに、これらのツールのほとんどは、広範な分析機能を備えており、時系列でのパフォーマンス追跡や、フォームから送信された個々のレポート作成が容易に行えます。

最後に、セキュリティ面です。Webフォーム作成ツールの中には、reCAPTCHAやGDPR対応がなされているツールもあります。reCAPTCHAを用いればbotによるスパム攻撃を防ぐことができます。海外からのアクセスや事業展開をされている企業であれば昨今GDPR対応は必須の流れとなっています。これらのセキュリティ対策が行われていることは企業内の稟議や監査を通す意味で重要となるケースもあります。

Webフォーム作成ツールのデメリット

それでは逆に、Webフォーム作成ツールのデメリットはなんでしょうか。

  1. 基本的に有料であり、サブスクリプションモデル
  2. ツールの学習コストがかかる
  3. スイッチングコストが高い
  4. 他ツールや社内システム連携がしにくい

Webフォーム作成ツールのデメリットの一つに、費用面が挙げられます。多くのWebフォーム作成ツールはいわゆるSaaSとして提供されており、その料金体系は重量課金型のサブスクリプションモデルとなっています。その料金体系もツールによって様々であり、購読料が必要なものもあれば、ユーザーごと、またはツールのインターフェースから送信された内容ごとに課金されるものもあります。そのため、価格面からみた製品比較が容易ではありません。

また、学習コストが発生する点もデメリットとして挙げられるでしょう。GoogleスプレッドシートやMicrosoftのエクセルは、多くのオフィスワーカーにとって標準的なスキルセットとなりつつあるため、これらを用いたデータ管理であれば、それほど学習コストはかからないと想像できますが、Webフォーム作成ツールを扱うとなるとそうはいきません。各ツールごとに設計思想からインターフェースが異なるため、利用者として「自走」状態でツールを活用できるまでには、時間とコストが必要になります。また、その知見を社内やチームに広めていくといった努力も必要になってきます。よくあるパターンとして、ツールを導入したものの高機能すぎて使いきれなかったり、結局データをスプレッドシートに連携したりエクセルにダウンロードして使うといった失敗例が挙げられます。

また、製品によっては、各製品やサービスプロバイダーが提供する機能が異なるため、ユーザーがあるプラットフォームから別のプラットフォームへ移行する場合、時間とコストの面で切り替えコストが高くなることがあります。

データをスプレッドシートや他のデータベース管理ツールと連携できるものもありますが、それらは有料であったり手動での作業を挟むといった不便さを内包しているツールが多いのが現状です。ツール提供企業としてはスイッチングコストを高くすることで顧客およびデータを囲い込みたいため、そうした事柄は当然とも言えるかもしれません。

さらに、特定のWebフォーム作成ツールを使用する場合、市場でさまざまなベンダーが使用するソフトウェアプログラム間の互換性の問題により、外部システムと内部システムの統合が困難な場合があります。結果的に社内の他のシステムとの連携が行いにくいといった課題が生まれる原因にもなりえます。

以上で、Webフォーム作成ツールの種類やメリット・デメリットについて大枠の概要をお伝えしてきました。以下では実際に市場で提供されている様々なツールについて個別にレビューをしていきます。なお、これらのレビューについては筆者の私見である点についてご留意ください。また、2022年12月時点の内容であるため、今後各ツールで提供されているサービス内容などに変更がある場合があることを予めご了承いただければ幸いです。

Webフォーム作成ツール・サービス17選

formrun(フォームラン)

高品質なフォームを30秒で作成することができるというキャッチフレーズなのがformrunです。集計データはリスト以外にボード(カンバン形式)で表示できるなど、運用面での配慮が行き届いている印象があります。
Webフォーム作成ツール19選!無料・有料問わず徹底比較してみた2

以下、筆者が利用してみて感じた「メリット」「デメリット」「料金」「セキュリティ」についてまとめます。

  • メリット
    • 国産SaaSであるため、UI/UXが日本国内の個人・法人にとって使いやすい印象がある。
    • デザイン的に洗練されたフォームがサクッと作ることができる
  • デメリット
    • データをformrun以外に外部連携する方法としてGoogleSpreadsheetやMailchimp連携があるが、STARTER,PROFESSIONALにアップグレードが必要である。
      • 特にGoogleスプレッドシートの自動出力はPROFESSIONALで月額25,800円(年間309,600円税抜)とそこそこの値段がする。
    • 複数フォームを使った場合のデータ統合がデフォルトではできない(これもスプレッドシート連携が必要になる)。
    • フォーム作成数が無制限になるのはPROFESSIONALからである。
    • 業務システムとして発展させていこうとすると、SaaSなので制約が生じる(結局のところPROFESSIONALに契約しないといけなくなる→3年契約すると100万弱になる)。
  • 料金
    • PROFESSIONAL
      • 25,800円/月
      • フォーム作成数:無制限
      • チームメンバー数:10人
      • 添付ファイルの保存容量:30GB
      • 個別メール送信数:無制限
      • その他、全機能が利用可能
    • STARTER
      • 12,980円/月
      • フォーム作成数:50個
      • チームメンバー数:5人
      • 添付ファイルの保存容量:10GB
      • 個別メール送信数:無制限
      • 機能制限あり。Googleスプレッドシート連携(自動更新)などは行えない
Googleフォームでお問い合わせフォームをhtmlを使い作成する - Step by Stepガイド

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

先ほど取得したHTMLを既存のサイト内に埋め込みます。下記はWordpressで埋め込んでいる様子です。
Googleフォームでお問い合わせフォームをhtmlを使い作成する Step by Stepガイド 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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

④Googleフォームで作ったお問い合わせフォームを自作フォームと連携させる

4番目の方法として Google フォームで作ったお問い合わせフォームを自作フォームと連携させる方法についてお伝えします。

こちらのメリットとしては 、既存や新規で立ち上げるウェブサイトのデザインに組み込む形で作成ができますので、デザイン面でのカスタマイズやコントロールを確実に行うことができるという点が挙げられます。また、Google Analytics を使ってコンバージョン計測も行うことができます。これまで挙げてきた3つの方法ではこれらのことを行うことができませんでした。

一方で、HTML フォームを自作するということになりますので、それなりに工数がかかることにもなりますし、フォームのバリデーションやセキュリティーなどの面についても、同時に考慮することが必要となってきます。

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

まずこれまでと同じようにお問い合わせフォームを Google フォームで作成します。

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

その次に「送信」ボタンを押して下記のウィンドウを表示させます。

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

画像のようにリンク URL をコピーして、Google Chromeなどのブラウザで実際にGoogleフォームを開きます。

【STEP④-2】Googleフォームで作成したお問い合わせフォームで必要な情報を抜き出す

下記はGoogle Chromeでの実行例になります。

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

Google フォームのお問い合わせフォームを開きましたら、右クリックをして、検証をクリックします。

Google Chrome のデベロッパーコンソールを開いてElemntsでHTMLを表示します。

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スプレッドシートに書き込む。
  3. Googleスプレッドシートに書き込まれた情報を元にJSONを生成し、JSONファイルとして保存する。
事前準備として、 スプレッドシート側では下記のようにシートを定義しておきます。 
Google Apps ScriptでJSONファイルを作成し保存する方法2

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

Google Apps ScriptでJSONファイルを作成し保存する方法3

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

Google Apps ScriptでJSONファイルを作成し保存する方法4

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

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

  1. Rootフォルダに新規作成する。
  2. RootフォルダにあるJSONファイルのファイルIDを指定して上書き保存する。
  3. HTMLダイアログからダウンロードする。
 カスタムメニューの「JSONをドライブに新規出力」を実行すると以下のように指定したGoogleドライブ内にJSONファイルが保存されます。
Google Apps ScriptでJSONファイルを作成し保存する方法6
Google Apps ScriptでJSONファイルを作成し保存する方法7

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

 

Google Apps ScriptでJSONファイルを作成し保存する方法8

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

Google Apps ScriptでJSONファイルを作成し保存する方法9

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

Google Apps ScriptでJSONファイルを作成し保存する方法10

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

Google Apps ScriptでJSONファイルを作成し保存する方法11

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

Google Apps ScriptでJSONファイルを作成し保存する方法12

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

参考

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

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開発のご相談については、こちらのお問合せページよりご連絡いただければ幸いです。

 

参考

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をご利用になれたい方は、お問い合わせフォームよりご連絡いただければ、ファイルをシェアいたします。お気軽にご連絡ください!