FCafe  コメント絵文字入力 1

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 ・・何とかコメントに絵文字タグ(短縮format)を入力し、blog上で表示させる事が出来ました。
現金なもので、自分で出来ない内は 「絵文字なんて○○っぽくてウザい」 などと感じていた管理人ですが、今では 「絵文字ってなんて素晴らしいんだ~」 とか思うようになっております。   ( 何ていいましたか、心理学の授業で習ったような・・ )
  コメント欄でも(FC2の)絵文字をお使いになりたい方は、テンプレートへの実装法を簡単に御紹介しておきますので、宜しければ参考にされて下さい。
( 特にテンプレート作者様に御利用戴ければ光栄至極に存じます )

  「実装したいけれど よく分からない」 という方には御質問戴ければ可及的にお答えします。
( 余裕できたら 私もこの機能を搭載した共有テンプレートを作ってみたいです )

* システムでコメント絵文字がサポートされました(8/8) ので半ば意義を失った記事です

【 設置方法 】 以下のソースをhead領域に貼り付けます。

<script type="text/javascript">
function vEmo(id) {
var A="<%url>".replace(/(http:\/\/)\w+\.(\w+\.fc2\.com\/)/, "<img src='$1$2image\/");
var B = document.getElementById( id );
C = B.innerHTML.replace(/\[([vie])([0-9]+)\]/g, A+"$1/$2.gif'>");
B.innerHTML =C;
}
function wEmo(u1,u2){
var D='<%url>admin.php?mode=emoji&j=';
window.open(D+u1+'&type='+u2,'Emoji','width=260,height=380');
}
function AddIcon(u,n,ca){
document.comment.body.value += '['+ca+n+']';
document.comment.body.focus();
}
</script>
多くの字体では \ は 半角¥で表示されます VやWと間違えないで下さい
設定ナシでサーバー番号を取得可能となりました( sug氏に感謝 )

コメント(記事) 部を以下のようにします (例)   *その他のコメント要素
<p class="△" id="c<%comment_no>"><%comment_body></p>
<script type="text/javascript">vEmo("c<%comment_no>")</script>
  *その他のコメント要素
 . コメント本文に id を付け その後に(commentブロック内に)スクリプト関数を書きます。

コメント(form) 部を以下のようにします (例) <form method="post" action="./" name="comment" id="comment">
  ( 他の入力欄 )
<a href="javascript:wEmo('1','v')"> V </a>
<a href="javascript:wEmo('1','i')"> I </a>
<a href="javascript:wEmo('1','e')"> E </a><br />
<textarea id="body" cols="△" rows="▽" name="comment[body]"> </textarea >
  ( 他の入力欄 )
</form>
 . form と textarea に name と ID を指定します

.

【 解 説 】 別窓で呼び出す絵文字選択頁のURLはblog毎に違います。
( しかし 別窓を開ける関数に <%URL> を使用しますので各自設定の必要はありません )
実はこの様にする効用はもう一つあります。 絵文字の選択窓のURLは以下のようですが
 http://blogN.fc2.com/UserID/admin.php?・・・ ( 管理画面と同じ )
blog自体の URLは http://UserID.blogN.fc2.com/・・・となっていますのでスクリプトは違うドメインであると判断してしまい、「他所の窓には絵文字タグを書き込めないよ!」 と言って来るのです。 ( 管理人は最初 これが分からなくてかなり焦り?ました )
また FORM や TEXTAREA の name や ID を適性に設定しないとスクリプトは機能しません。
( 基礎知識の乏しい管理人はかなりドカチンと試行錯誤しました ^^;)
・・・その辺りを留意されて(出来る方は)各自パラメーター等を改変されて下さい。

Comment

Edit
07/09 17:58

あの、ちょっと質問が danielさん、これを今度のテンプレに組み込んでいるところなのですが
(スクリプトあり版とスクリプトなし版を作るつもりです)
テンプレートで配布する場合、

img src='http://blogX.fc2.com/image/

のXを、私の鯖=10にすることになります。
そうすると、絵文字を書くたびに10番の絵文字リストが集中的に呼び出されるわけで、万が一多数の人に使われることになった場合高負荷がかからないか心配です。
(HTML内に自鯖の番号に変えてね、なんて書いても初心者は絶対読まないし 苦笑)
大丈夫でしょうか?

daniel daniel Edit
07/09 19:02

そう思っていなければ   ?
  洵さんこんばんは。  その件については勿論私も考えました。
