管理人ブログ
無料ブログ「rentafree.net」の管理人ブログ

QRコード生成機能

文字列をQRコード化して<canvas>で描画する機能を用意しました。
公式JavaScriptの機能として利用できます。

使い方

<canvas data-qr="http://master.rentafree.net/"></canvas>

data-qr属性のある<canvas>タグが存在すると、公式JavaScriptのonloadイベントの際にQRコード生成スクリプトがロードされます。
QRコード生成スクリプトがロードされると、data-qr属性のある<canvas>にQRコードを描画します。
対象<canvas>のdata-xxx属性でパラメータを指定します。
属性
説明
data-qr
属性値がQRコード化する文字列となります。
data-mode
0=数字,1=英数字,2=8bit （省略時は0）
コード化する文字列に非対応文字が含まれる場合は加算されます。
値が少ないほど、同じサイズのQRに入れられる文字数が増えます。
QRコードの英数字モードは小文字に対応していませんが、判定時には小文字も対象にして英数字モードが確定したら大文字変換を行っています。
英小文字を表示させたい場合は8bitモードを明示的に指定してください。
英数字モードは英数字以外に「 」「$」「%」「*」「+」「-」「.」「/」「:」に対応しています。
URLはほとんどの場合は英数字モードで問題ありませんが、大文字と小文字を区別するアドレスで問題が生じる可能性などが考えられるので8bitのほうが良いかもしれません。
data-ver
1から40までの整数 （省略時は1）
QRコードの型番（大きさ）で、1辺のマス数は「型番*4+17」となります。
データが入りきらない場合は加算されます。
大きいほど容量（文字数）が増えますが、40型近くなるとカメラでの読み取りが困難なほどの大きさになります。
data-lv
0=M,1=L,2=H,3=Q （省略時は1、LMQHかlmqhの英字1文字での指定も可）
誤り訂正レベルで、訂正レベルの強さは「L<M<Q<H」の順でLが最弱です。
Lがもっともデータ容量（文字数）が多くなりますが、リーダーで解読できない可能性が高くなります。
data-mask
0から7までの整数 （省略時はundefined）
QRコードではマスク処理により内部的に8種類のパターンが生成され最適なパターンが出力されます。
このパラメータを省略した場合は規定の計算式で最適なパターンが出力されますが、0から7までの数値で指定することが可能です。
最悪なパターンが出力されたとしても、読み取りに影響するようなことは無いと思います。
data-px
整数 （省略時は3）
1マスの大きさ（px）となります。
1pxだと細かすぎて読み取りにくいと思います。

問い合わせ

標準の問い合わせ方法を記載したページへのリンクを表示します。
標準の問い合わせ方法とは、公式サイトの問い合わせフォームへの誘導です。

見出し 設定している場合は見出しを表示します。（テンプレート、設置位置によっては設定しても表示されません。）
リンクテキスト
 リンクテキストを設定します。初期状態では"問い合わせ"と表示されます。

このプラグインは標準の問い合わせ方法を記載した、
http://www.rentafree.net/html/sitecontact.html
へのリンクを表示します。
このプラグインを使わずフリーエリア等でリンクを作成しても問題ありませんが、
その場合はURLが変更される可能性に注意してください。
フリーエリアでリンクを作成する場合は、
テンプレート変数 &$Contact; で標準の問い合わせ方法を記載したページのURLが出力できます。

このプラグインはブログ作成時に自動的に 位置:1 順位：255 に挿入されます。
プラグインを削除することは可能ですが、
問題のある情報が配信されてしまった際にサイト閲覧者が連絡先がわからないと危険ですので、
その場合はサイト閲覧者がわかりやすい位置に、
何らかの連絡方法を用意するか、連絡方法を記載したページへのリンクを設置するようお願いします。

このプラグインは、公式サイトの問い合わせフォームへの誘導ですが、
サイト管理者へ直接連絡が行くようにしていただけるなら、その方が好ましいです。

折れ線グラフ

ブログの公式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">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th>&nbsp;</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>&nbsp;</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>&nbsp;</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>
↑サンプルコード↑
↓サンプル表示↓
<canvas>対応ブラウザで閲覧してください。
 ABC
1 30 25  
2 25 30 5
3 20 35 10
4   25 15
↑サンプル表示↑

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

