月別アーカイブ: 2019年1月

逆さ文字と鏡文字

縁起かつぎ

「科学的な根拠がないのに縁起をかつぐとはなにごとか」と息巻くひとがいます。

気持ちはわかりますが縁起かつぎも一つの遊びやシャレと考えれば納得いくのではないでしょうか。

一生懸命努力しても望みがかなえられないことがたくさんあります。

自分だけでなく他人とのかかわりで事が左右されるときは、残念であったりやりきれなかったり怒りさえ覚えることも多々あります。

そのときの心の平安のために縁起かつぎや神頼みがあると思えば人間の深い思いやりを感じます。

だから、常日頃は怠惰な振舞なのにここぞとばかり縁起かつぎを語る人には眉を顰(ひそ)めます。

そのような人はやることをやってからちょっと多めのお賽銭をあげて神頼みをしてほしいものです。

鏡文字

鏡文字とは左右を反転させた文字ですが、そのなかに鏡番号があります。車の番号で7337や8008のことです。8008は末広がりの八が鎖でつながれたイメージがあり一番人気の番号だそうです。

73を鏡に映すと37と見えるのでその呼び方ができたと推測されますが、上下に映した場合も鏡文字と呼んでいます。

逆さ文字

一方、逆さ文字と呼ばれるものがあります。上下の鏡文字と似ていますが微妙に違います。一字ならば同じと思いきや一字でも両者は異なります。考え違いをするところでした。

鏡文字 
鏡文字
逆さ文字(鏡文字方式)
逆さ文字
逆さ文字(逆さ文字方式)
逆さ文字

 

右図の「左馬」は販売元の観光ガイドによると福を招く縁起物とされています。

将棋盤の相手の駒や折りたたんだ新聞を裏から見る場合は鏡文字でなく逆さ文字になります。

画面上の将棋盤に対戦状況を表示したいと考え、鏡文字と逆さ文字について少し調べてみました。以下に表示例を示します。

逆さ文字例題HTMLコード

王 飛 角
王 飛 角
王 飛 角
と 馬 竜
と 馬 竜
後手
後手
後手
後手:九段 山田宗衛門

————————————————————-

FIRE
FIRE
鏡文字

FIRE
FIRE

鏡文字
FIRE
逆さ文字

 

 

transformのscaleとrotateの使用例

<DIV style="font-weight: bold; text-align: center;">
<div style="width: 100px;">王 飛 角</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;">王 飛 角</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">王 飛 角</div>

<div style="width: 100px;">と 馬 竜</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;>と 馬 竜</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">と 馬 竜</div>

<div style="width: 100px; transform:rotate( 180deg );color:blue;">後手</div>
<div style="width: 100px; transform:scale(1, -1);color:orange;">後手</div>
<div style="width: 100px; transform:rotate( 180deg );color:blue;">後手</div>
<div style="width: 350px; text-align: right; font-size:32px; transform:rotate( 180deg );color:blue;">後手:九段 山田宗衛門</div>
<p style="text-align: left;">-------------------------------------------------------------</p>
<div style="float:left; width: 100px;">FIRE</div>
<div style="float:left; transform:scale(-1, 1); color:magenta;">FIRE</div><div style="float:left; padding-left:60px;">鏡文字</div><BR>
<Div style="clear:both; float:left; width:100px; border:1px solid blueviolet;">
<div>FIRE</div>
<div style="transform:scale(1, -1); color:orange;">FIRE</div>
</Div><BR>
<div style="float:left; width:145px; text-align:right;">鏡文字</div>
<div style="clear:both; float:left; width:105px; transform:rotate( 180deg );color:blue;">FIRE</div>
<div style="float:left; width:145px; text-align:right;">逆さ文字</div>
</DIV>

さいごに

逆さ文字がこんなに簡単に実現するとは思ってもみなかったです。

画像で表現する方法もありますが、検索ツールや改訂・修正を考えるとテキストを使った表現が便利です。

transformを用いた文字の変形表現を覚えておいて損はありません。

 

遅ればせながら進化に対応

遅れても追随

金満会社や金満家は何もかも外注、他人任せ(ひとまかせ)の場合が多い。不都合があれば外注先が悪いとの声が聞こえてきそうです。ギャランティを受けているのは当事者であることを忘れて言い逃れるのは見苦しいです。

 

