トリップメーター


前回の記事で、Arduinoを使ってラリーコンピュータを作ることを目標にしてしまったので、まずはラリーコンピュータを作るのに必要なものを考えてみよう。

ラリーコンピュータは、

  • 時計
  • トリップメーター
  • 主催者からの指示速度
  • スタート時刻

といった要素を元に、走行中の競技車両がその時点での正解時間に対してどれくらい早いのか遅いのかを計算してくれる装置です。

これらの要素の中で、

  • 時計
  • 主催者からの指示速度
  • スタート時刻

の3つはコンピュータ内部の処理だけで済みますが、トリップメーターだけは外部からの入力が必要になる面倒なヤツです。

通常ラリーコンピュータのトリップメーターは、車速パルスと呼ばれる車が速度(走行距離)に合わせて出してくれる信号を利用しており、車速パルスはカーナビも自車位置を測位する目的で使用しています。
なので、この車速パルスをArduinoに取り込んで距離を計算し、トリップメーターに利用したいと思います。

車速パルスについてはJIS規格があり『JIS D 5601 自動車用スピードメータ』に定義されています。
そう車速パルスは元々スピードメータに速度を表示するための信号なのです。
昔の機械式のメーターが大元になっていて、20年くらい前までの車ならトランスミッションからスピードメータにケーブルが繋がっていて、中のケーブルがグルグル回る速さでスピードメータが指す速度が決まるという仕組みでした。
このケーブルがグルグル回る速度が『637rpm』の時、車は『60km/h』で走っているものとするとJISで規定されています。
rpm は revolution per minute の事なので1分間当りの単位で、km/h は kilo metur per hour の事なので1時間当りの単位と時間軸が違うので統一して考えてみよう。
60km/h を 分速に直すと 60km/h ÷ 60分 = 1km/min となり1分間で1km進んでいると言う事になります。

637rpm = 1km/min というのがJISの規定なので、車が 1km 進む間にスピードメータケーブルは 637回転 すると解釈する事ができます。
と言う事は、スピードメータケーブルが 1回転 した時の走行距離は
1km ÷ 637回転 = 0.0015698587127159km = 1.569858712715856m
と言う事になります。

車速パルスはスピードメータケーブル1回転当り『2パルス』『4パルス』『8パルス』『16パルス』を発生させるものがあり、最近の車は概ね『4パルス』発生させるようです。
と言う事は、スピードメータケーブル1回転当り4パルスなので1パルス当りの走行距離は
1.569858712715856m ÷ 4パルス = 0.3924646781789639m/パルスと言う事になります。
1パルスで39.24cm、結構細かく距離が測られている事が分かりますね。

これらの事から、Arduinoで車速パルスをカウントし、カウントした数に『0.3924646781789639』を掛ければトリップメーターが作れると言う事が分かりました。

あとは、パルスの入力回路とか表示器をなんとかすればArduinoでトリップメーターが作れそう。

Lチカ


今、IT業界のホットな話題はIoT(Internet of Things)と言ってもいいでしょう。
いろんなモノがインターネットに繋がって勝手に通信をして情報交換を行う、なんだか凄い世界です。

一応ITエンジニアの端くれとして分かった振りをするためにも、とりあえずの知識だけは身に付けておく必要があるので、Arduinoとかいうマイコンで遊んでみる事にした。

購入したのはOSOYOOとか言う所が出している『Arduinoをはじめよう 互換キット UNO R3対応互換ボード 初心者専用実験キット 基本部品セット20 in 1』です。
Arduinoキット

Arduino UNO R3互換ボードの他、LEDやLCD表示器、各種センサーなどいろいろセットになっていて、とりあえず本などに書かれているサンプルが一通り試せるようになっている。

注文したキットが届いたので動作確認も兼ね、プログラミングの世界で初めてやる『Hello World』を表示してみるみたいなノリの、Arduinoで初めて作る定番のLチカ(LEDをチカチカ光らせる)をやってみた。
Lチカ
何事も無く無事動作したので動作確認終了。

ただLチカだけやっても意味が無いし、何か目標が無いとすぐに飽きてしまうので、とりあえずラリーコンピュータをArduinoで作ってみる事を最終目標に遊んでみる事にする。

ラリーコンピュータは、アベレージラリーと呼ばれる類の競技で、ナビゲーターが時間と距離と指示速度を元にややこしい計算をするのを助けてくれる賢いヤツですですが、今や新品を手に入れる事がほぼ不可能な絶滅種となってます。
なので、そんなモノを作れたら面白いかなと言う事で、暇を見つけながら進めていこう。

