日本10景案内ゲーム

探勝ゲームをさらに改訂しました。改良点を以下に表わします。文末に絵文字の表示例を挙げました。参考になれば幸いです。

デジタル時計として利用するには

当記事をデジタル時計として利用するには、音量を０にし、停止ボタンを押しルーレットの回転を止めて落ち着いた環境でお使いください。

詳しいゲームの使い方はプログラミングへのお誘いをご覧ください。

🍀
絵文字とユニコード

右に四つ葉のクローバー(0x1f340)の絵文字を表示します。unicodeで規格された絵文字の多くはコード65536(0x10000)以上のサロゲート文字（サロゲートペア）です。

サロゲートペアは3バイト以上だから複数回に分けて表示します。指定されたユニコードを表示するには、サロゲートペアかどうかを判定して以下のようなコードで表示されます。

絵文字描画関数の一例

function viewEmoji(){                     //絵文字描画関数
var k = emojiCount++ % sightSpot.length;
var u = sightSpot[k];                     //ユニコード
var v=u < 0x10000 ? String.fromCharCode(u) : surrogate(u);//サロゲートペアか判定
	document.getElementById("sight").innerHTML = v;
}
function surrogate(y){                    //16進5桁 -> サロゲート文字コード
  var x = y - 0x10000;
  var a = Math.floor(x / 0x400) + 0xD800; //上位サロゲート, Math.floor()で整数値に変換
  var b = x % 0x400 + 0xDC00;             //下位サロゲート
  var s = String.fromCharCode(a, b);      //Unicodeコード列を文字列に変換
  return s;
}

改訂版・日本10景探勝ゲーム

探勝ゲームを改訂しました。主な改良点は景勝地の画像を大きくした点です。回転テーブルは小窓から一部のみ表示されます。

ゲームの使い方はプログラミングへのお誘いと同様です。参照していただきプログラミングへの熱い想いなども感じていただけたら幸いです。

新日本十景、自然豊かな観光立国を応援します。

はじめに

ここではプログラミングのお誘いについて語っています。小学校においてまもなくプログラミング教育がスタートします。その案内のために、興味の湧くゲーム作成を例題に取り上げています。

最後に、初歩から体系づけてプログラミングを学ぶための一案も示されています。それでは日本10景探勝ゲームを体験してください。

学校教育保護者の思い

学校教育に対する保護者の意識調査が朝日新聞とベネッセコーポレーションから発表されました。ベネッセコーポレーションは確か福武書店（ふくたけしょてん）が前身 だった気がします。

ある局のアナウンサーがふくぶしょてんと呼称し後で訂正したことを覚えています。教育に対する意識は少子化を反映して旧来とは異なる傾向が出ています。それらを基にブログとの関わりなどに触れてみたいと思います。

プログラミングへの考え方

2020年から小学校でプログラミング教育が必修化され、先行してすでに予備実行されている小学校もあるようです。教育政策において「プログラミング教育を増やす」について、賛成が82.6%に達しています。「入試で思考力・判断力・表現力を重視する」の賛成が82.3%であることと考え合わせると、ただ、暗記する教育から思考力を重要視する内容が支持されてきています。

プログラミングに親しむ

楽しくプログラミングに接する一つの方法を示します。中学生でプロの棋士になったり世界的なピアノのコンクールに優勝する人もいます。ここに至るまで親に強制されて鍛錬したのではなく、楽しみながら研鑽を続けた結果と思われます。

当ブログでも楽しみながらプログラミングに興味を持ってもらえるようにゲームを取り入れて語っています。以下の例は脳トレゲームにより瞬発力と記憶力を養うゲームです。画像をクリックすると解説ページを参照することができます。

日本10景探勝ゲーム概要

このゲームはかつて述べたスピリチュアルゲームを発展させたものです。

国の旅行客誘致努力が実って外国からの旅行客がうなぎ上りです。

治安が安定していて自然豊かな我が国は魅力的な観光地がそろっています。

外国人旅行客を手厚くもてなし、そこから生まれる様々な産業の起爆剤となりえるインバウンド事業は資源の乏しい我が国にはうってつけです。

著名な景勝地にちなんだゲームを作成しました。選んだ日本10景はとりあえず頭に浮かんだ場所を挙げたに過ぎません。

日本10景探勝ゲーム遊び方

日本10景探勝ゲーム

プログラミング解説書について

上の例題は高い機能を有し、日本の観光地を親しみ深く理解いただけるように配慮されています。これを実現するにはプログラミングについてある程度の知識を要しますが、開発のための機材などを準備することなく、誰でもエディタの扱いができれば作成できることをアピールするために用意しました。

例題はJavaScriptで記述されています。プログラミングを最初に教わるときは世界のみなさん、こんにちは！を表示させることが多いです。JavaScriptではこの文面を用意するだけでよいのです。printfなどを指定することはありません。だから、始めやすいと言えましょう。これについては自由研究のはじめ4に詳説しています。