これとは異なりますが他人のことを100%信用して他人任せも怖いです。食料品の全面輸入や外国からの技術導入も同様のことが言えます。周回遅れでもついていかなければならない場合があるのです。

難しい、もうからない、めんどうだと避けていると臍を噛む(ほぞをかむ)ことになります。

SVG

ひさびさにsvg(Scalable Vector Graphics)に触ってみました。ハードウェアが進化して表示機器が大型化すると従来の方式では画像がぼやけることがあります。

Svgはすべてテキストで画像を表現しているので、画像を拡大してもぼやけることはありません。

Svgに対するCanvasの方が扱いが楽のようなので用途に応じて使い分けることがいいようです。

サンプルから

ネット上に17個の歯車をSvgで回転させるサンプルがありましたので取り上げます。親しみを感じたら、プログラムコードを眺めてHTML, JavaScript, SVGに想いを寄せてみてはいかがでしょう。

17 Animated Gears
 17 Animated Gears.

 

世知辛い世の中

一面的なとらえ方

昨年、ラーメン店内で財布を拾ったので店員に届けたとき違和感を覚えました。「落とし主に届くよう配慮します」との声が返ってくることを期待しましたが、「免許証が入っているので慌てて戻ってくるだろう」と軽口で言っただけでした。

この店は味はイマイチながら無料で多彩なトッピングができるので気に入っていましたが、小規模な地域チェーン店であり、商売のモットーが額縁に飾られている割には社員教育までは手が回っていないように感じられました。

もやもやが消えかかったころ、ラジオから「拾った財布を交番に届けたところ、落とし主が現れお金が少なくなっている」と言われたいう話が聞こえてきました。届出人の連絡先を記入したり、警察官と会話を交わすことを考えると部分的ネコババは極めて低い確率でしょう。

ラーメン店でも少なからずの不快感がありましたが、後者の届出人は怒りに近い失望感があったと推測されます。

謝礼の礼金が惜しくなって逆切れしたと思われます。すべてを失ったかも知れないのに戻ってきたのだから勿怪の幸い(もっけのさいわい)でしょう。

納得いかないのならば多くの人の手を煩わせたペナルティと思わなければなりません。

非日常のアクシデントへの応対は文章に表すことができないくらい千変万化です。すべて制度化するのは味気ないです。

熟慮と変える勇気

法律で決められないものは山ほどあります。「清き水には魚棲まず」とも言われ、法律の厳しい運用もときによりけりで別件逮捕につながることがあります。確かな証拠がなくただ胡散臭い人が自宅から公道向かいの50mほど離れた賃貸駐車場までパジャマ姿で運転することを聞きつけて、免許証不携帯で署まで連行するようになったら大事(おおごと)です。

「「うるさい」と保育施設に苦情、自治体の75%…」こんな記事が今朝の新聞に載っていた。何とも住みにくい世の中になったもんだ。
https://blogimg.goo.ne.jp/user_image/0b/a7/ より

庶民は「小さなことはお目こぼしを」とまでは言いませんが、もっと大悪、巨悪、大奸を捕まえてほしいとひたすら願っています。

名義を借りて商売をする、資格がないのに検査官になる、他人の健康保険証で病院にかかるなどはちょっと前までは許されていても今はだめです。

隣国のドラマに土地の有力者の一声で受刑者が無罪放免というストーリーが展開されていましたが、日本でも40~50年も遡れば有力者の口利きで交通違反の点数リセットなどで似たようなことが行われていたようです。

かつてやむを得ないと大目に見られていたことが許されなくなった事柄は多くあります。暮らしにくい世の中になってきたと嘆かずに正常な姿に戻す勇気を持たなけれなならないでしょう。

余談

それにしてもスーパーで買う物が小さくなっています。

安くてうまいは絶無です。いつまで続くスモールチェンジかな!

今一番の悩みは「甘くないバナナ」「まずいバナナ」です。

多彩な動的表現を目指す

スライドショーなど

高機能の画像処理ソフトが有料・無料で出回っていて、結婚式などのイベント記録をいつまでも残しておけるようになりました。

キャプションを入れられるものが多く楽しさが増します。

