パワーワードを戦わせ勝敗を決っていするアプリを作成してみた
1.パワーワードとは
この記事を読んでいる方はどんなパワーワードが好きですか？
あるいは、「これは！」 と思うようなパワーワードはありますか？
世の中はパワーワードにあふれています。
Wikipediaの記載によると 「力のあることば」「強い印象のあることば」、あるいは
「表現が異様で強烈な印象のあることば」 と記載されています。
個人的な体感ではありますが、私は後者の意味で使用することが多いです。
そんな世の中にあふれているパワーワードを戦わせるアプリを作成してみました。
2.「ぱわーわーどばとる」
作成したアプリは以下に公開しています。
見た目はいまいちですがさわっていただけると嬉しいです。
|
説明文を足してみました pic.twitter.com/U0Hjezx0tj
— きく (@AYE7WvdouqRwaNp) November 6, 2022
|
|
シンプルなアプリです。
上の入力欄と下の入力欄に戦わせたいパワーワードを入力し、「たたかわせる」ボタンを押すと
下にパワーワード力を数値で表示します。
また、数値の高い方が勝者です。
3.環境
Netlify
Anime.js
Bootstrap
4.ソースコード
See the Pen Simple campfire5 by kana_xedge (@kanakiku) on CodePen.
5.解説
作りはシンプルです(でも苦戦しました)
入力のテキストを文字単位でencodeし、合計します。
それぞれの文字列の合計値を比較し、文字数の多い方を勝者とします。
文字と入力欄の装飾はBootstrapを使用し、プチバトル感を出す焚火はAnime.jsを使用しました。
6.まとめ
アプリの企画を考えた際、Vue.jsで構築する予定でしたが、Vue.jsで入力した文字列をencodeする方法が分からず、
実現方法に苦戦しました。
そもそも、HTMLとCSSの知識が乏しいため、画面内の表示位置の制御が難しかく、
こちらも苦戦しました。
今回、はじめてWebアプリを作成しました。
このアプリは「パワーワード」ってよく見聞きするけど、
どれが本当に「パワー」のあるワードなのかという、しょうもない思いから生まれました。
文字コード変換なら簡単かなぁと思い、このアプリを企画しましたが、
HTML・CSS・JavaScriptのスキルが足りず、苦戦しました。
サンプルはいくつかありましたが、サンプルのどこを見ていいのか分からず、
ひたすらサンプルを探すことを続けていました。
今回のアプリ作成を通して、HTML・CSS・JavaScriptのスキルに対する理解は少し深められました。
ただ、まだ始めたばかりなので、これから勉強してスキルを強化していきたいと思います。