inventor のすべての投稿

身近なところからスタート

世界は地元から始まる

以前、営業用の団扇(うちわ)をもらったら上のタイトル文が印刷されてありました。

創業者とその配偶者の二人から始まったという大企業はかなり存在します。

同じように、大河の激流も源流の一滴からスタートしています。

究極の目標は大きく掲げることが大切ですが、初めからとてつもない高望みは危険です。

先ずは身近な話を語ります。

教育現場の現状はいかに

ある公共施設で仕事をしたとき、IT関連機器は十分に整っているとは言い難いものでした。パソコンにおいては、民間ではWindows7が主流の時期にWindowsXPがほとんどでした。

OSが古くても通常、利用しないソフトを常駐メモリから削除するなどのカスタマイズを十分にすれば、利用に耐えうるものなのに動作が重くイライラが募りました。

予算に限りがあるので、たびたび、新しく更新できないのでしょう。その上、購入時にあまりにも高いものを買ったためにモデルチェンジに対応できないのだろう。

予算を使い切らなければならない仕組みにも問題があります。

専門知識に通じている社員をパソコンマニアのように便利に使っていると人材は逃げてしまいます。

2020年から小学校でプログラミング教育必修化がスケジュールに上がっていても現状は準備万端とはいってないようです。

これまで高いハードルに挑戦し過ぎたきらいがあります。実情を考慮して基礎から再スタートです。

身近なプログラミング

身近な問題として、「今日は何曜日」かを表示させたいときがあります。この問題は実質1行のプログラムコードで解くことができます。以下のコードです。

<!DOCTYPE html>
<html>
<script type="text/javascript" charset="Shift_JIS">
document.write('今日は' + ('日月火水木金土'[new Date().getDay()] + '曜日').fontcolor('magenta') + 'です。');
</script>
</html>

「今日は何曜日」実行例

 

次にこれを拡張して「自分が生まれた日は何曜日だったのだろうか」と思うときがあります。

誕生日は各人まちまちであり、自分が生まれた日を指定した日に変えた方が汎用的です。

それは以下の実質4行コード(9~12行)で求めることができます。

 

<!DOCTYPE html>															<!-- 日付から曜日を得る -->
<html>
<body>
<input type="text" id="hiduke">
<button type="button" id="form-button">調査する日付(YYYY-MM-DD)</button>
<div id="result-text"></div>
<script type="text/javascript" charset="Shift_JIS">
document.getElementById("form-button").onclick = function() {
  var inputYMD = document.getElementById("hiduke").value;				// ユーザの入力日付文字列を得る
  var dObj = new Date( inputYMD );										// 入力された日付オブジェクト
  var wDay = dObj.getDay();												// 指定日付の曜日
  document.write("指定の日(" + inputYMD + ")は、" + '日月火水木金土'[wDay] + "曜日です。");
}
</script>
</body>
</html>

「自分が生まれた日は何曜日」実行例


入力する年月日はスラッシュでなく半角のハイフンで区切ります。10文字を入力後、右欄をクリックします。ここではシステムが日付の正当性をチェックしません。2月30日、3月34日、13月0日などを入力してもエラーとしてはじかれません。4行目のtypeをdateに変更すれば異常値を除外できますがコードサイズが大きくなります。

次回の予定

次回はもう少し歯ごたえのあるものに挑戦する予定です。

 

天才は忘れたころに

記録は破られるために作られる

将棋の加藤一二三氏(愛称:ひふみん)が棋士になったとき、神武以来の天才が誕生したと言われました。西暦2018年(本年)は、神武天皇即位紀元2678年に当たり、約2600年間でたったひとりの稀稀に存在する才能の持ち主ということになります。

この天才によって作られた記録はここ100年ほどは破られないのではと思っていましたが、その後、谷川氏、羽生氏、渡辺氏などの天才が次々に生まれました。

そしておととし、藤井聡太七段が14歳でプロの棋士になりました。まさに天才(天災)は忘れたころにやってくるとは言い得て妙です。

活況を呈する