PHPのエラーログで文字化け


PHPのerror_log()関数でApacheのエラーログ等に日本語のメッセージを吐き出すと
\xe8\xaa\x8d\xe8\xa8\xbc\xe3\x81\xab\xe5\xa4\xb1\xe6\x95\x97\xe3\x81\x97\xe3\x81\xbe\xe3\x81\x97\xe3\x81\x9f\xe3\x80\x82といった感じに文字化けして出てくる時がある。
まぁ厳密には文字化けしている訳ではなくて、セキュリティの観点から適切にエスケープ処理してくれているだけなんだけど、デバッグ中の身としては余計なお世話だったりする。 (^^;

Apacheの環境設定をいじるとエスケープされなくなるようだけど、お客さんのとこの環境を勝手に変える訳に行かなかったり、他の表示に影響が出る場合があるのであまり環境設定をいじりたくない。

とりあえずプログラムでエスケープされた文字を復元したりしていたけど、急いでいる時はやっぱり不便。
何かいい手はないかと探していたら、perlを使って文字を復元する方法を見つけた。
それをそのままtailコマンドからパイプで繋ぐとログを流しながらちゃんと日本語が読めた!
って事で、忘れないためにメモしておこう。 φ(..)
tail -f logs/error.log | perl -nle 's/\\x(..)/pack("C",hex($1))/eg;print $_'

三菱東京UFJ銀行


今日はどういう訳か朝から三菱東京UFJ銀行を騙る詐欺メールが何通も届きます。
残念ながら三菱東京UFJ銀行に口座を持っていないので、私を騙す事はできません。

しかしまぁ怪しさ満点のメールです。

三菱東京UFJ銀行を騙る詐欺メール

三菱東京UFJ銀行を騙る詐欺メール

先ず以て日本語が変です。 (^_^;
HTMLメールで送られてきていますが、画像が一つ貼り付けられているだけのお粗末なHTMLメールです・・・
ヘッダー情報を見ると大元の発信元はルーマニアのようです。

画像にはリンクが設定されているのでクリックしてみます。
またまた怪しさ満点のページが表示されます。

三菱東京UFJ銀行を騙る詐欺ページ

三菱東京UFJ銀行を騙る詐欺ページ

三菱東京UFJ銀行のインターネットバンキングページのログイン画面をコピって作ったんでしょうが、使ってる文字コードがおかしいのでタイトルが文字化けしてます。
ページのソースコードを見ても文字化けしてる箇所がたくさん有ります。
そしてなにより、インターネットバンキングなのにクレジットカードの情報を入れろという暴挙にでてます。 (^_^;
しかも、入力フォームの所だけ英語表記です。きっと日本語が書けなかったのでしょう・・・

フォームに適当な数字と名前を入れてログインボタンを押すと三菱東京UFJ銀行のトップページに遷移していきました。(皆さん、本当のクレジットカード情報を入れちゃいけませんよ)

なにかもう少しトラップがある方が面白いのに、シンプルにクレジットカード情報を詐取するだけのようです。

Webフォントを使ってみる


ホームページのデザイン変更に合わせて幾つか新しいことにチャレンジしてみた。
その一つがWebフォントの使用。

ホームページのヘッダー部に表示している題字『和魂洋才徒然日記』に、SIMOさん謹製『青柳隷書しも』フォントをWebフォントとして使わせて頂いた。
(ブログの題字は別のフォントを使用してみたいと思い、現在作者の方に連絡中です)
隷書体の味わいのある文字がよく、ヘッダー部の背景に使った画像とマッチしていてとってもいい雰囲気を醸し出している。

特定のフォントで文字を表示したい場合、これまでだと文字を画像ファイルとして作成し画像として表示する方法が取られていた。
しかし、画像だと画面が拡大・縮小された時に文字の滑らかさが失われギザギザに表示されてしまう恐れがある。
スマートフォンやタブレット端末での閲覧が増えているのでページを拡大・縮小表示する事は多々有るうえ、Retinaディスプレイと称する高精細な画面で見ると通常のPC画面ではキレイに見えている画像がとっても粗い画像に見えてしまうと言う問題もある。

またSEOを考えた場合、サイトタイトルが画像で表示されているよりは文字としてHTMLに書かれている方がいいように思われる。
対策方法としてスタイルシートを駆使して文字は表示エリア外に飛ばし、背景画像としてロゴを表示させると言った方法も取られているが、文字を表示エリア外に飛ばすとかフォントサイズを0pxにして人間に見えないようにする手法はSEOスパムとして認識される可能性があり、あまり良くないように思える。

更には、Webフォントを使って表示させることで文字の修正や大きさの調整などは、テキストの編集、スタイルシートの修正で容易に行えるといった利便性もある。

いろいろ良いことずくめのWebフォントだが、問題もある。
それは、利用者にフォントをダウンロードさせないといけないと言う事。

ダウンロードさせるに当たって考慮しなければ行けない点が2点ほど考えられる。
一つは著作権の問題。
フォントは著作物なので勝手にサイト上でダウンロードさせる訳には行かない。
更に次に述べる2点目の考慮点に関連してフォントのサブセット版を作成しているが、これはフォントファイルから特定の文字を切り取って新しいフォントを作る行為と考えることができるため、著作物の改変にあたる可能性がある。
今回は作者のSIMOさんのご了解を得ることができたので青柳隷書しもフォントのサブセット版を作成し、使わせて頂いた。

二つ目の問題はデータ容量。
青柳隷書しもフォントの元々のファイルサイズは約2.5MBある。
光回線などの広帯域ネットワークを使っているPCであれば全く気にならない容量だが、3G回線を使っている端末だと少々重い気がする。
それに、たった8文字のために3000文字分ものフォントをダウンロードさせるのは無駄が多すぎる。
最近ではサイトの読み込みにかかる時間もSEOに影響するという話があるので、時間短縮は大事なんだと思う。
と言う訳で、使用する8文字分を切り出したサブセット版のフォントファイルを用意し、それをブラウザに読み込んでもらうことにした。

では、早速サブセット版のフォントファイルを作成することにする。
作成には武蔵システムさんが作成・配布している『サブセットフォントメーカー』というフリーソフトを使用。
使い方は至って簡単で、元となるフォントファイルを指定し、サブセット版のフォントファイル名を指定。そしてサブセット版に入れる文字を指定したら「作成開始」ボタンを押すだけ。

あっと言う間にサブセット版のフォントファイルが完成した。
出来上がったファイルの容量は約5.3KB。元の容量に対して787分の1(約0.25%)にまで小さくなった。

折角新しいことにチャレンジするのだからもう一歩踏み込んでWebフォントを使って見ることにする。
WebフォントにはWeb Open Font Format(WOFF)というWebフォント専用のフォーマットが有り、多くのブラウザが既に対応している。
もちろんTrueTypeやOpenTypeのフォントもそのままWebフォントとして使用できるが、WOFFはWebフォント専用に開発されたフォーマットなのでより圧縮率が高くファイルが小さくなるといったメリットがある。
更にTrueTypeやOpenTypeといったフォーマットはAppleやAdobe、Microsoftが開発したフォーマットですが、WOFFはオープンソースとして開発されたフォーマットなのでブラウザを開発する人達にとっては何かと都合が良いとか、商品として売っているTrueTypeフォントが簡単にWebでダウンロードできてしまうのはけしからん!と申す方々がいるなど大人の事情も見え隠れします。 (^_^;

では、先程作成したサブセット版のTrueTypeフォントからWOFF形式のフォントファイルを作成しよう。
こちらも作成には武蔵システムさんが作成・配布している『WOFFコンバータ』というフリーソフトを使用。
元となるフォントファイルを指定し「変換開始」ボタンを押すだけでWOFF形式のフォントファイルが完成です。

WOFF形式のフォントファイルは約3.9KBと、サブセット版のTrueTypeフォントより更に30%ほど小さくなった。
いい感じですねぇ。

それでは実際にスタイルシートでWebフォントを使ってみましょう。
まず使用するフォントを指定します。
@font-face {
  font-family: 'SiteTitleFont';
  src: url('/common/aoyagireisyosimo_subset.woff') format('woff'),
       url('/common/aoyagireisyosimo_subset.ttf') format('truetype');
}
「SiteTitleFont」という名前でスタイルシート内で使用し、WOFF形式とTrueType形式の2つのフォントファイルをソースファイルとして指定します。
この指定方法だと、WOFF形式に対応しているブラウザはWOFF形式を使用し、WOFF形式が何だか理解できないブラウザはTrueType形式を使用してくれます。

続いて、このフォントで文字を表示したい箇所のスタイルとして
font-family: 'SiteTitleFont';とフォントファミリーの指定をします。
以上でスタイルシートの修正は完了。
ブラウザで表示してみると、無事指定したフォントで文字が表示されるはずです。

次のページ →