東南東

東南東、いきなり言われて

ああ、あっちね

って、言えますか?

西北西と北北西と北西は?

なかなか文字だとイメージしづらいですよね。

こういう方位の表し方は4,8,16,32段階が、まあメジャーどころで、さすがに4方位(東西南北)から8方位(北東、などの2方位の組み合わせ)まではすぐわかると思いますが、16方位くらいからよくわからなくなる。

挙句に南西微西(32方位の表現の一つ)なんて、ほんとどっち向いていいのかわからない。

たとえば、データとしてそういう方角が数値や文字で得られたとして、そのまま表示しても自分でわからないから、ぜひ矢印などの画像で図示したい、となるわけです。

そこで、自前で絵を描いておいて方角に合わせて・・・なんてことが、現在ではまるで必要がないことを知りました。
時代はCSSとかいうらしい。

一つ、たとえば北向きの矢印画像を用意しておいて、あとはCSSでもって回転してブラウザ上に表現できてしまうという、あまりにもリッチすぎて鼻血が出そうなことが、もはや当たり前ﾗｼｲ。

たとえば、16方位なら360度を16で割って22.5度づつ各方位の差になるわけですから、あとは北から16方位が時計回りになるように並べて、北を0として順番をつけていって、その順番に22.5を掛け算すると度数法による角度が出ます。

その度をそのままCSSで指定してあげるだけで、指定画像(やﾃｷｽﾄ)を回転してくれるんです。

北向きの矢印画像があったとして、それをx.pngとします。

すると、南向きに表示させたい場合は

<img src='x.png' style='transform:rotate(180deg)'>

だけで済むという驚き。こりゃあもう三角法使って自前で計算してたのがバカみたいじゃないですか。

進行方向などの場合はそのままでOK,風速の場合は、その方角からくる、という意味ですから、それに180度足して360度との剰余を求めれば風向きアイコンの出来上がり。

いやあ・・・
先日、「使うつもりは失せた」と書いたchromeですが、そのchromeをテストしているうちにこういう知識を身に着けたので、いまも実はちょっとづつ使っています。
しかし、これらは既に結構古いﾌﾞﾗｳｻﾞでもとっくに実装されていた、当たり前な技術なようでして、キャッチアップする以前の問題となっており・・・ウラシマっぷりをまた満喫してしまいました。

canvasとかいうのがjavascriptにあるらしいぞ! 三角法で矢印書くぞ!! とか一瞬げんなりしたのは、ここではあえて申し上げません。。。(頭が固いと自分が知ってる手法が使える方法で実現方法を探すので、こういう迂遠なことになるんでしょうか・・・)