ごあいさつ 「25歳文系未経験からエンジニア転職を目指す学習4ヶ月目の一般男性が、自分が過去につまづいたポイントをわかりやすく噛み砕いて書く！」をコンセプトに投稿しています。 LGTMしていただけると大変励みになります…！！！ 概要 以下gifのように、ボタンのクリックによって要素の表示or非表示を切り替える簡単な方法を紹介します。 Vue.jsの基礎的な知識であるものの、基礎的すぎて(?)の部分だけ切り取られたシンプルな技術記事を見つけられず遠回りしていたことがあったのでもしそういう方がいたら参考になればと思います。 解説 考え方としては、以下3つのポイントに分かれるのでこの３つを順に説明します。 1.初期状態では文章は隠しておく 2.ボタンを押すと「ボタンが押されているよ」モードに切り替わり、詳細文が表示される。 3.もう一度ボタンを押すと初期状態に戻り、詳細ぶんが再び非表示になる。 1.初期状態では文章は隠しておく Vue.jsでは "v-show"と"v-if"という、条件によって画面への要素の表示/非表示を変更できる仕組みがあり、今回はv-showのみ扱います。 違いについては調べればたくさん出てくるのでググってみてください。 では、こちらのgif画像の描画部分をまずは見てみます。 <button @click="viewdetail">もっと見る</button> // このボタンを押すと"viewDetail"メソッドが呼び出される <p v-show="tapped" class="contents"> // "tapped"という状態(tapped = true)の時だけ表示される 地域と関わりたい。自分の世界を広げたい。社会で活躍したい。<br/> そんな前向きな思いを持つ全ての人と全国の魅力あふれる地域を結ぶプラットフォームです。 </p> <p>タグにv-show="tapped"と記載されているので、これは「"tapped"」という条件を満たしていれば表示するよ！という意味です。(tapped = true ということ。) そして、<button>タグには@click="viewDetail"書かれていて、これは「クリックされると「viewDetail」という関数(メソッド)が呼び出されるよ」という意味です。 (@clickは、v-on:clickの省略形になります。こちらも基礎として大切なのでわからない方は調べてみてください。) つまり、'viewDetail'という関数を呼び出しtapped = true状態にして詳細文(<p>タグ部分)を表示させよう！ということです。 2.ボタンを押すと「ボタンが押されているよ」モードに切り替わり、詳細文が表示される。 と、 3.もう一度ボタンを押すと初期状態に戻り、詳細文が再び非表示になる。 の２つはまとめて関数viewDetailで処理できるので、そのようにしていきます、 viewDetail部分のコードは以下のようになります。 　※該当箇所のみ抜粋。コメントもご参考ください。 <script> export default { data() { return { tapped: false, // 初期状態をfalseと設定(=非表示) }; }, methods: { viewdetail() { // buttonで呼び出される関数 if (this.tapped === false) { //　「もしtappedがfalse(=初期状態)なら」 this.tapped = true; // 「tappedをtrue状態にする(="v-show"部分を表示する)」 } else {　//　「そうでなければ(=tappedがtrue状態なら)」 this.tapped = false; //「tappedをfalseにする」 } }, }, }; </script> シンプルなif文で、 1,もしtapped が falseなら(=初期状態なら) 、trueにする(="v-show部分を表示させる) 2,そうでなければ、tappedをfalseにする(v-showを非表示にする。) という条件分岐をつくっています。 これで、buttonをクリックするたびにviewDetail関数が呼び出され、v-show部分の表示/非表示が切り替わります！カンタン！ 注意点・補足 1,data部分で初期値を設定していないと「そんなプロパティは定義されていないよ！」とエラーになります。 Vue.jsではインスタンス内に定義されていないプロパティやメソッドがレンダリング内に含まれているとエラーが出ます。 参考：https://qiita.com/katu_/items/9474ed207326f3a5d02c 2,今回dataで定義したtappedのようなプロパティの名称に決まりはありません。 自分にとって&誰にとってもわかりやすいような名前をつけられると良いですね。 所感 基礎中の基礎の内容ですが、v-showやv-if、@clickでのメソッドの呼び出しなど、Vue.jsの大事な部分が詰まっていると思い取り上げました。 誰かの何かのお役に立てたら嬉しいです。 参考 Vue.jsのv-ifとv-showの違い https://qiita.com/Aqua_ix/items/61eac355f3c24d7676e1 エラーについて　[Vue warn]:Property or method "name" is not defined on the instance but referenced during render. https://qiita.com/katu_/items/9474ed207326f3a5d02c

