CLEVER BBSにプレビューを設置(usamoスキン版)

07/01/07 15：00追記

　残念ながらCLEVER BBSのサービス及び配布は終了しました。詳細はコチラ↓
yozoの気が向いたと記2.0 | 緊急！CLEVER BBS サービス停止と、usamoスキンの修正のお願い　usamoskin Ver.3.3.01と02

2007/02/14　プレビューの設置タグを修正しました。2007/02/14以前の
設置タグを使用されていた方は、追記部分を参照して修正してください。

　2006/08/27に、ここのコメントプレビューを設置しました。
詳しくはこの記事→コメントプレビューを設置
それに続けてyozoの別ブログでlivedoorブログのyozoのおすすめ本にも同じようにコメントプレビューを設置しています。詳しくはこの記事→コメントプレビューを設置（livedoorブログ版）
　このようにすっかりコメントプレビューの虜になってるyozoなのですが、ここの右サイドバーに設置しているCLEVER BBSも投稿するときの入力した状態と投稿後の状態が全然違うので、カキコしにくいのですよね。それでついでにここにも同じスクリプトを利用してプレビューを設置することにしました。

　このカスタマイズは、お友達ののんびり前進じたばた生活のまゆびさんの記事コメントプレビューを付けてみた!!で紹介されていた、stroll::blogのstrollさんの記事コメントをプレビュー表示及びコメントプレビューを必要なときだけ実行するには？を参考にさせていただきました。　m(_ _)m
　また、ROOM-Mのmioさんも記事コメントプレビューで設置のし方をわかりやすく紹介されています。あらためて案内させていただきます。

CLEVER BBSにコメントプレビューを設置(usamoスキン版)

　yozoが見本でコード配布しているusamoスキンを元にしています。まず「st.css」ファイルの一番下に次のコードを追加してください。

widthが140pxで8色の場合
.comment-content
{
width:135px;
text-align:left;
}

widthが150pxで10色の場合
.comment-content
{
width:145px;
text-align:left;
}

次に、プレビューを設置するのは「cleverskin.html」「resskin.html」の２つのファイルにそれぞれ下のように設置してください。その後３つのファイルを上書きアップロードすればＯＫです。また、例はusamoスキンのtable widthが140pxのもの(8色バージョン)のものを使用しています。widthが150pxで10色のものも同様にカスタマイズできますのでご安心ください。

　どうせならプレビュー付きのusamoスキンを配布すればいいじゃないかって思われるかもしれませんが、このプレビューのスクリプトはstroll::blogのstrollさん作成のものですから、配布を遠慮しているというわけです。悪しからずご了承ください。m(_ _)m

• 必ずバックアップしましょう！

　いつも書いてますが、編集する前に、必ずHTMLのコードをコピーして、「cleverskin_bk.html」(例)のようにバックアップファイルを作成しておきましょう。間違って失敗しても、「cleverskin_bk.html」の内容をコピペすれば、元に戻すことができますよ♪

?途中省略?

