プログラミングの勉強をしながらチャットボットを作ったので公開します。こんなのでも使ってみたい方はダウンロードしてください。（いないか‥いないよね‥）
2023年3月15日 ChatGPT APIを使う様にVer2化しました。
ブログに入れれば他者のサイトと差別化できて、SEO効果がアップするかも！！？
ソースコードは公開してます。このツールで情報収集は一切やっていませんのでご安心ください。
無料チャットボットで出来る事
このツールができること‥
それは‥
選択した「問い」に応じて、「答え」を表示する
以上。
これだけ。
（Ver2はChatGPT API連携してるけど別にChatGPTを連携する必要は無いんだけど個人的にやってみたかっただけ。）
これでチャットボットと言えるんだろうか‥
むしろ「チャット」すらしてないような。文字入力エリアが無いので文章の受付もしないし、対応する回答をするわけでもなく。
AIは勿論搭載されていません。学習して答えを返すような機能もありません。
あらかじめ用意された「問い」の一覧から、ユーザーがボタンを押せば、その問いに対応する「答え」を表示するのみです。
簡易なＱ＆Ａを画面右下に表示させることができるツールです。
無料チャットボットのダウンロード
こちらからダウンロードしてください。
無料チャットボットのデモサイト
このサイトの右下にあるボタンを押してチャットボットウィンドウを開いてください。ここで動作確認できます。
動作確認できるのはVer2です。
ChatGPT APIを使っていますがレスポンスが遅くて。早くレスポンスを表示するのにうまくいってません（誰かやり方教えて‥）
チャットボットの設置の仕方
ここからはVer1の設置方法について説明しています。Ver2のほうはまだ‥
ダウンロードファイルを解凍すると以下のファイルが出てきます。
●ファイル構成
chatbot/ ＊＊フォルダ
┗chatbot.css ＊＊chatbot用のCSS
┗chatbot.js ＊＊chatbotの本体JS
┗eyecatch.png ＊＊アイキャッチ画像 300×90
┗eyecatch-sp.png ＊＊スマホ用アイキャッチ画像 50×50
┗profile.png ＊プロフィール画像 50×50
●設置方法
ドメインルート直下にchatbotフォルダ毎アップロードしてください。
例）https://pg-happy.jp
なら
このようになるようにアップロード
※ドメインルート直下じゃなくてもうごくけど
●設定
HTMLファイルの</head>タグ直前に以下のコードを追記してください。
www.example.comのドメイン部分は適宜あなたのサイトのドメインに書き換えてください。
<script type="text/javascript" src="https://pg-happy.jp/chatbot/chatbot.js"></script>
とりあえずはこれで動きます！
あとは自分のサイト用にカスタマイズすればよいです。
無料チャットボットのカスタマイズとか
画像を変えたい
| ファイル名 | 縦横サイズ | |
|---|---|---|
| アイキャッチ画像 | eyecatch.png | 300 x 90 |
| アイキャッチ画像（スマホ用） | eyecatch-sp.png | 50 x 50 |
| プロフィール画像 | profile.png | 50 x 50 |
これらのファイルを用意して、chatbotフォルダの中に上書きしてください。
「問い」と対応する「答え」を設定するには
ここからは直接ソースコードをいじることになります。
修正するファイル ： chatbot.js
const menu = [ 'プログラミングスクールはやめとけ？', 'おまえは何者じゃ？', 'おすすめのプログラミングスクールは？', 'どんな基準で言語を選ぶ？', 'おすすめのプログラミング言語は？', '次のおすすめの言語は？', ];
ここの中身を変更することで「問い」を変えることができます。
次に以下の中身を変更することで「答え」を変えることができます。「問い」の数と「答え」の数は一致させてください。
const res = [ '独学できる人はやめとけ。自分で数千円で書籍を買えば数十万円もするスクールに通わなくても1年やれば一定の知識とスキルは身に着くでしょう。ただ、途中で挫折しないことが条件‥', '40代のオッサン。むかしSEとPGやってたけど、ブログのためにわざわざプログラミングスクールに実費で入会を繰り返して、ガチのレビューを書いてまふ。', '3ヶ月受講したけどテックアカデミーの先生は良かった。次点でテックキャンプ、テックキャンプの先生はちょっと心もとなかった。', 'WEB系ならHTML/CSS/JavaScript/PHP/Rubyあたり。業務系ならJava/Cあたり。組み込みならC。JAVAはWEBもAndroidもできる。AI・統計分析ならPython。iOSはSwift。AndroidはKotlin。', '初心者ならまずはHTMLとCSSをやるとよい。その後にJavaScriptかな。画面で見てすぐ結果がわかるしWeb上にたくさんの参考が載ってる。', 'まずは1つの言語をつきつめるとよい。大抵のプログラミング言語は似たような構文をしているので。', ];
名前を変えたい
修正するファイル ： chatbot.js
以下の「光のプログラマー」のところを適宜、あなたの名前に変えればOKです。
const yourName = "光のプログラマー";
役職を変えたい
修正するファイル ： ファイル chatbot.js
以下の「駆け出しプログラマーサポート」のところを適宜、あなたの役職名に変えればOKです。
const yourRoll = "駆け出しプログラマーサポート";
アイキャッチの画像サイズを変えたい
修正するファイル ： chatbot.css
6行目付近にある以下の「width: 300px;」の数字をいじれば幅を変えることができます。「height: 90px;」の数字をいじれば高さを変えることができます。（パソコンでの表示時）
#chatbot-eyecatch-div {
display: block;
position: fixed;
padding: 0;
top: auto;
bottom: 0; /*アイキャッチの場所下からの距離*/
right: 0; /*アイキャッチの場所右からの距離*/
overflow:visible;
width: 300px;
height: 90px;
background-image: url(eyecatch.png);
background-position:right;
}
スマホでのアイキャッチ画像のサイズを変える場合は、
修正するファイル ： chatbot.css
176行目付近にある以下の「width:50px」と「height:50px;」の数字を変えれば幅高さのサイズを変えられます。
@media screen and (max-width: 480px) {
#chatbot-eyecatch-div {
bottom: 50px;
width: 50px;
height: 50px;
background-image: url(eyecatch-sp.png);
}
アイキャッチ画像の位置を変えたい
修正するファイル ： chatbot.css
・PC画面の場合
6行目付近にある以下の「bottom: 0;」は画面下からの距離を表しています。
数字を増やせば、画面下から上の方に位置を移動できます。
#chatbot-eyecatch-div {
display: block;
position: fixed;
padding: 0;
top: auto;
bottom: 0; /*アイキャッチの場所下からの距離*/
right: 0; /*アイキャッチの場所右からの距離*/
overflow:visible;
width: 300px;
height: 90px;
background-image: url(eyecatch.png);
background-position:right;
}
もし画面右端に張り付きじゃなくて、左端に張り付きにしたい場合は「right: 0;」のところを「left: 0;」にすればOKです。
・スマホ画面の場合
同様に、176行目付近にある以下の「bottom: 50px;」の数字部分をいじればOKです。
@media screen and (max-width: 480px) {
#chatbot-eyecatch-div {
bottom: 50px;
width: 50px;
height: 50px;
background-image: url(eyecatch-sp.png);
}
ということで以上です。
簡易チャットボットの利用規約
当チャットボットの著作権は㈱ハピアントにあります。
当プログラムの転用、転載はお控えください。
改変してあなたのサイト内で使うのは自由です。
Twitterでシェアしてくださると喜ぶかもしれません。
Tweet