<table border>
<tr><th>&nbsp;</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>&nbsp;</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>&nbsp;</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>
<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分割のグラフになります。

棒グラフ

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

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

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

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


↓サンプル１コード↓
普通国債残高推移
<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">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</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>
↑サンプル１コード↑
↓サンプル１表示↓
普通国債残高推移
<canvas>対応ブラウザで閲覧してください。
[兆円]
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="graph-2012020802" width="300" height="300"></canvas>
<canvas>に設定するdata-canvas属性は、
描画する<canvas>とデータを関連付けるIDです。
同一ページに複数の描画領域が表示された際に重複すると別の<canvas>に描画されてしまうので、
永久に重複しないように日付を入れることをおすすめします。
2012年2月8日の2番目のグラフなので、"graph-2012020802"としました。
<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。

<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>
<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">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th>&nbsp;</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>
↑サンプル２コード↑
↓サンプル２表示↓
<canvas>対応ブラウザで閲覧してください。
 ABC
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">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th>&nbsp;</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>
↑サンプル３コード↑
↓サンプル３表示↓
<canvas>対応ブラウザで閲覧してください。
 ABC
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">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</canvas>
<div style="position:absolute;top:30px;left:350px">
<table border>
<tr><th>&nbsp;</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>
↑サンプル４コード↑
↓サンプル４表示↓
<canvas>対応ブラウザで閲覧してください。
 AB
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"
としています。
縦表示でも同様です。

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

円グラフ

ブログの公式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-2012020801" width="300" height="300">
&lt;canvas&gt;対応ブラウザで閲覧してください。
</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>
↑サンプルコード↑
↓サンプル表示↓
<canvas>対応ブラウザで閲覧してください。
Internet Explorer (37.45%)
Google Chrome (28.40%)
Firefox (24.78%)
Safari (6.62%)
Opera (1.95%)
その他 (0.80%)
↑サンプル表示↑

<canvas data-canvas="graph-2012020801" width="300" height="300"></canvas>
<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度となります。





公式JavaScript

テンプレート変数&$HEAD;により、
http://js.rentafree.net/blog.js
がロードされ、機能が利用できます。

&$HEAD;
は<head>内に置いてください。
必須ではありません。

現在提供される機能は、
  • コメントフォームのスパム投稿防止
  • コメントフォームのクッキー対応
  • コメントフォームの二重投稿防止
  • タブ
  • 画像遅延ロード
  • 画像ポップアップ
  • グラフ描画
  • QRコード
です。

コメント系機能は全ての公式テンプレートに実装されています。
タブ機能はタブ機能付きの公式テンプレートに実装されています。
公式テンプレートをサンプルコードとしてください。


コメントフォーム関連
コメント投稿フォームの<form>を、
<form action="http://invalid/" method="post" onsubmit="return(Rentafree.BlogCommentSubmit(this))">
と、onsubmitでスクリプトを実行することで機能が利用できます。

submit時の処理は、
1. 投稿中フラグを立てて二重送信をできなくする。
2. action属性を無効アドレスから正規アドレスに変換する。（スパム防止）
3. 名前とURLの<input>要素の内容をクッキーに保存。
となります。

クッキー関連機能を利用するには、名前とURLの<input>要素は、
<input class="CommentFormName" name="name">
<input class="CommentFormUrl" name="url">
と、class属性をつける必要があります。
保存されているクッキーは、
window.onload時に対応するクラス名の<input>に設定されます。


スパム対策の強化でコメント本文の<textarea>へのフォーカスが行われなかった場合コメント投稿が受理されなくなりました。
コメント本文の<textarea>はclass属性を"CommentFormComment"に設定してください。


タブ機能
クリックで表示領域を切り替える機能を提供します。

基本的にはタブUIを簡単に作るためのものですが、
タブでなく、折り畳み領域を作ることもできます。


[書式]
Rentafree.TabSelect('タブのid','対応する領域のid','アクティブタブに適用するclass','表示する領域の移動先id')


タブにはid属性とclass属性をつけて、表示する領域にもid属性をつける必要があります。

基本的にはタブのonclickイベントでRentafree.TabSelectを呼び出します。