<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="23" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';" onkeyup="doCommentPreview()" onmouseup="doCommentPreview()" onblur="doCommentPreview()">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#EAAF00;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">　 Pass <input type="password" name="pwd" size="8" maxlength="8" accesskey="n" tabindex="14" /> <input type="submit" value="Send" accesskey="o" tabindex="15" /></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" onkeypress="changeCommentPreview()" tabindex="40" accesskey="l" /> プレビューしますか？<br />
<label for="comment_preview">comment preview:</label></td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="2" cellspacing="0" style="width:100%; border : 1px solid #666666;" summary="プレビューの表示部分です。">
<tbody>
<tr>
<td colspan="2"><div class="comment-content" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table></form>
</div>※rssskin.htmlには、ここの</div>はありません。
<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}
// -->
</script>
<script type="text/javascript">
<!--
// コメントプレビュー
function doCommentPreview(mode) {
// コメント入力テキストエリアのid属性
var textAreaId = 'comment';
// プレビューを表示するタグの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('&amp;');
s = s.split('<').join('&lt;');
s = s.split('>').join('&gt;');
s = s.split(''').join('&quot;');
s = s.split('
').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><br />※rssskin.htmlには、ここに<br />を追加してください。

?途中省略?

<tr>
<td colspan="2"><div class="comment-content" style="color:color<!--s-->;">comment<!--s--></div></td>
</tr>

?途中省略?

<tr>
<td colspan="2"><div class="comment-content" style="color:rescolor<!--s-->;">rescomment<!--s--></div></td>
</tr>

?以下省略?

• yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「テンプレート改造」は自己責任で行ってください。そして、改造前には必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

下のソースが07/02/14以前の記事での設置タグです。プレビューと投稿内容とのズレを最小限にするために修正しました。お手数ですが、取り消し線部分（５箇所）をそれぞれ修正してください。m(_ _)m
※rssskin.htmlは、６箇所となります。スクリプトの直後に<br />を追加してください。

?途中省略?

<tr>
<td valign="top" colspan="2" align="right"><textarea name="comment" id="comment" cols="23" rows="5" accesskey="e" tabindex="5" onfocus="if (comment.innerHTML =='お気軽にカキコしてください。') comment.innerHTML = '';" onkeyup="doCommentPreview()" onmouseup="doCommentPreview()" onblur="doCommentPreview()">お気軽にカキコしてください。</textarea></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#999999" checked="checked" style="border-style : none ;" accesskey="f" tabindex="6" /><span style="color:#999999;">+</span><input type="radio" name="color" value="#8cc68c" style="border-style : none ;" accesskey="g" tabindex="7" /><span style="color:#8cc68c;">+</span><input type="radio" name="color" value="#7da2b7" style="border-style : none ;" accesskey="h" tabindex="8" /><span style="color:#7da2b7;">+</span><input type="radio" name="color" value="#ffa851" style="border-style : none ;" accesskey="i" tabindex="9" /><span style="color:#ffa851;">+</span></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="radio" name="color" value="#ffb5b5" style="border-style : none ;" accesskey="j" tabindex="10" /><span style="color:#ffb5b5;">+</span><input type="radio" name="color" value="#cd5c5c" style="border-style : none ;" accesskey="k" tabindex="11" /><span style="color:#cd5c5c;">+</span><input type="radio" name="color" value="#916F6F" style="border-style : none ;" accesskey="l" tabindex="12" /><span style="color:#916F6F;">+</span><input type="radio" name="color" value="#EAAF00" style="border-style : none ;" accesskey="m" tabindex="13" /><span style="color:#EAAF00;">+</span></td>
</tr>
<tr>
<td align="right" colspan="2">　 Pass <input type="password" name="pwd" size="8" maxlength="8" accesskey="n" tabindex="14" /> <input type="submit" value="Send" accesskey="o" tabindex="15" /></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" onkeypress="changeCommentPreview()" tabindex="40" accesskey="l" /> プレビューしますか？<br />
<label for="comment_preview">comment preview:</label><br />
<div class="comment-content" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div></td>
</tr>
<tr>
<td colspan="2"><input type="checkbox" name="checkboxCommentPreview" value="" onclick="changeCommentPreview()" onkeypress="changeCommentPreview()" tabindex="40" accesskey="l" /> プレビューしますか？<br />
<label for="comment_preview">comment preview:</label></td>
</tr>
<tr>
<td colspan="2">
<table cellpadding="2" cellspacing="0" style="width:100%; border : 1px solid #666666;" summary="プレビューの表示部分です。">
<tbody>
<tr>
<td colspan="2"><div class="comment-content" id="comment_preview">ご利用のブラウザ、設定ではご利用になれません。</div></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table></form>
</div>※rssskin.htmlには、ここの</div>はありません。
<script type="text/javascript">
<!--
// コメントプレビューを制御
// ↓コメントプレビューをデフォルトでONにする場合は 1 、OFFにする場合は 0
var isCommentPreview = 0;
function changeCommentPreview() {
isCommentPreview = (isCommentPreview == 0) ? 1 : 0;
doCommentPreview();
}
// -->
</script>
<script type="text/javascript">
<!--
// コメントプレビュー
function doCommentPreview(mode) {
// コメント入力テキストエリアのid属性
var textAreaId = 'comment';
// プレビューを表示するタグの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('&amp;');
s = s.split('<').join('&lt;');
s = s.split('>').join('&gt;');
s = s.split(''').join('&quot;');
s = s.split('
').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><br />※rssskin.htmlには、ここに<br />を追加してください。

?途中省略?

<tr>
<td colspan="2"><spandiv class="comment-content" style="color:color<!--s-->;">comment<!--s--></spandiv></td>
</tr>

?途中省略?

<tr>
<td colspan="2"><spandiv class="comment-content" style="color:rescolor<!--s-->;">rescomment<!--s--></spandiv></td>
</tr>

?以下省略?