inventor のすべての投稿

今日のノルマ

繰り返す行動

人間の行動は繰り返し行動が大半を占めています。中でも7日ごとに繰り返されるものが多いです。欧米の六日働いて最後を休息日に充てたのは宗教的な意味合いがあり、江戸時代の四勤一休、三勤一休は5日~4日ごとに繰り返される働き方です。

自動的に判断する方法

7日ごとに決まった行動をするには曜日を判断基準にすれば考えやすいです。5日おき6日おきに決まりきったことをするにはカレンダーに印をつけておくと忘れにくいでしょう。

スマホやパソコンが身近にある今日、元日からの経過日を判断基準にすると明快です。基準日から当日までの経過日を算出する関数として、EXCELではDATEDIFがあります。HTMLでは以下のようにプログラミングすることができます。darkmagentaで示した値が元日からの経過日です。元日が0、平年の12月31日が364になります。

サンプルコード

<body onload="start();">
<DIV style="float:left; font-weight:bold; border:1px green solid;">
<div id="ym" style="width:150px; height:40px;  font-size:24px; border:0px red solid;"></div>
<div id="dy" style="width:125px; height:120px; font-size:72px; text-align:center; vertical-align:middle; display:table-cell;"></div>
<div id="s6" style="width:150px; height:80px;  font-size:24px; border:0px blue solid;"></div>
</DIV>
<div style="clear:both; width:240px; height:20px; border:0px red solid;"></div>
<script type="text/javascript" charset="UTF-8">
var now, year, mon, day, you, i, x, y;
var youbi = ["日","月","火","水","木","金","土"];								//曜日の選択肢

function start(){
	var month = [0, 31, 59, 90, 120, 151, 181, 212, 243, 274, 304, 334];		//通算日算出表
	var now = new Date(/*"2019-03-01"*/);										//日付と時間の設定
	var year = now.getYear();													//1900年からの経過年数
	var mon = now.getMonth();													//今日の月(0~11)
	var day = now.getDate();													//今日の日(1~31)
	var you = now.getDay();														//今日の曜日
	if ((year%4 == 0 && year%100 != 0) || (year%400 == 0)){						//グレゴリオ暦のうるう年か
		for(var j=2; j<12; ++j)	month[j]++;										//うるう年だから通算日算出表を修正
	}
	var ym = (1900+year)+"年"+letter2(mon+1)+"月";								//0~11 => 1~12
	var s6 = youbi[you]+"曜日"+"&nbsp;<span style='color:mediumvioletred;'>"+(month[mon]+day-1)+"</span>";
	document.getElementById("ym").innerHTML = ym;								//年月
	document.getElementById("dy").innerHTML = day;								//日
	document.getElementById("s6").innerHTML = s6+"<BR><span style='color:darkmagenta;'>"+browserName()+"</span>";	//ブラウザの表示
}
function letter2(num) {return ('00' + num ).slice(-2);} <!-- '01' を返す -->
//	               -1         0         1         2        3          4
const BrowsN = ["unknown", "chrome", "safari", "opera", "firefox", "edge"];
function browserName(){
var b = getBrowser() + 1;							//-1 ~ 4 ==> 0 ~ 5
return BrowsN[b];
}
function getBrowser(){								// -1 ~ 4
var userAgent = window.navigator.userAgent.toLowerCase();
if(userAgent.indexOf('firefox/') != -1)	return 3;	// firefox
if(userAgent.indexOf('opr/') != -1)		return 2;	// opera
if(userAgent.indexOf('edg/') != -1)		return 4;	// edge
if(userAgent.indexOf('chrome/') != -1)	return 0;	// chrome
if(userAgent.indexOf('safari/') != -1)	return 1;	// safari
return -1;									//-1	// unknown
}
</script>
</body>

使い方

例えば、1日おきに洗髪するのであれば、経過日が偶数、奇数かで決められます。10日ごとに決まりきった行動をする場合は、経過日 % 10 の計算値を基準にします。いまどき、五十日(ごとうび)ではあまりにも大雑把と言えましょう。

表示例

おまけ

動作しているブラウザ名を特定する関数(getBrowser)をおまけとして載せます。userAgentの文字列を検索する順序が肝です。

 

summer greeting card 2020

暑中お見舞い2020

暑中お見舞い
 申し上げます
2020 盛夏 
負けるな、熱中症・コロナ
⇧ストップザウィルス コロナ対策8手
クリック or QRリンク

 