スーパースターが現れると業界が活気づきます。世代交代が進まない閉鎖的な集まりは限界集落のごとく沈没してしまいます。

多くのスーパースターは全体をけん引して、長年の功績が認められてやがては高評価につながります。

ドラマや映画のモデルになったスターは、ともすれば奇人のごとく扱われたこともあったようです。国民栄誉賞や文化勲章紫綬褒章の受賞は携わっている全員が光栄感に浸っていることでしょう。

女性に好かれることが大切

女性にそっぽ向かれているスポーツは元気がありません。ここぞというときに期待外れな選手を贔屓の引き倒しをしたり、強すぎるライバルチームの選手を卑猥な言葉で罵ったり、人種差別的なひやかしをする雰囲気は女性に好かれません。

ひところ、人気グッズは女子高生によって作られると言われました。人気に今ひとつ盛り上がりに欠けた相撲、柔道、バレーボール、バスケットボール、最近はJRA競馬など人気面において巻き返しが功を奏しています。

その点、将棋界の若手棋士にはイケメンが多く、清潔感があり節度のある人が多く教養深いです。

神武以来のことわざに女性に注目されるものは栄えるがあります。

 

 

棋譜再生を改訂する

棋譜再生を全面改訂しました。棋譜には著作権があり、ここに棋譜そのものを置くのは適切ではありません。そこで将棋DB2のサイトにアクセスし該当する棋譜を画面に表示し、左欄の棋譜の書き出しの直下にある棋譜形式(KIF形式)をクリックし現れたテキストエリアをコピー&ペーストすれば棋譜ファイルを入手できます。

1989/01/09、NHKK放送センターにおいて対戦されたNHK杯、当時の羽生善治五段と加藤一二三九段の棋譜は永久保存ものです。2018-02に国民栄誉賞で表彰された羽生善治竜王が加藤一二三九段に着手した61手目、驚愕の5二銀打ちは目を見張ります。YoutubeにNHKの放映動画が載っていますが、棋譜を入手してもっと身近かに表現してみませんか。

頂点は身近なところから

将棋やプログラミングの初心者が高段者に勝てるコンピュータ将棋ソフトを開発することは夢のまた夢です。まずは棋譜を再生することから始めて、プログラミングを習得すれば、名人に勝つのもあり得ない話ではありません。

先ずは身近なところに挑戦を!

改訂版自動棋譜再生

余談

動作するブラウザはedge, chrome, opare, firefoxです。IE11では十分な動作が得られません。

 

将棋棋譜を再生する

将棋棋譜の自動再生とは

本作品は将棋の棋譜を読んで再生するプレーヤーです。このところ、藤井聡太七段の活躍などがあって将棋愛好者がうなぎのぼりに増えています。なかでも若い女性が急増しており、カープ女子や刀剣愛好家などに代表されるように男性顔負けの様子は頼もしいのひとことです。

これにはコンピュータ将棋が一役買っていると思われます。当方では人間に対抗するソフトはまだ、ハードルが高いと考えKIF仕様の棋譜を読んで画面上に一手一手操作を加えることなく再生していくJavaScriptによるプレーヤーを作ってみました。

直接の開発動機

ちょっと前に、自動マガジンリーダーに挑戦しました。数百ページにおよぶ電子本をパラパラ読みにて素早く内容をつかむようにする立ち読み専用のリーダーです。ページ数が多くなるとページをめくる操作がおっくうです。

これに似たずぼらな将棋ファン向けに、棋譜、読込みスピードを最初に指定して最後まで自動的に一手ごとの操作なしに画面上に再現するものです。

操作方法

  1. まず、棋譜(今はKIFのみ確認)を読む。ファイルを選択する。
  2. 棋譜を用意できなければ研究1研究2研究3をクリックする。
  3. 次に1手ごとの着手間隔をミリ秒単位で入力する。
  4. 試合開始をクリックする。

考察

棋譜の書式には数種類あり、わかりやすいKIF方式を採用しています。自動再生プレーヤーは何が利点かと問われると詰まってしまいますが、寝転んで観たり、手が不自由な方への朗報となるでしょう。

