【GAS】スプレッドシートにhtmlメッセージを表示する

GASでスプレッドシートにhtmlメッセージを表示するには「showModalDialog(userInterface, title)」を利用する。

showModalDialog(userInterface, title)

ユーザーのエディタでモーダルダイアログボックスを開き、クライアントサイドのカスタムコンテンツを表示します。この方法では、ダイアログが開いている間はサーバー側スクリプトが停止されません。サーバー側のスクリプトと通信するために、クライアント側コンポーネントは、HtmlService 用の google.script API を使用して非同期コールバックを行う必要があります。プログラムでダイアログを閉じるには、HtmlService ウェブアプリのクライアント側で google.script.host.close() を呼び出します。詳細については、ダイアログとサイドバーのガイドをご覧ください。モーダルダイアログは、ユーザーがダイアログ以外を操作できないようにします。これに対して、モードレスダイアログとサイドバーでは、ユーザーがエディタを操作できます。ほとんどの場合、モーダルダイアログまたはサイドバーがモードレスダイアログよりも適しています。
https://developers.google.com/apps-script/reference/base/ui#showmodaldialoguserinterface,-title

スプレッドシートにhtmlメッセージを表示するGAS実行の様子

showModalDialog(userInterface, title)を実行することで、

ブラウザ上にタイトルとhtmlメッセージを表示する。

といった操作が可能です。

スプレッドシートに入力ボックスを表示する場合は、以下記事を御覧ください。

参照記事：【GAS】スプレッドシートに入力ボックスを表示する

スプレッドシートにhtmlメッセージを表示するGAS

//—-スプレッドシートに簡易的なhtmlを表示する--
    function dialog(){
    //変数htmlにHtmlServiceをセット
     let html = HtmlService
       .createHtmlOutput('▶Spreadsheet.Blue')
       //横幅を300pxに設定
       .setWidth(300)
       //縦幅を150pxに設定
       .setHeight(150)
    //SpreadsheetAppを起動してuiを取得
    //■showModalDalogでhtmlを表示する
     SpreadsheetApp.getUi().showModalDialog(html,"HTMLのダイアログです");
    }

showModalDialog(userInterface, title)のパラメーター

名前	型	説明
`userInterface`	`Object`	表示するインターフェースを表す HtmlOutput。
`title`	`String`	ダイアログのタイトル。userInterface オブジェクトに対して setTitle() を呼び出すことで設定されたタイトルをオーバーライドします。

showModalDialog(userInterface, title)のパラメーター