HTMLプログラミングコード

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div style="width:450px; height:666px; text-align:left;">
  <div style="width:100%; height:100%; text-align:center; margin:10px; font-size:54px; background:ghostwhite; border:1px solid blue;">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2020/08/morningGlory.png" style="margin-top:20px; width:260px; height:260px; opacity:0.4;">
    <div style="margin-left:0px; margin-top:-230px; height:100px; font-famiry:'serif'">暑中お見舞い<BR> 申し上げます</div>
    <div style="margin-right:20px; margin-top:60px; height:20px; font-size:20px; line-height:4em; text-align:right;">2020 盛夏 </div>
    <div style="padding-top:80px; padding-left:20px; height:80px; font-size:30px; color:darkmagenta;">負けるな、熱中症・コロナ</div>
	<a href="http://aidesign.lolipop.jp/electroniclottery-stopthevirus/" target="_blank" rel="noopener noreferrer">
      <img src="http://aidesign.lolipop.jp/wp-content/uploads/2020/08/QR_660347.png" style="margin-top:40px;">
    </a>
      <div style="margin-top:0px; font-size:16px; color:maroon;">⇧ストップザウィルス コロナ対策8手<BR>クリック or QRリンク</div>
  </div>
</div>
</body>
<script type="text/javascript" charset="utf-8">
function start(){
}
</script>
<html>

 

愛を語る

おまけ

ジムにおいてトレーニングマシンによる運動はHtml, Svg, JavaScriptにより描画されています。中でもエアロバイクとランニングマシンはGIFによって動きが付加されています。GIFによる動きの開始や停止は特別な指定がありません。そこでGIFのほかにPNG静止画像を用意しておいて、JavaScriptによりimg要素のsrc属性を切り替えて開始、停止を制御します。

プロモーション動画作成例

コロナ禍、油断大敵

コロナ禍がいったん、収まりかけ政府当局者が民度の高さを誇ったりして安心し過ぎたきらいがあったようです。

経済の立て直しは緊急の施策でしょうが、パンデミックの再来は猶、困ります。

PCR検査結果の陽性率がじりじり高くなっています。ここは我慢のしどころです。昭和天皇をお言葉をお借りすれば「耐え難きを耐え、忍び難きを忍び」未曽有の国難を克服しなければなりません。

だめなものはダメ!と広報することも必要でしょう。ひとつのプロモーション動画を作ってみました。参考になれば幸いです。

動画作成例

将棋熱沸騰

IT将棋開発

先日、高校生の藤井少年が藤井棋聖と呼ばれる存在になりました。神武以来の天才:加藤九段、谷川元名人、羽生元名人、渡辺二冠などからなる天才の活躍は、二度と破られない功績と称えられましたが破られることが常です。「記録は破られるために作られる」と言われています。

古今東西、天下を取るには十年に及ぶひたむきな努力が必要とされています。将棋は年齢による体格差が少ないので幼少期の研鑽・努力も立派にカウントされることでしょう。幼年期の詰将棋研究、小学4年からの奨励会における実戦研究は天下取りの基礎になったことでしょう。

また、コンピューター将棋による研究も新しい将棋界の波に乗り遅れることなく対応できたものと推察します。コンピューター将棋ソフトの開発は誰にでも門が開かれています。プロに勝てるような高度のものは初心者には垣根が高すぎます。

まずは駒を並べるソフトを手掛けてみませんか。20枚ずつの駒は並べる順序において、てんでんばらばらに並べても問題ありませんが、正式な試合では伊藤流や大橋流で並べることが多いです。

今回、大橋流で20枚ずつ順序良く並べるソフトを開発しましたので、これを踏み台にして高度なIT将棋ソフトに挑戦してはいかがでしょう。

手始めに

コンピューター将棋を開発するには将棋を指す技量のほか、駒や将棋盤、駒台などの画像が必要です。探せば著作権フリーな画像が見つかるかもしれません。駒にしても先手の駒を180度回転させて後手用に用意しただけでは物足りません。影を先手、後手用に付加する必要があります。

駒の画像は先手、後手の集合画像がネット上に満載されています。参考にされるとよいでしょう。集合画像から目的の駒の画像を取り出す関数も用意されています。これらはプログラミング技術になります。美術からソフトウェア工学までの総合知識を少しずつ積み重ねて大作を完成されるよう願っています。

サンプル

後手:蒼賢照初段 鬼才伝説
IT将棋の足掛かりに
駒を並べることから始める

ここをクリック
先手:聡琳翔二段 新手一生
©TacM,2020 Ver0.02
将棋熱沸騰


