JavaScriptでしょうか

質問

WEB日記を書いているのですが顔文字の代わりに顔画像(スマイル)を使用しています。
タグを使用できるCGIですので
毎回
<img src="....gif" border="0">
のようなタグを貼り付けています。

ところがhttp://www.dixib.org/app/phpbb2/posting.php?mode=newtopic&f=1&sid=828cbae95c8884f54c7d499592211121
▲上記のような掲示板では、スマイルアイコンをクリックすると、記号がフォームに表示されてそれが投稿時にはスマイルになっています。
これを実践したいのですが、やり方を教えていただけないでしょうか?

回答No.1

hikaly · ベストアンサー

スマイルアイコンをクリックすると、フォーム中に「:D」などの記号が挿入されるのは、JavaScriptを使っています。

ソース内に「function emoticon」というJavaScriptの関数があります。これがスマイルアイコンの挿入機能部分です。スマイルアイコンを表示しているテーブル内に、この挿入機能を呼び出している部分「javascript:emoticon」があります。

さて、実際の動作ですが、投稿時と閲覧時にわけて説明しますね。

まず、投稿時。「こんにちは:D」という文章を書いて投稿したとします。すると、データベースに投稿記事がそのまま収納されます。

次に閲覧時です。ブラウザでページを開くと、記事の「こんにちは:D」がデータベースから呼び出されます。この際に、「スマイルアイコン用の記号があったら画像ファイル<img src="～">に変換する。」というフィルターを通します。こうして、閲覧者のブラウザにはアイコンが表示されます。

なので、htmlを自分で書いてアップする形のWeb日記の場合は、スマイルアイコンを表示させたい場所に手作業で全て<img src="～">を書き込まねばなりません。

もしcgiを利用したWeb日記の場合は、投稿記事データ中からスマイルアイコン用記号を探し、それを<img src="～">に変換するように改造する必要があります。

私はNucleusというWeblogを使ったことがありますが、これにNP_Smileyというプラグインをインストールして、氏マイルアイコンを簡単に実現できました。ご参考までに。

参考URL：

http://japan.nucleuscms.org/

お礼

とても役に立つご解説をありがとうございました！
CGIを改造しなくても、JavaScriptで:Dなどの代わりに画像ソースを入れてみることにしました。
とても役に立ちました。感謝します。