残念ながらキャプションの字の大きさや色を変えられるものにはまだ出会っていません。特別な設定ボタンを操作して色を付ける方式はアプリを変更しなければならず多くの労力を必要とするでしょう。

Webページを作る言語にHTMLがあり、文字列の色を変えたり動画を呼んだりするのにキャラクターで指定することができます。このため、特別なボタンを追加する必要もありません。一部の文面の色を変えるには以下のように指定します。

字幕としての文字列を解析する部分にHTMLタグ解析を追加すれば事足ります。フロントエンドプロセッサの導入で漢字文化がコンピュータ上で花開きました。この方式で動的表現に彩りを添えることでしょう。

これまでの動的表現

春の妖精・かたくり
方丈記に親しむ
奥の細道・序文を改訂

上記の記事はムービーメーカーやスライドショーを用いて作成されています。いずれの動的表現もスムースな動きにインパクトある訴え力を持っています。

望む機能

カラオケ画面には背景画像、歌詞が表示され音楽に対応して進行部分の歌詞の色が変化します。これを縦書きで実現したいものです。

そのほか、緞帳(どんちょう)が左右に開いて背景画が徐々に主役になる表現に挑戦したいです。

ハイポサイクロイドその後

サイクロイド曲線の解説

x=(a-b)cosθ+c・cos((a-b)/bθ)
y=(a-b)sinθ-c・sin((a-b)/bθ)  (θ: 0~2π)

ハイポサイクロイド曲線を媒介変数で表現すると上式になります。a, b, cの値を変えることによってさまざまな曲線を描くことができます。定数を分数にし、分子を1、分母を整数で表現することが多いです。 3つの定数の大小により曲線に特徴が現れます。今回、描画する10個の曲線の特徴を表にまとめてみました。開始ボタンをクリックして様々なサイクロイド曲線を描いてみましょう。

-1 0 1 1 -1 ハイポサイクロイド曲線 🎯 0% 参照:フリー音楽素材 H/MIX GALLERY 『光芒の大地』 ©TacM,2019 Ver0.04 a. 1 b. c.

 

定数の効能と関連

x=(a-b)cosθ+c・cos((a-b)/bθ), y=(a-b)sinθ-c・sin((a-b)/bθ) (θ: 0~2π)
a b c 頂点数 頂点の位置 備考
1 1/7 1/5 7 定円の外 頂点数はbの値で決まる
1 1/4 1/5 4 定円の内 頂点位置はbとcの大小関係で決まる
1 1/5 1/7 5 定円の内
1 1/3 1/2 3 定円の外
1 1/8 1/6 8 定円の外
1 1/4 1/4 4 定円上 アステロイド曲線
1 1/6 1/9 6 定円の内
1 1/9 1/9 9 定円上 アステロイド曲線
1 1/5 1/4 5 定円の外
10 1 1/3 1/4 3 定円の内

数学を楽しむ

難関大の入試において媒介変数表示曲線の問題は頻出です。楽しみながら数学に触れていきたいものです。

家庭にもアウトソーシング

外部委託

複雑化した時代には自ら解決することが難しくなってきて、外部の有識者の意見を聞いて解決する習わしになっています。

かつては餅は餅屋などと言っていましたが、今ではアウトソーシング(outsourcing)と呼ぶことがあります。

これがなかなか曲者(くせもの)であり、ほとぼりを冷ますまでの時間稼ぎだったり、指導者の責任逃れに巧妙に使われることがあります。

当事者が自らこの方式を言い出したときは気を付けた方がいいようです。

立ち上げると経費が掛かる

続々誕生する第3者委員会

第3者委員会を立ち上げて、有識者の公平な判断から問題を分析していただくにはそれなりの経費が掛かります。

この経費は依頼者が負担し、委託先を決めるのも依頼者です。だから、どこの依頼者を選んだかによって結論を推定できると言われています。

それは誰もが個性や主義主張を持っているからです。依頼される側は継続的な依頼がいいので依頼者に寄り添った結果を報告しがちです。

お金次第

