FCafe  コメント絵文字入力 2

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

  当blogのコメント欄を御覧になった方は既にお気付きの事かと思いますが、「絵文字タグ」の入力形式を 「外部窓」を呼び出す方式から「頁内選択」方式へ変更しました。
従来の「外部窓」方式はFC2のシステムファイルをblogの固別記事モードから利用する方式であった訳ですが、

という問題がありました ( 後者はIEではOK )。  一方「頁内選択式」は当blogで最初にお示しした方法ですが、ソースが長大で設置が面倒になってしまうきらいがあったわけです。
この度可及的にソースの短縮化を行い、特にコメント入力部への設置が簡便となるよう試みてみましたので発表します。(学会報告風)

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

【 設置方法 】 head領域に以下のソースを貼り付けます。    ( 右 click で「全選択」し、</head> タグの手前にコピペされて下さい )

  CSSに以下を追加 #m1,#m2,#m3,#m4,#m5 {display:none}

  コメント入力部を以下の様にします (例) <form method="post" action="./" name="comment" id="comment">
  ( 他の入力欄 )
<script type="text/javascript">Emoji()</script>
<textarea id="body" name="comment[body]" cols="△" rows="▽">
絵文字が使えます! </textarea >
  ( 他の入力欄 )
コメント入力 form 、 textarea に name と id を付加し textarea 付近にスクリプト関数を書きます
.

【 使用法 】 5つ並んだアイコンをclickすると 対応する各キャリアの絵文字選択表が表示されます ( ”close”は実使用上特に必要無しと判断し省略しました )。 操作方法は別窓方式(記事投稿時)と変わりません。 入力されるのは「短縮絵文字タグ」です( 当blogのコメント入力欄を参照 )
.

【 解 説 】 「絵文字入力部分」を一行スクリプトにしました。 コメント入力 form 内のアイコン群は全てスクリプトで書き出されます。(スクリプトoff環境ではアイコンは表示されません)
textareaの名前やIDもデフォルトのままで使うようにしました。
★コメント表示部分にはあらかじめ別記事の「絵文字表示スクリプト」を実装しておいて下さい

Comment

Michiyo Michiyo Edit
07/21 22:07

[v308]すてきです~(*^.^*)
画像も絵文字もアップ出来るなんて嬉しいわぁ~[v344]
リアルタイムでプレビュー出来ると良いですね~[v363]
ありがたく使わせて頂きます、明日にでも早速トライします。

daniel daniel Edit
07/21 23:20

Michiyo さんこんばんは。 
「スライドショー」を お使いになれたのですから大丈夫でししょう。
・・・それにしても。 自blogに絵文字が踊る日が来ようとは、
半年前は思いもしませんでしたよ

Michiyo Michiyo Edit
07/22 10:15

うぅ~お手上げです(;_:)絵文字が画像に変換されません
idとnameはすでに折り畳みスクリプトやツリー化で設定されているんですけど更に上乗せ状態じゃダメですよね?!
どうすると良いのか解りません、ぜひ、アドバイスをお願い致します。

daniel daniel Edit
07/22 14:04

え” ダメでしたか??   ・・・ではちょっと拝見。
( デキルまでお世話させてイタダキマスヨ ! )

daniel daniel Edit
07/22 19:14

・・・え~ はい。  分かりました。

「絵文字入力」 はちゃんと機能しているようですね(確認しました)
コメント文中の絵文字タグが画像に変換されないのが問題です
現在コメント文の後にある GinC 関数はコメント中の画像URLを
imgタグに変換するものです (絵文字は表示できません)
この記事の前の「コメント欄機能UP」の GCOM を設置されて下さい。
( 絵文字も画像も表示できるようになります )

また、現在コメント文にはID が付いていません(これではダメです)
<dd class="cm_body"> ~とあるのを
<dd class="cm_body" id="c<%comment_no>"> ~として下さい。

Michiyo Michiyo Edit
07/22 21:40

できました~!!
素早いレスにアドバイスも、ありがとうございました。
じつは、もう1つのテンプレaqua-blueの方でまったく
訳解らず、テンプレ変更準備中だったaqua-3c(使用中)に急きょ変更してトライしました。
念願のコメントで絵文字が使えるようになり
とっても満足です  ~感謝!!

