1000m タイムトライアルサイト 使い方
1000mタイムトライアルサイトの使い方の説明です。
3本ローラーを使った1000mタイムトライアル時、タイムの計測と動画撮影・保存を行います。スピードセンサーはBluetooth Low Energy（BLE）に対応したものを使用してください。スピードケイデンス一体型のセンサーでもOKです。
Windows 10のMicrosft Edgeで使用することを念頭に作りました。インターネットエクスプローラでは動かないと思いますが、ChromeやFirefoxの新しいものなら動くようです。スマホ（Android 7.0の古いもの）でも何とか動きました。
（追記）3月5日現在
時刻計測にバグがあります。今朝、3本ローラーを使って実際に走って試してみたところ、実際より30秒近い差があるタイムが表示されてしまいました。
また、CPUにATOM x5-z8300を使っている4年前のWindows10タブレットを使用したところ動画のコマ落ちがひどくて使えませんでした。
（追記）3月6日現在
衝撃的な事実。時刻計測はバグではなかった。センサー内部の時計がずれているために、時刻計測がおかしなことになっていたことが判明。Cyplusのセンサーに換えて、XOSSのセンサーを使用したところ、真っ当そうな値が出た（XOSSのセンサーはCyplusのセンサーの電池蓋のツメが折れたため、念のために購入していたもの）。
市販のサイコンではセンサーの時計を信用せず、自前の時計を使って計測しているのかもしれない。とりあえず、センサーを取り換えて様子をみよう。それでも不安なようなら、時刻計測の時計をパソコン側に持ってくることにしよう。
XOSSのセンサーを使って撮影した動画はこちら。
（追記）3月10日現在
いきなり終了してしまうバグを修正。時刻計測をすべてパソコン側に変更。時刻計測開始のタイミングもスタート時開始に変更。低スペックパソコン用に解像度を落としたもの（1000m Time Trial (fc2.com)）を用意。
（追記）3月11日現在
時刻計測をセンサー側に戻した。理由は速度表示が不安定になったため。０になったり、突然100ｋｍ/ｈを超すような表示が出たりとばらつく。考えてみれば当然で、ホイールが1回転した時の時刻ではなく、センサーが累積ホイール回転数値を返してきたタイミングの時刻を計測していたから。
（使い方）
１．プロフィールの入力
まず、プロフィールの入力を行います。英語で作ってみたのは、外国でも使ってくれたら面白いな、と思ったのと、日本語の読み上げ音声が不自然だったから。
"Name"（名前）と"Tyre Circumstance"（タイヤ周長）は必須入力項目（名前は、英語
かローマ字で入力してください。ゴール後に参加者名の読み上げを行ってくれます。）。
あとの項目は任意で結構ですが、入力が終わったらConfirmボタンを押してください。
２．スピードセンサーの接続
Connect speed sensorボタンを押してください。小さな窓が開きます。
最初にペアリング可能な機器を探してみつかったら、窓に表示されます（上記例ではXOSSのスピードセンサー。探すのに少し時間がかかることがあります。スピードセンサーがスリープ状態になっていると見つからないことがありますので、接続前には少しセンサーを動かして、スリープ状態から起こしてあげてください。）。
次にペアリングしたい機器を選択してペアリングボタンを押します（スピードセンサとケイデンスセンサの両方を使用している場合には、２つのセンサーが検出されます。その場合にはスピードセンサーの方を選択するようにしてください。）。
Bluetooth Low Energyを使用したスピードセンサーを使用してください。スピードケイデンス一体型センサーでもOKです。
下の"BLE Status"窓に"> Notification started”と表示されたら、センサーが接続されてデータを取得できる状態になったことを示します。
エラーになったら、もう一度Connect speed sensorボタンを押してみてください。
何度やっても接続しないけれど、ほかのパソコン・スマホでは接続できる場合がありました。その時は、パソコンの「設定」→「デバイス」→「ブルートゥースとその他のデバイス」の接続機器のリストから、いったん削除することで接続できるようになったこともありました。
それ以上の不具合対応はわかりませんので、ご勘弁。すみません、私も素人同然なので。
３．スタート
センサーとの接続が確認されたらStart your trialボタンを押します。まず、カメラの使用を求めてくると思いますが、許可するとパソコンやスマホのカメラが起動して画面に表示され、録画が開始されます。なお、カメラの画像をどこかのサーバーに送るというような処理はしていませんのでご安心ください。画像データがあるのはユーザ機器の中だけです。 ボタンを押して30秒後にトライアルがはじまります。
冒頭書いた理由から音声はすべて英語です（ブラウザが英語音声読み上げ対応していない場合には、不自然な日本語風の英語発音になります）。ちなみに、最初の言葉は"1000 meters time trial by cycle rollers. On your mark."。"On your mark"って、「位置について」みたいな意味らしいです。
カウントダウンが終わって、赤いランプが付いたらスタートです。実はTime欄に出てくるストップウォッチみたいに流れていく数字も、読み上げ音声の秒もお飾りで、実際の計測には使っていません。ですから、スピードメータの立ち上がりが遅くて、最初は速度が0km/hと表示されるかもしれませんが気にしないでください（走り始めて１秒から2秒は時速0km/hと表示されると思います。）。
スピードセンサーの仕組みが、1秒おきに累積ホイール回転数とそれを記録した時の時間（単位は1/1024秒）を送ってくるというものなので、スタート後に最初の１回転を記録した時間（T０秒とします。）とその時の累積回転数（C0とします）を起点として計測します。距離が1000ｍを超えた後ホイールが１回転したときの時間（T1秒とします。この時の回転数はタイヤ周長が2096ｍｍの場合には（C0＋478）回転。この間の走行距離（2096mm×478回転=1001.888m）と起点の時間から、1000ｍ走行のタイムを計算しています（（T1-T0）×1000/1001.888）。計測精度はタイヤ周長がクリティカルですね。タイヤ周長が2ミリ違えば、距離が１ｍ変わったのと同じですから。同じ700×23ｃでも、タイヤの種類、摩耗具合、体重、空気圧などでタイヤ周長は変わってきますので、タイムは一応1/100秒単位まで計算していますが、他の自転車の記録と比較する際はご注意ください。
遊びで、残り400mになったときにジャン（打鐘音）を入れています。(17) KEIRIN【JKA】-競輪- - YouTubeにジャンの動画があったので、その一つから録音して音源にしています。念のため、競輪公式サイトにあった問い合わせフォームに照会中ですが、ダメと言われたら削除します。また、速度が時速100キロを超えたら、昭和の車にあったような速度警告音（キンコン）が鳴るように設定しています（私の今の実力では時速100キロなんて到底出ませんけど。）。このあたりは和風テイスト。
1000ｍ走行が終わったら、ゴールの声とタイムの読み上げがあって計測終了です。
なお、無限ループを避けるため、スタート後180秒（6分）以内にゴールすること（平均時速10㎞ですね）を前提にプログラムしました。ゴールまで6分以上かかった場合にどうなるかは確認していません。
４．録画について
ゴールすると自動的に録画が終了して、"Download Video file"というリンクが付いたメッセージが現れます。クリックすると、"movie.webm"という名前のファイルがダウンロードできます。このファイルを動画再生すると、本ホームページ上部の情報（タイムトライアル中のタイムや速度やリザルトとカメラ画像）が映っているはずです。残念ながら音声が入っていません。多分、入れ方があるのだと思いますが、やり方を発見していません（navigator.mediaDevices.getUserMediaで、audioをtrueにしても、音は記録されませんでした。ハウリングが起きてうるさいだけなので、今はfalseにしています。音の記録のやり方がわかったら実装するかも。）。
下部の"Stop Video and Download"ボタンはゴールしなかった場合に使用します。1000mを走り切った方には不要ですので押さないようにしてください。（3月6日ボタン削除）
５．今後の予定
〇youtubeへのアップ機能：
決まったチャンネルを作って、そこにアップできるようにすれば、交流の場になるかも。
〇記録の記録
サイトで計測した結果をボタン一つで登録するような機能を持たせれば、自分の記録の一覧性ができて励みになるだけでなく、ほかの人の記録も参考になると思います。年代ごとにベストタイムを競うなんてのも楽しいかも。世界中の人たちが記録するようなことになれば更に面白い。
ただ、実装するとデータベースの管理責任ができてきますので気が重い。安全なサイトをつくるのは技術的にも難しそう。誰かやってくれないかな。自分で使ってないのでわからないけど、既存のサービス（Strava）とか、うまく使えないのかな。
〇見た目
センスが無いので地味な見た目だけれど、もう少し格好良くしたい。
〇他のセンサ
ケイデンスやパワーメータの数字を表示。面倒くさそう。
〇コード
ちゃんとプログラムを作る人に取ったら、ひどいコードの書き方をしていると思う。<script>や<style?>の中身も音源データも一つにまとめていてるし、あちこちのサンプルプログラムの切り貼り細工。なんとかしたいとは思うけれど、なんともならなそう。githubでさらけ出しているので誰かなんとかしてくれないかな。
〇普及 ？
たとえば、何か自転車のイベントがあった際に、3本ローラーとパソコンとBLE対応のスピードセンサーさえあれば、簡単に1000mタイムトライアル記録会が開催できると思います。
ミノウラさん、アイデア採用してくれないかな、3本ローラーの販促になると思うけど。
1000m タイムトライアルサイト 構築（4）
（プログラムの中身）
サンプルプログラムの中身を見てみると、noifications.jsにある
function handleNotifications(event) {
let value = event.target.value;
let a = [];
// Convert raw data bytes to hex values just for the sake of showing something.
// In the "real" world, you'd use data.getUint8, data.getUint16 or even
// TextDecoder to process raw data bytes.
for (let i = 0; i < value.byteLength; i++) {
a.push('0x' + ('00' + value.getUint8(i).toString(16)).slice(-2));
}
log('> ' + a.join(' '));
}
が、”0x01 0x75 0x02 0x00 0x00 0xfc 0xd5”等のデータを読み取る部分であることがわかる。ここを書き直して、ホイールの回転数と時間を計算して出力するようにしてやれば、WEBブラウザで動くスピードメーターのホームページが出来上がるというわけだ。
handleNotificationsという関数は、
myCharacteristic.addEventListener('characteristicvaluechanged',
handleNotifications);
という呼び出し方をしているので、characteristicのvalueがchangeしたら、すなわちセンサーからの通知（notifications）が行われる毎に、何度も呼び出されるような関数であるようだ。
というような研究を重ねつつ、canvas要素やjavascriptによるカメラ操作（これはびっくりした。WEBサイトでカメラ操作できるとは・・・でも考えてみたら、すでにWEB会議でも使ってた）なども勉強しながら、2週間くらいかかって、ようやくでっち上げたのがこのサイト。なんとか動いているけれど不安定、不安定なのがコードによるものなのか、センサー側の問題なのか良くわからない。あちこちのサンプルプログラムの切り貼りなので、中身はもう少し整理しないと、自分でもコードが読みにくい。たぶん、不必要にグローバル変数多用していると思います。
最初は、githubでサイトを立ち上げようと思って試してみたけれど、javascriptが使えないことがわかって断念。無料でjavascriptを使ったサイトが立ち上げられるところを探して、fc2にたどり着いた次第。ヘンな広告が出るのはご容赦。
使い方は次のページで。
1000m タイムトライアルサイト 構築（３）
（Javascript発見）
いろいろやっている内に、JavascriptでBLEを使えることを発見。Javascriptで動かすためには、Windows10と最新のブラウザが必須だが、Javascriptで作れるのであればスマホやタブレットでも動くだろうし、WEBサイトが作れる。アプリ（プログラム）をインストールするより、ハードルが低いので、ユーザの拡大も期待できそう。Javascriptは、C#よりも、いい加減なところがあり、取っつきやすいのも有難い。
JavascriptのBLE APIの本家はGoogleで、
samples/web-bluetooth at gh-pages · GoogleChrome/samples (github.com)。Sampleにnortificationがあったが、一式ダウンロードしてhtmlをたたいても動かない。そもそも、htmlには存在しない筈のinclude文が書いてあったりして意味不明。結局、Sampleサイトのソースコードを取り出して、それをベースに作ってみることにした。
canvas要素の勉強を行ったり、WEBから動画撮影が行えることに感心したりしながら、なんとか動きそうなものをでっち上げた。中身は種々のサンプルプログラムの切り貼りなので、全く美しくない。本来、避けるべきグローバル変数も思い切り使用している。とりあえず、まぁ、良いか。
GoogleのBLE Notificationサンプルサイトは、
このサイトで、cycling_speed_and_cadenceとcsc_measurementを選んで、start notificationsボタンを押すと、
というのが出てくる。しばらくするとペアリングできる機器（私の場合はXOSSのスピードセンサー）を見つけてきて、
という画面になる。
ここで、センサ（XOSS S-49513）を選択してペアリングボタンを押すと、サイトの真ん中にある窓に、
というのが出てくる。"> Notification started"以下が、センサからのデータ。
1行目の、0x01 0x75 0x02 0x00 0x00 0xfc 0xd5というのを説明する。共通して付いている"0x"は、このデータが16進数であることを表している。16進数で2桁なので、00～ffまで、10進数でいうと0～255までの数値（2進数でいうと2の8乗個の数字）が入ることを示しているわけだ。これがデータの１つの単位（8bit）になる。
1行目、最初のデータの0x01は、このセンサがスピードセンサであることを示している。２つめから５つめまでのデータ（0x75 0x02 0x00 0x00）は、ホイールの累積回転数。0x75は10進数で16*7+5＝117、0x02は10進数で２。4つ目と5つ目のデータは０だから、ホイールの累積回転数は117+256*2=639であることがわかる（前ページの記事参照）。６つめから７つめのデータ（0xfc 0xd5）は、その累積回転数を記録した時の時間（1/1024秒単位）で、0xfcは10進数で16*15+12＝252、0xd5は10進数で16*13+5＝213。つまり、このときの時間は（256*252+213）/1024秒≒63.2秒となる。こういうデータがセンサーから1秒ごとに通知(notification)される。1行目から3行目まで値が変化していないのは、センサーが回転を検知しなかったことを示す（ホイールが回転しない＝速度０）。4行目でデータの数字が変化しているのは、手でセンサーを動かしたからだけれど、ホイールの回転だとみなせば、この変化分から自転車の速度が計算できるという訳だ。
1000m タイムトライアルサイト 構築（２）
（マイクロソフトのサンプル）
マイクロソフトのサイトに説明とbluetooth関連のサンプルプログラムが載っているgithubへのリンクがある。
Bluetooth 低エネルギー - UWP applications | Microsoft Docs
サンプルプログラムを漁ってみても、C#のものしかないようだ。Cで苦手意識があるせいか、C#はどうもとっつきにくい。ｃ＃はUWPという仕組みを使ってbluetoothとやり取りをしていて、VBもUWPを扱えるのでbluetoothを扱えるはずである。しかしながら、サンプルがないと私レベルではさっぱり手が出ない。c#を勉強して理解して、VBに翻訳するのと、C#をあやつれるようになるのとどちらが速いかな、などと考えているうちに1週間くらい過ぎた。
BluetoothAdvertisementというフォルダにはVBのサンプルがある。Advertisementという概念がよくわからないが、色々調べてみると、Bluetooth機器は「自分が何者（たとえば、スピードセンサ）だよ」という情報を発信しているらしくて、それをAdvertisementと呼ぶようだ。機器との接続までのプロセスで、どんな接続可能な機器があるのか調べなければいけないが、それをやるためのものであるようだ。だから、Advertisementだけでは、データを取得できないが、VBで扱えること、VBでの扱い方のお作法みたいなものはわかる。研究すれば何とかアプリができるかも、というレベルには達した。
C# .NET Frameworkを使ったBluetoothLEデバイスの検出 | TomoSoft
C# と Bluetooth Low Energy(BLE)の連携 - TES Blog
なんかは大変勉強になった。
（BLE(bluetooth low energy)の仕組み）
並行してbluetooth low energyの仕組みを勉強。
[C#/WinRT]Bluetooth v4(BLE)機器と通信する（BLE基礎メモ） - Qiita
も良いサイトで、C#だけでなく、BLEの説明も詳しいし、リンクが充実している。プログラムのコードを理解しても、それがどういう意味を持っているのかわからないと話にならない。
「SIGの公式プロファイルは、よく4桁で描かれている。
https://www.bluetooth.com/specifications/gatt/services/
例）Alert Notification Service であれば0x1811
これは、下記のようなUUID（これを「ベースUUID」という）の「XXXX]の部分に、その4桁の短縮UUIDを入れたもの。
0000XXXX-0000-1000-8000-00805f9b34fb」
という記述は大いに助かった。ブルーツースの本家本元のhttps://www.bluetooth.comにいかなければいけないこともわかっていなかったので。色々なメーカーが、BLE対応のスピードセンサを作っているが、ほとんどのサイクルコンピュータはどのセンサーにも対応している。共通フォーマットとか決まっていないとそういうことは出来ない筈、と思っていたら、本家本元にちゃんと文書がありました。
Bluetooth Profile Specification (windows.net)に16-bit UUID Numbers
Documentが載っていて、表の中に、"GATT Characteristic and Object Type 0x2A5B CSC Measurement"や"GATT Service 0x1816 Cycling Speed and Cadence "という記述があり、これを使って、スピードセンサを扱えることがわかる。
フォーマットとかについては、Specifications | Bluetooth® Technology WebsiteにCycling Speed and Cadence Profile 1.0とCycling Speed and Cadence Service 1.0があって説明が書かれている。BLE対応のどのメーカーのどのスピードセンサーも、この文書に基づいているので共通に使えるという訳だ。
センサからのデータは、nortificationというやり方。要するに決まった時間間隔（たとえば、1秒間隔※）で送られてくる。
※ "In typical applications, the CSC Measurement characteristic is notified approximately once per second."
8bitが一つの単位で、データの最初の部分がセンサーの種類等をあらわす。00000001（＝１）ならスピードセンサー、00000010（＝２）ならケイデンスセンサー、00000011（＝3）なら、スピード・ケイデンスセンサーといった具合。下から３ビット目がsensor locationという項目だが、なんだかよくわからない。センサーの位置については、スピードセンサーならホイールに、ケイデンスセンサーならクランクについているに決まっているのに？？
（スピードセンサーであれば）次に来るデータが、累積ホイール回転数とその時の時間。注意しなければいけないのが、
"1.7 Byte Transmission Order
All characteristics used with this service shall be transmitted with the least significant octet first (i.e., little endian)."
というところ。普通の数字の記述方法と違って、小さい桁の数字から先に書くというところ。"Cumulative Wheel Revolutions value is a UINT32"なので、４バイトのデータになるけれど、データがabcdであれば、10進法では、この数字は(a+256*b+256**2*c+256**3*d)となるわけだ。あと気を付けなければいけないのは、数字がロールオーバー（1周回って元の数字になる）すること。ホイール回転数はほとんど心配ないが、時間の方は64秒でロールオーバーしてしまう。なお、時間の単位は"The ‘wheel event time’ is a free-running-count of 1/1024 second units"。
これでデータを取り出せれば、速度と走行距離が計算できる。
"Speed = (Difference in two successive Cumulative Wheel Revolution values * Wheel Circumference) / (Difference in two successive Last Wheel Event Time values)"
1000ｍタイムトライアルサイト構築（１）
（動機）
縁側掲示板に、3本ローラーが退屈だという話を書いたら、ディープインパクトさんやギアントさんに、３本ローラーを使った1000ｍタイムトライアルを勧められた。
コロナ自粛で実走がほとんどできないので、1000ｍTT参加には全くやぶさかではない。とりあえず、やってみたのだが、全く遅い。それに自分でカメラを使って動画を撮るというのも億劫だし、どうせ撮るならサイクルコンピュータの画像も入れたい（youtubeもやったことがないというのも、億劫な要素の一つ）。
ノートパソコンやタブレットにはカメラもblue toothも付いているので、サイクルコンピュータ機能のあるアプリが転がってないかどうか調べたが、どうも存在しないようだ（そりゃそうだ、ノートパソコン抱えて自転車に乗る人はいない）。
という訳で、ならば、自分でアプリを作ってみようか。最初はタイムトライアルサイトを作る気はなく、サイクルコンピュータ機能をパソコン上で実現できれば、と思っていたところ。
（最初の取り組み）
若いころにはBASICやFORTRANでプログラムを書いたことはある。最近ではエクセルのVBAも少しいじったこともある。最近のイベントドリブンとか、オブジェクト指向というのは、よくわからない（そもそもC言語に手を出したときに、ポインタという概念が良くわからず、プログラムが挙動不審になって挫折した経験がある。それ以降、C++等にも手を出してこなかったのだ。）。これも勉強だろうと手を付けることにした。最初にやったのはプログラムを動かす環境を作ること。調べてみると、無料でマイクロソフトのVisual Studioという環境が手に入る。Visual BASICならエクセルマクロの親せきで取っつきやすかろうと、早速に入れてみた。良くわからないなりに、いかにも高機能だ。これが無料とは時代が変わったものだな。
しかしながら、ブルーツースを使ったサンプルプログラムは見つかったのだが、いずれもC#を使った代物。VBと同じようなものなのだろうが、どうにも敷居が高いようだ。
パワーメータ付スピンバイクに乗ってみた
３０分ほど試走。最初はよかったのだが徐々にクランク周りから異音。クランクを一回転させるたびにギ～という音。
最初に疑ったBBアダプタを観察してみたがガッチリ圧入されていて原因ではなさそう。クランクとプーリー固定もしっかりしてそうだ。
ゴムベルトのテンションを緩めると異音が軽減。ゴムベルトを少し空回りするくらい緩めたら異音が消えた。空回りしないギリギリのテンションだと異音は少し気になるレベル。気にしなければいいのだけれどストレスはストレスなので対策しなければ。
さらに観察を続けると、どうやらチェーン（ベルト）ラインが平行になっていない様子。前から見るとプーリー側が少し内側に寄っているようだ。フライホイール側のナットでフライホイール全体を寄せることができそうなので試すことにしよう。ダメならちょっと厄介。プーリー／クランク取り付け部にスペーサを入れてプーリー側を内側に寄せることは可能だが、外側に寄せることは困難だ。フライホイール側でなんとかしなければ・・・
やっぱり難しいものだ。
（追記）
ナットを調整してフライホイールを少し内側にした上で、ベルトテンションも空回りしないギリギリのテンションにしたところ、異音がなくなった（ように思われる）。
（追記）
テンションを上げても大丈夫だった。今日はパワークランクを自転車に戻したため、普通のクランクで走行。４０分くらい走ったが異音は許容範囲。クランク長がオリジナルの165ｍｍから170ｍｍに長くなった効果は遠地点で足が少し遠くなった感じがすることと、ケイデンスが上がりにくくなったことで感じる。もっともケイデンスが上がらないのは４月からスピンバイクに乗っていなかったためかも。Q値の変化は、膝の間隔が狭まっていることでわかる。以前はガニマタ気味に走っていたようだ。
