先日作った、Suica（スイカ）のガジェットだが、ユーザーインターフェイスが微妙だ。入出力のエリアを並べているので領域を広い。入力と出力が同時に見えている必要もないと思ったのでタブ化して分けてみた。それにタブ名をナビゲーションメッセージになったので、ちょっとわかりやすくなったかもしれない。

Google ガジェットでタブを使うには

ModulePrefs で と使用を宣言。

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<Module>
<ModulePrefs …>
<Require feature="tabs" />
</ModulePrefs>

下記のようにタブのインスタンスを作って、addTab でタブのキャプションとそのタブの領域となる div タグの ID を引数に渡す。三番目の引数はタブが選択されたときのイベント関数を指定できる。chg の中で変換を走らせている。

1
2
3

var tabs = new _IG_Tabs(__MODULE_ID__);
tabs.addTab("履歴を入力", "tabIn");
tabs.addTab("結果を表示", "tabOut", chg);

タブ化すると、DOMツリーの構造が変わるため document.getElementById ではなく _gel(id) で取得する必要がある。

Content のソース

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

<script  type="text/javascript">
<!--
String.prototype.trim = function()  {  return  this.replace(/^\\s+|\\s+$/g, ''); };
String.prototype.getLines = function()  {
  var lines = this.split("\\n");
  for  (var i=lines.length-1; i>=0; i--)  {
  if  (lines\[i\].trim().length == 0)  {
 lines.splice(i, 1);
  }
  }
  return lines;
};
function line2map(line)  {
  var c = line.split(' ');
  if  (c\[1\] == "物販") c\[2\] = c\[1\];
  return  {
  date: c\[0\], dept:c\[2\], arrv:c\[4\], acc: c\[5\].substr(1).replace(',',"")
  };
}
function outtable(input)  {
  try  {
  var lines = input.getLines();
  if  (lines\[0\].indexOf('月/日') \> -1) lines.shift();
  var i = lines.length - 1;
  var pre_acc = line2map(lines\[i\]).acc;
  var out = "";
  while  (--i >= 0)  {
  if  (lines\[i\].replace(' ',"").length == 0)  continue;
  var item = line2map(lines\[i\]);
  if  (item.dept.length > 0)  {
 out += "<tr><td>" \+ item.date \+ "</td><td>" \+ item.dept + "</td><td>"
 out += item.arrv + "</td><td>" \+ (pre_acc - item.acc) \+ "</tr>";
  }
 pre_acc = item.acc;
  }
  return  '<table cellspacing="0" style="font-size:10.5pt" width="300">' \+ out + '</table>';
  }  catch(err)  {
  return  null;
  }
}
function chg(evt)  {
  var textIn = _gel("textIn");
  var ret = outtable(textIn.value);
  if  (ret != null)
 _gel("textOut").innerHTML = ret;
}
function firstFocus(obj)  {
 obj.value='';
 obj.style.color='#000';
 obj.onfocus = null;
}
//-->
</script>
<style  type="text/css">
@import url(http://www.google.com/ig/tablib.css);
</style>
<div  id="tabIn"  style="height:135px;">
<textarea  id="textIn"  style="color:gray;font-size:10pt;width:100%;height:135px;overflow:scroll"
  onfocus="firstFocus(this)"  onchange="chg()"
 >SF(電子マネー)利用履歴をペースト</textarea></td>
</div>
<div  id="tabOut"  style="height:135px;">
<div  id="textOut"  style="font-size:10.5pt;height:135px;padding:2px 0;overflow:scroll"></div>
</div>
<script>
var tabs = new \_IG\_Tabs(\_\_MODULE\_ID__);
tabs.addTab("履歴を入力", "tabIn");
tabs.addTab("結果を表示", "tabOut", chg);
</script>