Rentafree.TabSelect()が呼び出されると、
アクティブなタブがある場合は、アクティブタブのclass属性を元に戻し、アクティブな表示領域をdisplay:noneにし、
第四引数が設定されている場合は第二引数で指定されたidの要素を第四引数の要素内に移動し、
第一引数で指定されたidの要素のclass属性を第三引数の値に変更し、
第二引数で指定されたidの要素をdisplay:blockにします。
アクティブなタブがクリックされた場合は閉じます。

第三引数の値が空（第三引数を省略）だと、
第二引数表示のみ変更し、それ以外の処理は省略します。
タブではなく折り畳み領域に利用する場合は、第三引数を省略してください。


画像遅延ロード
data-lazy属性のついた<img>要素のHTML上端からの位置と、
ブラウザの表示領域高さ＋スクロール量を比較し、
対象画像が表示範囲内ならsrc属性をdata-lazy属性の値に変換し、
data-lazy属性を削除します。

簡単に言うと、
<img>のsrc属性には容量の小さい単一画像アドレスを設定し、
代わりにdata-lazy属性に表示したい画像のアドレスを設定し、
スクロールによりブラウザ表示領域内に入った場合に画像を変換します。

下の方の画像はスクロールされるまで読み込まれなくなるため、
画像が多いページで転送量等が軽減できます。

この機能を利用する場合は、
対象の<img>要素には、CSSのheightで高さを設定してください。
height未設定だと、ロード前の画像の高さは0pxなので、かなり下まで読み込まれてしまいます。

容量の小さい単一画像は、
http://js.rentafree.net/1x1.png
をお使いください。


ブログの記事編集ページの、
「画像:領域外画像を読み込まない」
をチェックして投稿した場合、
自動的に投稿する記事内の全ての<img>要素がこの機能を使うように変換されます。
投稿済みの記事の編集ページではロード時に逆変換されます。
CSSでheightが設定されてない場合は自動設定されます。


画像ポップアップ
data-popup属性のついた<img>要素がある場合、
自動的にクリックでポップアップ表示（拡大表示）されるようになります。
data-popup属性にはポップアップ表示する画像のURLを設定してください。

IE 8.0以下ではポップアップ表示せずに新規タブ（新規ウインドウ）で開きます。

ブラウザ表示領域をオーバーする場合は縮小されます。

画像にalt属性がある場合は下に表示します。

背景は透過率30%の黒ですが、CSSで、
.RentafreeImagePopupBG{
   background-color:rgba(255,255,255,0.7)!important;
}
の様に、!importantをつけてclass="RentafreeImagePopupBG"に設定すれば強制できます。
rgba()は、
rgba(赤,緑,青,透明度)
です。
透明度は、0で透明、1で不透明です。

サンプル


グラフ描画
簡単なグラフを表示するための機能です。
ラベル表示やマウスオーバーでポップアップなどはしません。

ブログで数値データを公開する際に、
グラフ表示があればいいが、画像を用意したりスクリプトを書くほどでもない場合にお使いください。

<canvas>の描画なので、IE8以下では表示できません。

詳細は以下を確認してください。


QRコード
文字列をQRコード化して表示する機能です。
<canvas>での描画となりますのでIE8以下では表示できません。

↓サンプル
<canvas data-qr="http://master.rentafree.net/"></canvas>

↑サンプル

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


ブラウザ対応表

ブログ管理ページのブラウザ対応表です。

公開ブログの対応ブラウザはテンプレート次第です。
（公式テンプレートなら、少なくともこのページに記載されているブラウザでの閲覧は全て可能です。）


PCブラウザ
ブラウザ名 (コア名)
バージョン
ステータス
説明
Firefox (Gecko)
85.0以上
推薦コンテキストメニューが独自UIとなります。
85.0未満対応
ブラウザ標準のコンテキストメニューに独自項目が追加されます。
11.0未満対応
タグ直接編集機能が利用できません。
8.0未満対応
コンテキストメニューが独自UIとなります。
4.0未満対応画像挿入機能からの画像アップロードができません。
3.0未満
非対応
ブログエディターが利用できません。
IE (Trident)
10.0以上
対応コンテキストメニューが独自UIとなります。
10.0未満
対応
コンテキストメニューが独自UIとなります。
画像挿入機能からの画像アップロードができません。
9.0未満
非対応
ブログエディターが利用できません。
Chrome (Blink)
28.0以上
対応コンテキストメニューが独自UIとなります。
バージョン28からBlinkとなります。（27まではWebKit）
4.0以上対応コンテキストメニューが独自UIとなります。
4.0未満
非対応ブログエディターが利用できません。
Safari (WebKit)3.1以上
対応コンテキストメニューが独自UIとなります。
3.1未満
非対応ブログエディターが利用できません。
Opera (Presto)15以上不明バージョン15から独自開発のPrestoではなくWebKitとなります。
他のWebkitブラウザと同じ対応状況になると思われます。
12以上対応コンテキストメニューが独自UIとなります。
12未満対応コンテキストメニューが独自UIとなります。
画像挿入機能からの画像アップロードができません。
9未満非対応ブログエディターが利用できません。
Pale Moon(Goanna)26以上
対応GoannaレンダリングエンジンがGeckoベースなので全ての機能に対応していると思われますが、マイナーブラウザなので推薦はしません。
26未満
不明
バージョン26未満はFirefoxベースです。

