Google Apps Script

OpenAI Visionを活用した画像検索の精度と応用について

OpenAI Visionを活用した画像検索の精度と応用について

概要

本記事では、OpenAI社のVision APIを用いた画像検索の精度とその応用について解説します。具体的には、画像から商品名を特定するケーススタディを通じて、APIの利用方法とその効果を探ります。

OpenAI Visionとは

OpenAI Visionは、画像に含まれる要素を分析し、それらに関する詳細情報を提供するAIベースのツールです。特に、画像中のオブジェクトやシーンの認識、分類に優れています。

ケーススタディ: トレファク商品紹介ブログ

方法

トレファクさんの商品紹介ブログの画像を使用し、Vision APIを用いて画像検索を行いました。以下にその手順とコードを示します。

  1. OpenAIのPythonライブラリをインストールし、APIキーを設定。
  2. Vision APIを呼び出し、画像のURLをパラメータとして渡す。
  3. 結果を受け取り、解析。
				
					pip install --upgrade openai
from openai import OpenAI
import os
import openai

os.environ["OPENAI_API_KEY"] = "your_api_key_here"
client = OpenAI()

response = client.chat.completions.create(
  model="gpt-4-vision-preview",
  messages=[
    {
      "role": "user",
      "content": [
        {"type": "text", "text": "What’s the items' name in this image? Specify the brand and series of items. If you have several names, please list up all. 
文書管理システム:効率化とセキュリティを向上させるための必須ツール

文書管理システム:効率化とセキュリティを向上させるための必須ツール

文書管理システムは、効率とセキュリティの向上に不可欠なツールです。ビジネスにおいて、情報の効率的な管理は競争力を維持するために欠かせません。しかし、古い方法ではこれを達成することは難しいかもしれません。文書管理システムは、紙ベースの文書や手動のプロセスから離れ、デジタル化されたワークフローを提供することで、企業の生産性向上に寄与します。さらに、セキュリティの観点からも重要な役割を果たします。機密性の高い情報の安全な保管やアクセス制限の設定は、文書管理システムが提供する利点の一つです。企業が情報漏洩やデータの紛失から保護され、規制や法的要件に適合することができます。文書管理システムは、効率性、セキュリティ、コンプライアンスの面で企業を強化し、競争力を高めるツールです。

本ブログでは以上に述べたような、文章管理システムに関する概説をまとめました。背景として、現在お引き受けしている仕事の一つに企業間の文章管理・やり取りを行うシステムがあり、世の中にはどのような文章管理システムがあるのだろうかといったことが気になり調べ始めました。調べてまとめ始めたら結構なボリュームになってしまいしたが、せっかくなのでブログにて公開してみます。また、近いうちに他のエントリーにて、当オフィスで開発した文章管理システムについても紹介していければと考えています。

Table of Contents

文書管理システムの紹介

「文章管理システム」とは、テキストや文章を効率的に管理、整理、保存するためのシステムです。主に次のような機能が含まれます。

  • テキストの保存と検索:文章やドキュメントをデジタル形式で保存し、必要に応じて簡単に検索できるようにします。
  • バージョン管理:文書の異なるバージョンを追跡し、過去のバージョンに戻ることができます。
  • 共同編集:複数のユーザーが同時に文書にアクセスし、編集することを可能にします。
  • アクセス権管理:特定の文書へのアクセスを制限し、ユーザーごとに異なるアクセスレベルを設定します。
  • フォーマットとテンプレート:一貫したスタイルとフォーマットを維持するためのテンプレートを提供します。

文章管理システムは、企業や教育機関、出版社など、多くのテキストやドキュメントを扱う組織にとって重要なツールです。それにより、文書の整理、コラボレーションの効率化、情報のセキュリティの向上が可能になります。

文章管理システムには、大きく分けて「オンプレミス型」と「クラウド型」の2種類があります。オンプレミス型は、自社にサーバーやストレージを設置して運用するタイプです。セキュリティやカスタマイズ性に優れている一方、初期費用や運用コストがかかります。クラウド型は、クラウドサービスとして提供されるタイプです。初期費用や運用コストが安価で、インターネットに接続できる環境であればどこからでも利用できます。

文章管理システムを導入する際には、自社の目的や予算、運用体制などを考慮して、適切なタイプを選択することが重要です。

企業における文書管理システムの重要性

企業における文書管理システムの重要性は、情報の取り扱いにおける効率性とセキュリティの強化にあります。このシステムは、文書の整理、検索、共有を容易にし、ビジネスプロセスをスムーズにします。また、重要なビジネス情報のセキュリティを確保し、規制遵守をサポートすることで、企業のリスク管理を強化します。文書管理システムは、データの整合性を保ち、企業の知的財産を保護するためにも不可欠です。これにより、企業は市場での競争力を維持し、成長を続けることができます。具体的には、以下の要素によって詳しく説明できます。

効率化と生産性の向上

  • 時間の節約:文書の検索とアクセスが迅速になり、従業員が他の作業にもっと時間を割けるようになります。
  • 自動化:一部のルーチンタスク(文書の分類、保存、更新など)が自動化され、人的エラーを減少させる。

コラボレーションの強化

  • リモートアクセス:リモートワークや異なる地域にいるチーム間での協力が容易になります。
  • 同時編集とコメント:複数のユーザーが同時に文書を編集し、フィードバックを提供できる機能。

コンプライアンスとセキュリティの確保

  • 規制遵守:特定の業界では文書の管理が法律や規制によって求められています。文書管理システムはこれらの要件を満たすのに役立ちます。
  • データの保護:機密情報が不正アクセスや漏洩から保護されます。

バージョン管理と追跡

  • 履歴の維持:文書の変更履歴を保存し、必要に応じて以前のバージョンに戻ることができます。
  • 責任の明確化:どのユーザーがいつ何を変更したかを追跡することで、透明性が保たれます。

空間とコストの削減

  • 物理的なストレージの削減:紙の文書をデジタル化することで、物理的な保管スペースの必要性が減少します。
  • プリントコストの削減:デジタル文書の使用により、印刷に関連するコストが削減されます。

情報の統合

  • 一元化された情報源:すべての文書が一つのシステムに保存されるため、情報の一貫性が保たれ、重複が防げます。

決定の迅速化

  • 情報への迅速なアクセス:必要な情報を素早く見つけることができるため、意思決定プロセスが加速します。

持続可能な環境への貢献

  • 紙の使用の減少:デジタル文書の利用により、紙の消費量が減少し、環境への影響が低減します。

総合すると、文書管理システムは企業にとって多くの利点をもたらします。これにより、業務の効率化、コスト削減、セキュリティ強化、コンプライアンスの確保、そして環境への影響削減が可能になります。特に、情報量が多く、多様なステークホルダーとの連携が必要な大企業や、高いコンプライアンス基準を満たす必要がある業界においては、文書管理システムの導入は必須の要素と言えるでしょう。

文書管理システムの特徴とメリット

文書管理システムは、文書のデジタル化、集中管理、セキュリティ強化といった多くの特徴を持っています。デジタル化された文書は、物理的なスペースを節約し、検索や共有が迅速になります。集中管理により、文書のバージョン管理やアクセス制御が容易になり、情報の整合性が保たれます。また、セキュリティ機能によって機密情報の保護が可能で、データ漏洩のリスクを減少させることができます。これらの特徴により、文書管理システムは、企業の生産性向上、コスト削減、リスク管理強化に大きく貢献します。

主な特徴とメリットを詳しく解説します。

特徴

  • デジタルストレージ:物理的なスペースを占有する紙の文書をデジタル形式に変換し、電子的に保存します。
  • 検索と検索性
GitHub CopilotとClaspによるGAS開発革命:NotionとGoogleカレンダーを活用したToDo管理ツールの作成をしてみた

GitHub CopilotとClaspによるGAS開発革命:NotionとGoogleカレンダーを活用したToDo管理ツールの作成をしてみた

GitHub Copilotとclaspの可能性

このブログの最後に、今回作成したNotionとGoogleカレンダーを連携させたGASをメルマガ登録特典として公開しています。ご興味ある方はご登録いただければ幸いです。

GAS開発の新たな可能性とGitHub Copilot、Claspの組み合わせの紹介

2023年12月29日にGitHubは「GitHub Copilot」のすべてのユーザーが、追加料金なしに「GitHub Copilot Chat」を利用できるようにしたと発表されたとのニュースがありました。これは、開発者コミュニティにとって大きな一歩であり、特にGoogle Apps Script(GAS)の開発において新たな可能性を開くものです。GitHub CopilotのAI支援機能とClaspのコマンドラインツールを組み合わせることで、GAS開発のプロセスを効率化し、生産性を大幅に向上させることが可能になります。

NotionとGoogleカレンダーを統合するToDo管理ツールの構想

GitHub CopilotとClaspを活用したGoogle Apps Script(GAS)開発の新たな可能性を探るため、NotionとGoogleカレンダーを統合する革新的なToDo管理ツールの構想を練りました。これまでのタスク管理方法は、紙やスプレッドシート、ドキュメントにToDoリストを記録し、Googleカレンダーでスケジュールを管理するというものでした。しかし、この方法では繰り返しのルーチン作業や都度の書き出しに多くの時間が割かれ、効率的ではありませんでした。

そこで目をつけたのがNotionです。既に作業用のメモとして活用していたNotionを、タスク管理にも応用することで、スムーズかつ効率的な作業フローを実現しようと考えました。さらに、Googleカレンダーとの連携により、スケジュール管理の自動化を図ることができると考えました。

このプロジェクトの目的は、GitHub CopilotとClaspを用いたGAS開発の可能性を検証することにあります。GitHub Copilotの提供するコード補完機能と、Claspのコマンドラインベースのデプロイメント機能を組み合わせることで、GAS開発のプロセスを効率化し、より洗練された形にすることが目標です。

具体的には、Notionでタスクデータベースを作成し、Notion APIを通じてGASと連携させることで、タスクの取得とGoogleカレンダーへのデータ登録を自動化します。このアプローチにより、タスク管理の繰り返し作業を軽減し、開発者がより重要なタスクに集中できるようになります。

この構想は、開発者が自身のワークフローを最適化し、生産性を向上させるための新しい道を切り開くものです。NotionとGoogleカレンダーの連携は、タスク管理の新しい可能性を提示し、GitHub CopilotとClaspの組み合わせによって、GAS開発の未来が大きく変わることを示しています。

GitHub Copilotとは

GitHub Copilotは、開発者がコーディング作業を効率化し、生産性を向上させるためのAI支援ツールです。以下にその歴史と機能について詳細を記載します。

GitHub Copilotの歴史と機能

GitHub Copilotの歴史

  • 発表: Wikipediaによれば、GitHub Copilotは2021年6月29日にGitHubによって発表されました。最初はVisual Studio Code開発環境でのテクニカルプレビューとして提供され、その後2021年10月29日にJetBrainsマーケットプレイスでプラグインとしてリリースされました。2021年10月27日にはGitHub Copilot Neovimプラグインが公開リポジトリとしてリリースされ、2022年3月29日にVisual Studio 2022 IDEでの利用が発表されました。2022年6月21日には、テクニカルプレビューを終了し、個人開発者向けのサブスクリプションベースのサービスとして提供開始されました。
  • 進化: GitHub Copilotは、2014年2月にリリースされたVisual Studio 2013用の「Bing Code Search」プラグインの進化版です。このプラグインは、MSDNやStackOverflowなどの様々なソースと統合され、自然言語のクエリに対して高品質で文脈に適したコードスニペットを提供していました。

GitHub Copilotの機能

  • コード補完: GitHub Copilotは、Visual Studio Code、Visual Studio、Neovim、JetBrainsなどの統合開発環境(IDE)でのコードの自動補完に役立ちます。Python、JavaScript、TypeScript、Ruby、Goなどの言語での使用に最適化されています。
  • 機能: 自然言語で提示されたプログラミング問題に対して、解決コードを生成する能力があります。コードの説明を英語で行ったり、プログラミング言語間でのコードの変換が可能です。GitHub Copilotには、コードコメントを実行可能なコードに変換する機能や、コードのチャンク、繰り返し部分、メソッドや関数全体の自動補完機能が含まれています。
  • サポート言語とプラットフォーム: GitHub Copilotは、公開リポジトリに含まれる自然言語テキストとソースコードに基づいてトレーニングされた、GitHub、OpenAI、Microsoftによって開発された生成AIモデルによって駆動されます。これにより、さまざまなプログラミング言語でのサポートが可能になっています。

詳細な情報については、GitHub Copilotの公式ウェブサイト(GitHub Copilot)を参照してください

GitHub Copilotの概念とGPT-4との違い

こちらの記事(英語) によればGitHub CopilotはMicrosoftによって開発され、主にコーディングを支援することに特化しています。一方、ChatGPTはOpenAIによって作られ、より広範な会話型AI能力を提供します。両者は高度なAIを使用していますが、それぞれ異なる特化領域があります。

以下ではこちらの記事を参考に、GitHub CopilotとGPT-4の違いをまとめてみます。

GitHub Copilot

  • 開発者: GitHub CopilotはGitHubとOpenAIによって共同開発されました。主に統合開発環境(IDE)内でのコード補完に特化しており、コード行や関数全体の提案を直接提供します。
  • 特化領域: GitHub Copilotは、Visual Studio、VS Code、Neovim、JetBrainsなどのIDE内で使用されることに重点を置いており、GitHubなどの大量のコードからトレーニングされています。これにより、大規模なコードの文脈を分析することができます。
  • 技術基盤: GitHub
ChatGPT(GPT-4)とプロンプトエンジニアリングでプログラミングを効率化する

ChatGPT(GPT-4)とプロンプトエンジニアリングでプログラミングを効率化する

前回「Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化」という記事を書きました。記事の中では、GenerativeAI全般とどのように付き合っていくか、その全体的な指針となるようなものを個人的な整理も兼ねてまとめました。
最近遅ればせながら、ChatGPT PlusでGPT-4を使い始め、コーディング能力の高さに感動したので、今回のブログではGPT-4を使って、プログラミングを効率化する方法を探って(まとめて)いきたいと思います。

趣旨としては以下になります。

  1. ChatGPT(GPT-4)になるべくコーディングを任せて、プロトタイプやサンプルプログラムを素早く作ることができるのではないか。
    • 本実装までのリードタイムを短くすることができるのではないか。
  2. テストやリファクタリング、仕様書作成なども一部任せることができるのではないか
    • 納品までのリードタイムも短くできるのではないか。
    • もしくは、限られた時間の中で、お客様へのヒアリングや改善提案など(今の所)人間にしかできないインサイトが必要な事柄に時間を割くことができるようになるのではないか。それによって、より創造的な仕事ができるようになるのではないか。
  3. 上記を達成するために、適切なプロンプトエンジニアリングを行う方法を習得・開発することが必要ではないか。

今回のブログでは1を念頭において、3について調査やまとめた内容を公開します。また、それを踏まえて、実際にGoogle Apps Scriptを対象として、実用的なアプリケーションをChatGPT(GPT-4)になるべく任せる形で作っていく試みをします。

正直なところ、1についてはGitHub Copilot Xもリリースされていますし、いわずもがな、な部分はあるかもしれません。とはいえ、いったん今の所の状況整理の意味も兼ねて改めてまとめてみたいと思います。

目次

ChatGPTとプロンプトエンジニアリング

プロンプトエンジニアリングとは何か

今回、ChatGPT(GPT-4)にきちんと指示・命令を出すためにも、改めてプロンプトエンジニアリングについてまとめてみます。前回の「Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化」に「ChatGPTの使い方(プロンプトデザイン)」という部分でも一部まとめてがありますので、こちらも別途ご覧ください。

さて、プロンプトエンジニアリングとは、人工知能や機械学習の一分野で、コンピューターやAIに指示や質問を与える際に、どのように文章や情報を提示するかを工夫する技術のことを言います。これにより、コンピューターやAIがより効果的に理解し、正確で役立つ回答や結果を提供できるようになります。

例えば、学校で先生が「この数式を解いて」と言ったとき、生徒はどの数式を解けば良いかを理解する必要がありますね。プロンプトエンジニアリングも同様で、AIに与える情報や質問の仕方を工夫することで、AIが望ましい答えを導き出せるようになります。

Prompt Engineering Guide

プロンプトエンジニアリングに関して、良い教材を見つけました。Prompt Engineering Guideというサイトです。このサイトはDAIR.AIのプロジェクトで、Prompt Engineeringについて、研究者や実践者に教育することを目的としているそうです。有志で日本語訳が随時行われており、大変参考になりますので、ぜひアクセスしてみてみてください。以下では、個人的に気になった・有用に感じた部分を抜粋していきます。

まずは基本となるプロンプトの要素についてです。単に命令するだけでなく、文脈や入力データ、出力指示子をいれるとより正確な回答が得られやすいということですね。

プロンプトの要素

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

Generative AI (ChatGPT) × SpreadSheetで業務効率化/自動化

ChatGPTに代表されるGenerative AIが一大トレンドになっています(2023年3月20日現在)。当オフィスではいわゆるDXの一環である業務効率化や自動化をサポートする観点から、Generative AIをどのように活用できるのかを、このブログを通じて考察してみたいと思います。

なお、このブログの最後に、ChatGPT APIをGoogle SpreadSheet内の関数として動かしたサンプルのスプレッドシートをお配りしています!ご興味のある方は、ぜひご活用ください。

 

目次

Generative AIとは何か

さて、まずGenerative AIとは何でしょうか。後述もしますが、試しにNotion AIを使ってGenerative AIとは何かを説明してもらいました(この記事を書いている最中、ちょうどChatGPTはサービスダウンしていました)

 

Generative AIとは、大量のデータから学習したAIモデルが新しいデータ(文章、画像、音声など)を自動生成する技術のことです。AIが学習データからパターンを見つけて、そのパターンに基づいて新しいデータを作り出すのです。代表的なGenerative AIモデルにGPT-3などがあります。

Notion AI

もっともらしい回答が返ってきましたね!比較のために、Google検索で見つけた産総研マガジンに記載されていた「ジェネレーティブAI」とは?の記述も確認してみましょう。

Gartner社が2022年の「戦略的テクノロジーのトップ・トレンド」として発表したキーワード「ジェネレーティブAI」。ジェネレーティブAIとは、「コンテンツやモノについてデータから学習し、それを使用して創造的かつ現実的な、まったく新しいアウトプットを生み出す機械学習手法」と言われています。データ駆動型のAIが得意とする「データがたくさんある世界」だけで活躍する技術ではなく、少ない情報から新しいことを生み出せるなど、データが十分でない領域に踏み出す技術、という点で「次世代のAI技術」のひとつとして注目されています。

産総研マガジン

Generative AI自体の定義に幅はありそうですが、これら2つの結果を簡単にまとめると、大量のデータモデルを予め学習させた上で、新しいコンテンツ(文章、画像、音声など。今後は動画や3Dモデルも容易になりそう)を、大量に生成していくことができる、ということになりそうです。筆者はAIや機械学習の専門家ではありませんが、様々な記事やメディアで得た知識を元に総合的に主観で判断する限り、NotionAIの回答は問題ないレベルなのではないかと思われます。

Generative AIに関する最近のニュースのまとめ

このブログを書いているそばから、日々矢継ぎ早に新しい発表があるため、この段落を設けました。以下は最近発表のあったニュースやプレスリリースのまとめです。BIG Tech系の目立ったニュースしか載せてませんが、当然これらにも多種多様な発表やAPI使った新しいサービスが雨後の筍のように出てきているような状況です。正直ChatGPTがサービスダウンしている状況に少しホッとしていたりします。

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スプレッドシート連携(自動更新)などは行えない
    • BEGINNER
      • 3,880円/月
      • フォーム作成数:5個
      • チームメンバー数:2人
      • 添付ファイルの保存容量:5GB
      • 個別メール送信数:250通/月
      • 機能制限あり。フォーム送信前の確認画面表示、formrunクレジット非表示のみ利用可能
    • FREE
      • 0円/月
      • フォーム作成数:1個
      • チームメンバー数:1人
      • 機能制限あり。
  • セキュリティ

 

Hubspot(ハブスポット)

Hubspotは米国製のマーケティングプラットフォームツールです。CRM(カスタマーリレーションシップマネジメント)、SFA(セールスフォースオートメーション)、MA(マーケティングオートメーション)まで統合的になんでもやってくれるサービスとなります。

マーケティングから営業、コンテンツ管理、カスタマーサービス、オペレーションに至るまで、HubSpotのCRMプラットフォームはさまざまな業務に欠かせないツールや連携機能を備えています。プラットフォーム上の各ソフトウェアは単体でも大きなメリットがありますが、組み合わせることで何倍もの効果を発揮します

Hubspot公式サイトより
Webフォーム作成ツール19選!無料・有料問わず徹底比較してみた3

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

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

 

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