カテゴリー別アーカイブ: プログラミング

Programing

マウスオーバーの動作例

マウスオーバーイベント

マウスはポイントする場所を選んでクリックして使うことが多いですが、クリックせずに画像や文字の上にカーソルを置いてイベントを起動する機能があります。それには’onmouseover’や’onmouseout’でイベント関数を呼び込みます。

この関数をそのまま使うと一度、マウスをかざすと1回はイベント関数を起動することができますがかざしている間、連続して動作させることは難しいです。一度は画像からカーソルを離して再度、カーソルを上に乗せることが必要です。

初期のキーボードにおいて、連続して同じコードを入力することはできませんでした。すなわち、一度、キーを離して逐一、入力しなければなりませんでした。今ではキーを長めに押しっぱなしにすれば、同じコードを入力できます。これと同じ動作にしたいと考え、あれこれ試行錯誤の末、満足を得るプログラムコードに達しましたので記録に残します。

余談ですが、マウスオーバーと同じ意味でマウスホバー(mousehover)という用語も認知されています。ホバー、ホバーリングはヘリコプターが空中で止まっているときなどに使っており、カーソルが目的物の上に乗っている様は非常に似ています。

もうひとつ、蛇足になりますが複数のブラウザで動作を試しました。インターネットエクスプローラーでの動作はカーソルがちらついて見にくいです。chrome、firefox、operaは動作が軽快でした。

動作コード

<html>
<div style="color:royalblue; font-size:20px;">マウスオーバー、マウスアウト動作例<BR></div>
<div onmouseover="tm20=setInterval(alternate, 6, 0);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">&#x21e6;&nbsp;</div>
<div onmouseover="tm20=setInterval(alternate, 6, 1);" onmouseout="clearInterval(tm20);" style="float:left; font-size:32px; color:red;">&#x21e8;&nbsp;&nbsp;</div>
<div style="font-size:12px; line-height:4em;">&nbsp;&nbsp;&copy;TacM,2017 Ver0.02</div>
<div id="bear" style="clear:both; width:400; height:400; background-color:lightcyan; border:0px green solid;">
<img id="kuma" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/10/bear-210x210.png" width="64" height="64">
</div>
<script type="text/javascript">
var w=64;
var tm20;

function alternate(diff){				//64 ~ 400
 console.log("w=%d %d", w, diff);
 if(diff == 0)	w = (w > 64) ? --w : 64;
 else			w = (w < 400) ? ++w : 400;
 setting(w, w);
}

function setting(w, h) {
 document.getElementById( "kuma" ).width = w;
 document.getElementById( "kuma" ).height = h;
}
</script>
</html>

動作例

矢印の上にカーソルをかざすと熊の画像が拡大し、矢印の上にカーソルをかざすと縮小します。矢印の上からカーソルを離せば、拡大・縮小は停止します。思いがけない動作になるでしょう。

ここでは64ピクセルから400ピクセルまで変化します。キーボードのオートリピーティング処理のマウス版です。参考になれば幸いです。

マウスオーバー、マウスアウト動作例
⇦ 
⇨  
  ©TacM,2017 Ver0.02

 

秋の夕暮れ2017


現代語訳
にわか雨の露がまだ乾ききらないうちに
もう槙の木の葉に
霧がかってきている秋の夕暮れかなあ
村雨むらさめ
  つゆもまだひぬ
   まきの
きりちのぼる
  あきゆう
小倉百人一首(第八七番) 寂蓮法師じゃくれんほうし
©TacM,2017 Ver0.03

 

HTMLサンプルコード

<html>
<DIV style="position:relative;">
<div class="h2vr_24 t1" style="float:left; line-height:1.6em; font-size:16px; font-weight:bold; width:160px; height:380px; border: 0px blue solid">
<span style="color:magenta;"><BR>現代語訳<BR></span>
にわか雨の露がまだ乾ききらないうちに<BR>もう槙の木の葉に<BR>霧がかってきている秋の夕暮れかなあ
</div>
<div class="h2vr_12" style="float:left; font-size:32px; line-height:1.8em; width:410; height:360; border: 0px magenta solid">
<ruby><rb>村雨</rb><rt>むらさめ</rt></ruby>の<BR>
  <ruby><rb>露</rb><rt>つゆ</rt></ruby>もまだひぬ<BR>
   まきの<ruby><rb>葉</rb><rt>は</rt></ruby>に<BR>