初歩から少しずつ高度な表現までを試みたいときには手前みそになりますが、動作させながらゼロから学べるJavaScriptを紐解いてください。パソコン、スマホ、キンドルにて読むことができます。簡単な例題から徐々に高度な例題を動作できるように記述されています。年度の始まりに新しい挑戦を試みられてはいかがでしょう。

おわりに

習い事はブームや見栄で始めるものではありません。「芸は身を助ける」と言います。先んずれば人を制すという言葉がありますが、大げさに考えずに必要があったら、興味を抱いたら踏み出してみましょう。

駅員も悩む

旅をすると非日常の体験をすることがあります。そのなかで地名の読み方で困ることがあります。

一度、旅先で大地震に出会い、行き先変更を余儀なくされ、特急券等の再発行を申し込んだところ、駅員が難読駅名を読めず済まなそうな顔で依頼者に教えてもらっている光景を見かけたことがありました。

漢字のひとつずつを変換して駅名を漢字で表現する変換方式をサポートしていない発券システムだったのでしょうか。及位（のぞき）ならば、及第を表示させ一文字戻して消去し、次に位置を出し直前の字を消して及位を表示させます。

読み方が分からなくても最低限の業務をこなすことができそうです。切符の地名に指を指してこれで問題ないでしょうかと念を押しましょう。

地名や人名の読み方

地名や人名の読み方は難しいものです。当て字、訛り、こじつけ、頓知などで通常の読み方でないものが数多くあります。同じ漢字でも読み方が異なることもあり、暗記するほかないようです。

名字としての水上の読み方はおおむね2通り考えられます。みなかみかみずかみでしょう。東海林は全国的に、しょうじの読み方が多いようですがとうかいりんと素直に呼ぶ地方もあります。小中学校は狭い地区から集まりますが、高校になると広範囲です。すると同じクラスに両方混在し混乱することがあります。

振り仮名について

振り仮名は漢字の読み方を限定するものです。縦書きならば多くは漢字の横に小さめのひらがなで振ります。和泉という名字に振る場合、2文字でいずみと均等割り付けになるでしょう。

HTMLは英語圏の人々が先行して決めたものでしょうか、振り仮名の規約はまだのようです。例において、鬼首、馬鹿、廻り道は小刻みに振り仮名を振ります。その他では全体に均等割り付けします。

名前の漢字

名前に用いる漢字も一つの読みに何種類も存在します。

高橋、髙橋や渡辺、渡邊、渡邉、斉藤、斎藤、齋藤と多彩です。高橋、渡辺、斉藤で勘弁してもらうことがあります。

縦書きによる振り仮名

HTMLでは縦書きのAPIが公開されており、一字ずつあるいは全体に均等割りで難読字に振り仮名を付けることができます。それを以下に挙げます。鬼首、及位、馬鹿のわずかな違いを見逃さないでください。

和寒わっさむ

杁えぶり

鬼おに首こうべ

及位のぞき

石動いするぎ

一口いもあらい

穴太あのう

放出はなてん

特牛こっとい

凹清水へこしみず


文殊四郎もんじゅしろう

恋中こいなか

隣ちかき

十つなし

先生せんじょう

夫婦岩みょうといわ

一本槍いっぽんやり

馬ま鹿しか

廻まわり道みち

勘解由小路かでのこうじ

難読地名

難読苗字

©TacM,2018 Ver0.01

おわりに

『NHK 人名探究バラエティー　日本人のおなまえっ！』は楽しめる番組です。名前にまつわるエピソードは限りなく存在します。

相撲の関取に正代（しょうだい）がいますが正代（まさよ）さんという女性も大勢おります。まさよさんが正代家に嫁いだら正代正代となりややこしいと考えていましたが正代の実家で実際にある話のようです。

上例は姓名がまったく同じ漢字でしたが、姓名で同じ発音の人名が存在します。馳錠さんが城花子さんと恋をしてお婿さんに入ったら城錠（じょうじょう）になります。フルネームの問い合わせに「上の名前はわかりましたので下の名前をお願いします」と言われそうです。

もうひとつおまけに、先生（せんじょう）さんの職業が教師ならば先生先生になります。

旅と地名、人名について、感想を記しました。

2018年度の始まりに当たり

年の括りは1月1日から始まりますが、行政会計などは4月1日から始まりその1年を事業年度または年度と呼称します。新しい年度が始まりました。思っていることを連ねてみます。

かつて、文章は手書きが主でした。近年は筆、鉛筆、万年筆、ボールペンなどで縦書きか横書きで紙に書くことが一般的で、パソコンやスマホの普及によって電子表現が大勢を占めるように変わっています。そうすると従来の約束事に縛られることに不都合をきたしています。

以前は原稿用紙に書くことを前提にしていましたので、段落(paragragh)の始まりには空白1文字を置くのが原則でしたが、今では英語の文章のように空白行の後、次の行の先頭から書くことが多くなっています。

日本では和洋折衷の言葉に代表されるように、外からの文化を取り入れながらも古くからの独自文化を残しています。電子機器がこれほど普及したのに、わざわざ手書きもないもんだとの考えには簡単に与（くみ）することはできませんが、手書きの良さはひとまず置いておきます。

