inventor のすべての投稿

アメダス雨量計測システム

アメダスとは

転倒ます型自記雨量計の構造, https://japanknowledge.com/image/から

アメダス(Automated Meteorological Data Acquisitionn, AMeDAS)は自動気象データ収集システムです。日本国内にある千数百か所に設置された無人の観測施設で地域の気象を観測しています。アメダスの言葉から主に雨に関する測量と思いきや雨に特化した測量ではないようです。

仕組みに注目するとき転倒ますに雨が流れるとシーソーのようにかわるがわる左右に揺れます。一定時間の揺れ回数をカウントして雨量を測定します。雨量が多ければ揺れ回数が大きくなります。

TAKEX来客カウンター

桝が揺れる回数は道路上やイベント会場を通過する人数をカウントする仕組みを応用しました。

猫が横切るだけで点灯する防犯灯がリーズナブル価格で販売されています。カウントされるとき、ブルートゥースか無線LANで中継機器に送信できる装置が望まれます。

ここでは遊び心から転倒ます型雨量計の原理を画像で再現しました。再度の動作はリロードしてください。

アメダス雨量計測システムの原理

雨量を測るには時間を決めて計量バケツ何杯ぶんとするのはごく一般的です。それを無人化して自動的に計測値を送信しています。雨水が桝に流れて溜まると回転体の重心が外側に移動して回転し雨水が放出され、今度は反対側の桝に雨水が溜まり始めます。すると次は逆回転し繰り返し動作になります。

以下の動作原理解説図面はSVG(Scalable Vector Graphics)を用いて記述されています。再実行で雨が思うように降らなくなった場合はCTRL+F5を押してください。

©TacM,2019 Ver0.01 0

終わりに

原理の動作は自動制御ですが、回転体の桝に雨水が溜まり回転するに足るエネルギーが蓄積されたとき回転が始まる正式版ではありません。

ワンマンバスで乗客が次に降りますボタンを押すと次に停車しますという表示が即刻、出る仕組みに似ています。乗客の押した行為で点灯しています。

本来は、バスを停車させる運転手が次に降りる乗客がいることを自ら確認して次に停車ランプを点灯させるのが正式なシステムといえるでしょう。

今回は雨量計測システムの原理が主たる目的であり制御を含めた正式版は別の機会になります。

芽吹く花々2019

早春の花々

立春が過ぎると寒さもだいぶ和らいできます。季節の変わり目を肌で感じられる喜びを体感しています。

春告げ草と呼ばれる梅の花と縁起の良い福寿草をカメラに収めました。

素朴な色合いの梅から色鮮やかなパンジー、サクラソウと目の保養になります。繰り返される自然の営みに感謝します。

10枚の写真を動画風にキャプションを入れてまとめてみました。

梅一輪

厳寒から三寒四温に

寒い寒いと言いつつ、鍋を囲む間もなく立春が過ぎ去りました。シベリア寒気団の勢力が小さくなり、空から降る雪が雨に替わる頃とされる『雨水』もすぐそこまで来ています。

歳時記には、梅が咲きうぐいすの鳴き声が聞こえ始める頃とありますが、うぐいすの初鳴きはまだ体験していません。

梅といえば菅原道真を祀った天満宮を思い浮かべます。五弁の花をかたどった図案が有名です。梅は花の美しさでは桜にトップの座を譲り、果実では桃などの後塵を排していますが、健康に役立つ果実として脚光を浴びています。

梅を詠った和歌を万葉集に見つけました。ものづくり筆耕の精神に鑑みて、ちょっぴり高級な動きを含む和歌を表現します。開始ボタンをクリックして、隠し技をゆっくりお楽しみください。

開始
参照音楽:DOVA-SYNDROME
『sunny side up』
©TacM,2019 Ver0.02

うめはな
  らまくしみ
    その
たけはやし
  うぐいすくも
  万葉集-巻五雑歌(八二四)少監しょうけん阿氏奥嶋あじのおきしま
