Google Apps ScriptのHTMLダイアログの見た目を合わせる

# Google Apps ScriptのHTMLダイアログの見た目を合わせる

## 概要

Google Apps ScriptのモーダルダイアログではUIとしてHTMLを埋め込むことができます。この際HTMLにスタイルが適用されていない状態になるため見た目が悪いです。なので標準のダイアログ (`alert` や `prompt`) と同様の見た目にできるようにします。

## 標準ダイアログのスタイル

DevToolsで見てみると、DOMは次のようになっています。

```html
<div class="modal-dialog docs-dialog" tabindex="0" role="dialog" aria-labelledby="78ajpk:2l7" style="left: 290.5px; top: 373px;">
  <div class="modal-dialog-title modal-dialog-title-draggable"><span class="modal-dialog-title-text" id="78ajpk:2l7" role="heading"></span><span class="modal-dialog-title-close" role="button" tabindex="0" aria-label="閉じる" data-tooltip="閉じる"></span></div>
  <div class="modal-dialog-content script-prompt-contents" id="78ajpk:2l7.contentEl">
    <div>テスト</div><input></div>
  <div class="modal-dialog-buttons"><button name="1">OK</button><button name="4">キャンセル</button></div>
</div>
```

CSSを見ると、すべてのCSSが https://docs.google.com/static/spreadsheets2/client/css/1911645623-waffle_k_ltr.css に記述されていることがわかります。

## HTMLに適用する

以下のようにインラインフレームで埋め込まれているようなので先程のCSSを読んであげればよさそうです。

```html
<div class="modal-dialog docs-dialog script-app-dialog" tabindex="0" role="dialog" aria-labelledby="78ajpk:2pq" style="left: 735px; top: 271.5px;">
  <div class="modal-dialog-title modal-dialog-title-draggable">(省略)</div>
  <div class="modal-dialog-content script-app-contents" id="78ajpk:2pq.contentEl">
    <iframe frameborder="0" src="***" width="100%" height="100%" ...></iframe>
  </div>
  <div class="modal-dialog-buttons" style="display: none;"></div>
</div>
```

`link` 要素でCSSを埋め込み、次のようなHTMLを記述してみます。

```html
<link rel="stylesheet" href="https://docs.google.com/static/spreadsheets2/client/css/1911645623-waffle_k_ltr.css">
```

```html
<body class="docs-gm">
  <div class="modal-dialog-buttons">
    <button name="1">OK</button>
    <button name="4">キャンセル</button>
  </div>
</body>
```

すると次のようになりました。

![screenshot-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1291112/897e6cbe-358a-9f36-34cd-2969cbc5c5bf.png)

微妙に見た目が違うのでminifiedされたCSSを整形して読んでみると、次のような記述がありました。

```css
.docs-gm .modal-dialog button,.docs-gm .modal-dialog .jfk-button-standard {
    background-image: none;
    border: 1px solid transparent!important;
    border-radius: 4px;
    box-shadow: none;
    box-sizing: border-box;
    font-family: "Google Sans",Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
    font-weight: 500;
    font-size: 14px;
    height: 36px;
    letter-spacing: 0.25px;
    line-height: 16px;
    padding: 9px 24px 11px 24px;
    background: white;
    border: 1px solid #dadce0!important;
    color: #188038
}
```

親要素に `docs-gm` クラスの要素と `modal-dialog` クラスの要素 が必要そうです。Google Sheetsのページではbodyに `docs-gm` のクラスが付与されているためbodyに追加します。

![screenshot-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1291112/07e444ed-e8e4-bb53-2bce-ceb243cb58de.png)

モーダル内にモーダルができてしまったので不要なスタイルを上書きします。

```css
body.docs-gm > div.modal-dialog {
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  position: static;
}
```

![screenshot-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1291112/0a0cde17-3f76-68ed-33b5-a1e9d227eb0e.png)

結構優先度を上げないと適用されませんが、無事枠を消すことができました。

![screenshot-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1291112/3afd1ae0-454c-4fd4-8eb2-0fd53c877f42.png)

チェックボックスやラジオボタンなどもできますがjsでクラスを切り替える必要があるので少々面倒です (追記するかも) 。