文字列をQRコード化して<canvas>で描画する機能を用意しました。公式JavaScriptの機能として利用できます。data-qr="http://master.rentafree.net/"></canvas>data-qr属性のある<canvas>タグが存在すると、公式JavaScriptのonloadイベントの際にQRコード生成スクリプトがロードされます。QRコード生成スクリプトがロードされると、data-qr属性のある<canvas>にQRコードを描画します。対象<canvas>のdata-xxx属性でパラメータを指定します。説明data-qr属性値がQRコード化する文字列となります。(省略時は0)コード化する文字列に非対応文字が含まれる場合は加算されます。値が少ないほど、同じサイズのQRに入れられる文字数が増えます。QRコードの英数字モードは小文字に対応していませんが、判定時には小文字も対象にして英数字モードが確定したら大文字変換を行っています。英小文字を表示させたい場合は8bitモードを明示的に指定してください。」「$」「%」「*」「+」「-」「.」「/」「:」に対応しています。URLはほとんどの場合は英数字モードで問題ありませんが、大文字と小文字を区別するアドレスで問題が生じる可能性などが考えられるので8bitのほうが良いかもしれません。(省略時は1)QRコードの型番(大きさ)で、1辺のマス数は「型番*4+17」となります。データが入りきらない場合は加算されます。大きいほど容量(文字数)が増えますが、40型近くなるとカメラでの読み取りが困難なほどの大きさになります。(省略時は1、LMQHかlmqhの英字1文字での指定も可)誤り訂正レベルで、訂正レベルの強さは「L<M<Q<H」の順でLが最弱です。Lがもっともデータ容量(文字数)が多くなりますが、リーダーで解読できない可能性が高くなります。(省略時はundefined)QRコードではマスク処理により内部的に8種類のパターンが生成され最適なパターンが出力されます。このパラメータを省略した場合は規定の計算式で最適なパターンが出力されますが、0から7までの数値で指定することが可能です。最悪なパターンが出力されたとしても、読み取りに影響するようなことは無いと思います。(省略時は3)1マスの大きさ(px)となります。1pxだと細かすぎて読み取りにくいと思います。Comment(1)問い合わせ標準の問い合わせ方法を記載したページへのリンクを表示します。標準の問い合わせ方法とは、公式サイトの問い合わせフォームへの誘導です。設定している場合は見出しを表示します。(テンプレート、設置位置によっては設定しても表示されません。)リンクテキストリンクテキストを設定します。初期状態では"問い合わせ"と表示されます。このプラグインは標準の問い合わせ方法を記載した、http://www.rentafree.net/html/sitecontact.htmlへのリンクを表示します。このプラグインを使わずフリーエリア等でリンクを作成しても問題ありませんが、その場合はURLが変更される可能性に注意してください。標準の問い合わせ方法を記載したページのURLが出力できます。何らかの連絡方法を用意するか、連絡方法を記載したページへのリンクを設置するようお願いします。このプラグインは、公式サイトの問い合わせフォームへの誘導ですが、サイト管理者へ直接連絡が行くようにしていただけるなら、その方が好ましいです。Comment(0)折れ線グラフブログの公式JavaScriptで機能が利用できます。2.0以降で表示されます。対応したデータ用のclass属性を持つ要素が存在する場合にロードされます。投稿せずにテストする際は、別ページで、http://js.rentafree.net/blog.jsをロードしてください。solid">&lt;canvas&gt;対応ブラウザで閲覧してください。↓サンプル表示↓<canvas>対応ブラウザで閲覧してください。描画する<canvas>とデータを関連付けるIDです。永久に重複しないように日付を入れることをおすすめします。2012年2月8日の6番目のグラフなので、"graph-2012020806"としました。<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。data-value="15">15</td></tr></table><canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。折れ線グラフは通常複数の線を表示しますが、data-id="0"data-id="1"data-id="2"とdata-id属性をわけることにより、別グラフとして扱われます。0からの連番で設定してください。別のグラフを同じ<canvas>に表示する感じです。棒グラフと折れ線グラフを同じ<canvas>に表示することもできます。重なる場合はdata-idの大きい物で上書きされます。同一data-idの一番目の要素を、data-type="graph-line"と設定すると折れ線グラフになります。色は同一グラフで同じ色にしますので、同一data-idの一番目の要素に、data-color="色"と設定します。省略した場合は黒です。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分割のグラフになります。Comment(0)棒グラフブログの公式JavaScriptで機能が利用できます。2.0以降で表示されます。対応したデータ用のclass属性を持つ要素が存在する場合にロードされます。投稿せずにテストする際は、別ページで、http://js.rentafree.net/blog.jsをロードしてください。solid">&lt;canvas&gt;対応ブラウザで閲覧してください。<canvas>対応ブラウザで閲覧してください。描画する<canvas>とデータを関連付けるIDです。永久に重複しないように日付を入れることをおすすめします。2012年2月8日の2番目のグラフなので、"graph-2012020802"としました。<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。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:absolute;で文字を表示しています。今回は、上端が700下端が0なので、上下700分割。左右は7項目なので7分割です。余白の幅は、一番目の要素に、data-margin属性を設定することで余白の幅を変更できます。左右に1割余白を入れます。solid">&lt;canvas&gt;対応ブラウザで閲覧してください。↓サンプル2表示↓<canvas>対応ブラウザで閲覧してください。5↑サンプル2表示↑3本の棒をまとめて4列表示するグラフです。この場合は、data-value="数値,色,位置"と、data-value属性の3番目のパラメータで棒の表示位置を指定します。この値は省略した場合は0からの正数連番となります。正数部分が大きい分割の左からの位置で、一番左が0です。少数部分は、小さい分割の左からの位置で一番左が0です。solid">&lt;canvas&gt;対応ブラウザで閲覧してください。↓サンプル3表示↓<canvas>対応ブラウザで閲覧してください。5↑サンプル3表示↑サンプル2を横向きにしたグラフです。サンプル2の一番目のデータに、data-direction="1"と設定しました。別領域への描画なので、data-canvas属性とclass属性は変更しています。solid">&lt;canvas&gt;対応ブラウザで閲覧してください。↓サンプル4表示↓<canvas>対応ブラウザで閲覧してください。-40↑サンプル4表示↑data-min<0かつ、data-max>0の場合は0の位置に線が出ます。data-min="-50"としています。棒の表示位置を指定して、同じ列に左右に表示しています。Comment(0)円グラフブログの公式JavaScriptで機能が利用できます。2.0以降で表示されます。対応したデータ用のclass属性を持つ要素が存在する場合にロードされます。投稿せずにテストする際は、別ページで、http://js.rentafree.net/blog.jsをロードしてください。height="300">&lt;canvas&gt;対応ブラウザで閲覧してください。↓サンプル表示↓<canvas>対応ブラウザで閲覧してください。描画する<canvas>とデータを関連付けるIDです。永久に重複しないように日付を入れることをおすすめします。2012年2月8日の1番目のグラフなので、"graph-2012020801"としました。<canvas>内に文字列を入れた場合、非対応ブラウザで表示されます。(0.80%)</div><canvas>のdata-canvas属性と同一のclass属性を持つ要素が全てグラフのデータとなります。一番目の要素にだけ、data-type="graph-circle"を設定します。対象<canvas>に入力する円グラフのデータとなります。data-value属性には、data-value="数値,色"を設定します。全てのデータの合計値が360度となります。Comment(0)公式JavaScriptテンプレート変数&$HEAD;により、http://js.rentafree.net/blog.jsがロードされ、機能が利用できます。&$HEAD;は<head>内に置いてください。現在提供される機能は、コメントフォームのスパム投稿防止コメントフォームのクッキー対応コメントフォームの二重投稿防止タブ画像遅延ロード画像ポップアップグラフ描画QRコードです。コメント系機能は全ての公式テンプレートに実装されています。タブ機能はタブ機能付きの公式テンプレートに実装されています。公式テンプレートをサンプルコードとしてください。onsubmit="return(Rentafree.BlogCommentSubmit(this))">と、onsubmitでスクリプトを実行することで機能が利用できます。投稿中フラグを立てて二重送信をできなくする。action属性を無効アドレスから正規アドレスに変換する。名前とURLの<input>要素の内容をクッキーに保存。name="url">と、class属性をつける必要があります。保存されているクッキーは、window.onload時に対応するクラス名の<input>に設定されます。スパム対策の強化でコメント本文の<textarea>へのフォーカスが行われなかった場合コメント投稿が受理されなくなりました。コメント本文の<textarea>はclass属性を"CommentFormComment"に設定してください。タブ機能クリックで表示領域を切り替える機能を提供します。基本的にはタブUIを簡単に作るためのものですが、タブでなく、折り畳み領域を作ることもできます。[書式]Rentafree.TabSelect('タブのid','対応する領域のid','アクティブタブに適用するclass','表示する領域の移動先id')タブにはid属性とclass属性をつけて、表示する領域にもid属性をつける必要があります。基本的にはタブのonclickイベントでRentafree.TabSelectを呼び出します。第二引数で指定されたidの要素をdisplay:blockにします。アクティブなタブがクリックされた場合は閉じます。第二引数表示のみ変更し、それ以外の処理は省略します。タブではなく折り畳み領域に利用する場合は、第三引数を省略してください。対象画像が表示範囲内ならsrc属性をdata-lazy属性の値に変換し、data-lazy属性を削除します。代わりにdata-lazy属性に表示したい画像のアドレスを設定し、スクロールによりブラウザ表示領域内に入った場合に画像を変換します。画像が多いページで転送量等が軽減できます。対象の<img>要素には、CSSのheightで高さを設定してください。height未設定だと、ロード前の画像の高さは0pxなので、かなり下まで読み込まれてしまいます。容量の小さい単一画像は、http://js.rentafree.net/1x1.pngをお使いください。自動的に投稿する記事内の全ての<img>要素がこの機能を使うように変換されます。投稿済みの記事の編集ページではロード時に逆変換されます。CSSでheightが設定されてない場合は自動設定されます。自動的にクリックでポップアップ表示(拡大表示)されるようになります。data-popup属性にはポップアップ表示する画像のURLを設定してください。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以下では表示できません。data-qr="http://master.rentafree.net/"></canvas>↑サンプル機能の詳細はこちらを確認してください。Comment(0)ブラウザ対応表ブログ管理ページのブラウザ対応表です。公開ブログの対応ブラウザはテンプレート次第です。(公式テンプレートなら、少なくともこのページに記載されているブラウザでの閲覧は全て可能です。コンテキストメニューが独自UIとなります。対応ブラウザ標準のコンテキストメニューに独自項目が追加されます。対応タグ直接編集機能が利用できません。対応コンテキストメニューが独自UIとなります。画像挿入機能からの画像アップロードができません。非対応ブログエディターが利用できません。コンテキストメニューが独自UIとなります。対応コンテキストメニューが独自UIとなります。画像挿入機能からの画像アップロードができません。非対応ブログエディターが利用できません。コンテキストメニューが独自UIとなります。バージョン28からBlinkとなります。コンテキストメニューが独自UIとなります。ブログエディターが利用できません。コンテキストメニューが独自UIとなります。ブログエディターが利用できません。バージョン15から独自開発のPrestoではなくWebKitとなります。他のWebkitブラウザと同じ対応状況になると思われます。コンテキストメニューが独自UIとなります。コンテキストメニューが独自UIとなります。画像挿入機能からの画像アップロードができません。ブログエディターが利用できません。GoannaレンダリングエンジンがGeckoベースなので全ての機能に対応していると思われますが、マイナーブラウザなので推薦はしません。不明バージョン26未満はFirefoxベースです。基本的にコンテキストメニューの拡張項目が出ません。バージョン14から独自開発のPrestoではなくWebkitとなります。他のWebkitブラウザと同じ対応状況になると思われます。基本的にコンテキストメニューの拡張項目が出ません。ブログエディターが利用できません。基本的にコンテキストメニューの拡張項目が出ません。基本的にコンテキストメニューの拡張項目が出ません。未確認Apple系端末でのテストは行なっていません。テキスト選択とコンテキストメニューの両立できるブラウザが存在しないため、タッチパネル操作時はコンテキストメニューの拡張機能が無効化され機能が制限されます。ブログの記事投稿ページでブラウザによる違いが生じます。その他のページの機能はブラウザによる違いはほぼ発生しません。エディタ上で右クリックした場合、独自のコンテキストメニュー(右クリックメニュー)を表示します。ブラウザによってはコンテキストメニューの操作を阻止する設定ができますが、コンテキストメニューが表示されないと一部編集機能が利用できません。ブログエディタ非対応ブラウザでも、ソースモード(HTML直接入力)で編集して投稿することは可能です。画像アップロード機能非対応のブラウザでも、ファイルマネージャからのファイルアップロードは可能です。IPアドレスが変わるとログインセッションが無効になります。携帯電話に搭載されているブラウザはアクセス毎にIPアドレスが変わる可能性が高いので、通常の認証方法では要ログインページへのアクセスができない可能性が高いです。その場合はSSLログインページにある「ワンタイム認証」機能を利用してください。記載されていないブラウザのほとんどは、独自のレンダリングエンジンを持たず、上記ブラウザのいずれかのコアを利用しています。その場合は、利用しているコアのブラウザと同じ挙動をします。対応ブラウザで不具合がありましたら報告していただければ助かります。Comment(0)管理ツールとブラウザ別動作ブログの管理ツールに、ブラウザによっては実装されていない機能をしようしているので、ブラウザによっては管理ツールのフル機能が使用できません。一部機能が使えない場合でも、ほとんどのブラウザで利用可能なようには作ってあります。ブラウザによって大きく動作が変わるのは、ブログ記事の編集ページです。他のページでは、どのブラウザでもほとんど変わりません。IE6については他のブラウザとCSSの仕様が大きく違うため、表示が崩れる箇所があるかもしれません。ブログのエディターは、HTMLのcontentEditableという機能を利用してJavaScriptで処理していますが、その中で、主に、window.addEventListener()が利用可能かどうか?window.getSelection()が利用可能かどうか?で処理を分けてあります。両方共バージョン8以下のIEが利用不可で、他のブラウザはほぼ使えます。IEについてもこの機能がIE9で実装されたので、IE9はIE以外のブラウザとほぼ同じ動作をします。window.addEventListener()は、ブログエディター内のHTMLでイベントによりスクリプトを実行しにくくするのに利用しています。ブログ管理ページはwww.rentafree.netですので、www.rentafree.net上のページでブラウザがプログラムを実行できるのはセキュリティー上好ましくありません。管理ページ上でのプログラムの実行が難しくなっています。全てのバージョンのIEに、挿入された<script>タグを実行できるというセキュリティーホールが存在するため、IEはおすすめしません。これらは、得体のしれないHTMLコードを拾ってきてブログエディターに入力した際に問題が生じる可能性があります。怪しいHTMLコードを拾ってきて、コードの内容を理解せずにブログに投稿する場合などは注意してください。window.getSelection()は、タグの挿入機能などで、エディターの選択範囲を置換するのに利用しています。代わりにdocument.selectionを利用して置換しています。タグの挿入機能自体は利用可能に作られていますが、バージョン8以下のIEでは、他のブラウザと挙動が変わります。<div>で一行囲むことにより改行風になります。普通は改行は<br>で行いたいと思いますので、Firefoxのみが推薦ブラウザとなります。Firefox以外のブラウザ(Safari以外)でも、Enterではなく、Shift+Enterだと<br>で改行されます。ブログエディター以外に、ブログ記事編集画面の画像挿入機能の画像アップロードに、window.FormData()という機能を利用しています。これは実装されていないブラウザが多いです。Firefoxだと4.0から実装されている機能です。ChromeとSafariはFirefoxよりも前から実装されています。IE、Operaは利用不可です。「このページからのアップロードができないブラウザです。その場合でも、ファイルマネージャからのファイルアップロードは可能ですので、ファイルマネージャから画像ファイルのアップロードを行ってください。推薦すべての機能が利用可能で推薦ブラウザです。画像挿入機能からの画像アップロードができません。非対応ブログエディターが利用できません。画像挿入機能からの画像アップロードができません。画像アップロードができません。Enterキー入力による改行が<p>となります。画像アップロードができません。タグ挿入時の動作が他のブラウザと違います。Enterキー入力による改行が<p>となります。Enterキー入力による改行が<p>となります。古くなければ全ての機能が利用可能ですが、Enterキー入力による改行が<div>となります。古くなければ全ての機能が利用可能ですが、Enterキー入力による改行が<div>となります。画像アップロードができません。Enterキー入力による改行が<p>となります。(Shift+Enterで<br>)Konqueror-非対応ブログエディターが利用できません。画像挿入機能からの画像アップロードができません。記事の所属するカテゴリの最新記事の一覧を表示するプラグインです。カテゴリが設定されている記事ページでのみ有効です。プラグイン全体の見出し。(テンプレート、設置位置によっては設定しても表示されません。