FCafe  コメント絵文字入力 3

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

 人類の進化に逆らってバカになってみたいけど、それやるとメシが食えなくなる管理人です。
やはり人として生まれたからには 昨日よりは今日、更に明日、とより「高み」を目指したいもの。
どちらかと云うと 「龍山高校特進クラス」の阿部チャンの方にシンパシー感じる性質であります。
で、作ってみました。 『コメントにも絵文字!』 第3弾。

 今回の方法は当店のお客様の「御要望」がきっかけになって思い付いたものです。
「絵文字以前」 と比べかなり強力なフォースを要しましたが何とか実現できました。
( 今回の方法の特徴を簡単に述べますと以下の如くになります )

まあ、簡単になる程 「サポートテンプレ」 の需要が減ってしまう訳ですが・・・ orz

8/8 コメント絵文字がFC2によりサポートされました。 ( この方法は後日再構成します )

【 設置方法 】 まず コメント表示機能強化スクリプトを設置しておきます。
( 此処で述べるのは絵文字の『入力法』 のみです。 『表示法』 については触れません )
次に 下記のソースを child.html としてアップロードします。

   ( 右 click で「全選択」してメモ帳等へコピーし child.html としてセーブします )
「文字列置換」をPREVIEWする場合は文字コードを明示した方が良いようです

  ◎コメント入力部を以下の様にします (例) <form method="post" action="./" name="comment" id="comment">
  ( 他の入力欄 )
<a href="../file/child.html" target="emo">絵文字</a>
<textarea id="body" name="comment[body]" cols="△" rows="▽">
絵文字が使えます! </textarea >
  ( 他の入力欄 )
コメント入力 form に name と id を付加し textarea 付近に別窓のリンクを書きます
.
  ◎コメント編集部を以下の様にします (例) <form method="post" action="./" id="edit" name="edit">
  ( 他の入力欄 )
<a href="../file/child.html" target="emo">絵文字</a>
<textarea id="body" name="edit[body]" cols="△" rows="▽">
<%edit_body> </textarea >
  ( 他の入力欄 )
コメント編集 form に name と id を付加し textarea 付近に別窓のリンクを書きます

.

【 使用法 】 入力(編集)form 内の「絵文字入力」  リンクをclickすると 別窓で絵文字入力formが表示されます。 (その際、BLOGで既に入力済みの文章も転送されます)
別窓内での入力方法は管理画面での記事投稿時と変わりません。
[PREVIEW]  ボタンを押すと絵文字が画像変換された状況を確認できます。
( この時、他のURL等の変換状況も確認可能です )
[End Input]  ボタンを押すと入力内容がBLOGの入力部に転送され別窓は閉じます

.

【 解 説 】 「絵文字」 というテキストリンクを置くだけで絵文字入力が可能となります。
blogN.fc2.com/X/Xxxx/file/child.html という形でなく、 ../file/child.html  と呼び出すのが
非常に重要です

タブラウザなどでは元blogが隠れてしまいますが入力終了ボタンを押せば入力内容転送済みのblogが表示されます(筈)
「サイズ指定された小窓をポップアップさせたい」 という場合は以下のようにされて下さい。

  head領域に以下のスクリプトを貼り付けます <script type="text/javascript"><!--
function EMOPEN() {
window.open("../file/child.html","emo",'width=430,height=600');
}
function EMOJI() {
var s=("<%url>".split(".fc2.com")[0]).split("blog")[1];
s='<img src="http://blog'+s+'.fc2.com/admin/image/';
var op='icon.gif" border="0">';
document.write('<a href="javascript:EMOPEN()">');
document.write(s+'v'+op+s+'i'+op+s+'e'+op+'</a>');
}
// --></script>
.
  別窓を開くテキストリンクの替わりに以下のスクリプトを書きます <script type="text/javascript">EMOJI()</script> 『お馴染みのアイコン』 がスクリプトで表示されます
(スクリプトoffでは何も表示されません) .   SAMPLE 1   .   SAMPLE 2 

Comment

モメ モメ Edit
07/28 23:03

danielさん、どうも有り難うございます!感激です!!
分かるような気がします・・・というか、絶対に設置出来るまで粘ってがんばります!

週末にでも(あ、明日ですね)、いろいろいじってみたいと思います。
danielさんにいい結果報告できると良いな・・・

daniel daniel Edit
07/28 23:31

あ、モメさん こんばんわ。 
いや、スクリプトてのは中々、 一筋縄ぢゃ行かないモノなんで。
ですから、利用者が其々のblogに合わせて調節する箇所を無くして
コピペしたファイルを ドーン とUPすれば OK!
・・・みたいな方法を考えてみたのですが。
ソースに一部 当店固有のURLが紛れてまして先程修正しました。

ダメだったら私が見ますから 肩の力抜いて挑戦されて下さいな
編集結果![v357]