.
1の方法ではコメント欄を開いた時のみ5つ一緒に一度だけ呼ばれ、
2の方法ではクリック時に一つだけずつ呼ばれる訳ですが
絵文字選択用画像はせいぜい200px四方のGIF画像に過ぎません。
(ずっと容量の大きな画像がずっと頻回に呼ばれている筈です)
10万超ユーザーの自blog更新と比べても 「問題にならない」
・・・というのが「私の」考えです。
.
「入力」ではなく コメント中の絵文字の表示に関しては、
テンプレの壁紙やFLASHファイルの方がずっと負荷になるかと。
( 私のテンプレがプレーンなのはその為もあるのです ?? ^^ ; )

daniel daniel Edit
07/09 22:02

[e2]本テンプレでも入力できました[e3] ( EDIT にはつけない予定 )

sug sug Edit
07/10 23:02

またナニやら面白げなことしてますね。

>その件については勿論私も考えました。
どうせスクリプトなんだから
var A="<%url>".replace( /(http:\/\/)\w+\.(\w+\.fc2\.com\/)/, "<img src='$1$2image\/'" );
とかしちゃえば鯖NOも取れますよ。(未テスト)

あと、短縮フォーマットはFC2で実装された時のことを考えると元フォーマットの方が良いかも。[i275]

daniel daniel Edit
07/11 00:16

  ・・・おお マスター。 
そこまでまだフォースが及びませんでした。  シュコー
( サルマンやめてベイダー気分 ) ←何のこっちゃ
わお。 それ参考にさせて戴きます。 私めにもっとフォースを。
( サウロンやパルパティーンにするなって  ? )

・・・確かにタグ変換は基本的に記事部と同様に可能な訳ですから
システムでのサポートは在り得ますよね。
でも、未サポート状態ではコンパクトな方が見易い訳ですし・・

★★ 御覧の方へ (参考)★★
オリジナル・短縮 両絵文字タグにマッチする表記は以下の通りです
\[(emoji:)?[vie][-]?[0-9]+\]

daniel daniel Edit
07/11 23:51

宵の口に TBスパムの二連射がありまして。
削除したんだけど管理画面がやけに重く感じました。
で、今は全くひらけましえん。
0時前後は昨夜も重かったけど単に混んでるせい?
(コメントは付けられるかの テスト)

sugar sugar Edit
07/12 00:29

私デフォルトの絵文字が入れられません。[v393]
ほ、なるほど、こうやって入れるのねー。(やってみたかっただけらしい)

daniel daniel Edit
07/12 01:05

この方法ですとvodafoneと Ezwebの2頁目がサブドメイン化されてないURLとなる為、 Firefoxでは2頁目からの入力に反応しないようです。 
( IEではOKなので まあいいか? )

絵文字関係でお気付きの事などありましたら教えて下さい

Edit
07/17 00:49

絵文字対応のテンプレを公開したので、トラックバックを送らせていただきました。
ありがとうございます(喜)

でも…
鯖番号を自動取得できるようになったの知りませんでした_| ̄| 三○

まあ、もうアップしちゃったからいいか(何)

daniel daniel Edit
07/17 01:12

洵さんこんばんは。 絵文字デビュー お祝い申し上げます。
ウチの記事やテンプレは予告無く verUP する事もありますからね。

( ps 私も絵文字テンプレ、作成中ですよ )

まかろん まかろん Edit
07/17 16:31

はじめまして。こちらの記事を読ませていただいて、
自分のブログでも使えないかと試してみたところ
スクリプト自体は動作しているようなのですが
【入力画面では】 [e130]てすと[e56]
【実際に表示される文字列】e/130.gif'>てすとe/56.gif'>
というように、ブログに表示されるコメント上で絵文字がうまく表示されません。
サンプルをコピペしてやってみたのですが、どこがいけないのか…。
アドバイスをお願いできれば幸いです。よろしくお願いします。[e270]

*コメント部分のソースです*
<!--*コメント-->