【現代語訳】
梅の花の散ることを心残りに思って
われらの庭の竹林に鶯が来て鳴いている。

 

 

ol要素の波及効果

Ordered List

ol(Ordered List)要素は項目の先頭に順番号を割り振ってくれます。

a, b, c、1, 2, 3、Ⅰ, Ⅱ, Ⅲ、・、★などと自動的に段落番号行頭文字を付加します。

入れ子にした場合、インデント(字下げ)を制御してくれるので整然としたドキュメントの作成を支援します。

行頭番号の中黒(・)などは順不同で問題ないときに利用し、ul(Unordered List)と呼ばれolに似た動きをします。具体例はulで示します。

ulタグで字下げをしないで左寄せに定義し、ローカル環境で満足のいく結果が得られたので公開サーバーに載せたところ、思いがけない副作用が起きました。その解決策とともに記録に残します。

波及効果

ブログやホームページは多くのパーツから成り立っていて、HTMLという言語で記述されますが、多くの言語において命令や効果の及ぶ有効範囲をスコープと呼んでいます。

例えば文字を赤色で表示することができますが、すべての文面を赤で表示する例は少なく、注意を引き付ける単語に色を付けることが多いです。

ブログページに別のパーツが追加されると有効範囲に変化が起き波及効果で動作が変化することがあります。

波及の具体例

実生活上の例を示せば、同志とは志を同じくする者をいうことが多いですが、本日から同志とは最高権力者のことを指すという法律ができたときは、過去の文例の解釈に混乱が起きます。

上述したスコープは変数やオブジェクトの有効範囲のことで、一般には範囲を定義するブロック内だけが有効になります。一方、マクロ命令のように全体に及ぼす効果を定義する機能があります。



もともとのパーツあるいは追加されるパーツにあいまいな表現があるとこの現象が起きやすいことが知られています。悪い例、推奨されない例を挙げ、最後に推奨例を示します。

推奨されない例と改善例

推奨されない例

ulリスト項目を左寄せで表示するためにstyleタグにulを定義したら、下図の楕円部のようにブログヘッダーのulリストの表示が乱れました。ulの定義に有効範囲を指定しない場合は表示ページの全体に効果が反映されます。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
ul {list-style: none; padding-left:0; display:table;}
ul li:after {content:""; display:block; margin-bottom:0.2em;}
ul li {display:table-row;}
ul li:before {content:"・"; display:table-cell; padding-right:0.2em;}
</style>
</head>
<div style="margin-top:20px; padding:0px 0px 0px 10px; background-color:lightpink; width:580px; border-radius:10px; border:2px solid green;">
<p style="font-size:32px; line-height:1.5em;">プログラミング教育に貢献</p>
  <ul>
   <li>2020年度から小学校で必修化</li>
   <li>プログラミング的思考を育む</li>
   <li>知的ゲームでIT社会に適応</li>
  </ol>
</div>
</html>

 

改善例

改善したHTMLコードに示したように、ul定義にclassを指定し効果の及ぶ範囲を限定します。classが指定された定義は他のul参照には影響を与えませんの既存の動作に無関係です。

HTMLコード

<!DOCTYPE html>
<html lang="ja">
<head>
<style type="text/css">
ul.doc {list-style: none; padding-left:0; display:table;}
ul.doc li:after {content:""; display:block; margin-bottom:0.2em;}
ul.doc li {display:table-row;}
ul.doc li:before {content:"・"; display:table-cell; padding-right:0.2em;}
</style>
</head>
<div style="margin-top:20px; padding:0px 0px 0px 10px; background-color:lightpink; width:580px; border-radius:10px; border:2px solid green;">
<p style="font-size:32px; line-height:1.5em;">プログラミング教育に貢献</p>
  <ul class="doc">
   <li>2020年度から小学校で必修化</li>
   <li>プログラミング的思考を育む</li>
   <li>知的ゲームでIT社会に適応</li>
  </ol>
