前回は新しいスプレッドシートを作成し、そのシートにプログラムを起動するボタンを配置しました。
今回はダイアログを表示するHTMLファイルを作成し、そのダイアログを開くスクリプトを作成していきます。

GAS_Googleスプレッドシート_ダイアログ表示

Contents

  1. ダイアログのHTMLファイルを作成する
  2. ダイアログを表示するスクリプトを作成する
  3. スクリプトを実行すると認証を要求される！
  4. 配置したボタンにスクリプトを割り当てる

1. ダイアログのHTMLファイルを作成する

まずはダイアログのHTMLファイルを作成します。
  1. スプレッドシート上部のメニューバーから「ツール」→「スクリプトエディタ」を選択してスクリプトエディタを起動します。

    GAS_ダイアログ_表示_1

  2. 起動すると「無題のプロジェクト」が開き、なかには "コード.gs" が用意されています。左上の「無題のプロジェクト」というタイトルをクリックするとプロジェクト名を変更できます。ここでは「データ入力」というプロジェクト名にします。

    GAS_ダイアログ_表示_2

    GAS_ダイアログ_表示_3

  3. このプロジェクトに新しいHTMLファイルを作成していきます。スクリプトエディタの上部に表示されているメニューから「ファイル」→「NEW」→「HTMLファイル」を選択します。

    GAS_ダイアログ_表示_4

  4. 「Create File」ダイアログが開くので作成するファイルの名前を入力して「OK」をクリックします。

    GAS_ダイアログ_表示_5

これで新しいHTMLファイルがプロジェクトに追加されました。とりあえず中身のコードはそのままにしておきます。

2. ダイアログを表示するスクリプトを作成する

つぎに コード.gs を編集してダイアログを表示するスクリプトを作成していきます。コードは以下のように記述して "Display_DialogBox"  という function を作成します。

function Display_DialogBox() {
  var html = HtmlService.createHtmlOutputFromFile('Dialog_Box');
  SpreadsheetApp.getUi().showModalDialog(html, "データ取得");  
}

中身を簡単に説明すると
  • "HtmlService" : セキュリティ上の問題からスクリプトから直接ブラウザにコンテンツを返すことはできないので、これが使用して悪意のあるプログラムを実行できないようにしてコンテンツを返す。
  • "createHtmlOutputFromFile('ファイル名'):　指定したファイルからHtmlOutput オブジェクトを生成する。
  • "SpreadsheetApp": 　Googleスプレッドシートファイルにアクセスおよび作成する。
  • "getUi()":　このメソッドによってスクリプトでメニュー、ダイアログなどの機能を表示することができる。
  • "showModalDialog(htmlOutput, タイトル)" :　指定したHTMLファイルを含んだモーダルダイアログを表示する。参照するHTMLファイルの指定と、ダイアログのタイトルを入力する。  

3. スクリプトを実行すると認証を要求される！

ここまででスクリプトの作成は完了ですが、作成したスクリプトを実行すると認証を要求されます。認証を許可するとスプレッドシート上にダイアログが表示されるはずです。でも、無料のアカウントの場合は、この認証の許可が少し面倒なので注意が必要です。いきなり表示されると「なにかまずいのかな」と思わせる警告表示なので確認しておいてください。
  1. 作成したスクリプトを実行すると「Authorization required（認証が必要です）」というメッセージが表示されるので「許可を確認」をクリックします。

    GAS_スクリプト実行_認証_1

  2. Googleアカウントへのログイン画面が表示されます。

    GAS_スクリプト実行_認証_2

  3. 無料のアカウントの場合は「このアプリは確認されていません」と警告のようなメッセージが表示されます。ここで「安全なページに戻る」はクリックせずに、小さく表示された「詳細」をクリックします。

    GAS_スクリプト実行_認証_3

  4. 下部にある「"入力したプロジェクト名"（安全ではないページ）に移動」をクリックします。ここではプロジェクト名を「データ入力」としたのでそう表示されています。

    GAS_スクリプト実行_認証_4

  5. 「Googleアカウントへのアクセスをリクエストしています」というメッセージの別のウインドウが開くので「許可」をクリックします。

    GAS_スクリプト実行_認証_5

    しっかりスマホにも「アクセスを許可した覚えがありますか」と確認がきます。セキュリティ、ちゃんとしています。

  6. ようやく「データ取得」というダイアログが表示されます。中身は何も書いてないので何もないです。

    GAS_スクリプト実行_認証_6

4. 配置したボタンにスクリプトを割り当てる

スクリプトが完成したので、前回用意したボタンにこのダイアログをひらくスクリプトを関連付けて、ボタンをおせばダイアログが表示されるように設定していきます。
  1. 作成したボタンをクリックして選択すると、右上に３つの点が表示されます。それをクリックするとメニューが表示されるので「スクリプトを割り当て」を選択します。

    GAS_スクリプトを割り当て_1

  2. 「どのスクリプトを割り当てますか？」とたずねられるので、さきほど作成したダイアログを表示する関数「Display_DialogBox」と入力してOKをクリックします。

    GAS_スクリプトを割り当て_2
これだけで完成です。ボタンをクリックすると「スクリプトを実行しています」と表示され、ダイアログが表示されます。


認証には少し手こづりましたが、なんとかダイアログが表示されました。まあ、勝手に作ったプログラムでブラウザ上の表示を変えようとしているので「なんかおかしいよ！」と言われて当然と言えば当然ですね。セキュリティがしっかりしてます。
今回はここまでにして、次回はダイアログにプルダウンメニューを追加していきたいと思います。