管理人ブログ

ブログ公式JavaScriptのタブ機能を修正しました

ブログ公式JavaScriptのタブ機能ですが、
今まではタブと対応する表示領域を別々に並べる必要があったため、
プラグインをタブ表示にする場合は同一プラグインをTitleとBodyに分けるために2回ループ処理する必要があり、
一度しか呼び出せないプラグインをタブ表示することはできませんでしたが、

Rentafree.TabSelect()
の第四引数に移動先要素のidを設定すると、
display:block
する前に移動するようにしたため、
ループ一回でタブ表示のプラグインを作れるようになりました。

互換性は残していますが、
公式テンプレートの「中央寄せ1カラム」は新仕様に対応させました。

ちょっと説明分かりにくいと思いますが、
プラグインをタブ表示するテンプレートを作りたい場合は、
公式テンプレートの「中央寄せ1カラム」を参考にしてください。

グラフ機能公開しました

ブログのグラフ描画機能できたんで公開しました。
テンプレート変数&$HEAD;により公式JavaScriptが有効なブログで使えます。

<canvas>なのでIE8はダメです。

詳細はこちらを確認してください。

スクリプトのサイズが無圧縮で5KB（gzipで1.2KBほど）を超えてしまったので、
サイズがでかいんで、blog.jsと分離して、
ページ側で利用していない場合はロードしないようにしました。

円グラフは簡単と思うが、
棒と折れ線はちょっと使いにくいかも・・・

折れ線グラフ

ブログの公式JavaScriptで機能が利用できます。（テンプレート変数&$HEAD;で利用できる）

<canvas>の描画ですので、
IE 9.0以降
Firefox 2.0以降
で表示されます。

スクリプトは、
ページ上に、data-canvas属性の設定された<canvas>要素があり、
対応したデータ用のclass属性を持つ要素が存在する場合にロードされます。

通常はブログ編集ページではスクリプトは実行できませんので、
投稿せずにテストする際は、別ページで、
http://js.rentafree.net/blog.js
をロードしてください。

↓サンプルコード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020806" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020806" data-id="0" data-type="graph-line" data-right="1" data-color="black" data-max="50" data-min="0" data-marker="3" data-value="30">30</td>
    <td class="graph-2012020806" data-id="1" data-type="graph-line" data-color="red" data-max="50" data-min="0" data-marker="3" data-value="25">25</td>
    <td> </td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020806" data-id="0" data-value="25">25</td>
    <td class="graph-2012020806" data-id="1" data-value="30">30</td>
    <td class="graph-2012020806" data-id="2" data-type="graph-line" data-left="1" data-color="blue" data-max="50" data-min="0" data-marker="3" data-value="5">5</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020806" data-id="0" data-value="20">20</td>
    <td class="graph-2012020806" data-id="1" data-value="35">35</td>
    <td class="graph-2012020806" data-id="2" data-value="10">10</td>
</tr>
<tr><th>4</th>
    <td> </td>
    <td class="graph-2012020806" data-id="1" data-value="25">25</td>
    <td class="graph-2012020806" data-id="2" data-value="15">15</td>
</tr>
</table>
</div>
</div>

↑サンプルコード↑
↓サンプル表示↓

	A	B	C
1	30	25
2	25	30	5
3	20	35	10
4		25	15

↑サンプル表示↑

<canvas>に設定するdata-canvas属性は、
描画する<canvas>とデータを関連付けるIDです。
同一ページに複数の描画領域が表示された際に重複すると別の<canvas>に描画されてしまうので、
永久に重複しないように日付を入れることをおすすめします。
2012年2月8日の6番目のグラフなので、"graph-2012020806"としました。
<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。

<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

折れ線グラフは通常複数の線を表示しますが、

data-id="0"
data-id="1"
data-id="2"

とdata-id属性をわけることにより、別グラフとして扱われます。
0からの連番で設定してください。
別のグラフを同じ<canvas>に表示する感じです。
data-id属性は折れ線グラフ以外にも有効なので、
棒グラフと折れ線グラフを同じ<canvas>に表示することもできます。
重なる場合はdata-idの大きい物で上書きされます。

同一data-idの一番目の要素を、

data-type="graph-line"

と設定すると折れ線グラフになります。

色は同一グラフで同じ色にしますので、同一data-idの一番目の要素に、

data-color="色"

と設定します。

省略した場合は黒です。

data-max="最大値" data-min="最小値"

上下の高さを揃えるために、
data-maxとdata-minを設定します。
折れ線グラフでは、
max<0及びmin>0が許可されます。

data-marker="3"

とすると点の位置に半径3pxの円が表示されます。

data-value="数値"

data-value属性は全ての要素に設定します。

もし、グラフを途中から始めたり途中で切りたい場合は、
同一data-idの最初の要素で、

data-left="数値"
data-right="数値"

を設定します。
数値に指定した分だけ、左又は右の項目が省略されます。
サンプルの場合は、
A-4、C-1が省略されていますが、
もしdata-leftとdata-rightが設定されない場合は4分割ではなく3分割のグラフになります。

棒グラフ