タッチパネル （モバイル）
ブラウザ名 (コア名)バージョン ステータス説明
Chrome (Webkit)
全バージョン
入力可能基本的にコンテキストメニューの拡張項目が出ません。
Opera (Presto)
14以上
不明バージョン14から独自開発のPrestoではなくWebkitとなります。
他のWebkitブラウザと同じ対応状況になると思われます。
12.10以上入力可能基本的にコンテキストメニューの拡張項目が出ません。
12.10未満
非対応ブログエディターが利用できません。
Firefox (Gecko)全バージョン
入力可能
基本的にコンテキストメニューの拡張項目が出ません。
Pale Moon(Goanna)全バージョン
入力可能基本的にコンテキストメニューの拡張項目が出ません。
Safari (Webkit)
不明未確認
 Apple系端末でのテストは行なっていません。
テキスト選択とコンテキストメニューの両立できるブラウザが存在しないため、
タッチパネル操作時はコンテキストメニューの拡張機能が無効化され機能が制限されます。


ブログの記事投稿ページでブラウザによる違いが生じます。
その他のページの機能はブラウザによる違いはほぼ発生しません。

エディタ上で右クリックした場合、独自のコンテキストメニュー（右クリックメニュー）を表示します。
ブラウザによってはコンテキストメニューの操作を阻止する設定ができますが、コンテキストメニューが表示されないと一部編集機能が利用できません。

ブログエディタ非対応ブラウザでも、ソースモード（HTML直接入力）で編集して投稿することは可能です。

画像アップロード機能非対応のブラウザでも、ファイルマネージャからのファイルアップロードは可能です。

IPアドレスが変わるとログインセッションが無効になります。
携帯電話に搭載されているブラウザはアクセス毎にIPアドレスが変わる可能性が高いので、通常の認証方法では要ログインページへのアクセスができない可能性が高いです。
その場合はSSLログインページにある「ワンタイム認証」機能を利用してください。

記載されていないブラウザのほとんどは、独自のレンダリングエンジンを持たず、上記ブラウザのいずれかのコアを利用しています。
その場合は、利用しているコアのブラウザと同じ挙動をします。

対応ブラウザで不具合がありましたら報告していただければ助かります。

管理ツールとブラウザ別動作

ブログの管理ツールに、
ブラウザによっては実装されていない機能をしようしているので、
ブラウザによっては管理ツールのフル機能が使用できません。

一部機能が使えない場合でも、
ほとんどのブラウザで利用可能なようには作ってあります。

ブラウザによって大きく動作が変わるのは、ブログ記事の編集ページです。
他のページでは、どのブラウザでもほとんど変わりません。
ただし、IE6については他のブラウザとCSSの仕様が大きく違うため、表示が崩れる箇所があるかもしれません。


ブログのエディターは、
HTMLのcontentEditableという機能を利用してJavaScriptで処理していますが、
その中で、主に、
window.addEventListener()が利用可能かどうか？
window.getSelection()が利用可能かどうか？
で処理を分けてあります。
両方共バージョン8以下のIEが利用不可で、他のブラウザはほぼ使えます。
IEについてもこの機能がIE9で実装されたので、IE9はIE以外のブラウザとほぼ同じ動作をします。


