top

リアルタイムでコメントをプレビュー

コメントのプレビュー(確認)がリアルタイムで出来るようにしてみました。

コメントの確認は文字の折り返し地点や全体のレイアウトの確認に頻繁に使ってます。1つのコメントに数回に渡って確認を続けることもざら。そのたびにいちいちコメントcgiを動かすのも面倒だったので、入力しながら同時に確認できるようにならないかなあと思っていました。今回、以下のサイト様を参考に導入することが出来たのでメモっときます。

stroll::blog : コメントプレビューを必要なときだけ実行するには?
やむやむ : コメント・プレビュー

stroll::blogさんのはjugem用らしいので、プレビュー本体部分はMT用に解説して下さっているやむやむさんのを、プレビューを必要なときだけ実行の部分はstroll::blogさんより使わせていただきました。ありがとうございました!

1.コメントのtextareaにプレビュー用の記述を追加
コメントのtextareaに以下の赤字の部分を追加します。

<textarea id="comment-text" name="text" rows="10" cols="30" onkeyup="doCommentPreview()" onblur="doCommentPreview()"></textarea>

2.プレビュー用のチェックボタンを追加

<input type="checkbox" name="checkboxCommentPreview" value="" onClick="changeCommentPreview()" /> コメントをプレビュー

3.プレビューを表示させたいところに以下のソースを追加
赤字の文字部分はプレビュー表示が不可能な環境・設定時に表示されます。
styleの中身は各自の好みに合わせて変えるべし(このままだと緑字になりますので^^;)。

<div id="comment_preview" style="color:#9DA970; margin-top:10px;">
<p>ご利用のブラウザ、設定ではコメントのリアルタイムプレビューはご利用になれません。</p>
</div>

4.プレビュー用のスクリプト

●HTMLタグを許可していない場合

3の下に追加。赤字の部分を自分好みに編集します。
青字の部分は1の青字部分と同じ文字にすること。

<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}

// コメントプレビュー機能のスクリプトです
function doCommentPreview(mode) {

// コメント入力テキストエリアのidを指定します
var textAreaId = 'comment-text';

// プレビューを表示するタグのid属性
var previewAreaId = 'comment_preview';

// コメントプレビュー欄初期表示文字 または、画像タグ
// コメントが何も入力されていない時に表示される文字になります
var initString = 'ここにコメントのプレビューが表示されます。';

if ((null == mode || mode != 'init') && isCommentPreview == 0) return;

if (!isDoCommentPreview()) return;

if (!getElementCommentPreview(textAreaId) || !getElementCommentPreview(previewAreaId)) {
return;
} else if (null != mode && mode == 'init') {
getElementCommentPreview(previewAreaId).innerHTML = initString;
return;
}

var s = getStringCommentPreview(textAreaId);
if (null == s || '' == s || '<br />' == s) {
s = initString;
}

if (getElementCommentPreview(previewAreaId)) {
getElementCommentPreview(previewAreaId).innerHTML = s;
}
}

function getStringCommentPreview(e) {
var s = '';
s = getElementCommentPreview(e).value;
s = s.split('<').join('<!-- ');
s = s.split('>').join(' -->');

s = s.split('(').join('(');
s = s.split(')').join(')');
s = s.split('\'').join('’');
s = s.split('\n').join('<br />');
return s;
}

function getElementCommentPreview(e, f) {
var l = (document.layers) ? 1 : 0;
if(l) {
f=(f) ? f : self;
var a = f.document.layers;
if (a[e]) return a[e];
for (var w = 0; w < a.length;) {
return getElementCommentPreview(e, a[w++]);
}
}
if (document.all) return document.all[e];
return document.getElementById(e);
}

function isDoCommentPreview() {
var ua = navigator.userAgent;
var doNotAgentList = [
ua.indexOf('Opera/6') != -1,
ua.indexOf('Mac') != -1 && ua.indexOf('MSIE 5') != -1
]
for (var i = 0; i < doNotAgentList.length; i++) {
if (doNotAgentList[i]) return false;
}
return true;
}
doCommentPreview('init');
//-->
</script>

*MTの場合はHTMLタグを許可しない設定にすると、タグ部分は全部消えた状態で投稿されます。しかし参考先のソースでは、やむやむさんのだとHTMLタグが有効になってしまうし、stroll::blogさんのところのように実体文字参照に置き換えても正しいプレビューにならないので、それは困る…。
で、頭をひねって、<は<!--に、>は-->に置き換わるようにしてみました。これで全てのタグを無効化すると同時にプレビュー画面からも消し去ることができたと思います。