<ruby><rb>霧</rb><rt>きり</rt></ruby><ruby><rb>立</rb><rt>た</rt></ruby>ちのぼる<BR>
  <ruby><rb>秋</rb><rt>あき</rt></ruby>の<ruby><rb>夕</rb><rt>ゆう</rt><rb>暮</rb><rt>ぐ</rt></ruby>れ<BR>
<span style="font-size:18px">小倉百人一首(第八七番) </span><ruby><rb>寂蓮法師</rb><rt>じゃくれんほうし</rt></ruby>
</div>
<div style="color:mediumblue; position:absolute; top:355px; left:10px;">&copy;TacM,2017 Ver0.03</div>
<img style="position:absolute; top:-2px; left:6px; opacity:0.3;" src="http://aidesign.lolipop.jp/wp-content/uploads/2016/10/ears-of-rice.png" width="570" height="380">
</DIV>
</html>

 

成長記録を動画にしてプレゼントしよう

成長記録を動画風に整理

デジタル写真を動画風に整理するひとつの方法があります。題材は子供・孫の成長記録です。BGM(background music)が入ると引き立ちます。入学や卒業のお祝いにプレゼントできるように頑張ってみましょう。 また、映画のように先頭にカウントリーダー、末尾にクレジットタイトル(制作者名、制作日、後援者名など)を入れるとテレビのドラマ制作気分を味わえます。

この他に、画像と画像の間に切り替え効果という仕組みを導入すると前の画像の余韻を残しつつ新画面に切り替えることができます。JavaScriptでプログラミングしていますが、Movie Makerでサポートしている切り替え効果を自前で処理できるのではないだろうか。研究中です。

この成長記録の特徴

  1. 人物の写真は肖像権やプライバシーの観点からここではフリー素材のイラストを使っています。本物の成長記録にはデジタル写真を適度にリサイズして使います。
  2. 著作権フリーの音楽素材をダウンロードしaudio要素を用いて、BGMによるいろどりを加えています。
  3. くまさん、リス、カエル、ひよこさん、コアラ、クジラなどの縁取りにより写真へのアクセントを付けています。

さいごに

カウントリーダーや切り替え効果はこれからの課題です。すでにマスターされている方々がおられることでしょう。一周遅れながら追いかけます。前にも述べましたが、ソースコードはもう少しまとまったところで公開する考えです。

電子版成長記録

サンプル成長記録の再閲覧はブラウザの再読み込みボタンをクリックします。

JavaScriptと見返り美人

難解で解決できないとき

他のシステムと共同だったり、フリー素材を利用した場合、にっちもさっちもいかなくなることがあります。

有料で手に入れたものであれば、相談コーナーがあって電話やメールでトラブルに対応してもらえます。

ダウンロードフリーのソフトを使った場合のトラブルは自己責任で解決するしかありません。

たいがいは、同じ悩みをもつ同好の士がおり、ネット検索で解決しますが、最新のテーマを追いかけているときは非常に困ります。

一時、あきらめる

どうしても解決の糸口にたどり着けないことは、ままあることです。その時は一時、あきらめることです。

多くの場合、時が解決してくれます。

勘違いをしていた、他の方が解決法を発表している、効果的な代替策が見つかったなどの進展が必ずあるものです。

効果的な代替策

画像の切り替えを、大きな画像をclip:rectにより、切り取って描画する方式を追いかけましたが、リモートサーバーにアップロードすると期待した動作になりません。

オーソドックスにcanvas要素のdrawImage関数を用いて、見返り美人を描画しました。

先日は8枚の画像を用意しましたが、今回はたった1枚です。横長の蒔絵のようなものです。以下に動作結果を示します。

JavaScriptと見返り美人

動く紋章
JavaScript ©TacM,2017 Ver1.00 参照:フリー音楽素材,甘茶の音楽工房casualgirls

 

 

奥の細道・序文を改訂

バ―ジョンアップ

「奥の細道・序文の朗読記事」をバージョンアップしました。ボランティアにより公開された朗読を使わせていただいていましたが、このたび、朗読参照として明示しました。その他、細かな箇所が改訂されています。

