2021年06月24日

ウェブブラウザで動く講演タイマー

ウェブブラウザ上で動作する学会タイマー(口頭発表の時間を測ってベルを鳴らすアプリ)を作りました。・・・それ、もう既にあるよね?と言うなかれ。近年のブラウザの新機能を盛り込んで、フルスクリーン表示やスリープ禁止機能などを付けました。

スクリーンショット 2021-06-26 15.30.34.jpg

その学会タイマーは、こちらhttps://shiura.com/timer/から使用できます(日本語版はこちらhttps://shiura.com/timer/jp)。ネット環境のないところで使用するには https://shiura.com/timer/timer.zipからファイル一式をダウンロードしてください。説明書(日英)はこちら

学会タイマーにはスマホアプリも多くありますが、手軽に使えて評判の高いのは丸田氏の Time Keeperかと思います。機能や画面がシンプルで、使いやすく見やすいのも人気の秘訣かと思います。しかし登場から既に10年、前回アップデートからも5年ほど経っており、その間にブラウザの方も進化しているようなので、この機会に、以下のような自分の欲しい機能を付け加えたバージョンを作りました。

  • フルスクリーンモード 画面のボタンを押すと、ウィンドウ枠などがまったくない全画面表示ができます。
  • スリープ禁止(wakeLock) パソコンやスマホ・タブレットの設定に関わらず、画面が暗くなったり消えたりしません。
  • 説明文の切り替え ベルが鳴る間の4つの時間帯、それぞれに異なる文を設定でき、「講演中」「質疑応答」「時間切れ」などの状態表示ができます。
  • バーグラフ表示 時間の経過がひと目でわかります。バーの色を変えて状態が直感的にわかるようにもしました。
  • 直感的な時間設定 「この欄に入れるのは、開始時点からの時間なのか、それとも前回のベルからの時間なのか?」など、迷ったことはありませんか。時間を入力するとバーが伸縮して時間の比率が見えるようにしました。

丸田氏のプログラムでいいなと思った部分、例えば現在の設定を URL に変換してブックマーク保存できるところなどは参考にさせてもらいました(ただしプログラムはすべて1から作っています)。

compatibility.jpg


ただ、いくらか制限があります。フルスクリーンモード (Fullscreen API) とスリープ禁止 (Screen Wake Lock API) は機種やブラウザによって対応状況が違い、一部の環境では動作しません。特に iPhone (iOS) や iPad (iPad OS) では Apple のポリシーによるものか、Google Chrome にフルスクリーンモードが許可されておらず、またバッテリーに影響があると思われる Wake Lock API は safari にも実装されていないようです。ですが、OS の「設定」で「自動ロック」を「なし」に設定した上で、 safari で全画面表示で使えば問題ありません。(2023.3.28 Safari 16.4 から Wake Lock API が実装され、スリープ抑止が働くようになりました。上の表も更新しました。)

手持ちの環境で出来るだけ動作確認しましたが、不具合や要望があればぜひお寄せください。
posted by しんさく at 23:34| Comment(9) | TrackBack(0) | 電子モノ
この記事へのコメント
iOS、Edgeでも予想通りChromeと同じでした
(full screen, wake lockともに動作せず)

iOSでEdge使う人少ないかもですがw
Posted by 日浦R at 2021年06月26日 03:23
ありがとう、・・そもそもiOSにEdgeがあるとはしらなんだ・・
Posted by しんさく at 2021年06月26日 09:42
お世話になっております.
丸田先生のページで「基調講演など60分以上の発表の場合」の動作について指摘した「匿名さん」と申します.
https://ichiro-maruta.blogspot.com/2011/09/html5.html?showComment=1580281131060#c6625346976829173604

こちらの「講演タイマー」をダウンロードして便利に利用させて頂いています.
60分以上の講演にて下記の不具合が発生しましたのでご報告致します.

「60分を超えて桁が一桁増えると,画面が縮小表示されずにウィンドウ幅が増えるために横スクロールバーが表示されて見切れる」
キャプチャ画面:https://i.imgur.com/u6bVFv6.png


60分以上の講演時間を指定した際に1時間を示す桁を「0:11:11」といった具合にあらかじめ表示して画面横幅をリスケールするように改良頂けると幸いです.
Posted by 匿名さん at 2022年01月11日 21:54
フィードバックありがとうございます、また不具合でご迷惑をおかけして申し訳ありませんでした。ご指摘の点、十分デバッグできていませんでした。修正したいと思います。

念のため環境(OSとブラウザの種類)もおわかりのようでしたらお知らせくださると幸いです。どうぞよろしくお願いいたします。
Posted by しんさく at 2022年01月11日 22:14
修正いたしました。講演開始から1時間を経過して表示桁が増えた時点で、経過時間表示のフォントを少し縮小する動作となっています。

Mac の Safari, Chrome と Windows の Edge, Chrome で動作確認しました。
Posted by しんさく at 2022年01月13日 12:12
しんさく様:

早速のフィードバックありがとうございます.
研究会の発表の他,期末テストの経過時間表示に使用させて頂きます.
もう必要ないかと思いますが当方の環境は

・Win10-64bit
 Chrome,Edge,Firefox

となります.
Posted by 匿名さん at 2022年01月14日 17:13
しんさく さま、

いろいろなタイマーアプリを見比べているので、機能的かつシンプルで気に入りました。

今度、このタイマーを学会で使わせていただきたいと考えているのですが、使用許諾やクレジット表示等は何か指定はありますか?

Posted by oguchi at 2022年03月03日 16:08
ありがとうございます!
使用許諾やクレジット等は不要ですので、ぜひ自由にご利用ください!
Posted by しんさく at 2022年03月03日 16:25
しんさくさま、
ご了解、ありがとうございます!
Posted by oguchi at 2022年03月09日 16:42
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

この記事へのトラックバックURL
http://blog.sakura.ne.jp/tb/188786760

この記事へのトラックバック