ヘルプ機能をつける
自分自身、アプリケーションを作る時に、あまりヘルプ機能というか操作マニュアルというものを殆ど作らないのですが、いざ他人様が利用するとなるとそうもいかないシーンがたくさんあります。かといって、ヘルプに関して例えば別途Google Documentで作って置いても、誰も読まないという不遇な目にあったりもします。そういったマニュアルを読むにあたって、ファイルを用意しても、一度ドライブを開き、目的の場所に行き、更にファイルを開くという動作が必要なので、確かに億劫な上に、ドキュメントのそれは決して見やすいというものでもありません。
そこで、これまで社内で作成してきたアプリケーション達全てにそれぞれ用の操作マニュアルを付け加える事にしました。使用する機能は、例の如くHTML Services。これに、操作性を良くするために素敵なCSSを加えてあげています。検索機能などはないのですが、必要最低限の説明を表記し、負担を減らそうというものです（検索機能つけるとなるとかなり手を加えないと行けないのですが、HTML + JavaScript + CSSなので、やろうと思えば、外部に検索用サーバを用意し、JSONやXMLで帰ってきた値をパース整形してやれば、できなくもないと思います）。
概要
CSSが使えるとは言っても、HTML ServicesことCajaの中では、派手な動きをするようなCSSは動きません。よって、シンプルなCSSを使用することになりますが、必要十分です。自分の場合、あのダイアログボックスに情報を詰め込む為に、CSSでタブを表現できるものを利用させてもらってます。参考リンクに利用させて頂いているCSSファイルを公開してくださっている方へのリンクを張ってありますので、参考にしてみてください。さて、このCSSを利用すると以下のような表記になります。
図：CSSでタブ表記させてみた
非常にシンプルなタブ表記でとても扱い易いです。
ラジオボタンをタブ表記に変換して実現しているCSSなのですが、出力するHTML内でも、さして難しい書き方は不要で、タブを増やすのも難しいものではありません。
※但し、CSSファイルの呼び出しについてですが、HTMLファイル内に記述する分には問題ないのですが、CSSファイルとして外部から呼び出す時に、Microsoft OneDriveやDropboxのPublicフォルダのURLを貼っても、呼び出しに失敗することがあります。自分の場合、Google SitesのアップローダやDriveのホスト機能を利用して、ファイルを呼び出していますが、今のところ表記が壊れたりしていません（Dropboxのそれは、表記が壊れてタブではなくラジオボタンになってしまって散々でした）。
ソースコード
GAS側コード
function helpman(){ var html = HtmlService.createHtmlOutputFromFile('helpman.html') .setWidth(740).setHeight(400); SpreadsheetApp.getUi().showModelessDialog(html, '取説')}※今回は、スプレッドシートに取扱説明書ということで機能を乗っけています。ダイアログのサイズ指定を行い、モーダレスダイアログで出力しているので、ダイアログをマウスで移動させることが可能ですし、後ろの画面のスプレッドシートの操作も可能です。
HTML側コード（helpman.html）
<link rel="stylesheet" type="text/css" href="" /><link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css"><ul class="tabs"><li>
<input name="tab" id="tab1" type="radio" checked />
<label for="tab1">事前準備</label>
<div class="contents tab1">
・・・・ここに１個目のタブの内容をHTMLで記述する・・・・
</div>
</li>
<li>
<input name="tab" id="tab2" type="radio"/>
<label for="tab2">データ取得</label>
<div class="contents tab2">
・・・・ここに２個目のタブの内容をHTMLで記述する・・・・
</div>
</li>
<li>
<input name="tab" id="tab3" type="radio"/>
<label for="tab3">エクスポート</label>
<div class="contents tab3">
・・・・ここに３個目のタブの内容をHTMLで記述する・・・・
</div>
</li>
<li>
<input name="tab" id="tab4" type="radio"/>
<label for="tab4">注意事項</label>
<div class="contents tab4">
・・・・ここに４個目のタブの内容をHTMLで記述する・・・・
</div></li>
</ul>呼び出し元CSSファイル（helpman.css）
body { background: #eeeeee;}.tabs { position: relative; padding: 0;}.tabs li { display: inline-block;}.tabs input[type=radio] { display: none;}.tabs label { display: block; cursor: pointer; padding: 5px; line-height: 20px; background-color: #999999; color: #ffffff;}.tabs label:hover { background-color: #cccccc; color: #000000;}.tabs input[type=radio]:checked + label { background-color: #ffffff; color: #000000;}.tabs .contents { display: none; position: absolute; top:30px; left: 0; padding: 10px; background: #ffffff;}.tabs input[type=radio]:checked + label + .contents{ display: block;}※今回は、こちらのサイトで公開されているシンプルタブを実現するCSSをお借りしています。
※いわゆるラジオボタンをタブにする手段ではない方法でのタブ化も参考リンクにver.2として公開されています。
ヒント
- 基本的にはラジオボタンによるリストの表記をそのまま記述するが、CSSで指定されているclass名を記述する。便宜的にそれに付随するidやlabel、classのあとのcontents tabの名前もわかりやすいように番号表記している。
- ulタグのclass指定でCSSにあるtabsを指定している。これが重要。
- タブを増やしたければ基本この<li></li>のブロックをコピペすれば良い。
- 最初に表記しておきたいタブは、inputのタグ内に、checkedを記述しておけば良い。
- 基本HTMLなので、ボックスや画像など自由に記述することはできる。但し、CSSもJavaScriptも全て自由というわけではなく、かなり制限があるので、自分がやりたいことが、Cajaの中で動くのかどうかは確認しながらの作業となる。Caja Playgroundなどでテストしてみると良い。
- 個人的に、GWTを使ったUiApp Servicesは消えるんじゃないかと非常に不安で、扱いにくいものでもあるので、この手のUIは全てHTML Servicesで作成しています。UiAppのほうがリッチではあり、よりプログラマブルなのですが、扱いにくさと面倒くささ、利用例の少なさ（GAEではそうでもないらしいですが、少なくともGoogle Apps Scriptでの使用例は非常に少ない）、ドキュメントの少なさなどがあるので、オススメしません。