Keita Yagi

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

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

コメントする / AI、Google Apps Script / By

前回「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で業務効率化/自動化

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

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

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

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

…
Vuetifyを使ったUI作成　スマホ対応サイトをいい感じに作る

Vuetifyを使ったUI作成 スマホ対応サイトをいい感じに作る

コメントする / Vuetify / By

このブログでは、スマホ対応をいい感じに行うことができるVuefityというフレームワークで作成したページのご紹介をいたします。

早速ですが、こちらからアクセスすることが可能です。 それぞれのメニューから、各コンポーネントなどの動作確認をすることができます。 このページは随時更新を行って行く予定です。 どんなことを行えるかについては、後ほど詳しく解説いたします。

目次

スマホ対応サイトの重要性について

なぜスマホ対応が必要なのか

最近のホームページ（Webサイト）制作においては、スマートフォン対応はもはや必須のものとなっています。
ところで、なぜこれほどまでにスマホ対応が求められているのでしょうか？

スマートフォンは、私たちの生活、仕事、コミュニケーションのあり方を大きく変えました。スマートフォンは私たちの生活の重要な一部であり、ほんの10年前には不可能だった信じられないほど幅広い機能にアクセスすることができるようになりました。また、Googleでは「モバイルファースト インデックス」を行っています。2015年4月以降はモバイル（スマホ）対応サイトを優先的にインデックスしています。以下はモバイルサイトとモバイルファースト インデックスに関するおすすめの方法からの抜粋です。

Google のインデックス登録とランキングでは、スマートフォン エージェントでクロールしたモバイル版のサイト コンテンツを優先的に使用します。これをモバイルファースト インデックスと呼びます。

モバイルサイトとモバイルファースト インデックスに関するおすすめの方法

なお、自分のサイトがモバイルフレンドリーかをチェックすることもできます。こちらのモバイルフレンドリーテストで自社ドメインを入力して1-2分待つことで、結果を教えてくれます。

こうしたデバイスの普及や検索アルゴリズムの変更によりスマホサイトの重要性が一気に増加しました。今となっては日常使いするレベルのアプリやWebサイトにアクセスする程度であれば、デスクトップパソコンを広げることもなくスマホを利用すれば十分です。何か新しいサイトやサービスに触れるとき、当然のようにスマホに手を伸ばしアクセスしてみる、といった行動が自然と生まれることに違和感はありませんよね。これらのことは、あまり深く考えることもなく実感値として感じていただける方が多いのではないでしょうか。

しかしながら、世の中にはスマホ対応がしきれていないサイト・サービスが多くあります。また、新しいサイト・サービスを立ち上げるにあたり、スマホ対応をどうすればよいかわからないといった声も聞きます。近年、テクノロジーおよびそれを取り巻く世界は劇的に変化しており、もしあなたのウェブサイトがモバイル対応でなければ、大きなハンディキャップを背負っていくことになります。

いつでもどこでもサービスにアクセスできるといった状態が当たり前に求められる今日のデジタル社会で成功するためには、スマホ対応が前提のサービスを提供することの重要性を理解することが、最優先事項であるべきと考えます。

スマホ対応とレスポンシブ対応の違い

ところで、スマホ対応といったとき、レスポンシブ対応という用語についても聞く機会があるかと思います。この違いについて説明をしておきます。

スマホ対応とは、Webサイトをモバイル端末向けに最適化し、特定の機能や美観を実現する手法のことです。
画像を小さくしたり、ナビゲーションを簡略化したり、必要なサービスやコンテンツだけにアクセスできるようにしたりします。

一方、レスポンシブ対応とは、最高のユーザー体験を提供するために、閲覧するデバイスにリアルタイムで対応するウェブサイトを設計することです。
ディスプレイの大きさに応じて視覚的に調整するだけでなく、ユーザーの操作に応じて異なるコントロールやコンテンツを提供するウェブページを開発することも含まれます。レスポンシブ対応で最も重要なことは、ユーザーが複数のデバイスを使用する際に制限を受けないよう、シームレスなエクスペリエンスを実現することでしょう。

したがって、スマホ対応を行う一環としてレスポンシブ対応を行っていくという理解になるかと思います。
レスポンシブ対応をしただけでは、スマホで見たときに対応が不十分である場合もあります。
そのため、最終的にはデスクトップPC版・スマホ版をそれぞれ確認しつつ、スマホでの表示が最適になるように調整を行うことが必要になってきます。

デスクトップPC版とスマホ版を効率よく開発しユーザーエクスペリエンスを損なうことなくサービス提供を行うためにも、レスポンシブ対応はとても重要といえるでしょう。