また、将来、まばたきや声、ジェスチャーによる着手指示への応用にすることができるでしょう。

途中で進行速度を変化することも可能ですが、スムースな操作ではありません。ここらあたりは課題として残っています。

将棋の技量向上には自分より上級者の着手を研究することです。対戦相手がいない場合は一人で技を磨き、にっくき将棋敵きをぎゃふんと言わせましょう。

将棋棋譜自動再生

改訂記録

  1. メニューを小変更。

立冬2018

冬の訪れ

唐紅(からくれない)とは、濃い紅色のことで、マンセル記号ではRGB(217, 52, 72)などがその色のひとつです。黄色の混じらない純粋な紅色(べにいろ)は恋の激しさとしてドラマに登場します。

あんなに暑い暑いとこぼした夏が不思議です。立冬にちなんで紅(くれない、べに)に触れてみました。

一度、一茶の句を画像で表現しましたが、味のある縦書きのテキスト表示に改訂しました。SEO(Search Engine Optimization)の向上に貢献するでしょうか。

音楽:『昼下がりのワルツ』、H/MIX GALLERY 音楽素材より
 ©TacM,2018
 Ver0.02
ゆうやけや
 唐紅からくれない
  初氷はつごおり
      小林一茶こばやしいっさ

 

サイト上の倫理規定

規則が実態に追い付かない

最近、著名な企業名で広告やメールが届くようになりました。『〇〇に当選しました』のような文言で有料のサイトに誘う手口です。

超有名企業なので本当らしいということで先に進むとやっぱり会員登録のようなはめになります。

最後にはとてもその企業で管理しているとは信じがたい内容です。

メールの中味が筒抜け

知人に出したメール内容に反応したような広告が増えるのは、奇異な感じを受けるうえ気持ち悪いです。

フリーのメールソフトだからといって通信の秘密を侵すような振舞いは許されないでしょう。

文面に添付ファイルなどの文言があり、添付ファイルの指定を忘れると「添付ファイルの設定を忘れていませんか」のメッセージが出力されるのでメールソフトが中味をチェックしているのは間違いないと思われます。メールソフトがどこまで文面に関与しているかを知りたいです。

検索内容が覗かれている

パソコンやスマホで一つの事柄を検索すると検索した内容に関連した項目が増えます。

いつも検索している分野ならば耐えられますが、思いついてたまたま検索した内容が長く引きずられて困ることがあります。

ビッグデータの利用方法

プリペイドカード、ポイントカード、診察カードなど個人情報が詰まったカードがごまんと存在します。「個人情報の保護に関する法律」がありますが、個人を特定されない複合的な利用法は法律の埒外にあるようです。

例えば、年齢別利用時間帯、利用者分布図など情報の様々な使い方があります。カードとして気が付かないほどの極小ICチップが埋め込まれていれば、その人の居場所が特定できそうです。

野放しの活動

本人が知らないうちに関連するデータが他人に渡り様々な使い道に利用されています。それらを扱える組織のなすが儘になっているのは危険な気がします。

集められたデータがどのように使われていくかを注視する必要があります。

サイト上の倫理規定はあいまいで、グレーゾーンに埋没しそうです。少しずつクリアになることを願っています。

贈答にまつわる名言続編

朝貢外交

朝貢外交とは、何がしかの褒賞や報酬を期待して周辺強国の機嫌をとるために、高価な物品を献上するような外交姿勢を言いますが、個人や団体生活においても似たような動きがないわけではありません。近代以前の中国周辺諸国においては、無益な争いごとに巻き込まれないように姻戚関係を持つこともあったようです。

 

ちょっぴり皮肉が込められており、ワクワク感はありませんが、金言に画像を付けてみました。表現力の向上にご検討ください。

物の贈答にまつわる名言・至言©TacM,2018 Ver0.04



 

 

物の贈答にまつわる名言

2018年も終章に

大河ドラマ『西郷どん』も最終章に入りました。霜月(11月)に入ると、喪中の挨拶やお歳暮の準備やらでせわしなくなります。このブログでも物を贈ることについて何回か語っています。