</div>
</html>

終わりに

ローカル環境でいい結果を残せても、公開サーバーで誤動作する例は多々あります。今回のように新しい記事の動作が期待した通りであったのに過去の記事の表示に不具合が出た場合、解決まで長引くことがあります。

幸いにもuiタグを定義していない記事では起きていないために、原因を絞ることができました。あいまいさの少ない記事を作ることが何より大切です。

雪景色2019

気分は温泉で雪見酒

雪見酒

先日、ポッカポカ陽気の春一番に驚きのコメントを出したばかりなのに、またまたびっくりの雪景色です。

こういう時には万葉の風流人は酒を飲して歌を詠んだことでしょう。

思い立ったが吉日とすぐ行動したいのですが、若さ、体力、資力がついてきません。

せめて、気分だけは露天風呂に浸って雪見酒といきましょう。

どこいく-トリップアドバイザー  における日本の冬の贅沢、雪見露天風呂コーナーから取り上げさせていただきました。

雪に埋もれた露天風呂

雪に埋もれた奥飛騨温泉郷の露天風呂

岐阜県高山市/奥飛騨温泉郷にある《岡田旅館 和楽亭》の雪に埋もれそうな露天風呂に感動しました。キャッチコピーは『冬は360度ぐるりを雪に包まれた庭園露天風呂は、開放感抜群』です。機会をもうけてぜひ行ってみたい温泉です。

棋譜自動再生

棋譜リーダーとは

棋譜リーダーあるいは棋譜再生とは、棋譜を読んで画面上に将棋の対戦状況を描画するものです。従前は一手ずつ操作を入れて手を進めるものが多く、今回、自動的に手を進める棋譜自動再生を世に送ります。棋譜ファイルはKIF仕様です。



一手ずつの操作が鬱陶しい、利き手を怪我した、集中して対戦者の棋風を理解したい方への朗報になれば幸いです。

棋譜リーダーの使い方

  1. 大橋流駒並べの速度を設定する。40~1000ミリ秒の値を入力する。40ミリ秒を選択する場合はこの設定を省略できる。大橋流駒並べのボタンは押さない。
  2. ファイルを選択するボタンをクリックして棋譜ファイル名を入力する。
  3. 棋譜再生速度250~10000ミリ秒を入力する。250ミリ秒を選択する場合はこの設定を省略できる。
  4. 試合開始ボタンをクリックする。

 

棋譜自動再生JavaScriptコードをダウンロードするには

以下のここをクリックボタンをクリックします。ダウンロードされたkifuReader.zipファイルを解凍すればkifuReader.htmlになるので棋譜自動再生を実行することができます。

style要素でcssに相当する記述をしており、すべての機能を345行からなるkifuReader.html一個のファイルに凝縮してあります。ソースコードの中には随所にコメントが施されているので初心者にも取り組みやすいことでしょう。

先ずはダウンロードせずとも手元に棋譜ファイルがあれば、次の実演画面でファイルを選択に棋譜ファイル名を設定して自動再生をお楽しみください。

 

棋譜自動再生の実演

棋譜リーダー
将棋研究倶楽部2019 ©TacM,2019 Ver0.02
棋譜ファイル 

プログラミング教育に貢献
  • 2020年度から小学校で必修化
  • プログラミング的思考を育む
  • 知的ゲームでIT社会に適応
『飾り駒』新築祝いなどの贈答品
この作品はJavaScriptで記述され
ています。
将棋は役立つの?
  • 友達が増えた
  • じっくり考えられるようになった
  • 勉強ができるようになった
  • 先を読む力、決断力が身についた