吟遊詩人

吟遊詩人と言えば、中世ヨーロッパにおける高貴な宮廷婦人の恋愛を歌った抒情詩人を思い浮かべますが、芭蕉の句に『蚤虱(のみしらみ) 馬(うま)の尿(ばり)する 枕(まくら)もと』があります。花鳥風月を慈しんだ素朴な歌人の人柄がしのばれます。

奥の細道・序文の朗読

つき百代はくたい過客かかくにして、きかふとし又旅人也またたびびとなりふねうえ生涯しょうがいをうかべ、うまくちとらえておいをむかふるものは、たびにしてたびすみかとす。古人こじんおおたびせるあり。
もいづれのとしよりか、片雲へんうんかぜにさそはれて、漂泊ひょうはくおもひやまず、海浜かいひんにさすらへ、去年こぞあき江上こうしょう破屋はおくくも古巣ふるすをはらひて、
ややとしくれ春立はるたてかすみそら白河しらかわせきこえんと、そぞろがみものにつきてこころをくるはせ、道祖神どうそじんまねきにあひて、とるものにつかず。
ももひきやぶれをつづり、かさつけかえて、三里さんりきゅうすゆるより、松島まつしま月先心つきまずこころにかかりて、すめかたひとゆずり、杉風さんぷう別墅べっしょうつるに、
 くさ住替すみかわぞひなのいえ
面八句おもてはちくいおりはしらにかけく。
芭蕉     曽良
©TacM,2017 Ver0.03
 月日は永遠に旅を続ける旅人であり、来ては去り、去っては来る年もまた同じように旅人である。船頭として船の上に生涯を浮かべ、馬子として馬のくつわを引いて老いを迎える者は、毎日旅をして旅をすみかとしている。古人の中には旅の途中で命を無くした風流人が多くいる。
 私もいつの年からか、ちぎれ雲が風に吹かれて漂うように誘惑されて、旅に出て歩きたい気持ちが我慢できず、海や浜辺をさすらい、去年の秋、隅田川の畔を破れ小屋において蜘蛛の巣を取り払って暮らしているうちに、次第にその年も暮れ、春になり霞(かすみ)が立ち込める空を見るにつけても、あの名高い白河の関を越えようと、人の心をそわそわさせる神が取り付いて私の心を狂わせ、道祖神が招くような気がして取るものも手につかない。
 旅行着の破れ目を直し、笠の紐(ひも)を付け替えて、足に灸をすえると、あの有名な松島の月の美しさが真っ先に気にかかって、住んでいる家は他人に売り、杉風の別宅に引越しする時に、句を詠んだ。「草の戸も」の句を発句とする連句の初めの8句を草庵の柱に掛けておく。(現代語訳)

 

マチンの公式で円周率

近似式

円周率を求める式の研究は古来から盛んです。今からでも遅くはなく、収束が速い簡潔な式を見つければ、歴史に名を留めるかも知れません。今回は、今でも円周率の計算に使われるマチンの公式を使ってみます。

収束が速い

マチンの公式はとにかく、収束の速い式です。プログラミングは「マチンの公式」ウィキペデア《マチンの公式による計算》を参考にさせて頂きました。arctan(1/5)とarctan(1/239)において、両者の偏角値に開きがあり、計算する項数を調整しています。

小数点以下、14桁まで、多くの算出法と同じ値が得られました。ひところ、算出桁数を競った時期があり、2016年に22.4兆桁の記録があります。

サンプルコード

<div id="pic0" style="width:580px; height:265px;">
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2017/06/MachinFormula.png"></div>
<script type="text/javascript" charset="Shift_JIS">
const c5_239 = [0.2, 1/239];
const multiple = [16, 4];
  var s = "マチンの公式を用いて円周率を算出<BR>"
  document.write(s);
  for(var j=0; j<=9; ++j){
    var u = arctan(j, 0) - arctan(j, 1);
    s = "m="+j+" 項数="+("0"+(4*j+4)).slice(-2)+" PI="+u+"<BR>";
    document.write(s);   /* 円周率を計算・出力 */
  }