○はじめに 今回、私が作成したアプリは個人で作成して運用していくことを目的としたものです。 そのため、 コストを出来るだけ抑えて、なおかつ、運用して行くにあたってのそれなりのパフォーマンスを追求したい と考えました。 当記事では、 公開までの手順を１から記載し、詰まったポイントについて解説したり、参考記事ではわかりにくかったポイントなどを解説します。 細かい公開手順については、参考記事を参照してください。 ○簡単に、VPSとは？ 仮装専用サーバーのことです。 1代のサーバーを複数人で共有する点では、PaaSやレンタルサーバーと同じですが。 1人1台カスタマイズして作った仮装的な専用サーバーを使える事がメリットです。 ○なぜ、VPSを使用する？ 初めに、記載しましたが、 コストを出来るだけ抑えて、なおかつ、運用して行くにあたってのそれなりのパフォーマンスを追求したいと考えたからです。 個人サービスで、AWSを利用するとVPS以上にオンプレに近い自由は効くと思いますが、従量課金性でまあまあの高額請求がきます。笑 （使い方にもよると思いますが、、、） その点、VPSサービスは月定額のため分かりやすいですし、安価です。 しかし、仮装サーバーといえど、物理サーバーは1台のため、 万が一、アクセス数が急激に増えた時が心配です。 その際は、AWSへ移行する方法もあるため、臨機応変に対応したいと思います。 また、レンタルサーバーのような共有サーバーよりもVPSでは多少なりとも、運用においての影響は受けづらいと考えました。 ○今回使用するインフラ・環境 インフラ・環境 ConoHa VPS CentOS 8 Apache 2.4.37 PHP 7.4.23 Laravel 6.20.32 Composer version 2.1.7 ○公開手順 ①ConoHa VPSに登録〜VPS作成 まずは、Conohaの新規登録を完了させてください。（登録は無料） その後、VPSを作成していきます。 ・サーバーを追加　→　イメージタイプ：CentOS → rootパスワードの設定 これで、VPSが出来上がります。 ②サーバーの設定 サーバー側の設定は、以下記事を参考にしました。 この記事では、Apache、Laravel、MySQLでの環境構築を目標にしています。 参考に進めてみてください。 下記記事では、sshに既に接続された状態からの設定が記載されているので、わかる方は飛ばしていただいて結構ですが、以下sshの接続方法を記載します。 ●コマンドラインからsshに接続する まずは、ConoHaのコントロールパネルに記載されているIPアドレスの確認を行ってください。 ・サーバータグ → ネームタグ → ネットワーク情報 → IPアドレス sshに接続します $ ssh root@[ipアドレス] パスワード入力 接続ができれば、この記事からサーバーの設定行えます。 ③コンポーザーをインストール コンポーザーが入っていないと、動かない。 CentOSへcomposerのダウンロードを行なってください。 php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');" php -r "if (hash_file('sha384', 'composer-setup.php') === '756890a4488ce9024fc62c56153228907f1545c228516cbf63f885e036d37e9a59d27d63f46af1d4d07ee0f76181c7d3') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;" php composer-setup.php php -r "unlink('composer-setup.php');" sudo mv composer.phar /usr/local/bin/composer $ composer composer:not foundにならなければ、完了です。 ここまでくれば、http://[IPアドレス]:8000/を叩くと表示されるはず。（まだ完了ではないが） ④500エラーが出ている場合。Apacheのエラーログを確認する sshで接続した状態で [root@IPアドレス ~]# cd /var/log/httpd/ [root@IPアドレス httpd]# ls access_log error_log [root@IPアドレス httpd]# tail -f error_log ⑤.envを編集する 下記記事を参考に.envの編集を行います #APP_ENV=production #APP_URL=[アプリのURL] #APP_DEBUG=false #DB_DATABASE=[データベース名] #DB_USERNAME=root #DB_PASSWORD=root←まだ変更していなければ 私の場合は、上記の設定を変更してDBやサーバーとの接続できました。 ⑥.htaccessを編集する ・/public配下にあるので編集 ⑦Laravelのセットアップ % composer install ← まだ、本番環境にインストールしていない方は % php artisan key:generate Application key set successfully. % php artisan migrate:fresh SQLSTATE[HY000] [1049] Unknown database 'laravel' →私は.envの設定が間違ってここでエラー .envの修正 →DB_DATABASE=[自分でつけたデータベースの名前] これで、なんとかDBの作成まで完了しました。 実はここまででは、まだ私の環境では見れないページがあるのですが、公開という意味ではとりあえずは一段落つきました。 残り、「APIのエラー修正、本番環境でのメールの送受信」を修正して記事にします。 お疲れ様でした。

