buena suerte!


Quicktags Plus - コメント欄にHTMLタグ機能を追加する方法。

先日コメント欄でHTMLタグを利用可能にする機能を導入しましたが、ご要望がございましたのでまだタグの変換部分が無理矢理で恥ずかしいんですが、javascriptを配布し導入方法を解説させて頂きます。

livedoor Blogに限らず、コメントにHTMLタグが使えないブログでHTMLテンプレートを直接編集できるブログでしたらどのサービスでもお使い頂けます。
※コメントにHTMLタグが効く所では元のJS QuickTagsや派生スクリプトをお使いになった方が良いと思います。

改造法などはとりあえず置いといて、設置方法を紹介させていただきます。動作については同梱しているhtmlファイルで確認できます。

では説明開始です。

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行目辺りにある項目をブログに合わせて設定します。

// (1)コメント全体のタグの id 属性
var commentAreaIdName = '';
// (2)コメント全体のタグ名
var commentAreaTag = 'div';
// (3)各コメントの class 属性
var commentBodyClassName = 'comments-body';

赤い所はコメントごとのclass名を入れてあげてください。
ライブドアでお使いの場合、この(3)の項目の設定だけでOKです。
※最近作られたライブドアのテンプレートをお使いならcomments-bodyではなく、commenttextと入力して保存してください。

ほかのサービスでお使いになる場合は同じようにclass名とあわせて設定してください。
(1), (2)の値も環境によって変化いたしますので適宜対応して下さい。

設定が終りましたら、サーバにスクリプトをアップロードしてください。
この時、ファイルをアップロードした先をどこかにコピーしておくと良いと思います。
アップロードが終了しましたら次の手順へ進みます。

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-jpshift_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の項目に記述しました。
スクリプトを見ればなんとなくわかって頂けるかと思いますので、知識のある方はどうぞ改造しちゃって下さい。
あと、使用方法の解説なども用意するつもりです。

スクリプト改版履歴

関連記事
Quicktags plusのバージョンを1.0.0Betaにアップしました。
コメント欄に簡易タグ機能を追加してみた。


11 Comment(s)

現在コメントを受け付けていません。

#1 AQ says at April 09, 2006 17:30

ありがとうございます。
さっそく、導入してみたいと思います。

導入後、またご連絡に来ますから、見てやって下さい。(^^)

PS. 私のわがままで、急遽、記事を作成していただき、ご足労おかけいたしました。m(_ _)m

#2 cie says at April 09, 2006 23:54

あ、ワガママなんていわないで下さい。[汗][汗]
正直言って、ちょっとは需要あるかなーなんて思って導入したので即AQさんが反応してくれたのは嬉しかったですよ。
反応のはやさにはビックリしましたけど。[きゃー]

あと、スクリプトの改良を少し進めまして、ボタンは表示させていませんがimgタグとaタグも隠しタグとして使用できるようになりました。
まだ実験段階ですし、今まで以上に強引な変換でかなり恥ずかしいので配布しているファイルをバージョンアップする予定はありません・・・

#3 らふぁえろ says at May 06, 2006 23:27

cieさん
はじめまして。
シンプルなデザインがとても気に入りFC2のテンプレートから使わせていただいてるのですが、
私の使い方が不味いのか、トラックバックが上手くできません。
対処法があれば教えて下さい。

#4 cie says at May 06, 2006 23:56

らふぁえろさんはじめまして。>>3
テンプレートのご利用ありがとうございます。

[strong]> トラックバックが上手くできません。[/strong]
うーんこれだけではなんとも言えません・・・

まず
・私のブログ(livedoor OR fc2)に対して届かないのか。
・そのほかたくさんあるブログに届かないのか。
というところがわからないのでなんとも・・・[しゅん]

うちのところだけで言えば英字のみのトラックバックのみ受け付け拒否しておりますが、言及なしは特に制限していませんよ。

よろしければもう少し詳しく教えてくださいませ。

#5 らふぁえろ says at May 07, 2006 12:04

お手数をおかけしております。m(__)m

私が試みている方法は以下の通りです。

管理画面から _甬遒竜事の管理 ◆’ぐ佞硫甬遒竜事の修正を選んで  一番下のトラックバック送信先にトラックバックしたい記事のアドレスをコピペして ぁ,修硫爾砲△詈歛犬箸靴討い泙后

トラックバックはFC2から他のFC2ブログ、楽天のブログと試してみたんですけど上手くいきませんでした。

先程、試しに他のテンプレートも読み込んで試してみたのですが、これも上手くいきませんでしたのでFC2に問題があるのかもしれません。

一度FC2に問い合わせてみます。
FC2の問題かも知れないのに、こんな書き込みして申し訳有りません。

#6 らふぁえろ says at May 07, 2006 13:43

お騒がしました。

問題解決しました。
いろいろ調べてみら、
本文にTB先のURLを入れなければならないというルールがあったようです。

FC2がトラックバックの仕方にこのことを記入しておいてくれたら、良かったんですけど。。。。

http://staff.blog1.fc2.com/blog-entry-136.html
(2月にこんなルールが出来てたようです。)

以後事前に調査を怠らないようにします。
m(__)m

#7 ぽんママ says at July 15, 2006 06:17

はじめまして
Quicktags Plusの設置を試みているのですがうまくいきません
教えていただけないでしょうか

コメントタグはちゃんと動いているのですが
quicktags_plus.cssが動いていないようなのです
ボタン内の色がでてきません

よろしくお願いします

#8 cie says at July 15, 2006 14:14

>>7
ぽんママさんはじめまして。

[strong]> quicktags_plus.cssが動いていないようなのです[/strong]
自動でCSSまでは読み込むようにはしておりません。
ですから以下のどちらかの方法を使ってCSSを適用させてあげてください。

[ul][li]quicktags_plus.cssをアップロードして直接<link>タグを使いファイルを読み込ませる。[/li][li]quicktags_plus.cssの内容をコピーしてテンプレのCSSのどこかへ貼る。[/li][/ul]
これで大丈夫なはずですよ。

#9 ひぃたん says at August 26, 2006 22:59

使わせていただきました[ひよこ]
初心者[芽]の私でも出来ました[ぽっ]

まずは、ご報告まで・・・[にこっ]

#10 Maron says at August 30, 2006 21:28

はじめまして。以前から「コメントにも[strong]タグ[/strong]が使えたら。。。[汗2]」と思っていた所に。。。
【コメント欄にHTMLタグ機能を追加する方法。】をしりました。

初心者[わかば]の私でも設置することが出来ました[さむあっぷ]
どうもアリガトウございました。

#11 cie says at September 01, 2006 22:00

>>10
Maronさんはじめまして。[くるっ]
うまく設置できたようでうれしいです。[きゃー]

4 Trackback(s)

現在トラックバックを受け付けていません。

#1 コメントにHTMLタグ機能 at July 10, 2006 14:15

コメントにHTMLタグ機能が使える"Quicktags Plus"に一目惚れっ前のblogのMovable Typeでは設定でコメントにHTMLタグを使う事が出来て..."JS QuickTags"を使っていたけど...Serene Bachでは、コメントにHTMLタグが...

#2 テンプレ変更 at July 21, 2006 00:08

久しぶりにテンプレを変更しました。…たぶん…まだ手直しが必要なところもあるデスが…それと同時に一気にいろいろカスタマもしたので忘れないようにメモ。プラグインの方は小粋空間さんの新着表示プラグイン(カ...