function arctan(m, num){    // 逆正接を求める
  var v = 0;
  var s = 1;
  var w = num * 4;          // 0, 1 ---> 0, 4
  c = c5_239[num];
  for(var n=1; n<=(6-w)*m+5-w; n+=2){    // 0:6*m+5, 1:2*m+1
    var g = Math.pow(c, n);
    v += s * g / n;
    s = -s;
    //console.log("N="+n+" V="+v+" G="+g);
  }
  v *= multiple[num];
  return v;
}
</script>
</html>

実行結果

余談

document.write()の引数に式を指定すると文法エラーになり困りました。直前に変数に代入し、その変数を引数にすればエラーになりません。

 

ライプニッツ公式による

ライプニッツの公式により円周率を算出

前回、乱数を用いて円周率を求めました。精度の高い円周率を求める方法は乱数を用いません。「乱数を用いて円周率を求められますよ」ということを図を使って解説してあります。

一様にばらつく乱数を使うことが基本で、偏った乱数では実態に即した円周率は求まりません。一般に乱数関数は言語処理系が持っているので精度の高い円周率を求めるには他力本願にならざるを得ません。

自力本願による解決

円周率を求める無限級数の近似式はたくさんあります。近似式は規則性があり、繰り返し処理で算出可能です。小さい繰り返し回数で精度の高い値を求めることを収束が速い算出法と表現します。収束が速くはありませんが、式がシンプルで有名なライプニッツの公式があります。

総和記号の式を大きく明示すると以下の図のようになります。

今回はこれを使って円周率を求めてみます。古くはFORTRAN、BASIC、Cなどで取り上げられていますのでJavaScriptで記述したプログラミングコードを解説します。

プログラミングコード

<html>
<script type="text/javascript" charset="Shift_JIS">
// ライプニッツの公式を用いて円周率を算出する
const MAX = 50000;              //繰り返し回数
const DIFFERENCE = (0.0001/4);  //差分による収束判定値
var pi4 = 0;                    //円周率格納変数
var previous = 0;               //直前の計算値
var delta;                      //差分

for(var n=1; n<MAX; n+=2){      //1, 3, 5, 7, 9, 11, 13
  pi4 -= (n % 4 - 2) / n;       //
  delta = previous - pi4;
  //console.log("N="+n+" PI="+(pi4*4)+" deleta="+delta);    /* 円周率を計算・出力(解析用) */
  if(Math.abs(delta) < DIFFERENCE) break;                   /* 収束 */
  previous = pi4;
}
  document.write("N="+n+" PI="+(pi4*4)+" delta="+delta);   /* 円周率を計算・出力 */
</script>
</html>

上の図に示した公式をJavaScriptでプログラミングしています。

ライプニッツの公式を凝視すると、各項の分子は1でその符号は正、負が交互に現れます。分母は初期値が1で、等差2の等差数列であることが分かります。このことからすると、繰り返しインデックスは1から始まり、増加値が2であることが望ましいと言えます。

11: pi4 -= (n % 4 – 2) / n; //pi4+= (2-(n % 4)) / n;

上の式は総和記号を実現させる式の肝部分です。総和記号を厳密に解釈すると右のような表現になるが、演算順序を変えると左のように少し単純化できます。

10行目のfor文で制御変数の初期値を1に、増分を2にしてあります。14行目であらかじめ設定した収束値になったかどうかを判断しています。

動作結果から

収束の速い近似式による収束のありさまを下図に示します。200回ほどの繰り返し回数で精度の良い円周率が求まっています。

今回の動作結果から判断すると、仮に設定した収束値が得られるまで20000回かかりました。やはり、収束が遅いことが明らかになりました。

3.1416まで算出するにはかなりの繰り返しが必要になります。



ライプニッツの公式は単純な規則性があり、サンプルとして取り上げられますが、円周率算出の本命とは言い難く、その席はマチンの公式などに譲ることになります。

乱数を用いて円周率算出

ゆとり教育

戦後の詰め込み教育を反省して、ゆとり教育が叫ばれた時期がありました。そのとき、小数演算は難しいので円周と直径の比率は3.14…のところ、3で計算してもよいという通達があったと聞きました。

これでは誤差が大きいのではと気をもんでいましたが、ゆとり教育そのものがとん挫したようです。

乱数を用いて円周率を算出