これからも色々楽しみにしています、頑張ってくださいねv

daniel daniel Edit
07/22 22:38

 おめでとうございます。  うはうは。 私も嬉しいです。
( こういう管理人生活を夢見てました )

モメ モメ Edit
07/24 20:54

初めまして、こんにちは。
danielさんの少し前に書かれた「コメント欄にも絵文字」の記事を拝見して、
何度も挑戦していたのですが、その時には失敗の連続でした[i202]
昨夜、コチラの記事と前述の「コメント機能UP!」を参考にさせて頂いて、
再度挑戦したところ、見事成功しましたっ!!
danielさんの素晴らしい記事に出会えて、本当にシアワセです!
使わせていただいたご挨拶が遅くなりましてすみません[i201]
なんとか自分で出来る所までやってみようと思い、粘っていました(笑)

ところで、ここでお伺いして良いのか分からないのですが、
『コメント修正欄』にも絵文字入力用の5つのアイコンを設置しようと、
何度も試してみたのですがどうしても成功しません・・・
今は修正用の方は、そのまま以前のコメントフォームを使っています。
修正用コメント欄の上にも設置する事は可能ですか?

お忙しい所、報告だけではなく質問まで書き込んでしまってすみません。
お時間があるときにアドバイス頂けましたら、大変嬉しく思います。
(昨夜は設置できた興奮でなかなか眠れませんでした[i185])

daniel daniel Edit
07/24 21:23

モメさんこんばんは。 はじめまして。
同じスクリプトをform内に書けばアイコンは表示されると思います
でもtextareaに「絵文字タグ」を入力するには 編集頁の  form や textarea にも コメント頁のそれと同じ名前やIDを付けないといけません。 (同じ関数を使う場合)
コメント頁と編集頁は排他性を持つので同じIDで構いません。
( 送信して編集結果が反映されるかは分かりませんが )

モメ モメ Edit
07/25 22:47

こんばんわ、danielさん。
すぐお答えくださって、本当に有り難うございました。
色々といじって、修正用コメント欄にも確かに表示されたのですが、
送信してみると今までのコメントが全部消えてしまうという結果になってしまいました。
(編集結果が反映されないようで・・・)

普通のコメントの方の表示が出来たので、それだけにしておく事にしました。
アドバイスありがとうございました!
これからも、danielさんの記事を楽しみにしています!
(今回は設置後の報告になってしまってすみませんでした)

daniel daniel Edit
07/26 00:03

モメさんこんばんは。 御報告、参考になりました。
コメントへの絵文字入力については別窓でタグ入り文章を作成し それを元窓へ転送するという方法もあります。
テンプレート(入力form)の変更はずっと少なくて済みます。
「編集」でも使えますので 後程記事に書かせていただきます。

・・・いや、 textareaの内容を双方向に転送することも出来るかも??

モメ モメ Edit
07/26 22:23

わあ!danielさん、後程の記事がとても楽しみになりました!有り難うございます!!(コーフン)

今回コメントフォームに絵文字が使えるようになったこと、
遊びに来てくださる方から大好評で、
他社の携帯マークを使える事を面白がってくれています。
「こんなすごい方がいて、使えるようになったんですよー」と、メッセージしたら驚いていました。
感謝、感謝です!

daniel daniel Edit
07/27 00:59

凄くなんてないです。 FC2に絵文字が導入され その使い方を思い付くまではむしろ「絵文字」否定派でしたもの。
(去年までは人様のスクリプト設置すらしたことなかったんですよ)

まあ、私的には今 「ドラゴン桜」が咲いてる、て感じであります[e235]

まさみ まさみ Edit
11/30 16:23

お世話になります お世話になります[v436][v436][v436]
連続投稿可能で レビューまでできちゃう![e350]

daniel daniel Edit
11/30 22:02

まさみさん こんばんは。 御利用有難うございます。
当店のスクリプトは絵文字タグが独自形式ですから、
テンプレートを変更する時は御注意を。
( このへんで一度書き直してみますかね・・)


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/183-b2e8728c

Shown after Admisson
.

≫ Little Darksiders コメント欄機能 UP! ≪

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