対象者 nuxtで作ったアプリケーションにアナリティクス設定したい人 Googleのドキュメントが複雑すぎて（自分には）簡単にまとめたいと思ってメモ書き 手順 １ インストール yarn add @nuxtjs/google-gtag ２ 下記記述 // nuxt.config.js { modules: [ '@nuxtjs/google-gtag', } 3 .envファイルでID定義 GOOGLE_ANALYTICS_ID = G-XXXXXXXXXX 4 下記記述 // nuxt.config.js 'google-gtag': { id: process.env.GOOGLE_ANALYTICS_ID, debug: true, } 5 デバッグ アナリティクスの「リアルタイム」で確認 （これはたまに反応しないようなので非推奨） 対象サイトで、開発者ツール => 「ネットワーク」 => query string parameters の tid に GOOGLE_ANALYTICS_IDが確認できる Tag Assistant Legacy (by Google)　で確認。ちゃんとカウントされる ( https://chrome.google.com/webstore/detail/tag-assistant-legacy-by-g/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=ja ) まとめ これだけだった… アナリティクス、趣味で触ってた時とはなんか進化してて別だったのと headにコード埋め込んで繋ぐ、みたいな先入観が邪魔してど詰まったので2度と忘れないために。。 と、いうかデバッグ方法わからず、ずっと「リアルタイム」みてて、違うことしてたんだとおもう… というかまだ「カスタムディメンション」してトラッキング分けるという続きがあるけどいったん終わり。 参考 こちらでもできた 正直headに埋め込む風な、こっちの方がしっくりきました