Michiyo Michiyo Edit
07/29 10:36

最高です~[v425] 本当に嬉しい~今回はちゃんと出来ました[e280][e278]
画像も表示出来てお友達にも好評です[v221]
ありがとうございます。

1つ質問なんですがスクロールバーは表示出来ますか?
別窓表示にするとプレビューの方が
見えなくなっちゃうんです
Michiyoはスクロール出来るマウスだから[i206]
キーボードの▲pg up▼pg dnでも使えましたけど
気付かない人はきっと悩むかも…
ごめんなさい、また変な質問で[i230]

daniel daniel Edit
07/29 13:46

MIchiyo さんこにちは。 早速どうもです~
(仰せの件、検討・対応してみます)

Michiyo Michiyo Edit
07/29 17:34

本当ですかぁ~[v347]ありがとうございますm(_ _)m

MacOS9の人に画像と絵文字が入力&表示が出来ないとの事でしたので、Michiyoも確かめてみたんです
なんと!「マイクロソフトはこの製品の問題として認識している」そうです!
内容はフレームを使用したページでジャバスクリプトの受け渡しが出来ないそうです(;-_-+
すっかりOSXに慣れてしまってOS9+IEの存在を忘れていました、これからnoscriptを書き書きします…[v404]

daniel daniel Edit
07/29 18:56

なかなか八方上手く行く、というのは難しいものですね。
プレビュー部分のスクロール化は アップロードするソースの最初の方を
#PV {width:400px; height:160px; overflow:auto;}
とすれば良いです
( ウチの記事とファイルは修正済み )

モメ モメ Edit
07/30 13:01

danielさん、こんにちは♪
先日は心強いお言葉ありがとうございます!
昨日試してみて、無事に設置出来る事が分かりました!
ただ、今、ちょっと以前のスタイルに戻してあります。
というのは、別窓表示のほうのバックの色や、
表示ボタン(PREVEWなど)をワタシの好きな色や言葉に変更してよいものか、danielさんに伺ってからにしようと思ったからなのです。

danielさんからのGOサインが頂けたら、
早速設置作業を再開したいっ!と意気込んでおります!
いかがなものでしょうか??

Michiyo Michiyo Edit
07/30 20:32

お手数かけましたm(_ _)m 初歩的な質問でした(^^ゞ
さっそくファイル差し替えました、ありがとうございました。

daniel daniel Edit
07/30 21:25

>モメさん 
設置できましたか。 おめでとうございます。 改変は御自由にどぞ!

>Michiyo さん
いや、貴重な御指摘でした こちらこそ感謝です。

モメ モメ Edit
07/31 18:51

danielさん、こんにちは。
無事に設置&改変が終了しました!

入力部分を別窓表示したら、
記事本文を読みながらコメント入力出来るので、とても便利です!
今回の設置で、いろいろといじるのが、またまた楽しくなってしまいました(笑)
danielさんには、感謝感謝です!!
どうも有り難うございました[i175]

Riiko Riiko Edit
08/05 20:27

初めましてRiikoと申します。
コメントの絵文字が挿入できることを知って大変感動しました。
私のBlogでも是非使用したく、設置してみたのですが、
記事をchild.html内に取り込めないのと、[END INPUT]を
押してもエラーで記事に反映されないのです。
どうすれば正常に反映されますでしょうか?
教えて下さいませ。よろしくお願いしますm(_ _)m

daniel daniel Edit
08/05 20:37

Riikoさんこんばんは。 お困りの御様子ですね。
コメントへ絵文字を「入力」する方法はいくつかあるのですが、
(拙blog記事)3番目の方法を適用されましたようで。

[v278]   え~ わかりました (と思います)
投稿・編集各formの textarea を id="body"として下さい

Riiko Riiko Edit
08/05 21:06

danielさんの仰るとおり、id="body"を入れたら正常に反映されましたm(_ _)m

あと、すみませんもうひとつ問題がありました(^^;)
コメントで投稿できるのですが絵文字が表示されないようです。
[i175]と表示されてしまいます。
これも何か記入漏れが原因でしょうか??
テストで一番上の記事にコメントしています。
お手数おかけしますがよろしくお願いしますm(_ _)m

daniel daniel Edit
08/05 21:27

コメントに 絵文字を「表示」するスクリプトが設置されてないからです
( この記事のスクリプトはコメント投稿で絵文字タグを「入力」するスクリプトなのです )
▼の記事を良く(落ち着いて)読んで ( このスクリプトです )
http://pcafe.blog3.fc2.com/blog-entry-182.html「ゴージャスコメント」 を設置されて下さい

もうすぐそこ、という処まで来ていますよ。

Riiko Riiko Edit
08/06 00:50

こんばんは。ゴージャスコメントの設置をしました。
でもまだ表示できていないのです(^^;)
あと少しでしょうか??

daniel daniel Edit
08/06 08:24

GCOM の前に設置してあるEMOJIhyoujiを全て削除してみてください

Riiko Riiko Edit
08/06 22:15

こんばんは。
EMOJIhyoujiのスクリプトを削除してみましたが
反応が無いようです・・・。

daniel daniel Edit
08/07 01:11

はい こんばんは。 今、Riikoさんのソース拝見してみましたら、
コメント文章部が
<p class="msg" id="cXX>"> ○○○・・・ となっていました。
テンプレートのソースが
<p class="msg" id="c<%comment_no>>">   となってませんか?
<p class="msg" id="c<%comment_no>">    として下さい

Riiko Riiko Edit
08/07 23:39

Danielさんこんばんは!!やっと絵文字が表示できました!
っと思ったらなにやら絵文字が表示されなくなりました。
さっきまで表示されていたんですけどね・・・。
Danielさんのブログの絵文字もそうなっていますよね。
これはfc2webさんの方が原因なのでしょうか?
すぐに元に戻るといいのですが・・・。

daniel daniel Edit
08/07 23:42

おめでとうございます それはよかったですね!
 
現在 システム側でサブドメイン化 が解除されちゃったもようです。
回復(するのか?)を待ちましょう

Riiko Riiko Edit
08/08 22:29

こんばんは!!
FC2webでコメントに絵文字と装飾機能が追加されましたね(^^;)
やっとDanielさんのおかげでコメントの絵文字が
設置できたのに、がっくりです(TдT)

daniel daniel Edit
08/08 22:45

そ、それホントですか?   のおおお~っっ [v12]

 ・・・なーーんてね。

私がココでやったことがシステムでサポートされるなんて、
当blogにとっての栄誉以外の何者でもありませんやね。
FC2blog の「先駆け」でありたい、とは常に思ってます。

ブチ ブチ Edit
07/16 15:47

顔絵文字入力支援 こんにちは。よく楽しく拝見させてもらってます。
いつもdanielさんの配布している
「顔絵文字入力支援」を愛用しているのですが、
改造しようと試みたのですがなかなか上手くいきません。
ブログに詳しく書いたのですがアドバイス頂ければ幸いです。
http://isamuu.blog23.fc2.com/blog-entry-158.html

daniel daniel Edit
07/16 22:27

プチさんこんばんは。
うーん。 絵文字のカテゴリ分けですか。 確かにアイデアですね。
でも、今のやり方ですとオリジナル絵文字(アニメーションGIF)の全てを呼び出す訳ですから、ロードにかなり時間が掛かるのみならず サーバー負荷を上げて他のユーザーにも悪影響が出てしまう懸念があります。
(多くのユーザーがプラグインとして使用するには難がある訳です )

私が思い付く対策としましては
各カテゴリの絵文字リストを独立したHTMLファイルにする事でしょうか。
( カテゴリタイトルをリンクにしてIFRAMEか別窓に表示させる)
そうすればロードされる画像数は数分の一になりますし
リンクがクリックされなければ負荷は生じませんから・・

ブチ ブチ Edit
07/17 21:37

danielさん、こんばんは。
早速のお返事ありがとうございます。
> ‥サーバー負荷を上げて他のユーザーにも悪影響が出てしまう懸念があります。
(多くのユーザーがプラグインとして使用するには難がある訳です )
やっぱり。。
>‥カテゴリタイトルをリンクにしてIFRAMEか別FRAMEに表示させる)
なるほどー。ちょっと勉強してやってみます。
またご意見伺うかもしれませんが宜しくお願いしますm(__)m

daniel daniel Edit
07/18 02:29

なかなか面倒な事だと思いますが 御成功をお祈りしています e-455

isamago(ブチ) isamago(ブチ) Edit
11/10 16:16

danielさん、お久しぶりです。
今回、件のau絵文字入力支援が完成しました。勝手ながら、プラグイン登録しまして、事後ながらご報告申し上げます。
前回のはよくある「続きをよむ」の応用でしたが、今回は「コメントプレビュー」を応用してみました。
ほか、カーソル位置挿入に苦労しましたが借りてなんとか。。
お暇なときに試してもらえたら幸いです。おじゃましましたe-466

daniel daniel Edit
11/10 19:35

isamagoさんこんばんは。 ・・・遂にできましたか。 
拝見しましたよ。  いや、力作ですね。 
ここまでやり遂げられたパワーには脱帽物です。

この種のカスタマネタは着眼次第で幾らでも見付かりますので
これからもチャレンジを続けられて下さることを期待します

isamago isamago Edit
11/10 21:08

優しいお言葉ありがとうございます。
頑張りますe-282


.  
HN Title URL PW secret

TrackBack http://pcafe.blog3.fc2.com/tb.php/187-53ba53f4

Shown after Admisson
.

≫ 改造せよ If you can リスト項目の改行阻止 ≪

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