2011年9月27日火曜日

HTML5で学会タイマー


※ いくつかアップデートしました (2015/10/03)
 ・URLに設定が反映されるようになりました.
  ブックマークすることで現在の設定を保存できます.
  (Chromeでローカルファイルからの実行の場合セキュリティ上の理由でアプリからURLを更新することができません.左上のロゴが現在の設定を含んだURLへのリンクになっていますので,こちらをご利用ください.)
 ・画面サイズに適応した表示の調整を強力にしました.

※ いくつかアップデートしました (2015/09/01)
 ・ 時間表示下部のコメントを編集可能にしました.
 ・ iOS対応しました.
 ・ ダウンロード先などを
GitHubに統一しました.

第40回制御理論シンポジウム で初めて学会の司会をする機会がありました.
この学会では司会者がタイムキーパーを兼ねるのですが,
緊張でベルを忘れる気がしたのでタイムキーパー業務を自動化することにしました.

世の中には結構な数の学会タイマーが出回っていますが,
  • 誤差が蓄積するソフトがある
  • カスタマイズが難しい
という話を聞いたので,今後のために勉強を兼ねて新たにタイマーを作ることにしました.

できたものを以下においておきます.
特長は
  • 直観的な操作
  • インストール不要・ダウンロードも可能
  • 緩いオープンソースライセンスなのでいつまでも好きなように使える
  • 設定がURLに格納されるので,ブックマークなどのブラウザ機能で
    設定を柔軟かつ簡単に管理できる
  • HTML5対応のブラウザがあれば環境を問わず動作する(mac や Linuxでも動作すると思います.iOSで音がならなかったようなので修正しました.)
といった感じです.
ブラウザを全画面化し,発表者の方に向けておくと発表中も時間がわかって安心です.
スクリーンセーバー等の動作にはご注意ください.

なお,zipファイル中に含まれている jquery-1.6.4.min.js (http://jquery.com/) および jquery.timer.js (http://mattptr.net/license/license.txt) はBSDライセンスで配布されているソフトウェアであり, bootstrap.min.css (http://twitter.github.com/bootstrap/) は Apache License v2.0 で配布されているソフトウェアです.詳しい情報は各ソフトウェアの配布元をご覧ください.
また,これらの有用なソフトウェアを公開されている方々に感謝します.

その他の部分について,このソフトウェアを使用・改変することは自由ですが,
完全な無保証ですので自己責任でご利用ください.

7 件のコメント:

  1. ブラウザ表示なのでUSBモニターでも表示しやすい インストール不備・動作不良がない しかし惜しい! ①カウントダウン型を選択したい(残り時間がわかりやすい),②コメント文字を自分で変更できない(ご協力くださいは不要 cf:学会たいま~座長の友は変更できる)

    返信削除
  2. こんにちは。先日、僕が所属しているMacユーザーの会で主催した大きなイベントの時に使わせて頂きました。本当にとってもシンプルで使いやすくって、難しいことはよくわからない僕や一緒に担当した人にとっても、大変役に立ちました。本当にありがとうございました。全国にMacのグループはあるので、紹介したいと思います。本当に役立ちました。ありがとうございました。

    返信削除
  3. 大変遅くなりましたが,コメント・ご意見ありがとうございました.

    学会タイマー中のコメントの変更機能などについてアップデートを行いました.
    カウントダウン型については未対応ですが,オープンソースにしましたので,
    機能追加してくれる方が現れるかもしれません.

    私は練習の際にPowerPointの発表者ツールについているようなカウントアップタイマーを
    利用しておりますので,本番の際にカウントダウンタイマーだとやや戸惑うことと,質疑応答
    を含めた残り時間なのか講演終了までの残り時間なのかが,数字だけではわからず表示する
    情報量を増やさなければならないので,カウントダウンタイマーの実装に現時点ではやや消
    極的です.これらの問題をスマートに解決する方法が思いつきましたらアップデートするかと
    思います.

    大変参考になるご意見と,励みになるご感想をありがとうございました.

    返信削除
  4. 丸田一郎さま
    初めまして、兵庫県の神戸市でフリースクールの教員をしている矢野と申します。
    スクールの教育プログラムや、持続可能な開発目標を学ぶカードゲーム2030SDGsのワークショッププログラムなどで、タイムキープをするツールを探す中、こちらのサイトにたどり着き、利用させていただきました。
    とてもシンプルで、かつインターネット接続の環境がないところでも使用できる点が、とても助かっております。
    一言お礼を申し上げたいと思い、コメントさせていただきました。
    改めまして、ツールの公開・ご提供に感謝申し上げます。

    返信削除
  5. 便利に使わせて頂いております.
    一点だけ気になったところが.

    基調講演など60分以上の発表の場合にはタイマーが00:00に巻き戻ってしまうようです.
    show_time() の内部で getMinutes()(0~59までの正数)を使って分表示していることが原因です.
    getHours()で時間を取得してゲタを履かせると60分以上表示できるようになります.

    需要は少ないかと思いますがご参考まで.

    返信削除
  6. このコメントは投稿者によって削除されました。

    返信削除
  7. 始めまして。日浦と申します。いつも便利に使わせていただいています。

    最近、私も少し javascript などを触るようになりまして、最近のウェブブラウザにいくつか便利そうな API があることを知りました。1つは全画面表示で、もう1つはスリープ抑止機能です。これらが動作すればいよいよ専用アプリに遜色ないだろうということで、どうせならこの機会にと、自分で学会タイマーを作成しました。いくつか自分が欲しい機能(バーグラフ表示、メッセージ切り替えなど)もつけ、上記匿名さんがご希望の1時間以上の時間でも動作するようにしました。

    英語版    https://shiura.com/timer/
    日本語版   https://shiura.com/timer/jp
    ダウンロード  https://shiura.com/timer/timer.zip
    説明書    https://shiura.com/timer/manual.pdf#page=3

    ※フルスクリーン表示やスリープ抑止は現段階ではOSやブラウザによって動作しない環境があります

    自分は jquery などがよくわからないのでプログラムはイチから書いたのですが、すっきりしたダーク調の画面や,URLによる設定保存など便利で気に入っている部分は参考にさせてもらいました。以下のブログでも丸田様のタイマーに言及しておりますので、念のためお知らせいたします。差し支え等がありましたら修正しますのでおっしゃってください。
    http://monoblogue.nikomat.org/article/188786760.html

    返信削除