これからは家庭内のいざこざも外部委託になるのでしょうか。大昔は肝煎り・肝入り(きもいり)などと呼ばれる役割の人がいて、 双方の間を取りもって今の言葉ではヒヤリングを重ねて心を砕き世話を焼いてくれましたが、人生経験などに大きな差が生まれにくい今日、組織の長(おさ)がもめ事を解決することが困難になっています。

そこで第3者委員会ですがこの選考過程があいまいです。マスコミがここまで踏み込んで報道しないからです。第3者委員会のメンバーを選考する第4者委員会を立ち上げなければならないのですが、ここまで議論する人は多くいません。

小事は重要に扱われても大事は軽視されることがあります。

地獄の沙汰も金次第は古今東西、通用する風習なのです。ITがもっと高度化したとき、公正な審判者となって人間社会を明るくするのでしょうか。

ニュースの結末

物事には起承転結があり、ニュースは起の時が大げさに報じられますが、そのあとは次々に起こる事件に押されて尻すぼみになりがちです。今はインターネットが発達しているのである程度の結末を知ることはできますが、断片的になります。

会費制でもよいので、発信したニュースの結末をすべて報じてくれる通信社はないものでしょうか。

余談

くじを引くとき、その順番に有利不利はありませんが、小事ながらもめごとが起きないように気を配っています。

先に引いた人が当たりくじを引いたら後の人には権利がないのだから先が有利と喚く方には、残り物には福があるの言葉を差し上げます。上式に示すように当たる確率には引く順番のnが見当たりません。

ハイポサイクロイド曲線

サイクロイド曲線とは

半径aの定円の内部を半径bの円が転がるとき、内接円の中心からc離れた点の軌跡で描かれる曲線をサイクロイド曲線と呼び、特に定円に内接しながら円が滑らずに回転するときの円周上の定点の軌跡がハイポサイクロイド曲線です。

ハイポサイクロイド曲線

再び実演

-1 0 1 1 -1 ハイポサイクロイド曲線 🎯 0% 参照:フリー音楽素材 甘茶の音楽工房 casualgirls.mp3 ©TacM,2019 Ver0.03

 

サンプルコード

<html>
<body>
<audio id="s9" preload="auto" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/11/se6.wav"></audio>
<audio id="c6" preload="auto" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/04/casualgirls.mp3"></audio>
<div style="float:left; font-size:36px"><a href="javascript:void(0)" onclick="top1()"><span id="t1" style=''>開始</span></a>&emsp;</div>
<div style="float:left; font-size:36px"><a href="https://ja.wikipedia.org/wiki/サイクロイド">サイクロイドとは</a></div>
<DIV style="clear:both; position:relative;">
<canvas id="bird" width="890" height="525" style="border: 0px red solid"></canvas>
<svg width="890" height="560" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0;left:0;">
    <rect id="dotpt" x="38"   y="257" width="6"     height="6"   fill="green"/>
    <rect id="dotlt" x="48"   y="257" width="6"     height="6"   fill="green"/>

    <circle id="circ9" cx="260"   cy="260" r="250"  stroke-width="1" stroke="darkgreen"    fill="none"/>
    <circle id="circ1" cx="45.7"  cy="260" r="35.7" stroke-width="2" stroke="maroon"       fill="none"/>

    <line id="move0" x1="260" y1="260" x2="51" y2="259" stroke-width="2" stroke="maroon"/>
    <polyline id="curve" style="" points=""/>

    <line id="xaxis1"   x1="0"   y1="260" x2="525"   y2="260" stroke-width="1" stroke="black"/>
    <line id="yaxis1"   x1="260" y1="0"   x2="260"   y2="525" stroke-width="1" stroke="black"/>
    <line id="axis0"    x1="80"  y1="260" x2="105.7" y2="260" stroke-width="2" stroke="green"/>
    <text id="theta"    x="0"    y="590" fill="" font-size="24"> </text>
    <text id="textx0"   x="15"   y="274">-1</text>
    <text id="textx1"   x="270"  y="274">0</text>
    <text id="textx2"   x="522"  y="274">1</text>
    <text id="texty0"   x="268"  y="23">1</text>
    <text id="texty2"   x="260"  y="523">-1</text>
    <text id="head1"    x="2"    y="20"  fill="purple" font-size="16" font-weight="bold">ハイポサイクロイド曲線</text>
    <rect id="progres7" x="41"   y="545" width="400"   height="4" fill="mediumorchid"/>
    <rect id="progres8" x="40"   y="542" width="10"    height="10" fill="red"/>
    <text id="head0"    x="445"  y="515" fill="green" font-size="64">&#x1F3AF;</text>
    <text id="progres9" x="453"  y="550" fill="green"  font-size="24">0%</text>
    <text id="mtext"    x="4"    y="506" font-size="14">参照:フリー音楽素材</text>
    <text               x="4"    y="522" font-size="14">甘茶の音楽工房 casualgirls.mp3</text>
    <text               x="4"    y="538" font-size="14">&copy;TacM,2019 Ver0.03</text>
    <text id="bijin"    x="278"  y="538" font-size="14" fill="magenta" font-weight="bold"></text>
