Google Apps ScriptのサイドバーのテキストエリアにGAS関数からの戻り値を設定


みなさん、こんにちは!
タカハシ(@ntakahashi0505)です。

Google Apps Scriptでサイドバーを作る方法をお伝えしています。

前回の記事はこちらです。

Google Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法
GASでサイドバーを作成する方法についてお伝えしています。今回はGoogle Apps Scriptでサイドバーから呼び出したGAS関数からwithSuccessHandlerでその戻り値を受け取る方法です。

サイドバーのボタンクリックでサーバー側のGAS関数を呼び出して、その処理結果を戻り値として受け取るところまでお伝えしました。

今回は、その受け取った値をサイドバーのテキストエリアに反映させたいと思います。

Google Apps ScriptのサイドバーのテキストエリアにGAS関数から受け取った値を反映させる方法です。

では、行ってみましょう!

前回のおさらい

まずは、前回のおさらいからです。

GAS側のスクリプトを記述している「コード.gs」はこちらです。

「index.html」をもとにサイドバーを表示するshowSidebarと、サイドバーから呼び出されて「★」マークを付けて戻り値を返すlogTestという2つの関数で構成されています。

サイドバーに表示する内容を記述する「index.html」がこちら。

この「index.html」に埋め込むJavaScriptとCSSが以下の「js.html」と「css.html」です。

「js.html」のtranslateTextは、サイドバーのクリックされたらGAS側のlogTestを呼び出しつつ、その呼び出しが成功した暁には、戻り値をアラート表示するという処理になっています。

最終的には、サイドバーのテキストエリアの内容をGAS側で翻訳して、それをドキュメント内に挿入できるようにしていきたいんです。

なので、GAS関数の結果をうけてテキストエリアの内容を変更するという処理を作る必要があるんですね。

まず今回は、logTestからの戻り値を、サイドバーのテキストエリアに反映させるようにしていきたいと思います。

テキストエリア要素の内容を変更する

テキストエリアの内容を変更する方法ですが、ざっくり言うとこうです。

  1. テキストエリアを要素として取得する
  2. 取得したテキストエリアの内容を変更する

できそう…ですよね!?

テキストエリアにid属性を付与する

テキストエリアを要素として取得するには、いくつかの方法があるのですが、「id属性」をキーにして取得するのが確実です。

id属性というのは、どんなHTML要素にも付与できる名前で、HTML文書内で一つのidに対して一つの要素だけに限られるというものです。

つまり、id属性がわかれば、要素が一つに決まるということです。

id属性は以下のようにHTML要素に付与できます。

<タグ id=”id名”>タグの内容</タグ>

今回は、「index.html」のテキストエリアに、以下のように「textArea」というid属性を付与してあげます。

id属性でHTML要素を取得する

それで、id属性を使って要素を取得するには、documentオブジェクトのgetElementByIdメソッドを使います。

document.getElementById(id属性)

getElementByIdメソッドは、HTML要素を表すElementオブジェクトを返します。

なお、id属性は文字列として指定するので、シングルもしくはダブルクォーテーションで囲みます。

documentオブジェクトは何ものかというと、HTMLドキュメントを表すオブジェクトで、windowオブジェクトからdocumentプロパティで取得できます。

windows.document

それで、alertメソッドと同様に、windowsの部分は省略できるので、以下のようにいきなり書けます。

document

これで、id属性を付与したテキストエリア要素を取得できますね。

要素のテキスト内容を変更する

テキストエリア要素を取得したら、その内容を書き換える必要があります。

Elementオブジェクトのテキスト内容を変更するには、valueプロパティを変更します。

Elementオブジェクト.value

これで、道筋はできましたね。

GAS関数の戻り値をテキストエリアにセットする

以上を踏まえて、「js.html」のtranslateTextを以下のように変更します。

GAS関数logTestを呼び出して、それが成功したときに戻り値をdataに受け取り、それをid属性「textArea」のテキスト内容としてセットするわけです。

実行してみましょう!

GAS関数の戻り値がテキストエリアにセットされた

無事にテキストエリアにGAS関数の戻り値がセットされましたね。

「Translate」ボタンの動作はあと少しですね!

まとめ

以上、Google Apps ScriptのサイドバーのテキストエリアにGAS関数から受け取った値を反映させる方法をお伝えしました。

今回はピュアなJavaScriptを使いましたが、jQueryやVue.jsなどを使うとまた別の方法で実現できます。

機会があればその方法も紹介していきますね。

では、次回いよいよ翻訳機能を実装していきます。

Google Apps Scriptのサイドバーでテキストエリアを翻訳するスクリプト

どうぞお楽しみに!

連載目次:GASで初めてのサイドバーを作ろう!

Google Apps Scriptではスプレッドシートやドキュメントの業務を手助けするサイドバーを自作することができます。このシリーズではHTMLを学びながらサイドバーの作り方を易しく紹介していきます。
  1. Google Apps Scriptでサイドバーを作る方法のはじめの一歩の概要編
  2. Google Apps Scriptで最も簡単なサイドバーを作成する方法
  3. Google Apps Scriptでサイドバーを作るための初めてのHTML基礎知識
  4. GASでサイドバーを作るときに使用するいくつかのフォーム部品の作り方
  5. GASによる自作のサイドバーにCSSパッケージを適用する方法
  6. GASのサイドバーをdivタグ&class属性でスタイル設定する
  7. Google Apps Scriptでサイドバーのボタンを押して動作させる方法
  8. GASでサイドバーを作る際にJavaScriptを別ファイルに分離する方法
  9. Google Apps Scriptでサイドバーのボタンを押してGAS側の関数を呼び出す方法
  10. Google Apps Scriptでサイドバーから呼び出したGAS関数からその戻り値を受け取る方法
  11. Google Apps Scriptのサイドバーでテキストエリアを翻訳するスクリプト
  12. GASでGoogleドキュメントのカーソル位置にテキストを挿入する方法

  投稿者プロフィール

タカハシノリアキ株式会社プランノーツ 代表取締役
株式会社プランノーツ代表、コミュニティ「ノンプロ研」主宰。1976年こどもの日生まれ。東京板橋区在住。「ITで日本の『働く』の価値を上げる!」をテーマに、VBA&GASの開発、講師、執筆などをしております。→詳しいプロフィールはコチラ
★ご依頼・ご相談はお気軽にどうぞ!→お問い合わせはコチラ
★フォロー頂ければ嬉しいです。

コメント