盛岡さんの質問に答えて分岐、岩手のおすすめを教えるかもしれないチャート式チャットボットです。簡易アキネイター的な。

https://nih.lsv.jp/product/chat-bot/

WEB作品ページも更新してます。

おすすめ結果は自分が写真持ってるかを基準に選定したのでだいぶ偏ってます。
一部写真はフリー素材、知人から借りました。

WindowsやAndroidでは十分な動作確認できてないので、変な動きしてるかもしれません。

テキスト、写真、動作等に問題あれば連絡フォームまでご一報お願いします🙇‍♀️

作り方

おすすめ結果選定、カテゴライズ
写真選定、加工、リサイズ
↓
アイコン、OGP絵用意
テキスト用意
↓
チャット作る
画面デザイン編集
↓
動作確認
公開

おすすめ結果は全部で63通りです。
63個分の写真と絵とテキスト用意するのが1番しんどかった。

けど写真なくて工芸品と民俗芸能カテゴリ全消えしてるから、これでも削った方です。ﾊﾞｶﾔﾛ

チャットの作り方

使用フレームワークはpeekobot.jsです。便利〜。

追加したい機能。

・名前入力欄
・アイコン変化
・結果画面
・Twitterシェア
・OGP画像切り替え

名前入力欄

盛岡さんに名前呼んでもらえます。
やりたい事 (チャット) には蛇足ですが、作ってみたら予想以上に良かった。

マなんかあの ##NAME1## みたいですよね。古の。

最初はチャット内での入力を考えていたけど、(名前教えていただけますか？ 的な) チャットテキストは1番最初に全部読み込まれるから、途中から挿入するのはめんどかった。

アイコン変化

デフォルトではアイコン固定のままなので、チャットや結果に応じて変えます。その方がかわいいよね。

配列にstyleキー増やして、classとして突っ込みます。

あとはCSSで擬似要素background-image指定すれば終わり。
めんどいのでSCSSでループさせます。

結果画面

おすすめ結果になったらレイアウト変えたいから分岐させます。
配列にresultキー追加して、trueならおすすめ結果への処理。

紙吹雪アニメーションはCanvas Confettiです。かわいいよね。

Twitterシェア

せっかく結果出すならシェアできたら良いよね。
result: true, の場合シェアボタン追加します。

ツイート時のテキストはこちらで設定できるので、結果名とせっかくだから入力した名前も突っ込んでます。

OGP画像切り替え

OGP画像はマシュマロとかツイートすると出てくる画像リンク、あれです。
おすすめ結果に応じた画像出し分けしたくて1番悩みました。

result: true, なったらheadタグ書き換えればいいやんけ😁✊ と思ってましたが、TwitterはJSで書き換えられたもの解釈しないらしいです。ので全部同じOGPになっちゃう。のでJS以外でどうにかする。

① PHPでhead書き換える
結局これになりました。後述。
PHPでOGP参考記事

② NuxtでSSR
JSダメならサーバ側、Nuxtならサーバいじれる？ と思ったけどレンタルサーバがNode対応してないので無し。
NuxtでOGP参考記事

③ FirebaseのHosting
Firebaseなら人気投票でも使ったし……けどOGP切り替えのためにここまでする？ となって無し。
FirebaseでOGP参考記事

④ PugでOGP用HTML量産
血迷い期。テンプレートエンジンで結果分のOGP用HTMLファイル量産して、全部アップする。2つ3つならまだしも数十ファイルなりますよ。

という感じで結局PHP。ほぼ参考記事のままです。

シェアボタンに結果パラメータ (step.param) 付与して、PHP側でパラメータと同名のOGP画像出してます。

これでだいたい終わり。
あとはJSリダイレクトしたり、Safariでsmoothスクロール効かないからPolyfill入れたりしてます。

久しぶりにがっつり作業できて楽しかったです。
最後におすすめ結果カテゴライズした時の樹形図 (図でない) 載せときます。

またなんか作ったら書きます。またね👋