</svg>
</DIV>
</body>
<script type="text/javascript" charset="Shift_JIS">
const SIZE=250;                             //回転円半径
const ZX=ZY=260;                            //中心点x, 中心点y
const PAR =[[1, 1/6, 1/24], [1, 1/7, 1/7],  [1, 1/4, 1/15], [1, 1/5, 1/4],									//a, b, c
            [1, 1/8, 1/6], [1, 1/3, 1/12], [1, 1/7, 1/12],  [1, 1/9, 1/27]  ];								//8点
const COL =['gold', 'royalblue', 'magenta', 'indigo', 'bisque', 'darkgreen', 'orange', 'tomato'  ];
const MARU=["\u24ea","\u2460","\u2461","\u2462","\u2463","\u2464","\u2465","\u2466","\u2467","\u2468"];	// 0-9
const lady=["小野小町", "見返り美人", "額田王(ぬかたのおおきみ)", "カジュアルガール",
            "ふっくら万葉美人", "うちわ持つ浴衣美人", "花火見物で涼む着物美人", "三月の鮠ヒロイン葉津"];
const COMT = "M ";                          //円弧のコマンド
const T3 = 40;                              //interval 45 30
const ST = 0.02;                            //step
const FUNC = ["開始", "停止", "終了"];      //"開始", "停止", "終了"
const Src = "http://aidesign.lolipop.jp/wp-content/uploads/2016/11/Bijinga.png";	//poster image
var points12 = "";                          //描画点1, 描画点2
var th = 0.0;                               //回転角
var v = 0;                                  //順番号, 0~7 PAR.length
var w = 0;                                  //動作状態, 0~2
var timer = 0;                              //for setTimeout
var Img;									//イメージオブジェクト
var sequence = [];                          //シャッフル表
var ctx, pbar;								//グローバル変数
var tx0 = document.getElementById("head0");	//Number
console.log("LENGTH", COL.length, PAR.length);
window.onload = function(){                 //ページがロードされるときに起動する無名関数
 var canvas = document.getElementById('bird');          //canvas取得
 if (canvas.getContext) ctx = canvas.getContext('2d');  //有効性
 else                   alert("can not use canvas.");   //エラー
  Img = new Image();                        //イメージオブジェクト
  Img.src = Src;                            //image-file
  Img.onload = function(){                  //読み込み時, drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);
	drawBijinga(Math.floor(Math.random()*8));//美人画を描く
  };
};
					//v:0-7 -> sequence[v]	//┌───────────┬────┐
function f(v){return sequence[v];}          //│  0~999までの乱数  │ 順番号 │
											//└───────────┴────┘
