月別アーカイブ: 2020年7月

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

コロナ禍、油断大敵

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

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

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="https://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-次へ-次へ-アンテナ電源オフ-決定-戻る

考察

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

おまけ

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