はじめに はじめまして！ t_powerです。 本記事では、社内FAQをBotUIでチャットボット化した話を扱います。 プログラミング知識があまりない・・・ チャットボットを作ってみたいけど難しそう・・・ と思っている人にはぴったりのツールだと思うので、是非ご覧ください！ 今回作成する上で下記のサイトを参考にさせていただきました。 この記事を見て実際に作ろうと思っている方はこちらも参考にしてください。 1. JavaScriptだけで本格的なチャットボットを開発できるライブラリ「BotUI」を使ってみた！ 2. チャットボットを作ろう：2. JekyllサイトでBotUI 今回作成したもの 「はじめる」と書かれているバナーからチャットボットを使うことができます。 作ろうと思った経緯 before 従来は、問い合わせをメールなどで受け付けて、担当者が直接回答をしていました。 類似の問い合わせも多く、担当者の負担になっていました。 after それなら・・・ AIが流行っているし、問い合わせ対応をチャットボット化すればいいじゃないか！ という流れになり、チャットボットを開発することになりました。 BotUIとは チャットボットのUIを構築するためのJavaScriptフレームワーク。直観的なJavaScript APIを使用して、メッセージを追加し、ユーザーが実行できるアクションを表示できる。 (出典: BotUI公式ドキュメント) 要するに、これを使えば、簡単にチャットボットが作れるよ～ってわけです！ チャットボットは大きく分けるとシナリオ型とAI型（人工知能型）の2種類存在していて、BotUIは、シナリオ型を簡単に作ることが出来るフレームワークになっています。 ※シナリオ型とAI型の違いについてはこちらをご覧ください シナリオ型・AI型のチャットボットを比較～導入メリットとシナリオ作成のコツ チャットボット用のフレームワークやライブラリはたくさんあるようですが、今回はBotUIが適していそうだったので、こちらを採用しました。 事前準備 作業環境 OS: Windows10 テキストエディタ: Visual Studio Code ブラウザ: Microsoft Edge フォルダ構成 css/botui-theme-default.css 独自のテーマを作成することができるファイル（デザインの変更はこちらのファイルがメイン） css/botui.min.css 基本レイアウトを設定しているファイル（あまり書き換える必要ない） ※CSSファイルはCDN経由で読み込んでもよいのですが、今回はデザインを変更したかったため、GitHubからダウンロードしました ※とにかく動くチャットボットをはやく作りたい！デザインなんてどうでもいい！という方はダウンロードする必要はございません images/sample.png BOT側のアイコン ※もしアイコンを表示させたい場合は、こちらの任意の画像と、botui.min.cssをダウンロードして、書き換える必要があります（無くてもチャットボットは動きます） bot/index.html チャットボットを表示させるファイル bot/answer.js 質問に対する回答をまとめたファイル bot/bot.js BotUIを使ってシナリオを構成するファイル 基本的な使い方 index.html index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>チャットボット</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/botui-theme-default.css" /> <link rel="stylesheet" href="../css/botui.min.css" /> <!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" / --> <!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" / --> </head> <body> <div id="botui-app" style="white-space:pre-wrap; word-wrap:break-word;"> <bot-ui></bot-ui> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script> <script src="https://unpkg.com/botui/build/botui.min.js"></script> <script src="./answer.js"></script> <script src="./bot.js"></script> </body> </html> index.htmlは上記のコードをそのままコピペでOKです。 （デザインにこだわらない人は<!--link rel="stylesheet" href="https://unpkg.com/botui/build/botui.min.css" />と<!-- link rel="stylesheet" href="https://unpkg.com/botui/build/botui-theme-default.css" / -->　のコメントを外して、お使いください） また、Bootstrapを導入して、スマホ、PC対応のレスポンシブな画面にしてもよいかもしれません。 style="white-space:pre-wrap; word-wrap:break-word;"について CDN経由で読み込んでいるVue.jsのバージョンがなぜ最新バージョンではないのか 上記2点は苦戦した点にて記載しています。 bot.js bot.js var botui = new BotUI('botui-app'); var Photo = '../images/sample.png' //初期メッセージ botui.message.add({ photo: Photo, content: 'チャットボットです', delay: 1000 }).then(showQuestions); //質問の選択肢を表示する関数 function showQuestions(){ botui.message.add({ photo: Photo, content: '質問をお選びください', delay: 1000 }).then(function(){ return botui.action.button({ autoHide: false, delay: 1000, action: [ {icon: 'sticky-note-o', text: '採用', value: 'recruitment'}, {icon: 'user', text: '新入社員', value: 'newEmployee'}, {icon: 'ellipsis-h', text: 'その他', value: 'other'}] }); }).then(function(res){ botui.action.hide(); switch(res.value){ case 'recruitment': showRecruitment(); break; case 'newEmployee': showNewEmployee(); break; case 'other': showOther(); break; default: end(); } }); } //採用カテゴリの質問の選択肢を表示する関数 function showRecruitment(){ botui.message.add({ photo: Photo, delay: 1000, content: '当てはまるものをお選びください' }).then(function(){ //ボタンを表示 return botui.action.button({ autoHide: false, delay: 1000, action: [ {icon: 'circle', text: '一次面接と最終面接の違い', value: 'interviewDifference'}, {icon: 'circle', text: '筆記試験の合格基準を教えていただけないでしょうか', value: 'successCriteria'}, {icon: 'long-arrow-left', text: '1つ戻る', value: 'return'}] }); }).then(function(res){ botui.action.hide(); switch(res.value){ case 'interviewDifference': showInterviewDifference(); break; case 'successCriteria': showSuccessCriteria(); break; case 'return': showQuestions(); break; default: end(); } }); } function showInterviewDifference(){ botui.message.add({ photo: Photo, delay: 1000, content: ansInterviewDifference }).then(askEnd); } /* 省略 */ //プログラムを終了するか聞く関数 function askEnd(){ botui.message.add({ photo: Photo, delay: 2000, content: '他に質問はありますか' }).then(function(){ return botui.action.button({ delay: 1500, action: [ {icon: 'circle-o', text: 'はい', value: true}, {icon: 'close', text: 'いいえ', value: false}] }); }).then(function(res){ res.value ? showQuestions() : end(); }); } //プログラムを終了する関数 function end(){ botui.message.add({ photo: Photo, delay: 1500, content: ansEnd }) } 今回作成したシナリオはこのような構成です。 （上記のコードには記載していませんが、「新入社員」、「その他」についても、「採用」と同様に作りました） bot.jsもphotoのパス指定だけ気を付ければ、コピペで問題ないです。 今回使用したメソッドやオブジェクトについて説明します。 method 名前 説明 botui.message.add 新規メッセージを追加する botui.action.button ボタンを表示する botui.action.hide アクションを非表示にする action object 名前 説明 autoHide 自動的に非表示になるのを防ぐ botui.action.hide()と一緒に使い、これが呼び出されたときにボタンを消す action 今回はbutton objectのicon、text、valueでそれぞれ、ボタンのアイコン、表示させる文、値を設定できる また、iconはFontAwesomeを利用している botui.action.button()などと一緒に使う message object 名前 説明 photo 画像のパスを指定して、アイコンを指定 content 表示されるメッセージを指定 delay 表示されるまでの秒数を設定できる ※ミリ秒単位なので、1000は1秒にあたる 他のメソッドやオブジェクトに関してはこちらをご覧ください。 bot.js }).then(function(res){ botui.action.hide(); switch(res.value){ case 'recruitment': showRecruitment(); break; case 'newEmployee': showNewEmployee(); break; case 'other': showOther(); break; default: end(); } }); 選択した項目からチャットを進めていくために、switch文で条件分岐させ、選択したボタンのvalueをresで取得し、それに合った関数を呼び出しています。 bot.js //プログラムを終了するか聞く関数 function askEnd(){ botui.message.add({ photo: Photo, delay: 2000, content: '他に質問はありますか' }).then(function(){ return botui.action.button({ delay: 1500, action: [ {icon: 'circle-o', text: 'はい', value: true}, {icon: 'close', text: 'いいえ', value: false}] }); }).then(function(res){ res.value ? showQuestions() : end(); }); } プログラムを終了するか聞く関数のaskEnd()では、「はい」か「いいえ」の2択しかないため、3項演算子を使用して分岐させています。 ?の左側res.valueがtrueならshowQuestions()、falseならend()を呼び出します。 answer.js 回答メッセージの変数をまとめたファイルです。 後で、回答メッセージをDBから取得するように改修する予定なので、一旦別ファイルに分けて宣言をしています。 answer.js var ansInterviewDifference = `一次面接は採用担当が実施します。 最終面接は社長が実施します。` /* 省略 */ var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` このように、質問に対する回答をまとめています。 また、表示させるメッセージについては、`（バッククォート）で囲むことで、実際にファイルに記載したようにメッセージボックスにも表示されるようになります。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)については、苦戦した点にて記載します。 index.html <script src="./answer.js"></script> <script src="./bot.js"></script> 今回のように別のjsファイルに質問に対する回答をまとめる場合、index.htmlで先に回答ファイルanswer.jsを読み込む必要があるので注意！ 苦戦した点 指定した場所で改行できない index.html <div class="container" id="botui-app" style="white-space:pre-wrap; word-wrap:break-word;"> answer.js var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` メッセージ内で\nや\r\nなどの改行コードを試してもうまくいかず・・・ 色々調べてみると・・・ Vue.jsで文字列を改行する場合 style="white-space:pre-wrap; word-wrap:break-word;" bot-uiタグが囲まれているdivタグの中にこれを記載し、先ほどanswer.jsで紹介したメッセージの内容を`（バッククォート）で囲む必要があるみたいです。 参考記事 Vue.jsでdataの文字列を改行したい HTMLクイックリファレンス white-space HTMLクイックリファレンス word-wrap リンク化できない index.html <!-- これだとリンク化できない --> <script src="https://cdn.jsdelivr.net/vue/latest/vue.min.js"></script> <!-- 2.0.5にすることでリンク化できる --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script> 公式ガイドに記載されている通り、Vue.jsの最新バージョンをCDN経由で読み込んでいました。しかし、その場合URLの後に別のメッセージが表示されると、リンク化されなくなってしまうみたいです。 この問題を解決するためには、Vue.jsのバージョンを2.0.5に落とすことで、どのような状況でもリンク化されるようになります。 参考記事 URL loses its markup in javascript framework (BotUI) URLを新規タブで展開できない answer.js var ansEnd = `ご利用いただきありがとうございました。 [TOPページへ戻る](http://xxx.xxx.xx.xxx)` [表示文字](URL)で指定すると、同じタブで画面が切り替わってしまって、チャットボットが閉じてしまいます。 answer.js var newline = `[BotUI 公式マニュアル](https://docs.botui.org/index.html)^` 新規タブで展開するには、カッコの後ろに^（キャレット）を付けることで解決できました。 デザイン 今回デザインを変更するために、GitHubからダウンロードして読み込んだ、 botui.theme-default.cssとbotui.min.cssで重要だと思った点を紹介します。 botui.theme-default.css .botui-cotainer botui-theme-default.css .botui-container{ font-size:14px; background-color:#fff; font-family:"Open Sans",sans-serif } font-size メッセージの文字やボタンの文字の大きさを指定 background-color チャット背景色を指定 font-family フォントを指定（フォントファミリーと総称フォントの2つがある） .botui-messages-container botui-theme-default.css .botui-messages-container{ padding:10px 20px } padding メッセージのパディングを指定 .botui-actions-container botui-theme-default.css .botui-actions-container{ padding:0px 20px } padding アクション（今回はボタン）のパディングを指定 .botui-message botui-theme-default.css .botui-message{ min-height:30px } min-height メッセージ間の最小幅を指定 .botui-message-content botui-theme-default.css .botui-message-content{ padding:7px 13px; border-radius:15px; color:#000000; background-color:#8bf8f8 } padding メッセージ領域内のパディングを指定 color BOT側（左側）に表示されるメッセージの色を指定 background-color BOT側（左側）に表示されるメッセージ領域内の背景色を指定 ※border-radiusは外枠の丸み具合を変更するプロパティだが、ここで値を変更しても変わりませんでした（メッセージの要素内を変更するプロパティだから効かない？） .botui-message-content.human botui-theme-default.css .botui-message-content.human{ color:#000000; background-color:#f8ddaa } color 人間側（右側）に表示されるメッセージの色を指定 background-color 人間側（右側）に表示されるメッセージ領域内の背景色を指定 .botui-message-content.text botui-theme-default.css .botui-message-content.text{ line-height:150% } line-height メッセージ領域内の行間の高さを指定 .botui-message-content.embed botui-theme-default.css .botui-message-content.embed{ padding:5px; border-radius:5px } padding 動画のパディングを指定 border-radius 外枠の丸みを指定 .botui-message-content-link botui-theme-default.css .botui-message-content-link{ color:#1A0DAB } color リンクの色を指定 .botui-actions-buttons-button botui-theme-default.css .botui-actions-buttons-button{ border:1; color:#fff; line-height:1; cursor:pointer; font-size:14px; font-weight:normal; padding:10px 20px; border-radius:4px; font-family:"Open Sans",sans-serif; background:#777979; box-shadow:2px 3px 4px 0 rgba(0,0,0,.25) } cursor ボタンにカーソルを合わせたときの種類を指定 font-weight ボタンの文字の太さを指定 botui.min.css .botui-message-content botui.min.css .botui-message-content{ width:auto; max-width:80%; display:inline-block } max-width メッセージボックスの幅を指定 .profil botui.min.css .profil{ position:relative; top: -10px; border-radius:50% } top 基準の位置からどれくらい上に動かすかを指定 ※元々topプロパティは無かったが、アイコンを大きくしたらズレてしまったので、追記して丁度いい位置にくるように指定しました .profil>img botui.min.css .profil>img{ width:50px; height:50px; border:2px solid #e8e8e8 } width アイコン画像の幅を指定 height アイコン画像の高さを指定 .profil>img.agent botui.min.css .profil>img.agent{ /*初期設定だと変な画像になっているため、削除推奨 content:url(http://decodemoji.com/img/logos/blue_moji_hat.svg); */ border-radius:50% } content ここで画像指定していると、photoで表示したい画像を選んでもBOT側のアイコンは強制的にここで設定している画像になるため、削除推奨 おまけ YouTube動画の埋め込み方 今回作成したチャットボットでは使用していませんが、試したので記載します。 bot.js botui.message.add({ type: 'embed', content: 'https://www.youtube.com/embed/1oSeywNsjak', delay: 1000 }).then(showQuestions); YouTubeの動画を埋め込む際に注意する必要があります。 embedは外部要求を許可しているが、watchは許可していないため、URLを書き換える必要があります。 × https://www.youtube.com/watch?v=1oSeywNsjak ○ https://www.youtube.com/embed/1oSeywNsjak 参考記事 youtube html 埋め込み おわりに JavaScript初心者でも、BotUIを使うことで、簡単にシナリオ型のチャットボットを作ることが出来ました。 直観的に操作することが出来るので、プログラミングがよくわからなくても、それっぽいものを作れてしまうのが、BotUIのいいところだと思いました。 しかし、数が増えるとボタンも増える（分岐が増えてしまう）ため、見栄えがとても悪くなってしまいます。そのため、今後はAI型にシフトさせるなどの対策が必要だと思いました。 最後まで読んでいただき、ありがとうございました

