前回はGreasemonkeyの基本的な使い方について解説しました。今回からは本題の通りGreasemonkeyによるアプリケーション開発の話を進めていきたいと思います。
どのページを開いていても,
カレンダを命令一発で表示できるとよいのですが,
まずはカレンダを表現するHTMLをそのままページに挿入してみる
まずは単純にその月のカレンダを表示することから取りかかります。HTMLのTABLE
図2 2007年8月のカレンダを表すHTML
<table>
<tr>
<th colspan="7">2007/8</td>
</tr>
<tr>
<th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
</tr>
<tr>
<td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
</tr>
<tr>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
</tr>
<tr>
<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
</tr>
<tr>
<td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td>
</tr>
</table>
この形式のHTMLを実行時点の月に合わせて作成すればよいわけですが,
今回最初のユーザスクリプトは図3です。
図3 2007年8月のカレンダをページ上に表示するユーザスクリプト
// ==UserScript==
// @name mini_calendar1
// @namespace http://gomaxfire.dnsdojo.com/
// @description the 1st mini calendar
// @include *
// ==/UserScript==
var table = // (1)
<table border="1">
<tr>
<th colspan="7">2007/8</td>
</tr>
<tr>
<th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th>
</tr>
<tr>
<td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td>
</tr>
<tr>
<td>12</td><td>13</td><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td>
</tr>
<tr>
<td>19</td><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td>
</tr>
<tr>
<td>26</td><td>27</td><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td>
</tr>
</table>;
var div = document.createElement("div"); // (2)
div.innerHTML = table.toSource(); // (3)
document.body.insertBefore(div, document.body.firstChild); // (4)
(1)でカレンダを表すHTMLをE4Xを使って変数tableにセットしています。E4XはECMAScriptにXMLを表現する文法とセマンティクスを追加する拡張仕様です。仕様について詳しくはECMAのページに載っているドキュメントに示されていますが,
(2)でdiv要素を作成し,
このユーザスクリプトを実行すると,
最初の単純なユーザスクリプトとしてはできは上々だと思いますが,
(1) 常に2007年8月に固定のカレンダである。実行時の月のカレンダにしたい。(2) ページの一番上に表示されてしまい,スクロールすると見えなくなってしまう・ 見栄えがよくない。 (3) 常にカレンダが表示されているのは邪魔である。必要なときだけ表示するようにしたい。
上から順に不満を解決していきたいと思います。