function top1(){							//開始 or 停止ボタンの押下で起動
  if(w==0){                                 //開始処理, wは状態識別の他、配列の参照に用いる。
    w=1;                                    //動作中にする。これからシャッフル表を作る。
    for(var i=0; i<8; ++i)  sequence[i] = i + Math.floor(Math.random()*1000)*16;//0~999までの乱数を発生させる
    sequence = sequence.sort(function(a, b){return a - b;});//小さい順に並び替える
    for(i=0; i<8; ++i)  sequence[i] %= 16;  //下4ビットすなわち並び変えられた順番号を取り出す
    pbar = document.getElementById('progres8');//
    document.getElementById('c6').play();   //casualgirls
    hypo();                                 //サイクロイド曲線を描画する
  }                                         //開始処理の終了
  else{                                     //終了or停止処理
    if(w==1){                               //停止処理
        w=2;                                //停止から終了へ表示を変える
        clearTimeout(timer);                //ポスター画像の表示を停止
        document.getElementById('c6').pause();//BGMを停止
    }else   alert("終了しています。再開するには、再読み込みをします。");    //再開する
  }
    labelClick();                           //"開始", "停止", "終了"
}
function hypo(){                            //start, hypoから起動、《サイクロイド曲線を描画する》
    calculate(f(v));                                            //thを参照
    th += ST;                                                   //thを更新

    var u = Math.floor(Math.random()*10);                       //0~9までの乱数を発生させる
    tx0.textContent = MARU[u];                                  //回転軸中央の数字
    if(th < 2.005){                                             //曲線の描画を継続
        head0.setAttribute('fill', COL[v]);                     //刻々変わる当選番号の色
        timer = setTimeout('hypo()', T3);                       //高速描画
    }else{                                                      //番号が確定
		tx0.textContent = MARU[v+1];							//回転軸中央の数字
        head0.setAttribute("fill", 'red');                      //確定色として赤
        document.getElementById('s9').play();                   //一桁の番号が確定
        th = 0.0;                                               //次の処理の準備
		drawBijinga(f(v));										//美人画を描く
        points12="";                                            //svgコマンド
        if(++v<PAR.length)	timer = setTimeout('hypo()', 2200);	//次の数字が残っている, v:0~7 2200ms、次の描画まで間を置く
        else{													//v:7を超えた
            w=v=0;                                              //再開用にクリア
            labelClick();                                       //"開始", "停止", "終了"
        }
    }
}
function labelClick(){document.getElementById("t1").innerHTML=FUNC[w];		/*"開始", "停止", "終了"*/}
function drawBijinga(n){										//美人画を描く
	ctx.drawImage(Img, 300*n,0, 300,300,  80, 80, 360,360);		//切り替え画像,0-7番目
	document.getElementById("bijin").innerHTML = lady[n];
	console.log("bijin", n, lady[n]);
}
function calculate(iy){                                                         //サイクロイド曲線を計算
    var t = th * Math.PI;                                                       //theta:θ
    var ab = PAR[iy][0] - PAR[iy][1];                                           //a - b;
    var bb = ab / PAR[iy][1] * t;                                               //(a-b)/a*θ
    var r = SIZE * PAR[iy][1] / PAR[iy][0];                                     //b/a
    var wx = ZX + SIZE * (ab * Math.cos(t) + PAR[iy][2] * Math.cos(bb));        //x
    var wy = ZY - SIZE * (ab * Math.sin(t) - PAR[iy][2] * Math.sin(bb));        //y
    var vx = ZX + SIZE * ab * Math.cos(t);                                      //X
    var vy = ZY - SIZE * ab * Math.sin(t);                                      //Y

    points12=points12+" "+wx+","+wy;                                            //"0,100 40,200"
    curve.setAttribute("points", points12);                                     //サイクロイド曲線を描画する
    curve.setAttribute("style", 'fill:none; stroke-width:3; stroke:'+COL[iy]);  //描画スタイル

    dotpt.setAttribute("x", wx-3);  dotpt.setAttribute("y", wy-3);              //直線の中点
    dotlt.setAttribute("x", vx-3);  dotlt.setAttribute("y", vy-3);              //直線左の先端

    circ1.setAttribute("cx", vx);   circ1.setAttribute("cy", vy);               //回転円の中心 x, y
    circ1.setAttribute("r", r);                                                 //回転円の半径
    move0.setAttribute("x2", vx);   move0.setAttribute("y2", vy);               //回転円の中心 x, y

    axis0.setAttribute("x1", vx);   axis0.setAttribute("y1", vy);               //直線左
    axis0.setAttribute("x2", wx-1); axis0.setAttribute("y2", wy-1);             //直線右
    var x = Math.round(th * 20000) / 100;   ////////////////// プログレスの処理 /////////////////
    var b = "  " + Math.round(x / 4) + "%";                                     //0-100%
    pbar.setAttribute("x", x+41);                                               //progress
    progres9.textContent = b.substr(b.length-4, 4);                             //percent
}
</script>
</html>

 