将棋は役立つの?
❶友達が増えた
❷じっくり考えられるようになった
❸勉強ができるようになった
❹先を読む力、決断力が身についた
❺礼儀正しくなった
❻感情コントロールが可能になった

本格化への道筋

導入編のコンピューター将棋ソフトを本格的なものに作り上げるには、上に示した機能をひとつひとつ積み上げます。やがては見上げる山が完成するかもしれません。

おまけ

将棋は王将の下に19の部下が付いて戦うゲームですが、先手(あるいは上位者)が王将(おうしょう)、後手(下位者)が玉将(ぎょくしょう)を持つならわしがあります。王の字は逆さにしても大差なく読み間違いを避ける意味合いからの慣習のようです。

 

多くのデバイスで中央寄せ

中央寄せで表現

ブログやホームページで記事を表現するとき、縦、横の表示幅はデバイスごとにまちまちです。そこで「レスポンシブWebデザイン」の考え方が尊重されています。

レスポンシブとはパソコン、スマートフォン、タブレットなど画面サイズが異なってもWebサイト表示を柔軟に調整して同じ記事ですべてに対応する方式を指します。

レスポンシブ方式がすべてのケースで最善と決めつけることはできませんが、共通情報で扱えるので後々の改訂には極めて有利で管理する上で好ましいと言えます。

レスポンシブ表現は画面サイズが異なっても同一機種ならば割と簡単に実現可能ですが、パソコンとスマートフォンに共通対応となると少し気を配ることになります。

中央寄せのサンプル

 

パソコンなど表示幅の大きいデバイスではwidthを使ってpxでサイト幅を固定しtext-alignを指定すれば、中央に表示させることができますが、スマートフォンなどスクリーンサイズが小さいデバイスではwidthを使ってサイト幅を固定することは避け、widthを100%にして目いっぱい表示させたいものです。その場合、PC、スマートフォンのどちらにも有効な「max-width」を利用すると便利です。

サンプル

コロナウィルスの画像を中央寄せに表示したサンプルコードを以下に示します。

<head>
<meta charset="utf-8">
<style>
#container {
  max-width: 480px;
  margin: 0 auto;
}
#main {
  width: 100%;
  text-align:center;
  border:1px solid pink;
}
p, h1{
  text-align:left;
}
</style>
</head>
<div id="container">
<div id="main">
<h3>中央寄せのサンプル</h3>
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2020/05/corona-18.png" width="200" height="200"/>
</div>
</div>

 

実践形式HTMLプログラミングマスター法

実践して言語をマスター

幼児は母親の行動をわき目も振らず凝視して言葉を覚えます。そこにはただひたむきさが存在するだけで言語学などほど遠いです。この方式でブログ、ホームページを記述する言語(html, JavaScript, Css)をマスターします。以下に習得法をまとめました。

参照サイト:”https://fastcoding.jp/blog/all/jquery/html-css-javascript/”

次のタイトルや画像をクリックして別空間を体験してください。

 

 実践形式HTMLプログラミングマスター法

新しい言語HTMLの解説は一切ありません。ビンゴカードの作り方やあみだくじ作成法、最小公倍数の研究、ダブル連番かぞえ歌、万華鏡など100点あまりのサンプルを実践するだけです。

 

ブラウザ名取得関数を使う

ブラウザの特徴

世の中に存在するブラウザはかなりの数になります。テキスト文字を羅列しただけの記事はどのブラウザでも似たり寄ったりの表示・動作になりますが、最新の仕様に基づいて記述された記事では一律の表示になることは少ないことでしょう。

画面が乱れた場合、異なるブラウザを用いると正常な表示になったという経験をお持ちでしょう。このようなとき、利用したブラウザ名を記録しておくと問題解決に役立ちます。当ブログではサイトマップからコメントについてを参照すると以下のように表示され利用したブラウザ名が表示されます。

今回からブラウザ名を特定する関数を改訂しました。当ブログにおいて動作ブラウザ名を確認する場合はコメントについてを参照してください。

 

ブラウザ名を取得

はじめに

ホームページやブログを閲覧するにはブラウザを使います。主要ブラウザは10種に近いものがあります。それぞれに特長があり最初から使っているもの、動的な表現を得意としているもの、動作が速いものなど様々です。対象となる記事が同じであればその表現は同じになると思われがちですが微妙に異なることが知られています。

表示される記事側がブラウザ名を特定できると表現に幅が広がります。このようなときのためにブラウザ名を算出する方法を調べてみました。JavaScriptで記述した関数を添付します。

