前回は新しいスプレッドシートを作成し、そのシートにプログラムを起動するボタンを配置しました。
今回はダイアログを表示するHTMLファイルを作成し、そのダイアログを開くスクリプトを作成していきます。
Contents
中身を簡単に説明すると
ここまででスクリプトの作成は完了ですが、作成したスクリプトを実行すると認証を要求されます。認証を許可するとスプレッドシート上にダイアログが表示されるはずです。でも、無料のアカウントの場合は、この認証の許可が少し面倒なので注意が必要です。いきなり表示されると「なにかまずいのかな」と思わせる警告表示なので確認しておいてください。
今回はここまでにして、次回はダイアログにプルダウンメニューを追加していきたいと思います。
今回はダイアログを表示するHTMLファイルを作成し、そのダイアログを開くスクリプトを作成していきます。
Contents
1. ダイアログのHTMLファイルを作成する
まずはダイアログのHTMLファイルを作成します。- スプレッドシート上部のメニューバーから「ツール」→「スクリプトエディタ」を選択してスクリプトエディタを起動します。
- 起動すると「無題のプロジェクト」が開き、なかには "コード.gs" が用意されています。左上の「無題のプロジェクト」というタイトルをクリックするとプロジェクト名を変更できます。ここでは「データ入力」というプロジェクト名にします。
- このプロジェクトに新しいHTMLファイルを作成していきます。スクリプトエディタの上部に表示されているメニューから「ファイル」→「NEW」→「HTMLファイル」を選択します。
- 「Create File」ダイアログが開くので作成するファイルの名前を入力して「OK」をクリックします。
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. スクリプトを実行すると認証を要求される！
- 作成したスクリプトを実行すると「Authorization required（認証が必要です）」というメッセージが表示されるので「許可を確認」をクリックします。
- Googleアカウントへのログイン画面が表示されます。
- 無料のアカウントの場合は「このアプリは確認されていません」と警告のようなメッセージが表示されます。ここで「安全なページに戻る」はクリックせずに、小さく表示された「詳細」をクリックします。
- 下部にある「"入力したプロジェクト名"（安全ではないページ）に移動」をクリックします。ここではプロジェクト名を「データ入力」としたのでそう表示されています。
- 「Googleアカウントへのアクセスをリクエストしています」というメッセージの別のウインドウが開くので「許可」をクリックします。
しっかりスマホにも「アクセスを許可した覚えがありますか」と確認がきます。セキュリティ、ちゃんとしています。
- ようやく「データ取得」というダイアログが表示されます。中身は何も書いてないので何もないです。
4. 配置したボタンにスクリプトを割り当てる
スクリプトが完成したので、前回用意したボタンにこのダイアログをひらくスクリプトを関連付けて、ボタンをおせばダイアログが表示されるように設定していきます。- 作成したボタンをクリックして選択すると、右上に３つの点が表示されます。それをクリックするとメニューが表示されるので「スクリプトを割り当て」を選択します。
- 「どのスクリプトを割り当てますか？」とたずねられるので、さきほど作成したダイアログを表示する関数「Display_DialogBox」と入力してOKをクリックします。
これだけで完成です。ボタンをクリックすると「スクリプトを実行しています」と表示され、ダイアログが表示されます。
認証には少し手こづりましたが、なんとかダイアログが表示されました。まあ、勝手に作ったプログラムでブラウザ上の表示を変えようとしているので「なんかおかしいよ！」と言われて当然と言えば当然ですね。セキュリティがしっかりしてます。今回はここまでにして、次回はダイアログにプルダウンメニューを追加していきたいと思います。