電子表現は過去の文例の再利用や多くの人に迅速に低額で伝えることができます。テレビ番組や新聞の投書にもワープロを用いて紙に印刷したものや電子媒体そのものを送ることが多くなっています。

ワープロによる表現は千変万化ですが、段落は1行の空白を置く人が多いようです。先頭に1字の空白では物足りません。

行間が狭く脇に振り仮名を付けることもままならず、難読地名の振り仮名は及位（のぞき）のように同一行になります。

右の例は超難読名前の例です。同一行に振り仮名を振る方法では不十分です。2行にすれば複数字全体での読み方であることが明らかになります。

今は、和文を電子表現する長～い実験期なのです。そろそろ、戦国時代は終わりにして統一の時期に至っているのではないでしょうか。

標準・共通・基本など

和文を電子表現するデファクトスタンダード（市場の力関係などで決まる事実上の標準）に成功した例はないのではないでしょうか。ワードやエクセルなどのツールは有料であり1つの企業が開発したものです。これが無料ならばデファクトスタンダードとなったことでしょう。

左揃え

一方、世界中の利用者が知恵を絞って規約化したHTMLは無料です。段落表現にparagraghを意味するpタグ（要素）があり、先頭に1字の空白ではなく空白行を置くことになっています。

左揃えと中央揃え

ワードやエクセルには左揃えや中央揃えがあり、なんとかの一つ覚えのごとく、歌の歌詞なども中央揃えをする人がいます。案内状や議事録を作るにはエクセルよりワードを使ってもらいたいものです。

次の中央揃えの例は読みやすいとは言えません。

履歴書の特技欄などのワードやエクセルの操作に熟達も違和感を抱きます。

「トヨタカローラ運転可、日産ブルーバード運転できます」などの表現は「運転免許証所有」が一般的な表現です。

車運転技能において特定の車種を挙げるのはおかしく、先の例ではワープロソフト・表計算ソフトを習熟などの表現が望ましいのではないのだろうか。

さいごに

段落について思いを語りました。連綿と続いてきた日本古来の文化を特定のシステムメーカーに決められるのはいかがなものでしょう。新しいものが現れて群雄割拠だったり、混戦模様の場合には規格などを統一せず、流れに任せることが大切とも言われています。あれこれ悩まずとも自然に読みやすい表現に落ち着くことでしょう。

山桜2018

良寛禅師の漢詩

またまた、旅立つ若者へのはなむけの言葉を贈ります。良寛禅師の漢詩から『行春』を開始画面に表示しました。ドドーンと花火を上げてお祝い申し上げます。

はなむけの言葉

動作コード

<html>
<body onLoad="ctx.drawImage(img0, 52, 0, 397, 460);setTimeout('test()', 5000);">
<canvas id="sample" width="500" height="460" style="background-color:mediumblue; border:0px green solid;"></canvas>
<audio id="dodoooon" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/01/se-039ac.mp3"></audio>
</body>
<script type="text/javascript">
const X0 = 20;
const X1 = 0;
var img0 = new Image();									//新規画像オブジェクト,ロードする
img0.src = "https://aidesign.lolipop.jp/wp-content/uploads/2015/04/45fc2e10896580ca2a9af33c50b6f9c2.png";//ヘッダー画像, 727x843
var img1 = new Image();									//新規画像オブジェクト,ロードする
img1.src = "https://aidesign.lolipop.jp/wp-content/uploads/2018/03/Hanabi4.png";	//花火を打ち上げる画像, 500x460

var count = ctx = 0;
var canvas = document.getElementById('sample');			//描画コンテキストの取得
if (canvas.getContext)	ctx = canvas.getContext('2d');
else					alert("not support canvas!");

function test() {
	if(++count == 50)	document.getElementById('dodoooon').play();
	ctx.beginPath();
	ctx.globalCompositeOperation = "source-over";		//合成の形式を指定する
	ctx.drawImage(img1, X1, 0);							//描画内容を指定 ■■■　destination-in　■■■
	if(count < 300){
		ctx.globalCompositeOperation = "destination-in";//合成の形式を指定する
		ctx.fillStyle = "navy";							//青い円を描く
		ctx.arc(X1+240, 288, count+X0, 0, Math.PI*2, true);
		setTimeout('test()', 30);
	}
	else{
		ctx.fillStyle = "yellow";
		ctx.font = "24px 'ＭＳ ゴシック'";
		ctx.fillText("祝", 5, 25);
		ctx.fillText("旅立ち", 428, 25);
		ctx.fillStyle = "darkgreen";
		ctx.fillText("2018-03-26", 5, 455);
		ctx.fillText("\xA9TacM,2018 Ver0.01", 280, 455);
	}
	ctx.fill();
}
</script>
</html>

新しい旅立ちを祝う

季節はめぐり巡ってきます。うれしい桜の開花ニュースが流れてきました。新たに旅立つ皆様へ、はなむけの言葉に代えてHTMLとJavaScriptで祝意を述べます。BGMの演奏に応じて風景と和歌の透過率が変わります。