必要に応じてデバイスを使い分けたいといったユーザーからすると、デスクトップPC版とスマホ版でUI/UXが異なっていると不便です。また、開発者としても同時に開発を行っていくことで開発効率を上げることができます。

このレスポンシブ対応を行うために、今回はVuetifyというフレームワークを利用していきます。

Vuefityを使ったスマホ対応サイトについて

Vuetifyとスマホ対応およびレスポンシブ対応の関係

まずVuetifyとは何でしょうか。

Vuetifyは、Vue.jsでユーザインタフェースを作成するためのフレームワークです。
すぐに使えるコンポーネントがたくさん用意されているので、自分で作成する手間が省ける、という点が特徴です。
このコンポーネントがPC/スマートフォン両方サポートしているため、スマホ対応が可能になる、ということです。

正確にはVuetifyで行っていることは所謂レスポンシブウェブデザインというものです。レスポンシブデザインとは、デスクトップ版のウェブページとスマホやタブレットのウェブブラウザのサイズにあわせて表示できるようにする技法のことを指します（以下、レスポンシブ対応）。

先程も申し上げたように最終的には、レスポンシブ対応後にスマホ最適な調整を行いますが、これらもVuetifyを利用して行っていきます。

補足：Vue.jsとは何か

Vuetifyは、Vue.jsでユーザインタフェースを作成するためのフレームワークと、先程述べました。ここでVue.jsについても補足説明をしておきます。
Vue.js公式サイトによれば、Vueの定義は以下の通りです。

 

Vue (発音は /vjuː/、view と同様) は、ユーザーインターフェースの構築のための JavaScript フレームワークです。標準的な HTML、CSS、JavaScript を土台とする、コンポーネントベースの宣言的なプログラミングモデルを提供します。シンプルなものから複雑なものまで、ユーザーインターフェースの開発を効率的に支えるフレームワークです。

Vue とは？

Vue.jsはその軽量なサイズと習得しやすい構文により、開発者の間で急速に絶大な人気を博し、開発者はプロジェクト開発に素早く取り掛かることができます。

軽量であるだけでなく、Vue.jsは双方向バインディング、再利用可能なコンポーネント、直感的なAPIセットアップなどの機能を完全に備えており、インタラクティブなユーザー体験を作成するための汎用的なオプションとなっています。

AngularやReactJSのような他の人気のあるフレームワークと比較して、Vue.jsは、そのシンプルな使用と小さなバンドルサイズのおかげで際立っています。このため、小規模なチームや限られたリソースで作業するWeb開発者にとって魅力的な選択肢となります。

この最新のフレームワークについてもっと知りたい、プロジェクトですぐに使い始めたいという人のために、この強力なツールを最大限に活用するための出発点を提供する、役に立つオンラインチュートリアルがたくさんあります。詳細は公式サイトのガイドやチュートリアルを参考にするとよいでしょう。

Vuetifyを使ったUIの事例集

Wireframes

Vuetifyによく使うレイアウトをまとめたWireframesがあります。

2023年2月18日現在の私の作ったサンプルページではBaselineを使っています。

他のコンポーネントは公式サイト内にコードがのっているのですが、WireframesについてはGithubのexamplesの中にありました。

Navigation drawers

いわゆるハンバーガーメニューをポチッと押すと、左側メニューがにゅっとでてくるやつですね（何を言ってるのかよく分からないかもしれませんが、、、）

Navigation drawersを使うことで実現できます。メニューを出す位置だったり、メニューを出す挙動（クリックで出すかマウスオーバーでだすか）だったり、背景イメージだったり様々な設定を行うことができます。

Vuetify_NavigationDrawers

Lists

Listsを使うことで上記画像の「Dashboard」や「Account」などのリスト表示を行うことができます。

その他の内容

今後随時更新予定です。

補足：Netlifyを使ってプロジェクトを公開する

Netlifyを使うことで、ローカルで開発したプロジェクトをWebへ公開することができます。 本ブログで紹介しているサンプルページもNetlifyを使って公開しています。 ここでは公開する手順を備忘録的にまとめてみます。 なお、Vue/Vuetifyでのプロジェクト構築は一通り完了している前提で話をしていきます。

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

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

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

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 Apps Script / By

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ファイルを作成し保存（ダウンロード）する方法

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

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 / By

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

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

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

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

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

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

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

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

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

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

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

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

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

Sheets APIを使う方法

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

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

参考

Benchmark: Reading and Writing Spreadsheet using Google Apps Script

setValues

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

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

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

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通知を送るシステムを開発する

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

先日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 Apps Script / By

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

…
Get A Quote
Get A Quote