賄賂(わいろ)政治のことばとともに物やお金をある意を持って権力者に貢ぐ風習は有史以前からあったと思われます。

これらはドラマや川柳などにしばしば取り上げられてきました。

今回は12種の名言を集めて時間差表示を試みました。ひながたとなるプログラムコードは難なく入手できるので、これを発展させて中央の画像を名言・至言にふさわしいイラストに切り替えて表示するように改訂してください。

 

物の贈答にまつわる名言・至言©TacM,2018 Ver0.02



 

世界時計を作る

主要都市の現在時刻

地図から選ばれた世界主要10都市の現在時刻を表示します。

それによるとリオデジャネイロが東京(正確には東経135度の明石市か)よりも12時間遅れた時刻になります。

東京が2018年10月28日06時00分ならば、リオデジャネイロは2018年10月27日18時00分ということです。

今回、分かった事ですが時差というぐらいだから、すべて1時間刻みかというとなぜかニューデリーは日本よりも3.5時間遅れになっています。

詳しくはこれから調査したいと考えております。

プログラミングについて

プログラミングは単純化するために、選ばれた10都市の時差のデータを記憶しています。地図が正確ならば、ポイントされた地点の経度を求め時差を算出できますが、プログラムが複雑化します。

また、日付変更線が一直線でないことも算出式は一筋縄ではありません。都市の時間情報を記憶する手法は手堅いです。

拡張性などの配慮

今回、主要な都市を10ヶ所選び、世界白地図にプロットしました。そして、その都市マークの画面上におけるカーソル位置を記憶しました。

たった10ヶ所なのでこの作業は簡単に完成できますが、都市数が増えたときはかなり大変な作業となるでしょう。

都市名からその都市の現在時刻を求めるのならば、都市の緯度経度から白地図にプロットする仕組みが拡張性に富んでいると言えます。

プログラミングは複雑になる代わり、一度、完成させれば多くの都市の時計に対応することが可能になります。

究極の理想論とは 🌏

プログラミングには多様な手法があります。開発者の技量や規模によってもどれが適切かは変わります。原始的に泥臭くても構いません。まずは正確に動作することが大切です。これら方式を考えることも楽しみの一つと言えましょう。

プログラミングコード

<!DOCTYPE html>
<html>
<body onLoad="setInterval(timerX, 1000);">
<div><span style="color:deepskyblue; font-size:32px;">『Warmth』by MFP</span>&nbsp;DOVA-SYNDROMEより</div>
<audio style="float:left" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/Warmth.mp3" controls loop controlsList="nodownload"></audio>
<div id="ver" style="float:left; width:80px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">&copy;TacM,2018<BR>Ver0.04</div>
<div style="float:left; width:415px; height:55px; font-size:36px; color:green; border:0px red solid;">主要10都市の現在時刻</div>
<Div id="world" style="clear:both; position: relative; width:800px; height:504px; visibility:visible; background:aliceblue;">
<img id="map" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/worldatlas_800.gif">
<div id="clk1" style="position:absolute; left:475px; top:310px; font-size:24px; color:deeppink; font-weight:bold;">&#9471;Tokyo(東京)</div>
<div id="clk2" style="position:absolute; left:475px; top:360px; font-size:24px; color:darkgreen; font-weight:bold;">2018/10/21(日)</div>
<div id="clk3" style="position:absolute; left:475px; top:410px; font-size:40px; color:mediumblue; font-weight:bold;">09:30:15</div>
</Div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const city= ["東京", "ニューヨーク", "北京", "イスタンブール", "パリ", "オークランド", "シドニー", "リオデジャネイロ", "バンクーバー", "カイロ"];
const curr= [0,   -14,  -1,  -7,  -8,   3,   1, -12, -17,  -7];
const px  = [379, 725, 318, 129,  64, 452, 399, 771, 593, 125];const py  = [282, 259, 275, 274, 249, 478, 471, 438, 236, 308];
const SZ  = 18;
var l=0;
document.body.addEventListener("mousedown", function(e){		//マウスクリックのイベントを捕捉する, 座標を取得する
  if(e.target.id=="map"){										//カーソルは地図上にある
	var x = e.offsetX + 10;		//e.pageX;						//X座標
	var y = e.offsetY + 110;	//e.pageY;						//Y座標
	for(var j=0; j<px.length; ++j){
	  if(x<px[j] || x>(px[j]+SZ) || y<py[j] || y>(py[j]+SZ))continue;
	  l=j;														//timerX()で使う
	  document.getElementById("clk1").innerHTML = "\u24FF\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E".substr(l,1) + city[l];//都市名
	  break;
	}
  }
});
function timerX(){																							//年月日(曜日) 時分秒
  var nowTime = new Date();																					//日付情報
  nowTime.setHours(nowTime.getHours() + curr[l]);				//整数のみ, 30分刻みがあれば分も要修正(ニューデリーなど)
  var ymd = nowTime.getFullYear() + "/" + letter2(nowTime.getMonth()+1) + "/" + letter2(nowTime.getDate());	//年 月 日
  document.getElementById("clk2").innerHTML = ymd + "("+"日月火水木金土".substr(nowTime.getDay(),1) + ")";	//曜日(0-6)
  document.getElementById("clk3").innerHTML = letter2(nowTime.getHours())+":"+letter2(nowTime.getMinutes())+":"+letter2(nowTime.getSeconds());
}
function letter2(num) {return ("0" + num ).slice(-2);}			<!-- send "01" -->
</script>
</html>