ソースコードの再利用について

  1. このソースコードは①ブラウザ上で将棋棋譜を再生するプログラム:http://www.geocities.jp/shogi_depot/JS/index.htmlと②KIF形式の棋譜ファイルサンプルその2:https://github.com/sandmark/KifuCommetter/tree/master/public/swfを参照して作成されています。両関係者の皆様に感謝申し上げます。
  2. 画面構成はshogi_depotを参照させていただきました。
  3. 制御や描画するコードはオリジナルなものです。
  4. ソースコードの著作権はTacMにありますが、 http://aidesign.lolipop.jp/の利用規定により利用することができます。
  5. 棋譜は「将棋DB2」https://shogidb2.com/等から入手できます。KIF形式のみサポートされています。

さいごに

棋譜自動再生はソフトウェア開発に適したJavaScriptを採用しました。kifuファイルは手入力により作成され多くの冗長が含まれます。厳格さを欠く部分の対応は限定的であることを付記します。

今後の予定はIT将棋の領域に進みたいと考えています。よって、これからは対局の作戦を見破られるソースコードの公開は部分的になることでしょう。

 

春望・杜甫

その後の漢詩

今から1300年ほど前、唐代の詩人である杜甫の作品、「春望」を以前に映像化したことがあります。

今回、朗読を入れてリニューアルしました。五言八句からなる「五行律詩」を冒頭にもってきました。

この漢詩には行の特定部分に同一あるいは類似の音韻をそろえて心地よいリズム感を醸し出して、読みやすく心に残りやすい手法が取り入れられていることが分かりました。このことを韻をふむと言っているようです。

思い切って、背景画像を崩れかけた城郭から眺めた田園風景に変えてみました。開始ボタンをクリックして朗読を噛みしめてもらえたらありがたいです。

城郭にて漢詩を吟ずる

『春望』杜甫
国破山河在
城春草木深
感時花濺涙
恨別鳥驚心
烽火連三月
家書抵万金
白頭掻更短
渾欲不勝簪
 春望しゅんぼう        杜甫とほ
くにやぶれて山河さんが
城春しろはるにして草木そうもくふか
ときかんじてははなにもなみだそそ
わかれをうらんではとりにもこころおどろかす
烽火三月ほうかさんがつつらなり
家書萬金かしょばんきんあた
白頭掻はくとうかけばさらみじか
べてしんえざらんとほっ
【現代語訳】  春望  杜甫
戦いで首都が破壊されてもふるさとの山や川は昔のままにあり、
荒廃した市内にも春がきて草や木が深ぶかと生い茂っている。
争っている時世を思うと美しい花をみても涙が落ち、
家族との別れを悲しんでは鳥の鳴き声に心が痛む。
戦火は止むことなく何ヶ月も続いており、
家族からの手紙は万金と同じぐらい貴重に思われる。
心労のあまり白髪の頭を掻くと髪は更に薄くなって、
冠をとめるためのかんざしも挿せなくなってきた。

 Ver1.03 ©TacM,2019 朗読:左大臣光永氏作品参照
天然の美
朗読

 

逆さ文字と鏡文字

縁起かつぎ

「科学的な根拠がないのに縁起をかつぐとはなにごとか」と息巻くひとがいます。

気持ちはわかりますが縁起かつぎも一つの遊びやシャレと考えれば納得いくのではないでしょうか。

一生懸命努力しても望みがかなえられないことがたくさんあります。

自分だけでなく他人とのかかわりで事が左右されるときは、残念であったりやりきれなかったり怒りさえ覚えることも多々あります。

そのときの心の平安のために縁起かつぎや神頼みがあると思えば人間の深い思いやりを感じます。

だから、常日頃は怠惰な振舞なのにここぞとばかり縁起かつぎを語る人には眉を顰(ひそ)めます。

そのような人はやることをやってからちょっと多めのお賽銭をあげて神頼みをしてほしいものです。

鏡文字

鏡文字とは左右を反転させた文字ですが、そのなかに鏡番号があります。車の番号で7337や8008のことです。8008は末広がりの八が鎖でつながれたイメージがあり一番人気の番号だそうです。

73を鏡に映すと37と見えるのでその呼び方ができたと推測されますが、上下に映した場合も鏡文字と呼んでいます。

