livedoor先日コメント欄でHTMLタグを利用可能にする機能を導入しましたが、ご要望がございましたのでまだタグの変換部分が無理矢理で恥ずかしいんですが、javascriptを配布し導入方法を解説させて頂きます。
livedoor Blogに限らず、コメントにHTMLタグが使えないブログでHTMLテンプレートを直接編集できるブログでしたらどのサービスでもお使い頂けます。
※コメントにHTMLタグが効く所では元のJS QuickTagsや派生スクリプトをお使いになった方が良いと思います。
改造法などはとりあえず置いといて、設置方法を紹介させていただきますね。
動作については当ブログのコメント欄か、同梱しているhtmlファイルで確認できます。
では説明開始です。
- 1. はじめにお読みください。
- 2. ダウンロードと設定とアップロードと。
- 3. 個別記事HTMLテンプレートの編集。
- 4. 個別記事ページの再構築と動作確認。
- 5. 使用するタグの増減や拡張タグ機能の設定。
- 6. 最後に。
Technorati Tags: blog, javascript, tag, quicktags, ブログ, コメント欄, カスタマイズ
1. はじめにお読みください。
このスクリプトはHTMLタグが使用できないブログのコメント欄で疑似タグを使い、HTMLタグ機能を実現するために作成されました。
Alex King氏のJS QuickTags(タグ挿入部)と、stroll氏のコメントにカスタマイズ絵文字入力機能(タグ変換部)を元に作成しています。
動作確認環境は
OS: WindowsXP
Browser: Firefox1.5.0.4, Opera9, Netscape8.1, InternetExplorer6
で確認しております。MacのIEやSafari, Caminoでの動作確認は取れておりません。
2006.11.23追記：MacOS 10.4.7、Opera 9.00、Safari 2.04、FireFox 2.0上で快適に動いているようです。(しいたけさん情報)
基本的にjavascriptファイルをアップロード出来る環境の方限定の方法ですので予めご了承下さいませ。
アップロードできない環境でもコメント欄のある個別記事ページのHTMLテンプレートに直接javascriptを書けば使えないこともありませんが余りお勧めはしません。
また、このスクリプトはLGPLの元での公開、配布となります。
ご使用に際し以下のような条件(と言ってもほぼ自由です)が設けられていますのでご注意ください。
- 個人利用・商用利用に限らず自由にご利用いただけます。
- 無保証ですので自己責任でお使いください。
- 改造や再配布はご自由にどうぞ。
- 改造後再配布するには元スクリプトに関する情報を載せて下さい。
- 再配布したものに関してもLGPLが適用されます。
#LGPLの考え方はこんな感じでよろしいのでしょうか。
#よくわからなかったので間違っていたらご指摘くださいませ。
ZipファイルはNorton AntiVirusでスキャン済みです。
2. ダウンロードと設定とアップロードと。
まずはじめに、こちらに用意したスクリプト(どちらも中身は同じです)をダウンロードしてください。
⇒DOWNLOAD (Quicktags Plus version 1.0.3b - EUC-JP)
⇒DOWNLOAD (Quicktags Plus version 1.0.3b - Shift_JIS)
※文字化けしてしまわれる方はShift_JISの方をご利用ください。
ダウンロードされましたら、解凍ソフトでZipファイルを解凍してください。
解凍すると「quicktags_plus」フォルダに「quicktags_plus.js」と「test.html」と「quicktags_plus.css」が作成されます。
※quicktags_plus.jsはスクリプト本体で、test.htmlとquicktags_plus.cssは使用例のようなものでブラウザで表示させれば実際に体感できます。
続いて「quicktags_plus.js」をテキストエディタで開いて、693行目辺りにある項目をブログに合わせて設定します。
// （１）コメント全体のタグの id 属性
var commentAreaIdName = '';
// （２）コメント全体のタグ名
var commentAreaTag = 'div';
// （３）各コメントの class 属性
var commentBodyClassName = 'comments-body';赤い所はコメントごとのclass名を入れてあげてください。
ライブドアでお使いの場合、この（３）の項目の設定だけでOKです。
※最近作られたライブドアのテンプレートをお使いならcomments-bodyではなく、commenttextと入力して保存してください。
ほかのサービスでお使いになる場合は同じようにclass名とあわせて設定してください。
（１）, （２）の値も環境によって変化いたしますので適宜対応して下さい。
設定が終りましたら、サーバにスクリプトをアップロードしてください。
この時、ファイルをアップロードした先をどこかにコピーしておくと良いと思います。
アップロードが終了しましたら次の手順へ進みます。
3. 個別記事HTMLテンプレートの編集。
ここからHTMLテンプレートの編集に入るわけですが、いつ失敗しても良いように必ず個別記事テンプレートのバックアップは取って置いてください。
管理メニューにアクセスして「カスタマイズ/管理」→「デザインの設定」→「カスタマイズ」と選択します。
次に表示された中から「個別記事ページ」のリンクをクリックして、個別記事ページテンプレートの編集画面を表示させます。
まず<head>〜</head>の間に<script>タグを挿入してQuicktags Plusのスクリプトを読み込ませます。
<script type="text/javascript" src="http://yourdomain.jp/quicktags_plus.js" charset="euc-jp"></script>
</head>このように</head>タグの直前に入力しするとわかりやすいと思います。
青文字の所はダウンロードしたファイルの漢字コードに合わせてeuc-jp、shift_jisと使い分けてください。
※スクリプトまでのURLは先ほどアップロードしたディレクトリまでのアドレスを入力してください。
つづきましてタグ挿入用ボタンをテキストエリアの上に表示させる為に関数を呼び出します。
HTMLテンプレートのコメントフォーム部に
<td><textarea id="text" name="body" rows="10" cols="50"></textarea></td>こような記述がございますので、ここに
<td>
<script type="text/javascript"><!--
edToolbar();
//--></script>
<textarea id="text" name="body" rows="10" cols="50"></textarea>
</td>このように入力してあげてください。
※テキストエリア下にボタンを表示させたい場合は赤文字部をtextareaタグの直後に入力してください。
さらにつづいて、テキストエリアの直後に
<td>
<script type="text/javascript"><!--
edToolbar();
//--></script>
<textarea id="text" name="body" rows="10" cols="50"></textarea>
<script type="text/javascript"><!--
var edCanvas = document.getElementById('text');
//--></script>
</td>このように入力してください。
青文字の所は紫文字(textareaのid)と必ずあわせて下さい。あわせないとボタンを押してもタグが挿入されません。
最後に疑似タグからHTMLタグへ変換させる為の関数を呼び出します。
タグの変換はページの読み込みの終わる最後の方に書いておきたいので</form>タグより下(もっと下でも)
</form>
</table>
<script type="text/javascript"><!--
changeCommentTags();
//--></script>この赤文字のように入力して下さい。
編集後、最後にページ下にある「保存する」ボタンを押して個別記事のテンプレートを保存してください。
4. 個別記事ページの再構築と動作確認。
ここまで編集が終わりましたら再構築させて動作確認させますが、全てを再構築すると時間が掛かってしまいます。
そこで管理メニューの「投稿したブログを編集する」からお好きな記事を選択して、何も編集せず「この内容で投稿する」ボタンを押して一つの記事だけを再構築させて下さい。
再構築が終了しましたら、再構築した記事を表示させてうまくタグが入力できるか確認してください。
入力が確認できれば実際にコメントを書き込んで疑似タグがうまく変換されているか確認してください。
どちらもきちんと動作することが確認できましたら、もう一度管理メニューの再構築から「すべてのページ」を選択してすべての個別記事を再構築させてください。
再構築が終了しましたら導入完了です。おつかれさまでした。
5. 使用するタグの増減や拡張タグ機能の設定
使用出来るタグを増やしたり減らしたりする方法を簡単にですが説明させていただきます。
「quicktags_plus.js」を開くと70行目くらいから
edButtons.push(
new edButton(
'ed_bold' // inputのid名
,'太' // inputのvalue部分
,'[strong]太字[/strong]' // inputのtitle部
,'[strong]' // 開始タグ
,'[/strong]' // 終了タグ(が無いものは必要なし)
,'' // オプション開始タグ(とくに必要なし)
,'' // オプション終了タグ(とくに必要なし)
,'b' // accesskeyの文字(無くても大丈夫)
,1 // ボタン表示フラグ(表示：1 非表示：0)
)
);このような記述が幾つか並んでいます。
この引用した部分、これが一つのタグ用配列の1セットになります。
現在20弱のタグがセットされていますが、減らす場合は表示フラグの数値を1から0にすると表示されなくなり変換もされなくなります。
また、上記の1セットをごっそり削除していただいてもOKです。
増やす場合にはこの間に
//----------------------- 使用するタグ設定ここから
ここに記述します
//---------------------- 使用するタグ設定ここまで
タグ1セットを追加します。
はじめの項目(上の例ではed_bold)の所と、4・5番目の項目(例の[strong]と[/strong])はほかのタグと同じにならないよう注意してながら追加していってください。
//----------------------- 使用するタグ設定ここから
〜
//---------------------- 使用するタグ設定ここまでの間へ、[>>]ボタンを押した後ボタンを表示させるタグは
//---------------------- 使用する拡張タグ設定ここから
〜
//---------------------- 使用する拡張タグ設定ここまでの間へタグの配列を移動させたりしてあげてください。
拡張タグを表示させない場合は、51行目あたりにある
// 拡張タグのONOFFフラグ 1ならON、0やそれ以外ならOFF
var exTagFlag = 1;こちらの赤文字の1を0に変更すれば拡張タグ機能は使えないようになります。
その際使用したいタグは全て拡張タグ設定より上に持っていってあげてください。
後はファイルを保存して、test.htmlでうまく動作するか確認してからアップロードしてください。
6. 最後に。
今の所、color, strong, em, u, del, big, small, blockquote, hr, img, a, h4, p, ul+li, span+style, p(左寄), p(中寄), p(右寄), pre+codeの19つのタグが使用できますが、スクリプトを改造して使用できるタグを増減させる事は出来ます。
画像タグを使用して不適切な画像が張られる可能性もありますので、ご利用の際は十分に注意してください。
3カラムなどの記事部分の幅が狭いデザインをお使いの場合、デザインが崩れてしまうことがあります。
その場合はCSSで適当に調節して下さい。
タグ変換部分がかなり強引にしておりますので、もしもっと簡単な変換方法などの情報がございましたらご連絡頂ければ嬉しいです。
ざっと書き上げたので説明が足りなかったり変な所があるかもしれませんので、質問や不具合などと合わせてコメントをお願いいたします。
今後の展開としては
変換の為にタグ設定しなくても使える様に。実装済み画像タグやリンクタグにも対応する。(強引にやれば出来ますが・・・)実装済み- タグの閉じ忘れチェックのような機能。
- もっとスマートなタグ変換。
- スペルチェック機能。
というような風に考えています。
改造法に関しては後日こちらに追記するか新たに記事を書かせて頂きます。
簡単な改造法を5の項目に記述しました。
スクリプトを見ればなんとなくわかって頂けるかと思いますので、知識のある方はどうぞ改造しちゃって下さい。
あと、使用方法の解説なども用意するつもりです。
スクリプト改版履歴
- 2006.10.22 versionを1.0.3bにアップ
- 2006.07.09 versionを0.9.2bにアップ
- 2006.05.14 versionを0.7.8にアップ
- 2006.04.13 versionを0.6.5にアップ
- 2006.04.09 version 0.5.5をはじめて公開
![cie.buena.suerte[at]gmail.com](http://rosea.jpn.org/gmail.png "cie.buena.suerte[at]gmail.com"){kind=small}
AQ Says...
#1 at April 09, 2006 17:30