先日とあるチームのドライバーとしてエビスサーキット西コースで行われた3時間Kカー耐久レースに参戦してきました．
その時にピットからの指示を簡単にドライバーが確認できるWebアプリ的な奴を作ったのでサクッとご紹介します．
ピットボードとは
まず『ピットボード』とはですが，レースなどをよく見る方はご存知かもしれません．自分のチームのクルーがドライバーに対してなんかかしらの指示を書いたやつですね．それをホームストレートなどの時に自分のピットがある前のところからドライバーが見えるように掲げるものです．
こんな感じ( 画像はgoogle画像検索で出てきたものをお借りしました)
ピットボードでは『ピットIN』などの簡単な指示ができますが，『オーバーテイク仕掛けろ』みたいな指示がやりづらいですよね．
そこそこ資金力があるチームは無線を使って指示するみたいですが，そんなお金もない．というわけでサクッと表題のやつを作ったわけです．
Webピットボードを作る まえおき
ピットボードをつくるときに必要な項目を挙げてみました．
- かんたんに指示をみるためのもの
- 指示がリアルタイムに送れる・確認できる
こんな感じでしょうか．
- かんたんに指示を見るためのもの
これはすでにあるものを使うと達成できるのですが，
- 指示がリアルタイムに送れる・確認できる
というのがちょっと厄介ですね．
リアルタイム更新についてGoogleで検索してみると，AjaxというのとCometというのがあるそう．
Ajaxについては使ったことがあるのでまた使ったことがないCometで実装してみようとなったわけです．
Cometとは
下の方にある参考サイトに詳しく乗っていますが，引用させていただくと
1つ目は、Ajaxなどの技術を使い、1秒毎など定期的に更新するというもの。F5連打と同じだが、ブラウザでページ自体を更新する必要はないため、一見更新しているようには見えない。
2つ目はcometという技術を使う。これは聞いたことがなかったが、中身を知ったらその知恵に驚いた。cometはおおまかにいうと、最初にリクエストがあった際に、サーバー側でつかんだままにして、発言があったらレスポンスを返すというもの。
最初のやり方だと、発言が更新されていなくても更新を行うためムダなリクエストが発生する。これだとユーザーが増えた際に、サーバーに負荷がかかるので望ましくない。cometを使えば、データが更新された時にプッシュされるため、ムダなリクエストが発生しない。
というものらしい．
実際に作ってみる
下記のサイトを参考にして作成してみました．
チャットのように過去のログは切り捨てることにして実装しました．
<実際のコード>
・comet.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<?php /* File name : comet.php */ //データ書き込み用ファイル define( 'DATA_FILE', 'data.log' ); //データ取得 function getData() { return file_get_contents( DATA_FILE ); } //更新確認 function getUpdateData() { $data = getData(); $temp = $data; while( $temp === $data ) { $temp = getData(); sleep(1); } return $temp; } //データ追加 function pushData( $data ) { if( !empty( $data ) ) { //$data = str_replace(array( "\n", "\r" ), '', $data).' ['.date( 'c' ).']'.PHP_EOL; file_put_contents(DATA_FILE, $data, LOCK_EX); } return getData(); } if( isset( $_GET['mode'] ) ) { switch( $_GET['mode'] ) { //データ取得 case 'view': $data = getData(); break; //データ更新確認 case 'check': $data = getUpdateData(); break; //データアップデート case 'update': $data = pushData( $_POST['data'] ); break; } echo nl2br(htmlspecialchars($data, ENT_QUOTES)); } ?> |
・index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<html> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width,initial-scale=1"/> <link href="../style.css" rel="stylesheet" type="text/css"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> jQuery(function($) { var $view = $('#view'), $data = $('input[name="data"]'); /** * データ取得 */ function getData() { $.post('../comet.php?mode=view', {}, function(data) { $view.html(data); checkUpdate(); }); } /** * 更新チェック */ function checkUpdate() { $.post('../comet.php?mode=check', {}, function(data) { $view.html(data); checkUpdate(); }); } $('#add').submit(function(event) { event.preventDefault(); $.post('../comet.php?mode=update', {data: $data.val()}, function(data) { $data.val(''); }); }); getData(); }); </script> </head> <body> <dl> <dt>現在の指示</dt><dt> <dd id="view">指示を出すとここに表示されます</dd> </dt></dl> <form id="add" action="../comet.php?mode=update" method="post"> <input type="text" name="data" value="" /> <input type="submit" value="追加" /> </form> </body> </html> |
こんな感じになりました
フォームに入力し「追加」ボタンを押すと指示できるようになっています．
実際の運用
車両にタブレットを取り付け，テザリングを使用して運用しました．
最初順調に動いていたように見えたのですが，思ったよりも電波状況がよくなく，ピットから指示は送っていても車両側の方で更新されず指示が伝わらないなどトラブルがありました．
まあどうしようもないので古典的に<meta name=”Refresh”>を追加して対処したわけです．
また予選も終わりこれから本線というときにWebサーバーがダウン．Refreshの頻度が多いせいでリクエストを処理できなくなってしまいました．
当日になって数々のトラブルに見舞われましたがなんとか運用できた感じです．
解決すべき課題などがたくさん出てきたので次のレースまでにはそれらを解決してもっと質の高いものにしていきたいと思います．