■観光 sightseeing
1.ランドマーク landmark
　2_1.世界遺産
　　◎極楽浄土　→ 平泉
　　◎縄文遺跡　→ 御所野遺跡
　　◎製鉄文化　→ 橋野鉄鉱山
　2_2.盛岡に近い方
　　3_1.外
　　　◎桜　→ 石割桜
　　　◎公園　→ 盛岡城跡公園
　　3_2.建築
　　　◎近代和風　→ 南昌荘
　　　◎銀行建築　→ 岩手銀行赤レンガ館
　2_3.遠くてもいいよ
　　3_3.海方面
　　　◎震災遺構　→ 奇跡の一本松
　　　◎ローカル線　→ 三陸鉄道
　　3_4.内陸方面
　　　◎宮沢賢治　→ 宮沢賢治童話村
　　　◎自然　→ 小岩井農場

1.文化施設 culture
　2_1.博物館
　　3_1.民俗学
　　 ◎民話　→ 遠野市立博物館
　　 4_1.民俗芸能
　　　　◎神楽　→ 花巻市総合文化財センター
　　　　◎鬼剣舞　→ 鬼の館
　　◎生活文化　→ 伝承園
　　◎建築　→ みちのく民俗村
　　◎天文　→ 奥州宇宙遊学館
　　◎震災　→ 津波伝承館
　　3_2.宮沢賢治
　　　◎生涯　→ 宮沢賢治記念館
　　　◎技師　→ 鉱物　石と賢治のミュージアム
　◎動物公園　→ 盛岡動物公園
　◎水族館　→ もぐらんぴあ

1.神社・お寺・お祭り shrine
　2_1.神社・お寺
　　◎病気　→ 三ツ石神社
　　◎五穀豊穣・金運　→ 志和稲荷神社
　　◎大漁　→ 鵜鳥神社
　　◎縁結び　→ 卯子酉様
　　◎厄払い・福招き　→ 達谷窟毘沙門堂
　　◎もう全部　→ 盛岡八幡宮
　2_2.お祭り
　　3_1.伝統行事
　　　◎灯籠流し　→ 舟っこ流し
　　　◎農耕馬のパレード　→ チャグチャグ馬コ
　　3_2.民俗芸能
　　　◎賑やかパレード　→ さんさパレード
　　　4_1.いろいろ見たい
　　　　◎花火　→ みちのく民俗芸能まつり
　　　　◎流鏑馬　→ 遠野まつり

■自然 nature
1.山・花 mountain
　2_1.山地
　　◎眺める　→ 岩手山
　　◎ドライブ　→ 八幡平
　◎洞窟　龍泉洞
　2_2.お花
　　◎あじさい　→ みちのくあじさい園
　　◎桜並木　→ 展勝地
　　◎椿　→ 椿館
　　◎チューリップ　→ フォリストパーク
　2_3.水場
　　◎橋が映える滝　→ 不動の滝
　　◎白鳥の池　→ 高松の池

1.海・川 ocean
　2_1.海岸
　　◎穏やか　→ 浄土ヶ浜
　　◎荒波　→ 碁石海岸
　2_2.崖
　　◎勇壮　→ 北山崎
　　◎端正　→ 鵜の巣断崖
　　◎公園　→ 黒崎
　2_3.川
　　◎川下り　→ 猊鼻渓
　　◎空飛ぶだんご　→ 厳美渓
　　◎カッパ釣り　→ カッパ淵

■食べる food
1.甘いもの sweet
　2_1.現地で食べたい
　　◎インスタ映え　→ 椿クレープ
　　◎ツイッター映え　→ マルカンソフトクリーム
　2_2.取り寄せ可
　　◎ふわふわクリーム　→ チロル
　　◎しっかりベイクド　→ トロイカ

1.麺類 noodle
　2_1.つるつる系
　　◎小分けで食べたい　→ わんこそば
　　3_1.普通に丼
　　　◎辛いの好き！　→ 盛岡冷麺
　　　◎辛くない方がいい　→ 釜石ラーメン
　2_2.もちもち系
　　◎野菜たくさん　→ 焼きうどんパスタ
　　◎自分好みに　→ じゃじゃ麺

1.食べ歩き　→ ◎よ市

1.珍し系 rare
　◎海鮮　→ 瓶ドン
　2_1.おもち
　　◎食べ比べ　→ もち御前
　　◎フォンデュ　→ もちチーズフォンデュ