CANBoat設計その2 ― なぜウェブサイトなのか、そしてなぜTCPとJSONなのか

2010年9月21日 · Canboat, Monitoring, System Control

このページは機械翻訳されています。原文を読む (English)

iPhoneやiPadで自作アプリを見せると、まず聞かれるのが「App Storeのどこからダウンロードできるの?」という質問です。答えはシンプルで、「できません」。そもそもその必要がないんです。もしダウンロードが必要だったら、それこそダメな設計ですからね!

考え方としては、まともなウェブブラウザが入っている船上の端末なら、どれでもCANBoatのデータにアクセスできる、というものです。おかげで開発の手間が省けます。Blackberry、Android、iPhone、Windows Mobileなど、それぞれ専用のアプリを書かなくて済むわけです。やるべきことは、モダンなブラウザでウェブページがきれいに表示されるようにすることだけ。ちなみにInternet Explorerには対応しないと決めました。まあ、IE 9なら話は別ですが。

常時稼働している小型の(Linux)サーバーにウェブサーバーを置き、クライアント側はウェブブラウザを使う――この選択には、ほかにも大きなメリットが2つあります。

まず1つ目。何もインストールする必要がないので、クライアント側のハードウェアは「使い捨て」にできます。なくしたら(たとえば水浸しになったら)、新しいのを用意すればいいだけ。コックピットで使うなら多少の保護は必要ですが、それは自分のスマホだって同じことです。2世代前になって子どもたちが見向きもしなくなった昔のiPod touchも、立派なクライアントになります。しかも大きな画面を手に入れる口実にもなります。そう、iPadを買う「とてもまっとうな理由」が突然できるわけです。

2つ目。すべての状態はサーバー側で保持しているので、クライアントはどれだけ長く電源を切っておいても構いません。再び起動すれば、ページを更新するか「ウェブアプリ」を立ち上げ直すだけで、すべてのデータがそろっています。サーバーがシステムの状態を把握しているからです。ログの記録なども、iPhoneアプリを常時動かしておく必要はありません。アンカーアラームでさえ(実装までこぎつけたらの話ですが)、この方式で動くようになります!

ウェブページ

モダンなブラウザのすごいところは、ほんのわずかなJavascriptでいろいろなことができる点です。たとえば下のゲージは、すべてクライアント側で、数百行ほどのJavascriptコードで描画しています。

上のゲージは、低速な回線で接続しているクライアントでの見え方です。Wi-Fiで接続している場合は、反射の入ったきれいな画像でゲージが表示され、見た目がぐっとグレードアップします。

さらに、サーバー側でブラウザの性能を調べ、端末の能力に合わせてページを調整しています。今のところ、小さな画面を検出したらタブバーをドロップダウンリストに切り替えるようにしています。また、iOS端末でページヘッダーなしにアプリを動かせるよう、Apple Webkit向けの各種設定も送っています。

画面上のデータの更新

ブラウザはまだUDPパケットを受信できないので、別の方法でデータを取得する必要があります。ブラウザにできるのは、TCP接続を張ってデータを更新することだけです。この手法はAJAX(Asynchronous Javascript and XML)と呼ばれていますが、私はXMLの代わりにJSON形式を使っています。JSONは簡単に本物のJavascriptオブジェクトデータに変換できるので、Javascriptにはうってつけなんです。

上の3つのメーターのために送られるJSONは、だいたいこんな感じです。

[
  {"name":"Heading","units":"°","value":357.7},
  {"name":"Batt Voltage","units":"V","value":"27.06"},
  {"name":"NMEA Voltage","units":"V","value":"12.65"}
]

注: このページは、以前の私のブログ(URL: http://yachtelectronics.blogspot.nl/2010/09/canboat-design-part-ii-why-website-and.html)から転載したものです。

ウェブページ

画面上のデータの更新

コメント