2022/6/6追記
本Webアプリの新バージョンを公開しました！こちらも併せてお読みいただけると嬉しいです！
マウントとってくる人ってどこにでもいますよね
あなたの周りには、一見それっぽいけど中身があまりない話でマウントをとってくる人はいないでしょうか？
そういう人の相手は苦労しますよね。邪見にすると人間関係が悪くなりますし、かと言ってまともに取り合っているとストレスが溜まってしまいます。
そこで、そういった人たちへの耐性を身に付け、笑顔でやり過ごすことができるようになるためのWebアプリを作ってみました！
「ドヤ顔バズワードくん」
作成したWebアプリは以下に公開していますので、まずは是非触ってみてください！
※2022/6/1現在、たくさんの方にご覧いただいたおかげでDeepL APIが無料枠の上限に達してしまい正しく動かない状態になっています。復旧まで今しばらくお待ちください。
非常にシンプルなアプリなので解説は必要ないとは思いますが、ちょっとイラっとする顔のアバターがひたすらよく分からないバズワードでマウントを取ってきます。
それに対してあなたは、「なるほど、よく分かりました！」と笑顔で受け流してあげてください。そうすることで、きっと現実世界でもマウントを取ってくる人への耐性がつくことでしょう。
しかし、常に笑顔でスルーするというのも難しいかもしれません。ついイラっとしてしまった時は、「意味わからんのじゃ！」と突っぱねましょう。そうすると何が起こるのか・・・この先はご自分の目で確かめてみていただければと思います。
環境
Netlify
Vue.js
joe schmoe API (アバター生成API)
Corporate Bullshit/Buzzword Generator API (バズワードAPI)
DeepL API (翻訳API)
ソースコード
今回作ったWebアプリのソースコードは以下になります。
（APIキーを置き換えているのでプレビューはうまく動かない状態になっています）
See the Pen BuzzwordMan by KendoLab (@kelab_8) on CodePen.
解説
今回、Vue.jsでアプリを構築し、裏側でAPIからデータを取得する部分にはaxiosを使用しています。また、Webページの成形にはBootstrapを使ってみました。
プログラムでポイントとなる部分は以下になります。
// 「なるほど、よく分かりました！」ボタン押下時処理
nextData: async function() {
console.log('次のデータを取得します');
// バズワードAPIからデータを取得
response = await axios.get('https://corporatebs-generator.sameerkumar.website/');
console.log('最新データ：', response.data.phrase);
// バズワードAPIの結果を翻訳APIのパラメーターにセットして呼び出す
response = await axios.get('https://api-free.deepl.com/v2/translate', {
params: {
auth_key: 'XXXXXXXX',
text: response.data.phrase,
target_lang: 'JA'
}
})
this.messe = "大事なのは、「" + response.data.translations[0].text + "」ということなんだ。君にはちょっと難しかったかな？";
// 乱数を発生させる
var min = 1 ;
var max = 999 ;
var num = Math.floor( Math.random() * (max + 1 - min) ) + min ;
// 発生させた乱数で再度キャラクター画像を取得
this.imgsrc = 'https://joeschmoe.io/api/v1/' + num.toString();
var obj = document.images['mypict'];
//画像の高さを300pxにする
obj.height = 300;
this.count ++;
this.button1 = "なるほど、よく分かりました！"
this.isPush2 = false
},
// 「意味わからんのじゃ！」ボタン押下時処理
explosion: function() {
this.messe = 'もう少し我慢しましょう。。。';
this.count = 0
// 爆発イメージを取得
this.imgsrc = 'https://farm5.staticflickr.com/4134/4926598654_981f0fea9e.jpg'
var obj = document.images['mypict'];
//画像の高さを300pxにする
obj.height = 300;
this.button1 = "最初からやり直す"
this.isPush2 = true
}
こちらは二つのボタンを押した際の処理です。
（なお、最初にページを表示した際の初期化処理は一つ目のボタンを押した際の挙動とほぼ同じになっています。）
バズワードAPIから取得した文言はデフォルトだと英語なので、その文言データをそのまま翻訳APIのパラメーターとして渡して翻訳しています。その翻訳結果を画面に表示させる仕組みになっています。
また、アバター画像についてもランダムで取得させるAPIが用意されてはいるのですが、そうすると何故か表示されるアバターに偏りがあるように感じられたので、呼び出し側で乱数を発生させて画像のURLを直接指定する形にしました。
その他、二つのボタンを押した際の人数カウントやボタンの活性非活性等、細かい処理を入れています。
つまづいたポイント
今回Vue.jsを活用していますが、最初アバター画像を取得する部分はURLをHTML部分に直接埋め込み、バズワード部分をコードで更新する形にしていたのですが、そうするとDOM側が更新されないという事象が発生しました。
そこでアバター画像についてもコード側で指定するようにしたところ、DOMが問題なく更新されるようになりました。この辺りはVue.jsの理解がまだまだ足りていない部分だと思うのですが、Vue.jsを使用する場合は外部ソースの読み込み等もコード側に集約する必要があるということかも知れません。
あとがき
今回Webアプリというものを初めて作ってみました。
このアプリのアイデアは、面白そうなAPIを探している時に妙にムカつく顔の愛嬌があってかわいらしいアバターを生成できるAPIを見つけて、「このキャラにムカつくことを喋らせたら面白いのでは」と思いついたことがきっかけで生まれたのですが、最初は悪口生成APIを使用してシンプルに悪口を吐くアプリにするつもりでした。
ところが、その悪口APIが何故かaxiosを使ってうまく呼び出せなかったため、紆余曲折を経て今回のようなマウントを取ってくるアプリに収まったという経緯があります。
今回のプロトタイピングを経て、少しはWebアプリ製作やVue.jsに対する理解が深まりましたが、正直まだまだ足りていない部分が多いのでこれから更に勉強していきたいと思います。
（あと、Webページのデザイン力も絶望的に足りていないのでそこも何とかしたい…。）
以上、ここまでお読みいただきありがとうございました！