Vue.jsでFirestoreを使う。FirebaseはWeb v9(Beta)版だと上手くいかなかったので今回はWeb v8版 でいきます。 公式ドキュメントはこちら↓ https://firebase.google.com/docs/firestore/quickstart?authuser=0#web-v8 $ npm install firebase@8.10.0 --save main.js import Vue from 'vue' import App from './App.vue' import firebase from 'firebase/app' Vue.config.productionTip = false const firebaseConfig = { apiKey: "---------------------------------------", authDomain: "-----------------------------------", projectId: "------------------------------------", storageBucket: "--------------------------------", messagingSenderId: "----------------------------", appId: "----------------------------------------", measurementId: "--------------------------------" }; firebase.initializeApp(firebaseConfig); new Vue({ render: h => h(App), }).$mount('#app') HelloWorldVue <template> <div class="hello"> <h2>Firestore</h2> <div> <div> <button @click="addTodo">登録</button> </div> </div> </div> </template> <script> import firebase from 'firebase/app' import 'firebase/firestore' export default { name: 'app', data() { return { db: null } }, created: function() { this.db = firebase.firestore(); }, methods: { addTodo() { this.db.collection('todo').add({ 'todo': '宿題' }) .then((docRef) => { console.log("Document written with ID: ", docRef.id); }) .catch((error) => { console.error("Error adding document: ", error); }); }, } } </script> ログイン <template> <div class="hello"> <h2>Pineの管理者サイト</h2> <div> <div> <label for="email">メールアドレス:</label> <input type="email" class="form-control" id="email" v-model="email"> <br> <label for="password">パスワード:</label> <input type="password" class="form-control" id="password" v-model="password"> <br> <button @click="loginUser">登録</button> </div> </div> </div> </template> <script> import firebase from 'firebase/app' import 'firebase/firestore' import 'firebase/auth' export default { name: 'app', data() { return { email : '', password : '' } }, created: function() { }, methods: { /// ログインする loginUser(){ firebase.auth().signInWithEmailAndPassword(this.email, this.password).catch(function(error) { var errorCode = error.code; var errorMessage = error.message; console.log(errorCode); console.log(errorMessage); }); }, } } </script>