懲りないDヲタ
以前にディズニーキャラクターをランダムに取得して返す、というLINE Botを作成しました。
（過去のQiita記事→あなたの知らないディズニーキャラクターの世界）
が、しかし。
本当はクイズっぽくしたかった、という心残りがあったのです。
そこで、今回はCodePenとNetlifyを使用して、
まだ見ぬディズニーキャラクターに出会えるWebアプリを作成してみました。
Dヲタ（ディズニーヲタク）は懲りませんよぉ～！
見ろよ、これで完成なんだぜ？
CodePenで作成したものをNetlifyを使用して公開しました。
使用したもの
参考にしたCodePen
Extreme Hover - HTML + CSS
料理とお買い物メモ
作成過程の記録用として
Zenn
完成コード
今まで直書きしていましたが、今回はCodePenを埋め込んでおきます。
See the Pen DisneyCharacter by kamakurakae (@kamakurakae) on CodePen.
完成までのあれやこれや
こちらも今までダラダラと記載しておりましたが、今回は「Zenn」を使用して記録しておきました。
投稿主が地面に這いつくばり血反吐を吐いてきた過程はこちらをご確認ください。
（すみません。血反吐は過言でした。Enterキーがひび割れるほどの苦心、くらいが妥当でした。）←
楽しかったのか
楽しかったです！
更新されるたび知らないキャラクターが表示されるので本当に勉強になりました。
知っているキャラクターが表示されたときは、当たりを引いたような嬉しさを感じました♪
知らないものを知ろうとするには、まずは目の前に突然現れてくれなければいけません。
まずは画像のみ表示し、そのあと名前を確認できるという動きもクイズのようにできたと思います。
今回はLINE Bot作成時の雪辱をほんのすこしですが果たせたように思います。
反省会
ここからはほぼ自分用の反省会です。
聞いてくださる方のみどうぞ。
・むっず！
HTML、CSS、私には手ごわかった……！
他のユーザーのものを参考にしようと思っても、書かれているコードが読み取れない……！
これは継続して勉強が必要だと思いました。
（やるとは言っていない。）←
・画像の位置センスない！
あれやこれや試したのですが、取得した画像の位置を変えられず……。
これは次への課題とします！！
・シンプルすぎやしないか
動きがおもしろいCodePenを元に作成しましたが、全体的にシンプルすぎたように思います。
もっといろいろ凝りたかったのですが、限られた時間内と自分の今のスキルはこれが限界でした。
自分のスキル不足を痛感しました……。
そんなこんなしつつ、きっとまた何か創り出すんです。
引き続き見届けていただけると嬉しいです。
追記
iPhoneユーザーから「キャラクター名が表示されない」「キャラクター画像をタップしても表示されない」という連絡をもらいました。
さて、なぜなのか……。こちらも調べてみようと思います。