「ものづくり筆耕ブログ」カテゴリーアーカイブ

ものづくりに関する想い

今日のノルマ

繰り返す行動

人間の行動は繰り返し行動が大半を占めています。中でも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>

 

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

中央寄せで表現

ブログやホームページで記事を表現するとき、縦、横の表示幅はデバイスごとにまちまちです。そこで「レスポンシブ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

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

亜熱帯から熱帯へ

気候変動のなせる業

最近、集中豪雨の被害をたびたび聞くようになりました。かつては雨の被害と言えば台風絡みであり、9~10月に多かったように記憶しています。

線状降水帯という気象用語で地域一帯が水浸しになる大災害が語られるようになりました。

今回も九州地方では堤防決壊を含む大災害に見舞われました。被害を受けた方々に心よりお見舞い申し上げます。

以前から日本は亜熱帯地方と呼ばれていたようですが、化石燃料の大量消費などの影響で温暖化が進み、もはや熱帯地方のような気配すら感じます。集中豪雨の被害は年々、甚大になってきています。

このままでは、北海道でバナナ園を営むことも可能になりそうです。米カルフォルニア州やアマゾン流域の山火事も温暖化が一因と言われています。国のリーダーにも懲りない面々がおられるようです。

身の丈に合った生活をする

分相応の生活

人は他人の差し出がましい言動を嫌います。しかしながら未成年者が保護者、経営者が大株主に抱く感情はまた別の問題です。多くの支援や投資を受けている場合は支援者に寄り添うことはやむを得ないことです。

このたび、自らの考えで『身の丈に合った生活』に変貌しその結果、居住空間が数分の一になりました。生活様式が昔風から今風になり、パソコンの無線LANは空間の矮小化に伴い有線で十分になりましたが、いまどきWiFiが使えないと何かと不便であり、そのまま無線LANを踏襲しました。

テレビの設定

引越をすると各種届出の住所変更など多忙を極めることになります。テレビ地デジの初期化も大切な行動です。地デジのチャンネル番号は地域により異なりますが自動スキャンをすれば適切な番号が引き当てられます。新聞の番組欄に示したチャンネル番号で期待した映像が見られます。これでいかにも設定が完了したような雰囲気になります。

ところが取説を参照してビデオレコーダーを上図のようにつなぐとBS、CSは問題なく見ることができましたが、地デジは「E202」というエラーメッセージが表示され映像を見ることができなくなり大いに悩みました。

電気屋さんに頼みますと一万円ほどの相談料がかかりそうです。そこでネットを検索しHDMLケーブルをいったん取り外してつなぎ直すと解決することがあると公開されています。別のところで、ケーブルをつなぎ直すと改善したことがありましたがE202の問題は改善されませんでした。

現象から原因を類推する

ビデオレコーダーを介さなければ地デジ、BS、CSが正常に映るので設定上の原因と類推しました。ここではテレビ:PANASONIC製TH-37PX88とレコーダー:DMR-BW730を例に取り上げます。

環境に合わせるために、「メニュー」を起動し郵便番号や市外局番を入力します。その時、郵便番号や市外局番が引越す前の値に設定されていれば「E202」の原因をなかば特定したことになります。次のような操作をしました。

メニュー-設定する-初期設定-決定-かんた設置設定(3秒継続)-郵便番号(〇〇〇-△△△△)-次へ-県域設定-○○県-次へ-市外局番-テスト-OK-次へ-次へ-アンテナ電源オフ-決定-戻る

考察

ネット上に「テレビとレコーダーをつないだら、地デジがうつりません」という検索はかなりありました。この問題で悩んでいる人はことのほか多いようです。ケーブルの劣化や接続に目が行きがちですが地デジが映らない原因が初期設定にあるとは意外でした。悩める同病者に参考になればありがたいです。ネットからいつも情報をもらって助けられています。小さな恩返しになりますように。

おまけ

最近の建物はバリアフリーやユニバーサルデザインが指向され、和室と洋間の敷居に段差がないものが多くなっています。感心した一コマです。

 

民度を考える

気を使った表現

他人を評価する言葉として民度という言葉を使うと誤解を受けたり顰蹙を買うことがあります。民度の意味は教養や常識とも異なり微妙な雰囲気を醸し出す言葉です。人をけむに巻いたりたしなめるときにも使われます。かつての都知事は敵対勢力から攻められたときに常用した記憶があります。

時として大胆な発言をする大臣の登場で「民度」がクローズアップされています。国会の発言で国会解散になった一族の家系ですからあれくらいの発言は珍しくもなんともないことでしょう。

民度が推し測られる

コロナ禍の折、他県からの来店者をお断りします」の張り紙を見ました。そのお店は県境でもなく県の中央部に位置しています。よって他県から奥深く進入して来訪するメリットを持っていなければわざわざ訪れる人はないでしょう。

店の担当者は居丈高になっているようです。コロナ感染が猛威を振るっている中、その経営方針は経営者からの通告があったと推察されます。お店を任されているといっても他県から親の見舞いに来て空いた時間にそのお店に立ち寄った人が不快な思いを抱かないような表現にして欲しかったです。

あの張り紙は担当者の民度が推し測られるというものです。民度を安易に使った例です。「国の民度」を論評され「国の自尊心」で反論した国があるようです。

張り紙を評価する

張り紙は大衆に訴えることが多いです。公園などがその典型です。ただで使わせているとの底意が透けて見えます。「焚火禁止」、「ローラースケート禁止」、「無断駐車禁止」などです。

高級なところにはほとんど行った試しがありませんが、張り紙で来訪者を指導することはめったにないと言われています。

大概、その大半は禁止行為に関する注意事項ですが時にはどぎつい表現に出会うことがあります。

一ランク上げるだけで張り紙は格段に減ります。節約を心掛け張り紙の無いお店を訪ねたいものです。民度を語るつもりが張り紙への八つ当たりになってしまいました。