window.addEventListener()は、
ブログエディター内のHTMLでイベントによりスクリプトを実行しにくくするのに利用しています。
ブログ管理ページはwww.rentafree.netですので、
www.rentafree.net上のページでブラウザがプログラムを実行できるのはセキュリティー上好ましくありません。
window.addEventListener()が利用な可能なブラウザは、
イベントによるプログラムの実行を阻止しするため、
管理ページ上でのプログラムの実行が難しくなっています。
（ただし、全てのイベントを阻止できるわけではありません）
IE9についてはイベントでスクリプトを実効するのは難しくなっていますが、
全てのバージョンのIEに、挿入された<script>タグを実行できるというセキュリティーホールが存在するため、IEはおすすめしません。

これらは、得体のしれないHTMLコードを拾ってきてブログエディターに入力した際に問題が生じる可能性があります。
怪しいHTMLコードを拾ってきて、コードの内容を理解せずにブログに投稿する場合などは注意してください。


window.getSelection()は、
タグの挿入機能などで、エディターの選択範囲を置換するのに利用しています。
バージョン8以下のIEでは使えない機能ですが、
代わりにdocument.selectionを利用して置換しています。
タグの挿入機能自体は利用可能に作られていますが、
バージョン8以下のIEでは、他のブラウザと挙動が変わります。


ブログエディターで利用している、contentEditableでは、
Enterキーにより改行が入力された場合、
Firefoxでは<br>が挿入されますが、
IE = <p>
Opera = <p>
Google Chrome = <div>
Safari = <div>
で一行囲むことにより改行風になります。
普通は改行は<br>で行いたいと思いますので、Firefoxのみが推薦ブラウザとなります。
Firefox以外のブラウザ（Safari以外）でも、
Enterではなく、Shift+Enterだと<br>で改行されます。


ブログエディター以外に、
ブログ記事編集画面の画像挿入機能の画像アップロードに、
window.FormData()という機能を利用しています。
これは実装されていないブラウザが多いです。
Firefoxだと4.0から実装されている機能です。
Google ChromeとSafariはFirefoxよりも前から実装されています。
IE、Operaは利用不可です。

画像アップロード機能が利用できない場合は、
アップロードボタンを押した際に、
「このページからのアップロードができないブラウザです。」
と表示されます。
その場合でも、ファイルマネージャからのファイルアップロードは可能ですので、
ファイルマネージャから画像ファイルのアップロードを行ってください。


ブラウザ別の対応表
ブラウザ名
バージョン
ステータス
説明
Firefox4.0以上推薦
すべての機能が利用可能で推薦ブラウザです。
3.x対応画像挿入機能からの画像アップロードができません。
3.0未満
非対応
ブログエディターが利用できません。
画像挿入機能からの画像アップロードができません。
IE
9.0
対応
画像挿入機能からの画像アップロードができません。
Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
8.0と7.0
対応
画像挿入機能からの画像アップロードができません。
タグ挿入時の動作が他のブラウザと違います。
Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
6.0以下
非対応
表示が崩れます。
Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
Google Chrome
-
対応
古くなければ全ての機能が利用可能ですが、
Enterキー入力による改行が<div>となります。（Shift+Enterで<br>）
Safari
-
対応
古くなければ全ての機能が利用可能ですが、
Enterキー入力による改行が<div>となります。
Opera
-
対応
画像挿入機能からの画像アップロードができません。
Enterキー入力による改行が<p>となります。（Shift+Enterで<br>）
Konqueror
-
非対応
ブログエディターが利用できません。
画像挿入機能からの画像アップロードができません。

カテゴリ最新記事

記事の所属するカテゴリの最新記事の一覧を表示するプラグインです。
カテゴリが設定されている記事ページでのみ有効です。

設定項目
見出し プラグイン全体の見出し。（テンプレート、設置位置によっては設定しても表示されません。）
最大表示数 一覧の最大表示数。
見出し書式
 一覧のヘッダ書式。


最大表示数は10件までです。

見出し書式は、
&$NAME;を記事のカテゴリ名に置換します。

現在表示中の記事は除外されます。

ボタン:Google +1

Googleの「+1」ボタンを表示するプラグインです。
サイズ等のパラメータは標準です。

設定項目はありません。


このプラグインは記事ページでのみ表示されます。
リストページでは表示されません。

このプラグインはサイドバーではなく記事下への表示を想定しています。
公式テンプレートの場合、
位置=4
位置=5
のどちらかにプラグインを設置すると記事下に表示されます。

プラグイン追加時は初期状態で「位置=4」となります。