【第2話】HTMLもわからない40代会社員が、WordPressにAIチャット窓を設置してみた話

AI

個人店の仕事を直接助ける「AI受付窓口」を作って、副業の武器にする 。 そんな大きな目標を掲げたものの、私は普段からコードをガリガリ書いているようなエンジニアではありません

「Webサイトの右下に、よくあるチャットの丸いアイコンを出す」

たったそれだけのことでさえ、どうやればいいのか全く見当もつかない、普通の40代会社員です 。 でも、わからないからといって立ち止まっていては、何も始まりません 。まずは実験台(テスト環境)として、自分が個人的に運営しているWordPressのブログに、AIのチャット窓口を設置してみることにしました 。いきなり他所のお店に導入する前に、まずは自分のフィールドで動くかどうかを検証するためです

HTML未経験でも安心!頼れるのは「AIの先生」だけ

HTMLもCSSもほぼわからない私にとって、唯一の頼みの綱は「ChatGPT」や「Gemini」といった生成AIの存在でした 。彼らに向かって、画面越しに素直な悩みをそのまま打ち込みました。

私からのプロンプト: 「WordPressで作ったブログの右下に、クリックしたら開くチャット画面を作りたいです。プログラミング未経験の初心者なので、コピペで動くコードと、それをどこに貼ればいいのかを小学生でもわかるように教えてください」

すると、AIの先生はものの数秒で「こうすればできますよ!」と、謎の英語や記号が並んだ暗号(HTMLとJavaScriptというらしいです)を出力してくれたのです。

正直、書かれている中身の意味は1ミリもちんぷんかんぷんです。でも、先生は親切にこう教えてくれました。 「このコードを、WordPressのコードスニペット(追加機能)という場所にそのまま貼り付けてください」

コピペして「保存」を押すまでの心臓バクバク感

AIの指示通りに、自分のWordPressの管理画面を開きます。 教えてもらった「Code Snippets」というプラグインをインストールし、新しくコードを貼り付ける枠を作り、AIが吐き出した暗号を「コピー&ペースト」しました

(……本当にこれだけでいいのだろうか?) (もし変なボタンを押して、ブログ自体が真っ白になって壊れたりしないだろうか?)

プログラミング初心者特有の、妙なドキドキと冷や汗。息をのんで、えいやっ!と「変更を保存」ボタンをクリックしました。

なぜか表示される。あるいは、震えるほどの感動

恐る恐る、自分のブログのトップページをブラウザで開き、画面をスクロールしてみました。すると……。

画面の右下に、見慣れた、大手のサイトでよく見る「チャットの丸いアイコン」がぽつんと表示されているではありませんか!

アイコンをクリックすると、スッと綺麗なチャット画面が立ち上がります。

「おぉ……!! 本当に出た……!!」

深夜の部屋で、思わず声が出ました。 プロのエンジニアから見れば、AIのコードをコピペしただけの「5分で終わる作業」かもしれません。でも、コードなんて一から書けない素人の私にとっては、「自分がAIに指示して作らせたシステムが、自分のサイトで実際に動いている」という事実が、たまらなく嬉しかったのです

「俺、なんだかエンジニアみたいなカッコいいことやってるじゃん!」

脳内は謎の達成感と感動に包まれ、副業への道が大きく開けたような気がしました。

しかし、最高のテンションから一転、冷たい現実を知る

チャット窓口が表示されたことで、私のモチベーションは最高潮に達していました。 「よし、それじゃあ実験だ!」と、お店の初期の受付を想定して、試しに自分でメッセージを打ち込んでみたのです。

私:「こんにちは。明日の15時に予約できますか?」 AI:「こんにちは!私はAIアシスタントです。何かお手伝いしましょうか?」 私:「だから、明日の15時に予約したいんだけど」 AI:「予約についてのお問い合わせですね!当店は〇〇時から営業しております」

……あれ? 会話はスムーズに成立しています 。AIは確かに賢く、それっぽい返事をしてくれます 。しかし、肝心の「予約」が1ミリも完了していないのです

よく考えれば、当たり前のことでした 。AIは言葉を返すことはできても、お店の「予約台帳」を持っていません 。空き時間の確認もできなければ、誰がいつ来るのかを記録する場所も、どこにも繋がっていないのです

「これじゃあ、ただの『高性能なおしゃべり相手』だ……」

お店の受付を任せるには、会話をするだけでなく、「予約データをどこかに保存する仕組み」が絶対に必要 。せっかくチャット窓ができた喜びから一転、私は実用化への大きな壁に直面することになりました

次回予告:おしゃべりボットが「システム」に変わる日

チャット窓口はできた。でも、予約データを記録できない 。このままでは、到底お店にお金を出してもらえるような「売れるシステム」にはなりません

どうすれば、プログラミング素人の私でも、お客様の予約を自動で記録できる仕組みを作れるのか? 悩んでいた私が出会ったのは、仕事でもお馴染みの「Googleスプレッドシート」でした

次回、【第3話】AIは賢い。でも予約はできなかった〜スプレッドシートと繋いだら世界が変わった話〜 に続きます

ここから、バラバラだった点と点が、魔法の架け橋によって一本の線に繋がっていきます 。お楽しみに!

コメント