テンプレート変数&$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>
↑サンプル
機能の詳細は
こちらを確認してください。