普通国債残高推移
<div style="border:1px solid;position:relative;height:350px">
<canvas data-canvas="graph-2012020802" width="300" height="300" style="position:absolute;top:20px;left:60px;border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:0px;left:0px;width:60px;font-size:15px">
<div style="position:absolute;top:15px;right:3px">[兆円]</div>
<div style="position:absolute;top:55px;right:3px">600</div>
<div style="position:absolute;top:98px;right:3px">500</div>
<div style="position:absolute;top:141px;right:3px">400</div>
</div>
<div style="position:absolute;top:323px;left:60px;font-size:15px;text-align:center">
<div style="position:absolute;left:0px;width:43px">2005</div>
<div style="position:absolute;left:43px;width:43px">2006</div>
<div style="position:absolute;left:86px;width:43px">2007</div>
<div style="position:absolute;left:129px;width:43px">2008</div>
<div style="position:absolute;left:171px;width:43px">2009</div>
<div style="position:absolute;left:214px;width:43px">2010</div>
<div style="position:absolute;left:257px;width:43px">2011</div>
</div>
<div style="position:absolute;top:50px;left:410px">
<table border>
<tr><th class="graph-2012020802" data-type="graph-bar" data-max="700" data-value="499,black">2005年</th><td>499兆円</td></tr>
<tr><th class="graph-2012020802" data-value="527,black">2006年</th><td>527兆円</td></tr>
<tr><th class="graph-2012020802" data-value="532,black">2007年</th><td>532兆円</td></tr>
<tr><th class="graph-2012020802" data-value="546,black">2008年</th><td>546兆円</td></tr>
<tr><th class="graph-2012020802" data-value="594,black">2009年</th><td>594兆円</td></tr>
<tr><th class="graph-2012020802" data-value="642,black">2010年</th><td>642兆円</td></tr>
<tr><th class="graph-2012020802" data-value="668,black">2011年</th><td>668兆円</td></tr>
</table>
</div>
</div>

↑サンプル１コード↑
↓サンプル１表示↓

普通国債残高推移

[兆円]

600

500

400

2005

2006

2007

2008

2009

2010

2011

2005年	499兆円
2006年	527兆円
2007年	532兆円
2008年	546兆円
2009年	594兆円
2010年	642兆円
2011年	668兆円

↑サンプル１表示↑

<canvas>に設定するdata-canvas属性は、
描画する<canvas>とデータを関連付けるIDです。
同一ページに複数の描画領域が表示された際に重複すると別の<canvas>に描画されてしまうので、
永久に重複しないように日付を入れることをおすすめします。
2012年2月8日の2番目のグラフなので、"graph-2012020802"としました。
<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。

<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

一番目の要素にだけ、

data-type="graph-bar"

を設定します。
対象<canvas>に入力する棒グラフのデータとなります。

data-max="700"

は、データの最大値（上端）の値を設定します。
この属性は必須ではなく、
今回のデータで省略した場合は668が上端となります。
同じように、
data-minで最低値（下端）を設定できます。
data-max<0又はdata-min>0の場合は0となります。
これらの設定も一番目の要素のみ有効です。

data-value属性には、

data-value="数値,色"

を設定します。

今回は左と下にラベルを付けていますが、
ラベル表示機能はありませんので、
上位要素を、position:relative;にして、
座標を計算して、position:absolute;で文字を表示しています。
今回は、上端が700下端が0なので、上下700分割。
左右は7項目なので7分割です。

棒の左右に余白ができますが、
余白の幅は、一番目の要素に、
data-margin属性を設定することで余白の幅を変更できます。
初期値は"0.1"で、
左右に1割余白を入れます。

↓サンプル２コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020803" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020803" data-type="graph-bar" data-value="30,black,0.0">30</td>
    <td class="graph-2012020803" data-value="25,red,0.1">25</td>
    <td class="graph-2012020803" data-value="35,blue,0.2">35</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020803" data-value="25,black,1.0">25</td>
    <td class="graph-2012020803" data-value="30,red,1.1">30</td>
    <td class="graph-2012020803" data-value="30,blue,1.2">30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020803" data-value="20,black,2.0">20</td>
    <td class="graph-2012020803" data-value="35,red,2.1">35</td>
    <td class="graph-2012020803" data-value="15,blue,2.2">15</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020803" data-value="25,black,3.0">25</td>
    <td class="graph-2012020803" data-value="40,red,3.1">40</td>
    <td class="graph-2012020803" data-value="5,blue,3.2">5</td>
</tr>
</table>
</div>
</div>

↑サンプル２コード↑
↓サンプル２表示↓

	A	B	C
1	30	25	35
2	25	30	30
3	20	35	15
4	25	40	5

↑サンプル２表示↑

３本の棒をまとめて４列表示するグラフです。
この場合は、

data-value="数値,色,位置"

と、
data-value属性の3番目のパラメータで棒の表示位置を指定します。
この値は省略した場合は0からの正数連番となります。
正数部分が大きい分割の左からの位置で、一番左が0です。
少数部分は、小さい分割の左からの位置で一番左が0です。

