コメント欄に顔文字一覧をつけて、そこからコメントに挿入するやり方について

質問よろしくお願いします。
私は、ブログのコメント欄なんかでよくある、顔文字のアイコンをクリックすると小窓で顔文字一覧が表示されて、使いたいやつを選択するとコメント欄内のカーソルの位置にその顔文字が挿入される

ということをやりたくて、アメブロのページでソースを見たら、アイコンのところが

<a id="kaoBtn0" class="kaomojiIcon" title="顔文字の追加" onclick="initKaomoji(this, 'kaomoji',0);return false;" href="javascript:void(0);" rel="makeKaomoji">

こうなってたのでjavascriptで出来るのかな？と思ったのですが、
もし可能なら、実際にこれを作るコードってどんな関数とかを使えばよいのか？
ヒントで結構ですので教えていただけると嬉しいです。
ネットでいろいろ検索したのですが、思う答えをみつけることが出来ませんでした。

どうぞよろしくお願いいたします。

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/12/14 16:35

こんにちは。

javascriptを利用しているのは確かなようですが、ご質問文だけからではjavascriptだけで実現しているのかどうかまではわかりません。
登録されている顔文字の量によっては、javascript以外も利用している可能性がありますし、もちろんjavascriptだけで実現している可能性もあります。

＞ヒントで結構ですので教えていただけると嬉しいです。
ヒントにもなりませんが、ヒントにたどり着けそうな方法を・・・

ご覧になっているページのソースを見てみると、<script>タグがあると思います。
外部のファイルを読み込んでいるタイプと、HTML内に直接スクリプトが記載されているタイプとありますが、それらの中を探してみると、
　function initKaomoji(〇, ◇, △){ ～～～
とか
　var initKaomoji = function(〇, ◇, △){ ～～～
のような記述があるはずです。　（〇、◇、△は適当な変数名（=文字列）です。）

その部分が、実際にアイコンをクリックした時の処理内容が記されているスクリプトに当たりますので、どのようなコードでどのような関数を利用しているかが大体わかるのではないかと思います。

上記以外の関数定義方法もあるので、万一、上記の記述が見当たらないような場合は、「initKaomoji」をキーにスクリプト内を検索してみれば、それらしきところに行き当たるものと想像します。

この回答へのお礼

＞fujillinさん

ご親切に教えてくださりどうもありがとうございます！！
そういえばjavascriptってソースが見えるんでしたね！最近ずっとPHPの勉強をしてて、
ソースを見れない　っていうのが頭に入ってしまってたものでここで質問させてもらいましたが(;'∀')

早速コードを見たらわかりました！　最初、文字化けしてたのでどうしたら～？と思ったのですが
これも調べて無事にちゃんと見れるようになりました！

素晴らしいヒント、ほんとにどうもありがとうございました～！

お礼日時：2015/12/15 12:28