大手メーカーWebサイトへのAIチャット導入プロジェクトにおける初期開発
【概要】 大手メーカーのWebサイトにAIチャットを導入するにあたっての機能追加 【担当】 チーム構成: - プロジェクトマネージャー: 1名 - コンテンツライター: 1名 - エンジニア: 2名(1名はスポット) メインのエンジニアとして、バックエンド及びフロントエンドの設計,コーディング,テストを担当。 【使用技術】 Ruby | Ruby on Rails | JavaScript | Vue.js | Docker 【課題】 - ユーザーが現在閲覧しているページに応じてAIチャットの内容を変化させたいという要望があった - AIチャットでサイトを案内する際、遷移させたいページの数が多く、一般的なチャットボットのように回答ボタンを並べる形式の選択肢表示だと画面を過大に占有してしまう問題があった 【取り組み】 - AIチャットの内容をサーバーから取得するAPIのリクエストパラメータに”現在閲覧しているページのURL文字列”を追加。サーバーではそのURLとユーザーの属性(それまでどういった回答をしたか等)を計算し、AIチャットの内容を制御する機能を実装 - ドロップダウン形式で選択肢を表示する新しいVueコンポーネントを設計し、回答の選択肢が多い質問を行いたい場合に表示できるよう実装 【工夫した点】 - AIチャットの内容を制御する既存の仕組みについて企画側やエンジニアのメンバーにヒアリングし、ユーザーのそれまでの回答状況を蓄積するという既存の機能から着想を得て設計 - Vue.jsでの業務は未経験であったが、既存の実装や公式ドキュメントの情報、チームメンバーからのサポートを得てキャッチアップ。今後のプロジェクトでも使用されるコンポーネントにするため、他のコンポーネントとの依存関係をなるべく無くし、AIチャットの内容と選択肢のデータはvuexのstoreから取得するように実装 【成果】 バックエンド・フロントエンドのそれぞれで汎用的な機能を実装。これらの機能は他のAIチャット新規導入プロジェクトや運用中のプロジェクトにも取り込まれ、AIチャットのコンテンツ表現力向上に貢献。