FCafe　 コメントのプレビュー

　記事にしろコメントにしろ、「自分の書いたモノが投稿後にどう表示されるか事前に確認したい」　と思われる方は少なくないようです。 　私自身は「まず投稿してしまって」 それからガンガン編集する　という性質でありまして、「プレビューとか重ったるい」　とか思う傾向があったのですが、近頃のＦＣ２の投稿FORMには絵文字をはじめとして色々と装飾機能が充実して来ておりまして、 textareaの内容から出力結果をイメージする事がやや難しくなっているのも確かであると言えましょう。　
特に絵文字や色文字などは実際の出力結果を確認するまでは一抹の「不安」を抱いたりするのも自身体験しているところであります。

　・・そういえば、昔（？）独自にコメント絵文字に取り組んでいた頃は、最終バージョン？にpreview機能を盛り込んだ事も ありましたっけ。　懐かしい記憶も蘇って来たりしまして、投稿前にコメントをPREVIEWするスクリプトを作ってみました。
「簡単に設置できて重くならない」　ように心掛けたつもりですが如何でしょうか。
* 絵文字入力スクリプト対応テンプレートで機能します⇒参考

SAMPLE 　IE、 Opera、 Firefox ready


【 設置法 】 　以下のスクリプトを head領域　（ </head> タグの前）に貼ります 

<!--comment_area--><script type="text/javascript"><!--
function PV() {
var sv=(""+self.frames.location).split('.')[1];
var G="<img src='http://"+sv+'.fc2.com/image/';
var C=document.comment_form.comment.value.replace(/n/gi, "<br />");
C=C.replace(/(http[-w/%&=:;.?]+)/gi,"<a href='$1'>$1</a>");
C=C.replace(/[太字](.*?)[/太字]/g, "<b>$1</b>");
C=C.replace(/[斜体](.*?)[/斜体]/g, "<i>$1</i>");
C=C.replace(/[下線](.*?)[/下線]/g, "<u>$1</u>");
C=C.replace(/[打消](.*?)[/打消]/g, "<s>$1</s>");
C=C.replace(/[色:(.*?)](.*?)[/色]/g,"<font color='#$1'>$2</font>");
C=C.replace(/[絵文字:([vie])[-]([0-9]+)]/g, G+"$1/$2.gif' />");
document.getElementById('prv').innerHTML = C;
}
function Prep() {
document.write('<input type="button" onClick="PV()" value="preview" />');
document.write('<p id="prv"></p>');
}
//--></script><!--/comment_area-->
可能なら外部スクリプト化した方がbetterでしょう

コメント入力FORM中、プレビューボタンを置きたい場所（送信ボタンの後≒下が適当でしょう）　に以下のタグを貼り付けます

<script type="text/javascript">Prep()</script>

　　以上で終了です。　　割と簡単ですよね（？）　・・と今までは思ってたのですが
（そうでもないようですので）今回は更に簡単な方法も用意しました。
コメント入力部の </form>タグの手前に以下のタグを貼り付けるだけ というものです。
（ここまで述べたソース設置は無用です） 

<script type="text/javascript" src="http://blog-imgs-24.fc2.com/p/c/a/pcafe/cp.js">
</script>
（当店のスクリプトファイルを直接呼び出します　　 ）
 

【 使用法 】 　コメントform内（スクリプトタグを貼った部位）に[preview]　というボタンが表示されます。　コメント内容を入力した状態でボタンをクリックすると、修飾タグや絵文字が変換された状態の文章を確認できます。　（クリックする度に「その時」の入力内容が表示されます）
スクリプトOFFの場合はボタンは表示されません

 

【 解 説 】 　　スクリプトはtextareaの内容を取得し 「改行」やＵＲＬ（リンク）・装飾・絵文字タグをHTMLタグに変換して, 自ら作製したプレビュー領域（　<p id="prv">　）に出力します。　「字切り」などのレイアウトも実際に投稿された状態に近付ける為には、　ＣＳＳで　#prv の性状を「コメント表示部」のそれと同一に指定しておくと良いでしょう。
またスクリプトを別ファイル化する場合は「別法」のようにその場でボタン描画も実行させてしまう方が良いと思われます（システムのスクリプトと同じ）。

