パワーワードをバトルさせるアプリをレベルアップしてみた～Ver2～ #JavaScript #WebSpeechAPI

1.先日作成したアプリをレベルアップしたい

先日、パワーワードをバトルさせ勝敗を決定するアプリ 『ぱわーわーどばとる』 を作成しました。
結構いろんな方に見ていただいて、私が作成したQiita記事の中では一番参照されています。
せっかくなので、作成したアプリをレベルアップすることにしました。

※前回作成したアプリの詳細はリンク先を参照いただけると嬉しいです。
【前回記事リンク】

2.「ぱわーわーどあぷり」とは

レベルアップしたアプリはリンク先にて公開しています。

3.アプリの利用ガイド

1.入力欄にバトルさせたいパワーワードを入力する
2.「たたかわせる」を押下する
3.ボタンの下にパワーワード力を計算して表示する
4.どちらが勝利したか、勝敗判定結果を表示する

4.前回からの変更点

1.パワーワード力の計算方法の変更

1-1.文字列の多い方に合わせて文字数調整
前回作成したアプリは、文字数の多いワードが有利になるルールでした。
入力した文字数の差分を算出し、差分×ランダム数(100~1000)を加算する ことで、
同じワードを戦わせても異なる結果が出るようにしました。

1-2.Googleの検索結果数(totalResults)を加算
「よく検索されているワード＝パワーがある」とし、「Custom Search API」を使用し、
検索結果数(totalResults)を加算しました。
そのため、 Google検索されているワードが有利 になります。

※「Custom Search API」は1日に100クエリまで呼び出し可能なため、このアプリは1日50回まで使用できます。

2.勝者を読み上げる機能を追加

Web Speech APIを利用し、判定結果を音声で読み上げる機能を追加しました。
「たたかわせる」ボタンを押下し、勝敗を表示した後、「しょうしゃは？」ボタンを押下すると
判定結果を読み上げます。
読み上げる声は背景にあわせて女性の声を選択しました。
結果読み上げ機能を追加することで、ゲーム実況ぽい雰囲気が出ていると思います。

3.「もしかして、あきた？」機能の追加

バトルだけだとあきちゃうよという方向けに、「もしかして、あきた？」機能を追加しました。
「もしかして、あきた？」ボタンを押下すると、ボタンの下に英語で暇つぶし案を提示してくれます。
(DeepLAPIで日本語に翻訳したかったのですが、登録がうまくいきませんでした。)
こちらの機能は利用回数の制限がないので、暇つぶしを見つけたい方にもオススメです。

4.背景および背景アニメーションの変更

アプリ名に「ばとる」とつけているので、バトルっぽい背景に変更しました。
これから戦う雰囲気の女性のイラストと、炎がちらついている演出に変更しました。
前回のアニメ演出は「Anime.js」を使用していましたが、今回のアニメ演出はJavaScriptのみを使用しています。

5.環境

Netlify
CodePen
Bootstrap
★Web Speech API
★axios
※★がついてい箇所が今回のアプリ構築で追加使用しました。

6.プログラム

前回と同様に今回作成したアプリもCodePenでソースコードを公開しています。

See the Pen パワーワードアプリ② by kana_xedge (@kanakiku) on CodePen.

1.苦戦したところ

①「勝敗結果」の音声読み上げ機能
　音声読み上げ機能をVue.jsを使って構築しようとしたのですが、Vue.jsで処理を組むと上手くいかず、
　通常のJavaScriptのサンプルコードを探して作成しました。
②API戻り値の取得方法
APIの戻り値の値をどう扱っていいか分からず苦戦しました。

 //ひとつめの検索件数を取得
  const res = await axios.get("https://www.googleapis.com/customsearch/v1?", {（略）

APIを下記のように呼び出しているのでresから値を取得すればいいのではと思い、
開発を進めましたが上手く値が取得できず、

     .then(function (response) {
      const date = response.data;
      wpoint = wpoint + date.queries.request[0].totalResults;
    });

と記述したところ、上手く検索結果の値を取得・加算することができました。

2.まとめ

今回は、以前作成した「ぱわーわーどあぷり」のレベルアップした記事を作成しました。
ひとつのアプリを改良することで、JavaScript・HTML・CSSに関する知識とスキルを深められたと思います。
また、どうしたらゲーム性が出るのか、自身の持っているスキルでどこまでできるのか考えるのは大変でしたが、とても楽しかったです。
また、機会があったら「画像」や「動画」を追加できないか考えたいと思います。