どうも、箒木です。
数ヶ月ぶりのサイト更新です（実装は二週間前）。今回はVue.jsを使用してサイトの案内キャラを作ってみました。コードなどは載せませんが、概要がふわーっと分かるかもしれない記録をつけておきます。
案内キャラ概要
イメージ的にはデスクトップキャラクターのサイト版です。とにかくキャラを喋らせたい。そんな想いから作成しました。昔のOfficeの某イルカ、サポートしないVerみたいな。
一応、要らない時には簡単に消せるよう意識したつもりです。
こんなイメージ
まあ今はサイトの内容が薄いので案内も何もないんですけどね。
閲覧中の内容に関する余談とか、案内キャラ個人の思い入れ、感想等を喋ってもらったら自分がとても楽しいのでは！と先に広がる可能性を夢見ながら、モチベ高めに取り掛かりました。手を付ける順番を間違えてます。
ざっくり構成
途中でCSSがぐちゃぐちゃになったので簡単に設計図をかきました。
細かいところは作りながら。
とてもざっくり。雑ですいません。
どこをコンポーネント化すればいいやら。手探り状態です。
文字アニメーションを入れたかったのでテキストはコンポーネントを分けてみました。フラグが渡ることで再描画し、テキスト内容を切り替えるようにしています。
キャラ画像は状況に応じて切り替えをするイメージで分けました。今は一種類しかないのであんまり意味ないです。画像はAPNGを使用。ゆくゆくは動作を増やしたいのですが果たして。
完成形はこんな感じ
（キャラページの矢印ビコビコするやつも直したいなあ……。）
右下にいるヤツが今回の追加分です。やっぱ動くとテンション上がりますね〜
ページを切り替えても固定位置に居てくれるのはSPA(Vue.js)の仕様が活きたなって感じです。セリフの内容もURLからページを判別してテキストだけ更新しています。
吹き出しボタンかキャラをクリックで閲覧内容に関してランダムにコメントするようにしたので、よかったらポチポチしてみてください。ただのランダムなので発言が重複するのはご愛嬌。
後回しにした課題がいくつかあります。一つは文字送り機能。こいつができればもう少し長話ができると思います。もう一つはキャラの位置移動。クリックしたところまで移動するやつを途中まで作って投げました。気持ち的には自動で歩かせるか、十字キーで操作する等の方がやりたいです。
任せた、未来の自分。
感想
作りながらあれもこれも、とやりたいことが増えていくのが楽しかったです。風呂敷を広げすぎるんじゃないぞと念じながら進めて、なんとか最低限思い描く形になったので良しとします。アニメーションも地味に試行錯誤しました。計4枚のパラパラアニメですが、案外動いてくれたので満足です。
今後もキャラのバリエーションを増やしたり、表情アニメーションを加えたりしたいです。ゆくゆくはミニゲームモードとか作れたらいいなあなんて。
その前にキャラの紹介ページをいい加減増やさないとなあ。