改訂への道しるべ

  1. BGMを変更する。
  2. 描画速度を変更する。
  3. 背景画像をもっと気の利いたものと差し替える。
  4. ハイポサイクロイド曲線を変更する。
  5. 研究のためのリンク先を追加する。

 

日めくりカレンダーの改訂

以外にかかる負荷

ウィジェット欄に日めくりカレンダーを貼り付けましたが画像を表示させたこともあって以外に描画の負荷がかかっているような気がしています。その理由でウィジェット欄に毎回、描画させる仕様から固定ページに表示させるように変更しました。元日からの通算日が常に見られなくなるのは忍びないことですが、その代わり、六曜の表示を追加しました。

日めくりカレンダーにおいて、旧暦の日付が分かれば簡単に六曜が確定すると述べましたが、肝心の旧暦日付を求めることは難儀なことです。六曜を求めるAPIソースコードは http://www.shurey.com/js/calendar/qreki.js を参照させていただいております。

アップロードする際、コメントにURLアドレスなどのHtmlタグがあるとコンパイルエラーになりましたので、その部分のみを修正しています。

そのコードを眺めますと、現在、西暦カレンダーはグレゴリオ暦を使っていますが、旧暦算出にはそれよりも古いユリウス暦を使っているようです。JavaScriptによるAPI行数は480ほどの大作です。

日めくりカレンダーの利用法

日めくりカレンダーは固定ページ「格別なページ」に置きました。この際、ページ名も「日めくりカレンダー」に変更しました。

動的な記事を表現するには利用するブラウザを念頭に置いておかなければなりません。そのためにも「ブラウザ名」が表示されるこの固定ページは重宝するのではないでしょうか。

将来の課題

赤枠部分をウィジェット欄という

ウィジェット欄に置いた記事の起動タイミングや回数を計測する方法を調査したいと考えています。

Webデバッガを起動するにも常時、表に現れているわけではないので調査法はまだ確立されておりません。まとまったら公表したいと考えています。

日本の季節12景

月めくりカレンダーに応用

一年、月ごとの風景画を自動的に表示することを考えています。それには12枚の画像を用意して2秒間隔で表示するアプリを作りました。

 

動作例

準備中

サンプルコード

<div id="mon" style="width:100px; height:40px;font-size:32px; color:green;">準備中</div>
<div style="height:128px; border:0px solid red;"><img id="picImage" width="128" height="128"</div>
<script type="text/javascript">
	var m = 0;
	setInterval(calendarView, 2000);
function calendarView(){
	var f = "abcdefghijkl".substr(m%12, 1);
	console.log('画像ファイル読み込み起動', m%12, f);
	document.getElementById('mon').innerHTML = "\u2776\u2777\u2778\u2779\u277A\u277B\u277C\u277D\u277E\u277F\u24EB\u24EC".substr(m++%12,1)+"月";
	document.getElementById('picImage').src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png";
}
</script>

 

月めくりへの改造点

  1. setIntervalによる繰り返し処理は削除。
  2. ウィジェット欄の日めくりカレンダーに月めくり機能を追加するには、年月の月を表示している数値を12個の画像ファイルに引き当てて月ごとの画像を表示する。
  3. 画像のロード完了イベントに月ごとの画像表示を取り付ける。

大盤振る舞いのプレゼント

当ブロブの考え方は「獲った魚をふるまうことよりも魚の獲り方を開示する」にあります。つまり、解答よりも解答にたどり着く方法を語っていますが、2019年の早春を祝って解答例をお年玉として示します。