動作例

都市名を代表する丸囲み番号をクリックすれば、世界時計が表示されます。また、思いやりのあるBGMを用意しましたので再生ボタンをクリックして和らいだ雰囲気でお楽しみください。

『Warmth』by MFP DOVA-SYNDROMEより
©TacM,2018
Ver0.04
主要10都市の現在時刻
⓿Tokyo(東京)
2018/10/21(日)
09:30:15

 

習うより慣れよ再び

学ぶ前に真似ぶ

動物はあまねく親や先輩を真似ることからは始まります。鳥などの小動物も巣立ちまでは親が運んでくる食料で生き延びますが、やがて自立が待ち受けています。

先進国をひたすら参考にして成長しやがて自ら切り開く時代に突入して久しい時が流れました。プログラミング教育が小学校において必修化になる時期が近づいています。

プログラミングについては、プログラミング言語開発に累計数十年、職業として携わり機械語、アセンブリ言語、高級言語と数えきれないほど触れてきました。

お礼を込めてブログでプログラミングを取り上げています。今回は学び方の一つについて再び語ります。

言語について

人は母国語をもっています。プログラミング言語はその一つと言っても間違いではありません。人間の言葉には融通性がありますが、機械が理解するには厳密性が要求されそれで嫌になる人がおおぜいいます。時代が進めばそれらも改善されるでしょう。

芸術家肌など新しいことに挑戦してとん挫する人は、あまりにまじめに考え過ぎます。理想をめざしたエスペラント語が世界共通語にはなりませんでした。あまりに理想的では暖かみがありません。プログラミング言語は良いと思ったものを一通り理解するのが肝心です。

たとえその言語がすたれても次に隆盛を極める言語は前の欠点などを補って成立するので、だいたい似通ったものになり取っつきやすいです。その意味でも現在、飛ぶ鳥を落とす勢いと言われる言語に触れることは悪くありません。

HTMLとJavaScript

ブログやホームページを記述する言語にHTMLがあります。JavaScriptはその仲間です。それらは無料で入手できるうえ、解説書やサンプルコードなども無料で役立つものが出回っています。特定のメーカーが開発したツールでなく公正な世界中の関係者によって管理されているので、予算的にも教育機関が採用する言語には妥当なところと考えます。

取り掛かりのサンプル

取り掛かりのサンプルとして、『世界時計を作る』に挑戦します。世界の地図の指定した地点の現在時刻を表示するものです。第一回は日本の標準時刻を1秒ごとに表示する課題です。

