キーワード応答式チャットシステム
HTMLのCANVAS機能を活用して、キーワード応答式チャットシステムを作ってみました。一般的な、多人数参加型のチャットCGIとして使用することも可能です。
キーワード応答式チャットシステムの仕様
このシステムは、見た目は16ビットPCのコンソール風になっています。入力された内容にキーワードが含まれていれば、それに対する応答が返ってきます。
初期登録キーワードは、HELLO, DATE, TIME, HELP, VERSION, CLEARのみです。CLEARは、画面の内容を一旦クリアするという特殊な動作をし、
他のキーワードは、それに対応する内容の応答をSYSTEM側が返してきます。なお、一部の環境では動かない可能性がありますので、ご了承ください。
出力サンプル
サンプル版をこちらで公開していて、実際に動かしてみることが可能です。
ダウンロード
下のリンクからファイルをダウンロードできます。
ct68_cgi.zip ※ZIP形式で圧縮されてるので、使う前に解凍してください！
圧縮ファイル展開後のファイル構成
| ct68_cgi.html | 立ち上げ用(HTML) |
| ./css/ct68_cgi.css | デザイン補助(CSS) |
| ./cgi/ct68_cgi.cgi | メインプログラム(Perl) |
| ./js/ct68_cgi.js | メインプログラム(JavaScript) |
| ./dat/chat_log.csv | データ保存用ファイル |
| ./dat/last_id.txt | データ保存用ファイル |
| ./dat/index.html | ダミーファイル |
| ./dat/.htaccess | 不正閲覧防止用ファイル |
| readme.txt | 注意事項記載ファイル（実行時不要） |
設置方法
展開したファイルを、使用する環境に合わせてアップロードしてください（readme.txtはアップロードしないで下さい）。
その後、設置するサーバーに合わせてパーミッションの設定を変更しましょう。
フォルダ名等が、デフォルトの設定と異なる場合は、コードに記載されているコメントなどを見て変更を行う必要があります。あとは、ct68_cgi.htmlファイルにアクセスしましょう。
使い方
最初にログイン画面が表示されますが、ユーザー名を設定するためのものなので、深く考える必要はありません。
チャットは下部にある入力欄に打ち込むことで行います。
打ち込んだ内容がウィンドウ画面に表示されますが、CANVAS出力で描画されているので、表示されているテキストをコピーする際は、
発言者のところを左クリックすることで行うようにしています。
また、ウィンドウ自体はドラッグすることで移動できるようになっていて、会話が進んだ際には、画面をマウスのホイールを使ってスクロールさせることもできます。