●HTMLタグを有効にしている場合
MTの設定でHTMLタグを有効にしている場合は、上のソースから緑字の部分を削除すればタグのきいた状態でプレビューできるようになります。
ただ1つ問題点がありまして、そうすると全てのタグが有効になって見えてしまうのです。
MTの設定で許可されるタグは、初期設定ではa href, b, i, br/, p, strong, em, ul, ol, li, blockquote, preの12種類です。なのにプレビュー画面では使えないはずの<font>や<table>タグなども全部きいてしまいます。投稿者を混乱させないように、使えるタグを明記したり注意書きを添えるなどしておくといいと思います。

<2006.10.28追記>プレビュー画面で許可しているタグのみ有効にする方法を思いつきましたので、HTMLタグを有効にしている場合は以下の方法を試してみて下さい。

緑字の部分の下に、許可するタグから<!--  -->を除去する記述を追加します。3.3なら以下の赤字を追加すればMTの設定と同じになると思います。3.2以前を使っている場合、許可タグをカスタマイズしている場合は自分の設定に合わせて増減してみて下さい。

s = s.split('<').join('<!-- ');
s = s.split('>').join(' -->');

s = s.split('<!-- b -->').join('<b>');
s = s.split('<!-- /b -->').join('</b>');
s = s.split('<!-- i -->').join('<i>');
s = s.split('<!-- /i -->').join('</i>');
s = s.split('<!-- strong -->').join('<strong>');
s = s.split('<!-- /strong -->').join('</strong>');
s = s.split('<!-- em -->').join('<em>');
s = s.split('<!-- /em -->').join('</em>');
s = s.split('<!-- ul -->').join('<ul>');
s = s.split('<!-- /ul -->').join('</ul>');
s = s.split('<!-- ol -->').join('<ol>');
s = s.split('<!-- /ol -->').join('</ol>');
s = s.split('<!-- li -->').join('<li>');
s = s.split('<!-- /li -->').join('</li>');
s = s.split('<!-- pre -->').join('<pre>');
s = s.split('<!-- /pre -->').join('</pre>');
s = s.split('<!-- a href').join('<a href');
s = s.split('<!-- /a -->').join('</a>');
s = s.split('<!-- blockquote -->').join('<blockquote>');
s = s.split('<!-- /blockquote -->').join('</blockquote>');

こうしておくと許可されたタグ以外は全部無効になるので、「プレビューでは見えてたのに投稿したら消えてた」みたいな紛らわしさもなくなると思います。


補足事項
・プレビュー文字列の幅をコメント表示部分と同じにすると、文字の折り返し地点が正確にプレビューできて、固定幅デザインの場合レイアウトの確認に重宝します。
・<ul><ol><pre><blockquote>系は行間などが改行のしかたによっては正確にプレビューできないこともあるため、これらのタグを使う場合はMT本来のプレビューも併用することをおすすめします(<pre>タグなどはMT自体の挙動もおかしいので使わない方が無難な気が…^^;)。

(2006.10.25 安全のための記述および補足事項を追加)
(2006.10.28 HTMLタグを許可している場合の覚え書きを変更)

 

トラックバックの一覧

トラックバック リアルタイムでコメントプレビュー  »» 2007年4月 3日 23:11
コメントするとき変な所で切れないように すぐさまチェックしたいという私のワガママ...
トラックバック MT4.25で コメントプレビュー を試してみた  »» 2009年5月17日 13:51
コメントプレビュー、「確認」でも良いかな?と思ってましたが、CGIを呼び出すよりこちらのほうが…なので今更ですがプレビューを付けてみました。

コメント

こんにちは。トラックバックありがとうございました。
「必要なときだけ実行」っていうのいいですね。

コメントありがとうございます。
おかげ様でプレビューがとても便利になりました。
トラックバックも無事に届いていてよかったです(失敗と出てしまったので^^;)。
これからもいろいろ参考にさせていただくことがあるかと思いますが、よろしくお願い致します。

TAEKOさん、はじめまして。
このカスタマイズやりたくて分かりやすい記事を探し辿り着きました。
とっても参考になりました。ありがとうございます!!
HTMLタグを有効のための追加もすばらしい!
こんな風に思いつくことが出来るようになりたいもんです。

>yumさん
はじめまして。^^
お役に立てたようで嬉しいです。
これはjavascriptなので、MTのプレビュー機能と連動しているわけではないんですよね。そこを出来る限り正確にプレビューできるようにしたくていろいろ頭を絞りました。
時々変な閃き(笑)もわいたりしてるブログですが、よろしくお願いします。