乱数を用いて円周率を算出する資料は、山のように溢れていますが、仕組みを解説している記事は多くありません。今回、図を描いて丁寧に説明をします。

乱数の種類

乱数には、自然乱数、一様乱数、正規乱数などがありますが、ここではある有限の区間を区切って、その区間内で全ての実数が同じ確率(濃度)で現れるような乱数である一様乱数を採用します。

今回、JavaScriptを使ってプログラミングしますが、一様乱数はMath.random関数が用意されています。

算出の仕組み

一様乱数は0~1(0 <= r < 1)の区間で、同じ確率で発生します。一辺が1の正方形の中に2つの乱数を発生させ、xとyに割り振るとP点が求まります。

そのP点が1/4円の中に入る確率は正方形と1/4円の面積比であるπ/4になります。算出した確率を4倍すれば円周率が求まる仕掛けです。

P点が1/4円の中にあるかどうかは、xとyから半径zを求め、その値が1以下ならば円内にあると判断します。

正方形の面積:1、1/4円の面積:π/4

正しくはx、yの二乗和の平方根の値を求めておく必要があるが、

a、bがともに正で、a<bならば√a<√b
の式が成り立つので平方根を求める必要はありません。

検証

正確な円周率に近づけるにはMAXの値を大きくしますが、この方法で精度の高い円周率を求めることはできません。精度の高い円周率を算出するにはマクロリーン級数による近似値計算などがあります。

サンプルコード

<html>
<script type="text/javascript" charset="Shift_JIS">
// 乱数を用いて円周率を算出する
const MAX = 1000000;
var count = 0;

for(var i=0; i<MAX; ++i){
	var x = Math.random();
	var y = Math.random();
	var z = x * x + y * y;
	if(z < 1) ++count;
}
  /* 円周率を計算・出力 */
  var pi = count / MAX * 4;
  alert("PI="+pi);
</script>
</html>

動作結果

さいごに

乱数を用いて円周率を算出してみました。紀元前2000年ころには古代バビロニアで22/7=3.142857が使われていたといいます。なんぼなんでもπ≒3は暴挙としか思えません。

 

都道府県を知ろう

1都1道2府43県

また、古い話で恐縮です。かつては車や新幹線などの交通機関が充実してないので、世界地図、日本地図への親しみが強かったように思います。

名曲「コンドルは飛んで行く」にあるように狭い大地に縛られることなく、自由に飛んでいきたいという欲求は誰にでもあります。郷愁をそそる名曲は『コンドルは飛んでいく』、『El Condor Pasa』で検索してお聞きください。

江戸時代のお伊勢参りのような無銭旅行もままならず、交通機関が充実しても即、自由に国内旅行を楽しむことは少なく、遠方への旅行ができるようになったのは、経済力が付いた後のことであり、そんなに時間は経っておりません。

今では、地図による予備知識の吸収に重きが置かれなくなったせいもあり、県の位置を正確に把握している人は昔より少ないように感じられます。そのぶん、生きた情報に触れる機会が多くなっています。

そこで、インターネットを利用して、県の位置、県名、県庁所在地名を始め、詳細な関連情報を取得するツールをJavaScriptで作ってみました。

使い方

小学生の地理の勉強に、47都道府県の場所と県名と県庁所在地名を覚えるには、地図上をクリックします。クリックする前に考えていたものと同じかどうかを確認します。県名の前に表示される2桁の番号は沖縄を0とし、北海道を46とする整理番号です。

同一箇所をさらにクリックすると県庁所在地名が表示され、もう一度クリックすると『〇〇県の詳細情報を表示するページにジャンプしますか?』という画面に切り替わります。OKの入力で別ページにジャンプし、戻るボタンをクリックすれば、当該ページに戻ってくることができます。

切り替えボタンをクリックすると47都道府県の県名が一斉に表示・非表示になります。

締めくくりの前に

因みに、県名と県庁所在地名が異なる県は、北海道と東京都を含めると19都道県になります。埼玉県はさいたま市が県庁所在地ですが、漢字とひらがなであり異なるものとしてカウントされています。

北国の人々は西国の地理に明るくなく、同様に西国の人々には北国の地理に暗いとされています。ゲーム感覚で地理や歴史、風土などについて調べてみましょう。

