無限ティッシュをつくってみた

何やらティッシュが足りないという状況らしいので・・・
vue-cliの勉強を兼ねて、無限ティッシュを作ってみました。

# 無限ティッシュとは

画面タップ（クリック）で、いくらでもティッシュ引き出し放題です。
こちらのURLで動作します。
https://dorasu-tech.github.io/infinite-tissue/

# ソースコード

https://github.com/dorasu-tech/infinite-tissue

# 素材

以下の素材を利用させていただきました。

動画は、再生する部分のみをトリミングしました。

効果音は、そのまま使っています。

# 作成時のちょっとしたポイント

# スマホだと最初のタップで音がならない

JavaScriptでAudioオブジェクトを作成し、音声データを読み込んで再生するようにしたのですが、スマホだとタッチなどのユーザー操作のタイミングでないと、読み込みや再生ができないようで、最初のタップで音が出ませんでした。

解決方法：
　「スタート」ボタンを作って、最初タップは「スタート」ボタンになるようにしました。
　「スタート」ボタンで音声データを読み込むようにしたので、次のタップでは音が再生されるようになりました。

# iOSだと最初動画の画像が表示されない

iOSは、videoタグに、playsinlineをつけないとインライン表示できないらしい。
さらに、iOS10だとwebkit-playsinlineでないと駄目らしい。
Androidでも、再生前にプレビュー画像が出ないことがあるので、非表示の状態で一度再生してしまうようにしてみました。

結果、videoタグは以下のような指定になりました。

 <video src="XXXXXX.mp4" webkit-playsinline playsinline muted autoplay></video>

# クリック＆タッチイベント

clickイベントだと、マウスを押して離すときにイベントが発生するので、マウスのボタンが押されたときにイベントが発生するmousedownイベントを利用。
スマホではタッチしたときに発生するtouchstartイベントを利用。
両方が反応してしまわないように、prevent属性をつけました。
以下のようになりました。

<video src="XXXXX.mp4" @mousedown.prevent="onClick" @touchstart.prevent="onClick" webkit-playsinline playsinline muted autoplay></video>

# リソースファイルの置き場所

vue-cliをほぼ初めて使ったので、リソースの置き場所に困りました。

最初、assetsフォルダやstaticフォルダにおいていたのですが、ビルドすると思ったような場所に配置されず、結局publicフォルダに置きました。

publicフォルダ以下は、そのまま出力フォルダに反映されるということを学びました。

さらに、vue.congfig.jsでビルドの設定をしました。

module.exports = {
    outputDir: 'docs',
    publicPath: './'
}

GitHubページで公開したので、出力フォルダをdocsにしました。