逆さ文字

一方、逆さ文字と呼ばれるものがあります。上下の鏡文字と似ていますが微妙に違います。一字ならば同じと思いきや一字でも両者は異なります。考え違いをするところでした。

鏡文字 
鏡文字
逆さ文字(鏡文字方式)
逆さ文字
逆さ文字(逆さ文字方式)
逆さ文字

 

右図の「左馬」は販売元の観光ガイドによると福を招く縁起物とされています。

将棋盤の相手の駒や折りたたんだ新聞を裏から見る場合は鏡文字でなく逆さ文字になります。

画面上の将棋盤に対戦状況を表示したいと考え、鏡文字と逆さ文字について少し調べてみました。以下に表示例を示します。

逆さ文字例題HTMLコード

王 飛 角
王 飛 角
王 飛 角
と 馬 竜
と 馬 竜
後手
後手
後手
後手:九段 山田宗衛門

————————————————————-

FIRE
FIRE
鏡文字

FIRE
FIRE

鏡文字
FIRE
逆さ文字

 

 

transformのscaleとrotateの使用例

<DIV style="font-weight: bold; text-align: center;">
<div style="width: 100px;">王 飛 角</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;">王 飛 角</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">王 飛 角</div>

<div style="width: 100px;">と 馬 竜</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;>と 馬 竜</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">と 馬 竜</div>

<div style="width: 100px; transform:rotate( 180deg );color:blue;">後手</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;">後手</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">後手</div>
<div style="width: 350px; text-align: right; font-size:32px; transform:rotate( 180deg );color:blue;">後手:九段 山田宗衛門</div>
<p style="text-align: left;">-------------------------------------------------------------</p>
<div style="float:left; width: 100px;">FIRE</div>
<div style="float:left; transform:scale(-1, 1); color:magenta;">FIRE</div><div style="float:left; padding-left:60px;">鏡文字</div><BR>
<Div style="clear:both; float:left; width:100px; border:1px solid blueviolet;">
<div>FIRE</div>
<div style="transform:scale(1, -1); color:orange;">FIRE</div>
</Div><BR>
<div style="float:left; width:145px; text-align:right;">鏡文字</div>
<div style="clear:both; float:left; width:105px; transform:rotate( 180deg );color:blue;">FIRE</div>
<div style="float:left; width:145px; text-align:right;">逆さ文字</div>
</DIV>

さいごに

逆さ文字がこんなに簡単に実現するとは思ってもみなかったです。

画像で表現する方法もありますが、検索ツールや改訂・修正を考えるとテキストを使った表現が便利です。

transformを用いた文字の変形表現を覚えておいて損はありません。

 

遅ればせながら進化に対応

遅れても追随

金満会社や金満家は何もかも外注、他人任せ(ひとまかせ)の場合が多い。不都合があれば外注先が悪いとの声が聞こえてきそうです。ギャランティを受けているのは当事者であることを忘れて言い逃れるのは見苦しいです。

 

これとは異なりますが他人のことを100%信用して他人任せも怖いです。食料品の全面輸入や外国からの技術導入も同様のことが言えます。周回遅れでもついていかなければならない場合があるのです。

難しい、もうからない、めんどうだと避けていると臍を噛む(ほぞをかむ)ことになります。

SVG

ひさびさにsvg(Scalable Vector Graphics)に触ってみました。ハードウェアが進化して表示機器が大型化すると従来の方式では画像がぼやけることがあります。

Svgはすべてテキストで画像を表現しているので、画像を拡大してもぼやけることはありません。

Svgに対するCanvasの方が扱いが楽のようなので用途に応じて使い分けることがいいようです。

サンプルから

ネット上に17個の歯車をSvgで回転させるサンプルがありましたので取り上げます。親しみを感じたら、プログラムコードを眺めてHTML, JavaScript, SVGに想いを寄せてみてはいかがでしょう。

17 Animated Gears
 17 Animated Gears.