↓サンプル３コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020804" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th><th>C</th></tr>
<tr><th>1</th>
    <td class="graph-2012020804" data-type="graph-bar" data-direction="1" data-value="30,black,0.0">30</td>
    <td class="graph-2012020804" data-value="25,red,0.1">25</td>
    <td class="graph-2012020804" data-value="35,blue,0.2">35</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020804" data-value="25,black,1.0">25</td>
    <td class="graph-2012020804" data-value="30,red,1.1">30</td>
    <td class="graph-2012020804" data-value="30,blue,1.2">30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020804" data-value="20,black,2.0">20</td>
    <td class="graph-2012020804" data-value="35,red,2.1">35</td>
    <td class="graph-2012020804" data-value="15,blue,2.2">15</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020804" data-value="25,black,3.0">25</td>
    <td class="graph-2012020804" data-value="40,red,3.1">40</td>
    <td class="graph-2012020804" data-value="5,blue,3.2">5</td>
</tr>
</table>
</div>
</div>

↑サンプル３コード↑
↓サンプル３表示↓

	A	B	C
1	30	25	35
2	25	30	30
3	20	35	15
4	25	40	5

↑サンプル３表示↑

サンプル２を横向きにしたグラフです。
サンプル２の一番目のデータに、

data-direction="1"

と設定しました。

別領域への描画なので、
data-canvas属性とclass属性は変更しています。

↓サンプル４コード↓

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020805" width="300" height="300" style="border:1px solid">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th> </th><th>A</th><th>B</th></tr>
<tr><th>1</th>
    <td class="graph-2012020805" data-type="graph-bar" data-max="50" data-min="-50" data-direction="1" data-value="30,black,0.0">30</td>
    <td class="graph-2012020805" data-value="-25,red,0.0">-25</td>
</tr>
<tr><th>2</th>
    <td class="graph-2012020805" data-value="25,black,1.0">25</td>
    <td class="graph-2012020805" data-value="-30,red,1.0">-30</td>
</tr>
<tr><th>3</th>
    <td class="graph-2012020805" data-value="20,black,2.0">20</td>
    <td class="graph-2012020805" data-value="-35,red,2.0">-35</td>
</tr>
<tr><th>4</th>
    <td class="graph-2012020805" data-value="25,black,3.0">25</td>
    <td class="graph-2012020805" data-value="-40,red,3.0">-40</td>
</tr>
</table>
</div>
</div>

↑サンプル４コード↑
↓サンプル４表示↓

	A	B
1	30	-25
2	25	-30
3	20	-35
4	25	-40

↑サンプル４表示↑

data-min<0かつ、data-max>0の場合は0の位置に線が出ます。
今回は、

data-max="50" data-min="-50"

としています。
縦表示でも同様です。

また、棒の表示位置を指定して、同じ列に左右に表示しています。

円グラフ

<div style="position:relative;height:300px">
<canvas data-canvas="graph-2012020801" width="300" height="300">
<canvas>対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<div class="graph-2012020801" data-type="graph-circle" data-value="37.45,blue" style="color:blue">Internet Explorer (37.45%)</div>
<div class="graph-2012020801" data-value="28.4,green" style="color:green">Google Chrome (28.40%)</div>
<div class="graph-2012020801" data-value="24.78,orange" style="color:orange">Firefox (24.78%)</div>
<div class="graph-2012020801" data-value="6.62,purple" style="color:purple">Safari (6.62%)</div>
<div class="graph-2012020801" data-value="1.95,red" style="color:red">Opera (1.95%)</div>
<div class="graph-2012020801" data-value="0.8,black">その他 (0.80%)</div>
</div>
</div>

↑サンプルコード↑
↓サンプル表示↓

Internet Explorer (37.45%)

Google Chrome (28.40%)

Firefox (24.78%)

Safari (6.62%)

Opera (1.95%)

その他 (0.80%)

↑サンプル表示↑

<canvas>に設定するdata-canvas属性は、
描画する<canvas>とデータを関連付けるIDです。
同一ページに複数の描画領域が表示された際に重複すると別の<canvas>に描画されてしまうので、
永久に重複しないように日付を入れることをおすすめします。
2012年2月8日の1番目のグラフなので、"graph-2012020801"としました。
<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。

<div class="graph-2012020801" data-type="graph-circle" data-value="37.45,blue" style="color:blue">Internet Explorer (37.45%)</div>
<div class="graph-2012020801" data-value="28.4,green" style="color:green">Google Chrome (28.40%)</div>
<div class="graph-2012020801" data-value="24.78,orange" style="color:orange">Firefox (24.78%)</div>
<div class="graph-2012020801" data-value="6.62,purple" style="color:purple">Safari (6.62%)</div>
<div class="graph-2012020801" data-value="1.95,red" style="color:red">Opera (1.95%)</div>
<div class="graph-2012020801" data-value="0.8,black">その他 (0.80%)</div>

<canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。

一番目の要素にだけ、

data-type="graph-circle"

を設定します。
対象<canvas>に入力する円グラフのデータとなります。

data-value属性には、

data-value="数値,色"

を設定します。
全てのデータの合計値が360度となります。

Sun	Mon	Tue	Wed	Thu	Fri	Sat
			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