<div class="comment_table"><table><tr><td>
<div class="comment_thanks">*COMMENT*<br></div>
<a name="comment"></a>
<div class="comment_body">
<!--comment-->
<a id="comment<%comment_no>" name="comment<%comment_no>"></a>
<img src="http://blog2.fc2.com/l/latte/file/list4-17.gif" align="absmiddle" style="margin-right:3px;"><span title="<%comment_trip>" class="en-title"><%comment_name> : <%comment_title></span>
<div class="mini">
[ <%comment_year>-<%comment_month>.<%comment_day> <%comment_youbi> <%comment_hour>:<%comment_minute> <script type="text/javascript">
var m="<%comment_mail>";
if (m=="") document.write("MAIL")
else document.write('<a href="mailto:'+m+'">MAIL</a>')
</script>-<%comment_url+str> ]
</div>
<p class="en-link" id="c<%comment_no>"><%comment_body></p>
<script type="text/javascript">vEmo("c<%comment_no>")</script>

<div align="right">
<input type="button" value="EDIT" onclick="location.href='<%comment_edit_link>'" class="button"> <a href="#pagetop">▲</a>
</div>
<hr size="1" width="100%" class="hr">
<!--/comment-->
<!--コメント終-->

<!--コメントここから-->
<div class="comment_body">
<a name="comment_post"><b>* コメントする *</b></a>
<form method="post" action="./" name="CMT" id="CMT">

<input type="hidden" name="mode" value="regist">
<input type="hidden" name="comment[no]" value="<%pno>">
<dl>
<dt><label for="name">なまえ:</label></dt><dd><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>"></dd>
<dt><label for="subject">タイトル:</label></dt><dd><input id="subject" type="text" name="comment[title]" size="30"></dd>
<dt><label for="mail">メール:</label></dt><dd><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>"></dd>
<dt><label for="url">URL:</label></dt><dd><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>"></dd>
<dt><label for="comment">コメント:</label></dt><dd><a href="javascript:wEmo('1','v')"> V </a>
<a href="javascript:wEmo('1','i')"> I </a>
<a href="javascript:wEmo('1','e')"> E </a><br />
<textarea id="body" cols="40" rows="8" name="comment[body]"> </textarea>
</dd>
<dt><label for="pass">Pass:</label></dt><dd><input id="pass" type="password" name="comment[pass]" size="20"></dd>
<dt><label for="himitu">ひみつ:</label></dt><dd><input id="himitu" type="checkbox" name="comment[himitu]">管理者にだけ表示を許可する</dd>
</dl>
<p><input type="submit" value="submit"></p>

</form></div>

</td></tr></table></div>
<!--/comment_area-->

<!--ここまで-->

daniel daniel Edit
07/17 17:07

まかろんさん こんにちは ( 御利用有難うございます )
textareaに短縮タグが表示されるのならば、入力部はOKなワケです
( コメント中のタグが imgタグに変換されないのが問題な訳です )
head 領域に設置した関数をお示しになられてみて下さい
( 宜しければサポート掲示板の方を御利用下さい )
http://pcafe.blog3.fc2.com/blog-entry-3.html

な~~る な~~る Edit
07/20 23:14

使ってみたいのですが、ドコにあのタグをコピペすればいいのか、まったくわかりません。[v11]
こんなに面白いのを、是非、設置したいのですが、headと、ヘッダーというのは、同じ事なんでしょうか?
質問があまりにも初歩的で申し訳ありません[v356]

daniel daniel Edit
07/20 23:33

色々改良しまして、 「簡単な設置法」 を考えました。
もーすぐ記事にしますから しばらくお待ちを。

daniel daniel Edit
07/21 11:39

「 head 領域」 とは テンプレート編集画面のHTMLソースの最初の方、
------------------------
<head>

 この間です

</head>
<body>
 :
------------------------

な~~る な~~る Edit
08/05 06:41

有難うございます。前と変わっていたので、
違うところにきてしまったのかと、思いました。
有難う御座います。
これなら、なんか出来そう・・な・・・
(たぶん。・・)
有難う御座います。
チャレンジしてみます。

daniel daniel Edit
08/05 06:59

な~るさんお早うございます。 どしてもダメだったら言ってください。
( 何とかしますんで )
当店は新作の検証作業等でテンプレートが度々変ります。
今のテンプレートは結構 「お気に入り」 です。
( ・・て どれ。 )


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/174-848a2aaf

Shown after Admisson
ウェビンブログ *
「custom_1」を共有にアップしました。とりあえず第一弾は「かわいいタイプ」です。きゃは☆(爆死)
.

≫ Ash系 調整 絵文字タグ入力 2 ≪

2005 / 07 / 08  Fri
Comment/TB   
Comment 17 / TB 1 / Edit
Designed by Daniel Corporation . all rights renounced
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。