vue-cliを使って百人一首読み上げアプリを作る
いつの間にかブラウザが日本語を喋れるようになっているのでvueを使ってWebアプリで読み上げアプリ「からくれない」を作るのを
冬休みの宿題にした
Web Speech APIで実際にしゃべる環境を調べてみた - Qiita
新しいこと、なかなか踏み出せなかった、vue-cliを使ってみってみよう!
vue init webpack karakurenai
HelloWorld.vueを改造してアプリに仕立てる。
シャッフルはエコシステム(ライブラリを使いたい)
package.json
パッケージjsonに追記。
"dependencies": { "vue": "^2.5.2", "vue-router": "^3.0.1", "array-shuffle": "^1.0.1" },
HelloWorld.vueにimportを記述。
はじめにシャッフルしたいので、createdの中でシャッフルを呼び出すようにしました。
import arrayShuffle from 'array-shuffle' export default { name: 'HelloWorld', created () { this.shuffle() }, // 中略 shuffle () { this.items = arrayShuffle(this.items) }
とりあえず、ソースも公開
出来栄えは?
読み上げは微妙ですが!まぁいいでしょう。
結論
vue-cliでの開発は楽しい