【GUIビルダー】ボタン・ダイアログボックス・リンク表示（２）

■昨日の続きです

 　　　昨日から始めた、以下のUI作成。

　　　　　　ボタン押下でダイアログボックス表示。
　　　　　 ダイアログボックス内にメッセージと次の動作をするボタン２つ配置。
　　　　　　　　①ダイアログボックスを閉じる 
　　　　　　　　②特定のページへのリンクを現在のタブで開く


　　　昨日は、GUIビルダーで部品達の配置・設定をするところまで終わりました。
　　　今日は、スクリプトに手を加えて、若干の微調整をする過程を書きます。


■手順・スクリプト

　　　スクリプトエディタで、次の三つの処理を修正・追記します。

　　　　　①作成したGUIビルダー全体を呼び出す
　　　　　　　－冒頭の”app.add(app.loadComponent("****"));”という構文の****の箇所を
　　　　　　　　 GUIビルダーの名前と一致させる。
　　　　　　　　　　（例：　dialogBox&LinkTest）
　　　
　　　　　②GUIビルダーで作成したPanelを呼び出す

　　
　　　　　③GUIビルダーで作成したAnchor（=リンク）を「現在のタブで開く」設定にする

　　　これで、完了です♪
　　

■スクリプト全体像

　　　これで、完了です。
　　　スクリプトの全体像はこのようになっています。

■動作テスト

　　　では、どんな感じに動作するのかチェックしてみましょ～～。

　　　今回も、Googleサイトの中に「Apps スクリプトガジェット」として挿入するのではなく、
　　　独立したページとして動かしてみます。

　　　「バージョン管理」してから、「ウェブアプリケーションとして公開」します。

　　　
　　　ここで表示されたURLをコピペする　or　「最新のコード」を試すという箇所をクリックすると、
　　　新しいタブで、作成したUIのページが表示されます。

　　　ここで、「ダイアログボックス表示」ボタンを押します。

　　　ダイアログボックスが表示されます。

　　　さらに、「続けて書く」というボタンを押すと、現在のタブがリンク先に切り替わりました。

　　　一旦戻って、ダイアログボックスの「戻る」ボタンを押すと、ダイアログボックスが消えました。

　　　いい感じですね～～。


今日はここまで


■実際に試してみたい方へ

　　　今回作成したUIは、下記のURLからお試し頂けます。

　　　https://script.google.com/a/macros/mypleis.com/s/AKfycbz9H0HjwLD79L3kuB-HoQkG0pzhtXHrth60tZ-W4KNthK8O5NTA/exec

　　　また、Googleサイトの方からも飛べるように、リンクを準備しています。

　　　https://sites.google.com/a/mypleis.com/gas_mypleis/GAS_ALL/10_dialogbox_link_now


■予告編

　　　明日は、Googleフォームを参考にして、自作のフォームを作ってみようと思います。