検索結果と結果の返り値

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とつなげているわけなのですが、このオプションはリファレンスに載っていません。そればかりか、エディタの入力候補のリストにすら出てきません。

参考URL