window.navigator.userAgent でブラウザのユーザエージェントを取得します。この値は明確な仕様が確定しておらず、これをもってブラウザを特定するのは避けた方がよいとありますが、現在、これに代わる明確な方法が見当たらず、ユーザエージェントの特徴をつかんでブラウザ名を簡便的に求めています。

主要ブラウザのユーザエージェント
0)chrome mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/83.0.4103.116 safari/537.36

1)safari mozilla/5.0 (windows nt 6.2; wow64) applewebkit/534.57.2 (khtml, like gecko) version/5.1.7 safari/534.57.2

2)opera mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/83.0.4103.116 safari/537.36 opr/69.0.3686.77

3)firefox mozilla/5.0 (windows nt 10.0; win64; x64; rv:78.0) gecko/20100101 firefox/78.0 myArgent.html:12:9 Browser= 3 firefox

4)edge mozilla/5.0 (windows nt 10.0; win64; x64) applewebkit/537.36 (khtml, like gecko) chrome/84.0.4147.89 safari/537.36 edg/84.0.522.40

算出の概略

MicrosoftからリリースされているEdgeはchromium版の検索エンジンの採用が始まっています。よって主要モダーンブラウザはおしなべてグーグル系と言えます。しかしながらユーザエージェント文字列にはchrome, safariなど複数のブラウザ名が混在しています。とはいっても、ブラウザごとに出現順が決まっており、順番を解析することによってブラウザ名を特定することができます。

主要モダーンブラウザ名を特定する方法

以下に5つの主要モダーンブラウザ名の特徴を表に示します。

ブラウザ名 出現文字列1 出現文字列2 出現文字列3 検出順番 適用
chrome crome safari   4  
opera chrome safari opr 2  
firefox firefox     1  
edge chrome safari edg 3 chromium版
safari safari     5 windows10版
ie11 調査除外

特長

❶firefox の場合、この文字列が唯一、ブラウザ名として検出できる。
❷opera はchrome に加えてopr と短縮された文字列が用いられる。
❸chromium版edge はchrome, safari に続いてedg が用いられる。
❹chrome はchrome に加えてsafari が用いられる。
❺safari の場合、この文字列が唯一、ブラウザ名として検出できる。

特長を具現化する

解析の順番を以下のように決めてブラウザ名を確定します。文字列を検索する順序が肝心です。現在のところ、以下の判定順序で特定できました。

❶ユーザエージェントにfirefox/を見つければ、firefoxとみなす。このように/を付加して検索する。
❷opr/をユーザエージェント文字列に見つければ、operaとする。
❸edg/をユーザエージェント文字列に見つければ、edgeとする。
❹chrome/をユーザエージェント文字列に見つければ、chromeとする。
❺safari/をユーザエージェント文字列に見つければ、safariとする。

ブラウザを特定する関数

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;script type="text/javascript" charset="UTF-8"&gt;
//               -1         0         1         2        3          4
const BrowsN = ["unknown", "chrome", "safari", "opera", "firefox", "edge"];
var b = getBrowser() + 1;
console.log("Browser=", b, BrowsN[b]);

function getBrowser(){
var userAgent = window.navigator.userAgent.toLowerCase();
console.log("userAgent=", userAgent);
if(userAgent.indexOf('firefox/') != -1)	return 3;	// firefox
if(userAgent.indexOf('opr/') != -1)		return 2;	// opera
if(userAgent.indexOf('edg/') != -1)		return 4;	// edge
if(userAgent.indexOf('chrome/') != -1)	return 0;	// chrome
if(userAgent.indexOf('safari/') != -1)	return 1;	// safari
return -1;									//-1	// unknown
}
&lt;/script&gt;
&lt;/html&gt;

さいごに

銀行コードなどは業界によりきちんと確定しており、ブラウザを利用する側にブラウザコードが知らされないことは利用者にとって不利益この上ありません。ユーザエージェントに出現する文字列とその順番を解析することによってブラウザ名を特定する方法をまとめました。Windows10-x64の場合を調査しました。すべてのケースに当てはまるかはわかりません。ブラウザコードとして統一されるよう期待します。

人気の高い記事7点

人気の高い記事7点

約1000ページに及ぶブログの中で人気の高いブログ7点を表示します。講読後は終了ボタンをクリックして戻ってきてください。

©2020 TacM, Ver0.03

記事、ゲームなど自らプログラミングするには多くのサンプルコードが用意された『音や映像が飛び出すプログラミングつぶやき本』を参照してください。