<Div style="float:left; width:128px; height:128px; font-weight:bold; border:0px navy solid; margin-top:0px;">
<div id="ym" style="width:128px; height:28px; font-size:16px; border:0px red solid;"></div>
<div id="dy" style="width:128px; height:60px; font-size:40px; text-align:center; vertical-align:middle; display:table-cell;"></div>
<div id="s6" style="width:128px; height:40px; font-size:13px; border:0px blue solid;"></div>
</Div>
<div style="float:left; width:128px; height:128px; border:0px solid red;"><img id="picImage" src="" width="128" height="128" alt="yet"></div>
<div id="dummy" style="clear:both;"></div>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/11/DevelopingTools2.js" charset="UTF-8"></script>
<script type="text/javascript" charset="Shift_JIS">
var now, year, mon, day, you;
var youbi = ["日","月","火","水","木","金","土"];								//曜日の選択肢
	month = [0, 31, 59, 90, 120, 151, 181, 212, 243, 274, 304, 334];			//通算日算出表
	now = new Date(/*"2020-03-01"*/);											//日付と時間の設定
	year = now.getYear();														//1900年からの経過年数
	mon = now.getMonth();														//今日の月(0~11)
	day = now.getDate();														//今日の日
	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)+"年"+('0'+(mon+1)).slice(-2)+"月";						//YYYY年MM月
	var s6 = youbi[you]+"曜日"+"&nbsp;"+"&nbsp;<span style='color:red;'>"+(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;'>"+BrowsN[getBrowser()]+"</span>";	//ブラウザの表示
	document.getElementById('picImage').onload = function() {					//読み込み完了のイベント関数
		console.log('読み込み完了', document.getElementById('picImage').src, ym, day, s6);
    };
	var f = "abcdefghijkl".substr(mon, 1);										//12個のファイルを引き当てる
	console.log('画像ファイル読み込み起動', mon, f);
	document.getElementById('picImage').src = "http://aidesign.lolipop.jp/wp-content/uploads/2019/01/pic12Middle-" + f + ".png";
</script>

 

好きな道を進む

若手の台頭

薫風若葉の会より

日本棋院が新設した小学生までの採用制度「英才特別採用推薦棋士」に小四の女の子がプロ1号になったとのニュースが流れています。

囲碁のプロと言えども小学生以下との制限付きだから、将棋の女流プロのような制度と見受けましたが、囲碁の強国・韓国で修行するなど若手の台頭は頼もしい限りです。

齢(よわい)を重ねた身としてはレジェンドと言われる世代も頑張ってほしいと思いますが、小林旭の「昔の名前で出ています」がいつまでも続くと活気がありません。

自らの行動

親から強制されての塾通い、塾のはしごは本人にとってどんな気分だろう。本人が好きだからすることと親の見栄やつきあいですることは取り組み方に大きな差が出てくるでしょう。

最近、当ブログで取り組んでいることを小さな世代に伝えられないかという打診を受けました。親が興味を持ちうっすらなりとも概要を理解して若い世代にアドバイスできないと難しいのではと伝えています。

プログラミング教育

来年から義務教育のカリキュラムにプログラミング教育が盛り込まれます。

当ブログで若い世代に興味を持ってもらえるように、ゲームなどを取り入れた内容の記事をまとめてきました。主なものを以下に挙げます。

❶プログラミングの初歩6
❷コンピューター万華鏡
❸夏休み終章に備える
❹ダブル連番かぞえうた
❺電子チラシを作る
❻あみだくじ作成法

❶と❷に取り上げた題目は万華鏡です。たった30行からなるJavaScriptプログラミングコードで、バダジェフスカ作曲「乙女の祈り」BGM付きの電子万華鏡です。オルゴールなどで有名な古典の音楽を聞きながら、幻想的な万華鏡を体験できます。

プログラミングは公開されているコードを基にして実際の万華鏡に近づけた雰囲気を醸し出しています。

❻番目では「あみだくじの作り方」について基本的な考え方を解説しています。そこから最新の作り方にたどり着けるようになっています。

取り組み方

大人は様々なことを考えます。触れた事柄を理解できないと馬鹿にされないかと心配します。

操作や用語の意味が分からないと腹を立てます。何でも吸収可能な世代は少しくらい理解できなくても気にしません。

最初は何も分からないのが普通です。「習うよりは慣れよ」です。

著名な先生の講座は当たりはずれは少ないですが高価です。実のところ、門下生に書かせての出版もあり得ます。在野が提唱する講座は親の見栄の対象になりませんが、コストパフォーマンスは極大です。一年かけて作った教材(アマゾンキンドル電子出版本)で256円のものもあります。

面白いと感じた方は当ブログも参照のひとつに組み込んでいただいて挑戦されてはいかがでしょう。

一念発起して無料ながら長い人生に役立つ講座がいいです。そして、やりかけ途上のことを他人に話しても自慢になりません。成し遂げたときに発表しましょう。