ＦＣ２サイドでも「confirm」頁が用意されるような気配があるようですが、現行システムのスクリプトを多少改変すればクライアント側でプレビュー機能を実現できるような気もするのですが・・・

それと、今回の作業中気付いた事なのですが、コメント装飾タグの内、太字 と 斜体 が無効になるテンプレートがあります。　最新の公式テンプレートhobbyp 　もその一つなのですが、これはＣＳＳが全要素の　font-style と font-weight を　normal と規定している為です。　（ＣＳＳ冒頭部の当該指定を削除すれば反映されます）

Comment

★ 有希之武 有希之武 Edit
05/26 00:52

にゃ〜凄く良いじゃないですか！
早速導入させて頂きました。(^ー^)
他のブログサービスでプレビューが有って、その時FC2にも
ほしいと思った事を思い出しました。(^^;
設置も簡単だし、何よりdanielさんの所へのリンクがちゃんと表示されると言うのは手間が省けて良いです。（いや、省くつもりは無かったのですが(^^;）
大事に使わせて頂きます。m(_ _)m

★ daniel daniel Edit
05/26 01:12

有希之武さんこんばんは。　
FORUMで「要望」見まして　（ それ 作った事あるじゃん、て）
込み入った応用、とかじゃなくて割と基本的な需要かな、と
思ったりもしまして。

＞リンクが表示　　　・・・にゃはは。
最近商売気付いて来たかもです　（邪魔だったら削除して下さい）

★ びといん びといん Edit
05/27 00:20

　以前から望んでいる機能なので期待していたのですが、当方では、うまく機能しませんでした。残念です。
　うちのブログでは、コメント編集機能を削除しちゃってるのがいけないのでしょうか。

★ daniel daniel Edit
05/27 02:56

びといんさん　こんばんは。　
そちらのテンプレ（のコメント部）は　「絵文字」以前のもので
formに名前が付けられていません。
（ですのでシステムの装飾スクリプトも機能しない筈です）

このスクリプトは殆ど「装飾効果」を確認する為のものなので
それがないformには不要と言えばそうも言えるのですが・・

★ ドクタァムーグ ドクタァムーグ Edit
05/27 10:56

はじめまして。
プレビューできたらいいなと前から思ってたので感謝です。
早速試してみたんですけど、自分のテンプレはXHTMLだし、外部スクリプトのがいいと思って「別法」のスクリプトを呼び出したんですけど、色付き文字でfontタグを閉じられてないので自分のところに修正したスクリプトをアップしたらなぜか置換されないまま表示されてしまって。
外部スクリプト化しなければうまくいったんですけど、こちらも外部スクリプト化したら同じようにうまく表示されませんでした。
もし原因が分かれば教えてください。

★ daniel daniel Edit
05/27 12:01

お知らせ有難うございます。
御指摘の如く外部スクリプト　cp.js　に誤りがありました。
（一部ブラウザではそのまま動作するもの）
また、冗長な部分もありましたので　修正版をUPしました。
（如何でしょうか）

「よく確かめてから記事書けよ」　という気もしますが
『御報せ頂いて初めて分かる』　という面もありまして ・・

★ ドクタァムーグ ドクタァムーグ Edit
05/27 16:59

素早い対応ありがとうございます。
無事、表示できました。
ブログのカスタマイズにはFirefoxを使っていたのですが、他のブラウザでは表示できてたんですね。
JavaScriptは全然わからないのにいじって分からなければあちこち調べ回ったりしてました。
それで、今回は自分で外部スクリプト化するときに、文字コードをEUCで保存したらうまくいったようです。

他にも新着マークとか色々使わせてもらっているので、これからも少々の間違えは気にせずに頑張ってください。

★ びといん びといん Edit
05/27 17:25

　なるほど。絵文字以後のテンプレートを参照して改修すれば、こちらのプレビューが使えるかもしれませんね。
　何分にも、初期のテンプレートをちまちま改修して1年以上使ってますので、愛着あってスッパリと別のに切替えられないのですよ(笑)。
　もう少し試してみます。
　ありがとうございます。

　確かに装飾効果を確認しないのであれば、コメント入力欄を大きくするだけでも十分なような気もしますし、プレビュー画面のレイアウトをコメントページと合わせようとするとひと手間必要でもあるし。
　わかってはいても、とりあえず導入してみたいんです(笑)。

★ daniel daniel Edit
05/28 10:45

>Drムーグさん
表示できましたか。　
外部スクリプト化時の文字コードの問題は私もよく掛かります。
（　あれ？変だな〜 と確かめると文字化けしてる　）
今後とも　お気付きの点等ありましたらお知らせ下さいませ

＞びといんさん
私もまったくそのように考えてましたし、
「どうせ後で修正できるんだから別にいらないじゃん」　と。

でも、分っちゃいても とりあえず作ってみたかった、
というところです。

★ くされねずみ くされねずみ Edit
06/02 02:02

本当に素晴らしいですね(^o^)
早速設置させていただきました。

★ daniel daniel Edit
06/02 09:21

御利用ありがとうございます。
何かございましたら遠慮なくお申し付けください

★ ひび吉 ひび吉 Edit
12/05 16:05

こんにちは！　「初心者でもできる簡単FC2ブログの作り方」というブログから、こちらにたどり着きました！　絵文字対応のプレビュー機能、すごく助かります！ さっそく導入させていただきました★

＞リンクが表示…
私のブログでは表示されてないみたいなんですが、通常どのあたりに出るものなんでしょうか？ よかったら教えて下さい(＞_＜)　他の方にもこちらのサイトのこと知ってもらいたいのでe-330

★ daniel daniel Edit
12/05 16:39

ひび吉さんはじめまして。　当店の御利用有難うございます

え〜　この頁のスクリプトはプレビュー機能のみです。
（当店のリンクを表示したりしません）
私は同じ機能のプラグインを登録しておりまして
そのプラグインは（個別表示時以外で）リンクを表示するのです
もしこの頁のソースで設置されたのなら敢えてプラグインをDLして戴く必要はありません。（テンプレート変更時とかはソース設置より楽ですけどね）
リンクとかして下されば十分であります。

★ ひび吉 ひび吉 Edit
12/06 01:40

なるほど〜！ そういえば、プラグインの方は（事前に知ってはいたんですが）試したコトなかったです；
タグ初心者なのでよくわからないのですが、使ってるテンプレ、ことごとくプラグインカテゴリがコメント部より前にあるような…e-263
変にいじるより、この頁のやり方のほうがわかりやすくて私には良かったんだと思います(^^;) どうもありがとうございました♪

早速リンクもさせていただきました！ これからも頑張って下さい(`･ω･´)
ではでは〜

★ Yama Yama Edit
05/03 21:32

初めまして。
プレビュー機能を探していましたので、大変助かりました。
ありがとうございました。

★ daniel daniel Edit
05/03 22:16

Yamaさんようこそこんばんは。　
こちらこそ御利用感謝です。
クールなサイトの管理人さんに使って頂けて光栄ですよ。
（ オンラインshop なのでしょうか？ ）


 
HN Title URL PW secret

TrackBack　http://pcafe.blog3.fc2.com/tb.php/323-f5f9cbda

Shown after Admisson
ねこぱんち統合整備計画 *
　管理者それぞれに考え方があるだろうが、俺は、コメント投稿後に投稿者に編集されるのは嫌なので、編集機能は削除してしまっている。　だが、投稿前に確認はしたい。が、FC2にはそ
*Nowhere*Land*Diary* *
FCafe様のスクリプトを導入させて頂き、コメントをプレビューできるようにしました。素晴らしいスクリプトをありがとうございますm(_ _)mこのブログも、（私の頭で理解できるカスタムだけですが）とりあえずい
.

≫ Google Abosense このブログに広告を掲載 ≪

2006 / 05 / 25 　Thu
Comment/TB   
Comment 16 / TB 2 / Edit
Designed by Daniel Corporation . all rights renounced