先日、アハ体験ができるサイトを作り、そこでアハ体験動画を作成しました。
子供と一緒に遊ぶため動画編集ソフトを使って動画化していた時に「あれ?何かもの足りないかな??」と思いました。
そこで何が足りないのかよく考えた時に、「カウントダウンタイマー」があったほうがいいのでは?となりました。
それでは、いざタイマーを使いたいと思い、ネット上をよく探してみたのですが、お目当てのカウントダウンタイマーがありません。
あったとしても、「5秒・10秒・15秒といった切りのいい数字」しかなかったり、「時計の背景があり」のため後ろの画像が隠れてしまうものだったりと、僕が欲しいと思っているものとなかなか合致しませんでした。
なので、カウントダウンタイマーを自作できるサイトを作りました。
よろしかったらお使いください。
カウントダウンタイマーメーカー
タイマー作成の注意点
対応ブラウザについて
このタイマーは最新の主要ブラウザ(Chrome、Firefox、Edge、Safariなど)で正常に動作します。
現に僕のPCはwindowsでブラウザはGoogleChromeを使用しています。
ただし、動画録画機能で使わてれいる「MediaRecorder API」は、iOSのSafariや古いブラウザでは対応していない場合があります。
その場合、録画ボタンを押すと「録画に対応していません」と表示されることがあります。
動作パフォーマンス
タイマーは約30fps(1秒間に約30回)で画面を更新します。
そのため、パソコンやスマホの性能が低い場合や、複数のタブで同時に動かすと、動作が重くなることがあります。
時間の正確さについて
JavaScriptの時間計測は多少のズレが発生します。
ストップウォッチのような厳密な計測が必要な場合はご注意ください。
動画ダウンロード機能について
動画ダウンロードはタイマー画面を録画して「WebM形式」の動画ファイルとして保存します。
このWebM形式はWindows標準の動画プレイヤーでは再生できない場合があるため、他社がリリースしてるプレイヤー(VLCメディアプレイヤー)などの使用をおすすめします。
なお、動画編集ソフトで編集する場合、ほとんどのソフトで対応可能です。
詳しくは「ご使用のソフト名 webm形式 対応」等で検索してください。
録画中はページのリロードや操作を控えてください。途中で操作すると録画が失敗する可能性があります。
安全性と権限
本機能はブラウザ内で完結するため特別な権限は不要です。
ただし、将来的にブラウザの仕様変更で録画機能に制限がかかる可能性があります。
画面サイズ・レスポンシブ対応
タイマー画面(キャンバス)は固定サイズ(300×300ピクセル)です。
スマホなど画面が小さい端末では見づらいことがあるため、必要に応じて画面サイズを調整してください。
フォントと文字表示
複数のフォントを選択できますが、ご利用の環境によって表示が異なる場合があります。
特に日本語表示の際は、日本語フォントを選ぶときれいに表示されます。
まとめ
いかがでしたか?
ポチポチするだけで簡単にタイマーが作成できると思います。
使い方は次の投稿(【youtubeでも使える】カウントダウンタイマーの作り方)で解説します。