1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

スイス鉄道時計のWebパーツをいじってみた

Posted at

NHKとけいサービス終了で思い立った

NHKの時計アプリ、「NHKとけい」が9月末でサービス終了とのこと。

理由として「『NHKとけい』は、インターネットサービスの見直しに伴い、終了」と書かれているが、10月から施行される改正放送法(放送法の一部改正(令和7年4月25日法律第27号〔第2条〕))が関係していると思われる。
シンプルなデザインで愛好している人がいただけに、終了を惜しむ声がSNSなどで上がっている。

さて、その場合どんな時計の代替アプリがあるだろうと思って、ふとスイス鉄道時計を思い出した。

一時期iOSの時計アプリにもこのデザインが使われていたというほど、シンプルで見やすい。
さらに本家は00秒で秒針が一旦止まり、次の分の信号が来た時点で分針作動→秒針も再開という「Stop To Go」が採用されている。

かつてはスイス鉄道時計のソフトやスクリーンセーバーが公式などで配布されていたが、Flashなどで作られていたこともあって現在は配布されていない。

かわりに現在配布されているのがスイス鉄道時計のWebパーツである。

SBB公式ページの右下に動いている時計もこのWebパーツが使われているようだ。
sbb1.png

SBB公式が配布しているスイス鉄道時計のWebパーツは index.htmlsbbUhr-1.3.js の2ファイルで構成されている。
HTMLファイルでJavaScriptファイルの呼び出しと大きさ・背景色などの設定。実際に動作させるのはJavaScriptの方である。

ダウンロードしたファイルをそのままPCのブラウザで表示させると、背景が黒、縦方向はほぼいっぱいながら、左右方向は左寄せに時計が表示される。
sbb2.png

index.html 内では背景色を変更したり

背景色
<body style="padding: 0; margin: 0; background-color:rgb(0,0,0)">

縁取り色を変更したりできる。

縁取り色(true:黒, false:灰色)
myClock = new sbbUhr("sbb_uhr_container", true, 60);

例えば、
background-color:rgb(246,246,246)
myClock = new sbbUhr("sbb_uhr_container", false, 60);
と設定すると、このように明るい背景・灰色縁取りの時計表示になる。
sbb3.png

sbbUhr-1.3.js は下手にいじるとスクリプトが動作しなくなるが、秒針の色くらいは変更が可能である。

公式サイトの時計が緑秒針だったので、緑秒針に変更してみよう。
スクリプト内で赤指定、つまり rgb(xxx,0,0) に相当する部分を探すと、
39行目に

秒針部
seconds: (略)<path fill="rgba(235,0,0,1)"

という記述が見られる。rgbではなくrgba(不透明度の設定も含む)となっているが、前3つに緑のカラーコードを指定すれば緑秒針に変更ができる。

公式ページの緑をレタッチソフト(Affinity Photoなど)でカラーピックして、 rgba(49,149,91,1) を設定するとこのように変更ができた。
sbb4.png

非公式改良版は文字盤に一部バグあり

公式配布のWebパーツは左寄せのみで、中央揃え等に変更することができない。
この点を改良したWebパーツがGitHubで公開されていた。

ただしこのWebパーツ、文字盤のSVG部分にバグがあり、47分(秒)の線が欠けている。
sbb5.png

sbbUhr-1.3.js のSVG部分に本家のSVGソースを貼り付けると文字盤が直ったので、SVG部分に問題があるようである。
とはいえ、その点を修正すればこのスクリプトは使い勝手が良い。

NHKとけいアプリが無くなっても、この時計をWebブラウザで表示させれば、見やすい時計として十分使えるのではないだろうか。試してみてほしい。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?