Ui Instanceを利用したGUIの作成およびその返り値
の処理について最近やったので、メモをしておく。
非常に資料が少ない上に、読みづらいドキュメントが多い為、なかなかに難儀したものの、目的を果たせたので、今回メモをすることにしました。今回は、自分が参加しているGoogle GroupsのMLのメンバーリストを表示する検索窓をApps Scriptで作成し、表示するという内容のもので、なおかつ、返り値はHTMLで返してもらい、綺麗に整形して表示するというものです。このスクリプトはGoogle Accountにログインしていないと使えません。また、ログインしていても各人の権限で動くようにしていますので、人によって検索結果は異なります。
function doGet(e){ var app = UiApp.createApplication(); var text = app.createTextBox().setName("text"); var handler = app.createServerHandler("count") .addCallbackElement(text); app.add(text); app.add(app.createButton("ユーザ検索", handler)); app.add(app.createHTML().setId("labelman")); return app; } function count(eventInfo) { var app = UiApp.createApplication(); var name = eventInfo.parameter.text; var GROUP_EMAIL = name; var group = GroupsApp.getGroupByEmail(GROUP_EMAIL); var users = group.getUsers(); var s = "<b>グループ" + GROUP_EMAIL + "は" + users.length + "人のメンバーで構成されています:</b><br><hr>"; var p = "-"; for (var i = 0; i < users.length; i++) { var user = users[i]; var roleman = String(group.getRole(user.getEmail())); if(roleman == "OWNER"){ var takorice = group.getRole(user.getEmail()); s = s + '<b><div style="color:red">・'+ takorice + " - "+ String(user.getEmail())+ '</div></b>'; }else{ s = s + "・" + String(group.getRole(user.getEmail())) + " - "+ String(user.getEmail())+ "<br>"; } } app.getElementById("labelman").setHTML(s); return app; }しかし、これでは、問題があります。
メンバーの数が少なければ表示上問題ありませんが、Appスクリプトガジェットはスクロールバーが付けられないので、メンバーの数が多い場合、全メンバーが表示できません。そこで、UiAppにいくつか要素を追加して、うまく表示できるようにしてあげます。
function doGet(e){ var app = UiApp.createApplication(); var scrollPanlel = app.createScrollPanel().setSize('300', '200') .setStyleAttribute('border', '1px solid black'); var vPanel = app.createVerticalPanel(); var text = app.createTextBox().setName("text"); var handler = app.createServerHandler("count") .addCallbackElement(text); app.add(text); app.add(app.createButton("ユーザ検索", handler)); vPanel.add(app.createHTML().setId("labelman")); //パネルに追加 scrollPanlel.add(vPanel); app.add(scrollPanlel); return app; }上記のコードは、スクロールするパネルであるScrollPanelとそれを配置するためのVerticalPanelを追加し、そのパネルにcreateHTMLの部分を乗っけるようにしてあります。テキストボックスとボタンはスクロールする必要性はないので、パネルには載せずに、直接app.addで追加し、最後にScrollPanelにVerticalPanelを追加し、それをapp.addしてあげています。これで、HTML表示部分がスクロールするようになり、全メンバーを見ることができるようになり、Appスクリプトガジェットにはないスクロールバーで表示してあげることができます。
まず、重大なポイントなのですが、createHTMLでサポートされているHTMLタグには制限があります。今回、リストの中でオーナーの人は赤字で表示するようにしているのですが、その際に使用する<Font>タグもそのうちの一つで、これを文字列に含めて投げると、そのタグの間の文字が消えます(タグごと無視される仕様のようです。また、HTML5から<font>が削除されているということも理由の一つのようです)。そこで、<div>タグでカラーリングを指定しています。もちろん、createHTMLメソッドのオプションでカラーリング指定できるのですが、その場合、全部がその色になってしまうので、具合が悪いのです。
以下にサポートされているタグを表示します。
B, BLOCKQUOTE, BODY, BR, CENTER, CAPTION, CITE, CODE, DIV, EM, H1, H2, H3, H4
H5, H6, HR, LABEL, LEGEND, LI, OL, P, SPAN, STRONG, SUB, SUP, TABLE, TBODY
TD, THEAD, TITLE, TR, TT, UL
ちなみに、app.getElementByIdに続けて、.setHTMLとつなげているわけなのですが、このオプションはリファレンスに載っていません。そればかりか、エディタの入力候補のリストにすら出てきません。