作成のポイント

  1. htmlで記述することを宣言。
  2. 音声オブジェクトを定義して再生する。
  3. 曲名や著作権を表示する。
  4. 再生や音声制御のユーザーインターフェースを表示する。
  5. 一秒間隔で起動する関数を定義する。
  6. 地球儀やビッグベンの時計を表示する。
  7. 現在地を表示する。
  8. 年月日時分秒を表示する。

 

サンプルコード

<!DOCTYPE html>
<html>
<body onLoad="setInterval('timerX()', 1000);">
<div><span style="color:deepskyblue; font-size:32px;">『Warmth』by MFP</span>&nbsp;DOVA-SYNDROMEより</div>
<audio style="float:left" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/Warmth.mp3" controls loop controlsList="nodownload">
</audio>
<div id="ver" style="float:left; width:85px; height:55px; margin-left:5px; font-size:11px; font-weight:bold;">&copy;TacM,2018<BR>Ver0.01</div>
<DIV id="clock" style="clear:both; position:relative; width:600px; height:400px; background:darkgreen; color:aliceblue; font-family:MS 明朝">
<div style="padding-top:30px; margin-left:45px; font-size:48px; font-weight:bold;">&#x1F30F;&ensp;世界時計を作る
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/10/BigVen.png" width="46" height="59" style="margin-left:8px; margin-bottom:-6px">
</div>
<Div style="position:absolute; left:118px; top:140px; width:364px; height:200px; background:lemonchiffon; color:midnightblue; font-size:44px;">
<div id="clk1" style="position:absolute; left:10px; top:3px; color:tomato;">Tokyo(東京)</div>
<div id="clk2" style="position:absolute; left:10px; top:55px;">2018/10/21(日)</div>
<div id="clk3" style="position:absolute; left:10px; top:105px; font-size:80px;">09:30:15</div>
</Div>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
function timerX(){												//年月日(曜日) 時分秒
  var nowTime = new Date();										<!-- 日付情報 -->
  var sec = nowTime.getSeconds();								<!-- 秒 -->
  var min = nowTime.getMinutes();								<!-- 分 -->
  var hour = nowTime.getHours();								<!-- 時 -->
  var year = nowTime.getFullYear() ;							<!-- 年 -->
  var month = letter2( nowTime.getMonth() + 1 );				<!-- 月 -->
  var date = letter2( nowTime.getDate() ) ;						<!-- 日 -->
  var weekDay = "("+"日月火水木金土".substr(nowTime.getDay(), 1)+")";		<!-- 曜日(0-6) -->
  var datex = year+"/"+month+"/"+date+weekDay+"\n";				//表示用(2016/07/02(土) 15:57:01
  document.getElementById("clk2").innerHTML = datex;
  document.getElementById("clk3").innerHTML = letter2(hour)+":"+letter2(min)+":"+letter2(sec);
}
function letter2(num) {return ('0' + num ).slice(-2);}			<!-- send '01' -->
</script>
</html>

動作例

《Warmth》思いやり、優しさというタイトルのBGM付きです。

『Warmth』by MFP DOVA-SYNDROMEより
©TacM,2018
Ver0.01
🌏 世界時計を作る
Tokyo(東京)
2018/10/21(日)
09:30:15

次へのステップ

今回は日本の現在時刻を表示しました。次回は世界地図上に指名した地点の現在時刻を表示する予定です。

 

深まる秋

秋の風物

史上最強とも言われた夏も遠くのかなたに消え去り、肌寒ささえ感じる頃となりました。今年は時計の針が逆転したかのように東から西へ向かった台風もありました。

憂いを残すBGMを聞きながら秋の夜長に思いを寄せてみましょう。同一方向の二重スクロールで秋の風物を背景にいにしえの和歌を著してみました。

再生ボタンをクリックして開始です。

©TacM,2018 Ver0.02

【現代語訳】
にわか雨の露がまだ乾ききらないうちに
もう槙の木の葉に霧がかってきている
秋の夕暮れかなあ
村雨むらさめ
    つゆもまだひぬ
      まきの
きりちのぼる
    あきゆう
小倉百人一首(第八七番)  寂蓮法師じゃくれんほうし