概要
普段は組込みソフトエンジニアをしており、設計やデバッグが思うように進まず、集中が続かなかったり脳をリフレッシュしたいことが多々あります。
そこで、脳をリフレッシュするためにブラウザさえ使えれば気分転換できる
「トリビアボタン」
を作ってみました。
デモ
「気分転換トリビアボタン」を公開しました！
— まえぷー@出窓菜園ティスト (@kmaepu) May 20, 2020
頭が疲れた時や、電車移動中の隙間時間に見ると気分転換になるかなと思い作りました！
私はフロントエンドのド素人なので、HTMLがお粗末なのは目瞑っていただけると嬉しいです。
こちらから遊ぶことができます☺https://t.co/bvl25aDtu9#protoout pic.twitter.com/nCeC9ChetO
こちらから利用できますのでお試しあれ～👍
※2020/5/20現在、エスケープ文字がおかしな表示になっている不具合があります。
中身はどうなっているか
構成
ざっくりとですが、次のような構成になっています。
トリビアのデータは「OPEN TRIVIA DATABASE」のTrivia APIで取得て利用しています。
お気づきの方もいらっしゃるかもしれないですが、ドメインがherokuではないです。これは、「freenom」という無料でドメイン取得ができるサービスを利用しています。
開発環境
2020/5/20現在の開発環境です。
- Windows10
- VS code 1.45.0
- Node.js v10.15.3
ソースコード解説
<html>
<head>
<title>Refreshing trivia</title>
</head>
<body>
<p>Refreshing trivia</p>
<div id="app">
Question：<br>
<br>
{{ message }}<br>
<br>
Answer：<br>
{{ ans }}<br>
<br>
<button v-on:click="getData();">次のトリビア</button>
<br>
※ネット環境によりロードに数秒かかる事があります。
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '',
ans: ''
},
methods: {
getData: async function () {
const response = await axios.get('/api')
console.log(response.data);
this.message = response.data.results[0].question;
this.ans = response.data.results[0].correct_answer;
},
},
mounted: function () {
this.getData();
}
})
</script>
</body>
</html>
index.htmlでは、Vue.jsでボタンを押したときの処理を実装しています。こうすることでシングルページアプリケーション（SPA）を実現しています。
// expressライブラリを呼び出す
var express = require('express');
var app = express();
// axiosライブラリを呼び出す
const axios = require('axios');
// public というフォルダに入れられた静的ファイル（HTMLファイル・CSSファイル・ブラウザ上のJavaScriptファイル）はそのまま表示
app.use(express.static(__dirname + '/public'));
app.get('/api', async function(req, res) {
let response;
try {
// Trivia APIにリクエストして、データを取得する
response = await axios.get('https://opentdb.com/api.php?amount=1');
console.log(response.data);
} catch (error) {
console.error(error);
}
// 結果をJSONに割り当てる
res.json(response.data);
});
//app.listen(8080);
app.listen(process.env.PORT || 8080);
app.jsではTrivia APIにリクエストを出してデータを取得し、index.htmlに渡しています。
問題発覚！
ここで、Trivia APIの癖が発覚しました。Trivia APIから取得したデータをそのまま利用すると、次のようにエスケープ文字が変換されてしまっています。
こちらの方法でアンエスケープしてやれば修正できるのではないかとトライしています...。
おわりに
トリビアは英語限定なので、翻訳機能があると嬉しいですね。これでも英語の勉強になる...？からよしとします。