ソースコードは別の機会に、JavaScriptプログラミングの開発を解説する形で他も含めて一気に公開する予定です。

ちょっぴり高度な処理へ

2020年から小学校において、プログラミング教育が本格化します。

子供向けプログラミング言語としてScratch(スクラッチ)、Viscuit(ビスケット)があり、それらを使って県の特長や特産物の絵を表示するプログラムを小学2年生女子生徒が開発しています。頼もしいことです。

簡易言語では指定された県から詳細情報を引き出すことには難儀します。プログラミングを先導する先生にはJavaScriptのエッセンスは理解していただきたいものです。

動作例

 

 

 

JavaScript無名関数の文法

困った体験

最近、JavaScriptで無名関数を使い、思わぬ落とし穴にはまりそうになった体験談についてまとめます。古くからある言語は行単位で記述する習わしでした。

文の終わりは行末であるから、セミコロンのような文の終わりを明示しなくてもよかったのです。

新しい言語は行ではなく、ブロックという考え方に変わり、文の終わりにはセミコロンで区切るようになっています。

その名残りなのか、セミコロンを省略しても文法エラーとして扱わない温情ゆたかなブラウザが多いです。

4つの例題で確認

4つの例題を1つのファイルのまとめました。それぞれの特徴を記します。check0は無名関数の文法に則った記述です。check1は無名関数の終わりを示す’}’の後のセミコロンを省略したもの。check2は’}’の後の2つの改行コードを削除したもの。最後のcheck3は’}’の後にセミコロンを挿入したものです。

<!DOCTYPE html check0.html>
<html>
<script>
calc = function (a, b) {//結果を求め、戻り値を返す
	return a + b;
};						//<==== セミコロン
						//<<< 無名関数の動作確認 >>>
alert(calc(1, 2));		//3が出力される
alert(calc(10, 20));	//30が出力される
</script>
</html>
//----------------------------------------------------
<!DOCTYPE html check1.html>
<html>
<script>
calc = function (a, b) {//結果を求め、戻り値を返す
	return a + b;
}						//<==== セミコロン忘れ

alert(calc(1, 2));		//3が出力される
alert(calc(10, 20));	//30が出力される
</script>
</html>
//----------------------------------------------------
<!DOCTYPE html check2.html>
<html>
<script>
calc = function (a, b) {//結果を求め、戻り値を返す
	return a + b;
}alert(calc(1, 2));		//3が出力される(この行でエラー)
alert(calc(10, 20));	//30が出力される
</script>
</html>
//----------------------------------------------------
<!DOCTYPE html check3.html>
<html>
<script>
calc = function (a, b) {//結果を求め、戻り値を返す
	return a + b;
};alert(calc(1, 2));	//3が出力される(エラーは起きない)
alert(calc(10, 20));	//30が出力される
</script>
</html>

動作結果

check0 文法エラーなし
check1 文法エラーなし。18行の}の後、行末まで有効なコードがないのでセミコロンを自動補完
strict版check1 文法エラー発生
check2 文法エラー発生。30行、}の後に有効なコードがあるのでセミコロンは自動挿入されない
check3 文法エラーなし

厳密な文法チェック法

check1において、厳密な文法チェックをするには、”use strict”指定にします。すると「Uncaught ReferenceError: calc is not defined at check1.html:5」のエラーが出力されるようになります。以下に改訂されたcheck1を示します。

<!DOCTYPE html check1.html>
<html>
<script>
"use strict";
calc = function (a, b) {//結果を求め、戻り値を返す
	return a + b;
}

alert(calc(1, 2));		//3が出力される
alert(calc(10, 20));	//30が出力される
</script>
</html>

さいごに

曖昧なプログラミングでも文法エラーにしないで、期待通りに実行できることはありがたいことですが、check2のように冗長度をなくした時に、突然、エラーが検出されることがあります。

改行コードを削除して、ソースコードの解析されにくさをねらったときに、エラーが起きた場合には、厳格さを欠いたプログラミングを疑ってみましょう。

無名関数の定義は代入文と同等です。「代入文はセミコロンで締めくくる」と覚えておけば、セミコロンを忘れることが少なくなりそうです。

曖昧さを放っておくとセキュリティホールの原因になることがあります。できれば、曖昧な表現をなくしましょう。