ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。プログラミングinventor高級化の始まり前回は本日の日付を表示するコードに注目しました。何度、起動しても同じ結果が得られるので面白みに欠けてましたが、わずかなプログラムコードで西暦年、うるう年に対応した大の月、小の月、7曜日などを表示しました。今回は、前回の機能に加えて時刻を表示してみます。配列を用いて表示文字の色を毎回、変えて表示します。時刻は時々刻々、更新されるので駅前の時刻表示装置に近づき、高級化が始まります。以下に高級化の目玉を上げます。❶表示行が変わるごとに文字の色を変える。❷現在時刻を表示して結果が時々刻々、変わる。❸自動開始では説明文を表示できないので、実行開始のボタンを設けた。❹所定回数の実行後に終了処理を実行する。コードの解説125行目、開始ボタンを定義。TimeOut関数が起動される。27行目、1秒ごとに起動する関数。38行目、14回の実行で打ち止め。49行目、本日の日付と現在時刻取得関数を呼ぶ。614~16行目、時、分、秒を求める。722行目、簡易方法で処理を終了させる。Edgeにおいて、setTimeoutの動作が期待通りになりません。1000);のように第一引数を引用符で括るとどのブラウザでも期待した動作になりません。onClick="TimeOut();">クリックして現在時刻をご覧ください。</button></html>実行例クリックして現在時刻をご覧ください。論理積ビット演算で文法エラー発生個所を突き止める泥臭い方法を述べましたが、もっとスマートなやり方が判明しましたので再掲することにしました。アップロードした記事がローカル環境上における動作と著しく異なるときは文法エラーが起きているとみなさなければなりません。記事上で右クリックし、メニューで検証を選択します。上図の1で示したようなメニューが表示されたら、Consoleを選びます。次に2で示したように、Source欄においてSource-SyntaxErrorCheck-(index)メニューを選びます。右欄にソースコードの287が表示されるようにスクロールします。⇩alert("day="+day):であることを確認します。tokenの次の文字に注目し、最後の文字が’;’であるべきところ、’:’になっていることが分かります。終わりに思いがけない文法エラーが起きた場合、デバッガーを起動することによって、エラー発生個所が明らかになるスマートな例を示しました。参考になれば幸いです。参加するのも一つの方法です。探せば特典を利用して無料ないし無料に近い料金にてセミナーを受けることができます。今あるかどうかは定かでありませんが、定年退職時の特典を活用した高額英会話教室を受講した駅前への高齢留学生がいました。習うより慣れろとは、人や本から教わるよりも、自分が練習や経験を重ねたほうが、よく覚えられるということ。ネットを利用した講座が無数に存在し、意欲があり根気強さを持ち合わせておれば、一定のレベルまでは誰でも到達することが可能です。夏休みが始まったので、習うより慣れろ方式でプログラミングを実践します。何をもって初心者というのか判然としませんが、ここでは高度な知識を持たなくても最終的な結果を得られるように、サンプルコードを数多く参照していきます。熟達者にはどうということもない事柄に初心者は怯え震えて踏み込めないことが多々あります。末尾のQ&Aに『今更、聞けないこと』として、随時、取り上げていきます。下に示した14行のサンプルコードをコピー&ペーストして、Tiny-A.htmlを作成します。次にプログラミングを始めるにあたってで説明した方法で実行すれば、確実に結果が得られます。上図にDate関数の主な機能を示します。そのなかでgetXXXX()はローカル時間、getUTCxxxx()は協定世界時を扱います。うち、月は0~11、日は1~31の値を返します。このような仕様上の特徴は、何故と感じることもありますが、先に開発して定着させた取り決めを受け入れます。11、12行にて本日の日付を表示します。夜中の23時59分55秒に実行させ、10秒後に再び実行させた場合に日付が変わっていることを確認できます。たかが本日の日付表示といえども奥が深いです。ここでは黒と青で表示されますが、曜日ごとに文字の色を変化させるのも一つの楽しみ方です。"+DayWeek[week]+"曜日<BR>";document.write(hiduke);document.write(hiduke.fontcolor("blue").fontsize(7));</script></html>実行例おことわり文章の中で&、<、>などを小文字で記述するとJavaScriptのタグと解釈され、文章が乱れるので大文字で記述していますが、プログラミングする際には小文字にします。Q&A1Q:プログラミングでスペースはいくつあっても問題ありませんか。1A:トークン(予約語や演算子など)とトークンの間のスペースは、いくつあっても1個あるいは0個として扱われ、コードの読みやすさに貢献します。”や’に囲まれたスペースはデータとして扱われます。改行やタブ(Tab)コードもスペースと同等の扱いになります。CalculateValue;2Q:<head>や<body>がないものもありますが、省略してもいいのですか。2A:<head>はHTML文書のタイトルやページの説明を行うヘッダ情報を書き込みます。<body>には、文章や画像の詳細な表示内容を記述しますが、タイトルの指定やボタンの定義がない場合は省略することができます。サンプルコードは紙面の都合もあり、本質でない部分が省略されることが多いので、たくさんのサンプルコードに触れることが上達の秘訣です。上記サンプルはJavaScriptの動作環境を正しく構築すれば、誰にでも動作確認までこぎつけられたことでしょう。次回からは少しずつ高度化、高級化していきます。プログラミングinventorビットについてビットとは情報の最小単位であり、オンかオフ、点灯か消灯、有か無、通電か切電、表か裏などのように二つの状態を表す情報量を言います。1ビットで2通りの状態を表現できますが、ビットを連ねて組み合わせ4ビットならば16通り、8ビットでは256通り、16ビットでは65536通り、32ビットでは4294967296通りの状態を表現できます。ビットを8個連ねた情報単位を1バイトと呼び、アルファベット、数字、特殊記号などをコード化して利用しています。コンピューターにおいて切電か通電、N極かS極など2つの状態からなる2進数を記憶や演算に用いています。コンピューターの黎明期では加算、減算、乗算に較べ、除算は1桁遅い実行時間がかかりました。そのため、除算命令をなるべく使わないことが推奨されていました。ある数を256で除しその余りを求めるには、255との論理積演算で求めるのが適切とされていました。変数のサイズは32ビットに限ったことではありませんが、平均的な例を考えてみます。上図のビット構成や式で分かるように、変数vを256で割ったときの余りはv%256;で求めることができます。JavaScriptで同じような試みをしたところ、思わぬ深みに足を取られましたので、ことの顛末を記録することにしました。上の式でwには青部分の下8ビットはゼロになります。論理積ビット演算と制御処理ステータス変数プログラミングにおいて、処理を実行するとき、その状態をステータス変数に記憶させます。曲線が描画中かそうでないかは1ビットあれば十分です。それ故、左図のように曲線ごとに割り当てます。今回は6,7,14,15ビットを使用し多くの曲線をサポートすることができます。描画開始に描画中ビットをonにし、描画完了後にそのビットをoffにしさらに、描画完了ビットをonにします。特定ビットをゼロにするには論理積演算子(&)を使います。//32ビット変数vの下8ビットをゼロにし、変数wに代入します文法エラーの例示JavaScriptデバッガが出力するエラーメッセージは上に示したように、具体的でかつ発生個所を指摘してくれます。’;’にすべきところを’:’にして文法エラーになった例です。エラーメッセージと発生個所しかし、時には白地に赤で示したような曖昧なメッセージになることもあり、加えて発生場所の数字がよくわかりません。今回の全ソース行は283であり、437は何を示すのか不明です。次に明らかにエラーが起きるようにコードを修正してみました。発生個所を突き止める130行でエラーが起きるようにコードとして許されない文字を入れると発生個所の番号が420に変化しました。先の番号よりも17小さくなり、130+17=147行が文法エラーの原因かも知れないと判明しました。0xffffff00は32ビットの値であり、変数64ビットの処理系では正しい動作となりえず文法エラーとして弾き飛ばしていると推測することができました。論理積演算を用いたコードはローカル環境では正常に動作することが多いですが、サーバーにアップロードすると文法エラーになり、非常に混乱します。token”が出力されます。0xffffff00;に目星を付けます。0xffffff00は32ビットの値であり、変数を32ビットとしたコードは環境依存であり適切ではありません。よって次のように変更します。//環境依存を避けますまとめローカル環境で動作確認できれば、あとはアップロードするだけと甘く考えていたら大きな落とし穴に落ち込みました。環境に依存するコードは避けるべきという教訓を得ました。今回、文法エラーが起きているとき、何故どこで起きているかを探る手掛かりの一つを紹介しました。参考になれば幸いです。最後に愚痴をこぼすことが許されるならば、『ローカル環境でも環境に依存するコードは文法エラーとして弾き飛ばしてくれればよいのに』と言いたいです。以前に、自動運転の模索において、自動運転の取り掛かりについて触れました。運転手のいない自動運転タクシーが実験段階にあります。外国では公道走行中の自動運転車が思い通りに走行せず、事故を引き起こしたニュースが報道されています。前回の記述を発展させ、リサジュー曲線(五葉線)とばら曲線上を走行する車の自動制御について考察します。制御方法ここで行われる制御は、江戸時代の茶運び人形などにも採用された初歩的な方法です。数メートル離れた客に茶菓子を出すロボットに採用されました。客は不動であり、あらかじめ客の位置がロボットに教え込まれていました。何かの拍子に客が移動しても追従できません。お互いに、一定の法則に従った車の動きは相手に逐一、知らされ衝突が起きそうになると、一方の車が進路をゆずる方法です。2台の車の調整を図る今回の制御は茶菓子もてなしロボットよりは進化していると思われます。Arial";ctx.fillText("開始ボタンをクリックして運転開始です。Arial";ctx.fillText("開始ボタン以外は拡張用です。プログラミングinventor数を競う21世紀が産声を上げたころ、ホームページやブログの訪問者数を競う風潮にあり、右図のようなアクセスカウンターを表示することが流行りました。今では数を競うよりも中身の充実度を重要視するようになりました。検索エンジンのBOT(ボット、ロボットから転じて使われた)など人間に代わって作業を行うコンピュータープログラムにより、計数値が異常に上がったりして数自体も信用性が薄らいでいます。遊び心そうはいっても、訪問者数やページビュー数を評価の参考にしているサイト運営者が多いと思われます。訪問者数をそのまま表示しても面白みが少ないので、ページビュー数が500キリ番になったとき、幸運の証として特別な表示が現れる仕組みを施しました。ページビュー数がたとえば、231000,231500,232000になったとき、カテゴリ別に記事タイトルが表示される直前に、下のような幸運を呼ぶ図が現れます。仕組みページビューカウンター、訪問者カウンター、IPアドレスを保存するファイル(例えばcount.txt)を用意します。訪問者カウンターはIs_user_logged_in()関数を使うと、WordPressで会員制サイトを作った際、カスタマイズに利用することができます。このカウンターは解析用に設置しており、直前にアクセスしたIPアドレスと今回のアドレスが異なるときに、カウントアップされます。カウントアップコードは記事を閲覧する大元に設置しているので、ページビューカウンターは無条件にカウントアップされます。今回はサイトマップの固定ページに挿入しました。よって、記事のURLアドレスをブラウザの入力欄に直接、指定して閲覧した場合は、二つのカウンターは増加されません。サンプルコードで苦心した点phpコードでファイルへの書込みや読込みをする場合、fwrite,fread関数を用います。アクセスモードはテキストが基本です。カウンターの値が大きくなると総桁数が大きくなり変動するので、複数回の書込みや読込みで問題動作を引き起こします。そこですべての項目をテキストイメージで保存し、項目をカンマで区切った一つだけのレコードにします。読込み時にexplode関数を用いて文字列をデータに分割し配列に格納します。考察このたび、アクセスカウンターコードをサイトマップの記事に設置したので、ページビューカウンターが実態より少なめに表示されます。これはWordPressのソースコードに手を加えたくなかったからです。正確なページビューカウンターを把握するには、これらのコードをWordPressシステムコードのfunctions.phpに入れるようにすれば精度の高いアクセスカウンターが実現できるものと思われます。ここに閲覧ページ数($total[0])や訪問者数($total[1])を参照して、適切なコードを追加します。Mobileのシャットダウン時の「ご利用ありがとうございました」というメッセージが話題になっています。この話題にことよせて、言葉の重み、特に過去形で締めくくるのか現在形で終わるのかについて思いを綴ります。会話において、これからも良好な関係を継続したいと思うときは、耳障りな言葉を発しないという気配りをすべきです。プロ野球のインタビューでは春のキャンプ時にも専門家のアドバイスを受けたかのようにそつのない受け答えが多いと感じます。以下に気になる例を挙げます。1スーパーやデパートの閉店時、出口で店員から「ありがとうございました」と感謝のお辞儀をされます。2あるスポーツ選手がインタビューの冒頭で試合の活躍を評価され、「ありがとうございました」と応答します。3スポーツ解説者がアナウンサーから選手の活躍の解説を求められたとき、「いや」という口癖から会話を始めます。4ある営業マンが会話を始めるとき、いつもの口癖の「実は」から話し始めます。5市役所で自分の用事で窓口に出かけたのに、「ご苦労様」と上から目線の言葉を掛けられます。言われた方は全くうれしくないのです。6人命に関わるような突発事故発生時に、「就業規則違反になる」と言って人助けに加わりません。例証に独善的な説明を加えます。❶「ありがとうございました」という感謝の言葉はあまりにも普通ですが、なにか1回限りのような気がします。二度目がなくても構いませんとのニュアンスを感じます。商売はリピーターによって支えられるとも言われ、二度以上の来客はありがたいはずです。「ありがとうございます」、「いつもありがとうございます」という方が優れています。これには実話があります。順調な業績を重ねています。《「ありがとうございました」でなく「ありがとうございます」と言って来客に感謝しなさい》と朝礼で訓示があったと聞きました。感謝の言葉の先頭に「まいど」や「いつも」を加えると過去形での言い回しが不自然に感じます。❷前項とほとんど変わりませんが、「ありがとうございました」はインタビューの最後ならば、違和感は少ないですが、過去に何度かインタビューを体験したり、体験ゼロでも、これからたびたびあるかも知れないとの思いが強ければ、「ありがとうございます」がより適切と思われます。現在形にすると、今回に対するお礼とこれからもよろしくお願いしますとの意を汲み取ることができます。❸「いや」、「いな」、「しかしながら」、「でも」などの反語は、最終的には肯定するのだが、否定から始めてその差を強調する場合などに使われると感じています。それなのに口癖で「いや」から始められると直前の会話が否定されたかのように感じられ、穏やかでない雰囲気になります。❹「実は」は今まで表に出さなかった(隠していたのだ)が、「これから正しいことを言います」とのニュアンスを感じさせます。いままで欺いてごめんなさい、あなただから真実を話します、選ばれた人だけに打ち明けますなど良くも悪くも不透明な雰囲気を醸し出しています。多用すると信頼度はゼロになります。❺事務的な言葉にも暖かみがないと時代の流れに乗り遅れます。❻何とかの一つ覚えのごとく、野暮な行動の言い訳にありふれた言葉を使うのはいかがなものでしょうか。優先順位を考えた行動、バランスの取れた行動を心がければ何をすべきかは明らかになります。おわりに最後に元気の出る音楽を聴きながら締めくくりましょう。作曲者:ilodolly作曲者のことば:『ケルト風の明るい楽曲です。作物がたくさん実り、それを収穫し喜んでいるという場面をイメージして制作しました。』http://aidesign.lolipop.jp/wp-content/uploads/2016/07/46e846ed9c0ac8b841b5a75a77a7677e.mp3その人が怪しいかそうでないかは一挙一動で分かると言われています。見込み違いもあります。軽く使っている口癖が違う意味にとられることは損です。自分の口癖が会話の相手にどう伝わっているかを検証する機会になれば幸いです。大学のスポーツイベントにおける優勝者インタビューでも、適切なレクチャーを受けていればもう少しアピール度の高い受け答えをしたことでしょうと感じるときがあります。受験生誘致にしのぎを削っている昨今、広告塔の役割に総合的な経営戦略を加味してもよいのではと考えます。Playerなどを使って聴きたいときに聴きたい音楽を聴くことができます。電子式福引き機により、あたりくじに応じた音楽を鳴り響かせたい時や誕生日の朝7時に、当人のお気に入り音楽を自動的に流すには専用のアプリを作れば解決します。前回の《プログラミングを始めるにあたって》において、準備するツールや予備知識について語りました。今回は実用的なもう少し進化したJavaScriptプログラミングを考えてみます。プログラミングのねらい音楽会の演奏画像を描画するなかに、音楽記号をランダムに表示し、クラシック曲を流します。何度も再生可能なように仕立て上げます。</audio></html>コードの解説11行:html文書であることを明示する。23~4行:htmlのfontタグでテキストを表示する。35行:scriptコードを記述すると宣言。文字コードはシフトJISで保存される。46~10行:定数を定義する。511~14行:画像や音響ファイルを先読みする。615~25行:変数を定義する。varはローカル変数を定義するものだが、最外側で定義しているので13~24行の変数はグローバル変数になる。722行:draw関数で使う画像ファイルの読込みが終了するのを待つために、setInterval関数を利用してdraw関数を起動する。827~42行:draw関数で演奏会の画像を描画したり、楽譜記号を描く。943~57行:曲の再生を開始/停止する処理。1058~69行:演奏の進行を表示する。1170~76行:楽譜記号を描く関数。1277行:script定義の終了。1378~80行:cssを定義する。1483行:canvasを定義する。1584~85行:曲の開始/停止を処理する。1687~88行:オーディオファイルの読込み仕様を定義する。1789行:html文書の終了。おわりに実用性を考慮したプログラミングとして、著作権の心配がないクラシック、ショパン作曲、ワルツ第6番『子犬のワルツ』を取り上げました。プログラミングとしては高度な部類に属すると言えます。画像や音響データファイルのサイズは大きく、読込み時間を必要とします。動作の手順を考えておかないと音や画像が出ないことがあります。演奏終了後にふたたび再生可能なようにするとコードサイズがどうしても大きくなります。その他にポスター画像としてサムネイルを表示すれば、実用的なアプリケーションに近づくものと思われます。プログラミングinventorインタープリタープログラミング言語において、プログラムコードに直接、働きかけて即、実行結果を得られる翻訳言語ツールをインタープリターと言います。インタープリターではBASICという言語が一世を風靡した時代があり、ビル・ゲイツ氏はBASICをパソコンへの移植にトップを切って成功し大富豪への道を開きました。コンピューター言語の種類インタープリターとスクリプトとの違いやインタープリターと対比するコンパイラについての論評は他の記事に譲ります。JavaScriptについてWebアプリケーションの開発言語には、Java,JavaScript,C#,C++,PHP,Python,Rubyなどがあります。開発言語の利用率において、ソフトウェア開発プロジェクトのための共有ウェブサービスであるGitHub(ギットハブ)の発表では、JavaScriptが第一位を占めています。BASICは先頭のBがBeginnerであったためか、初心者にも理解しやすいなどと喧伝されましたが、当初のBASICはブロック構造という考えがなく、GOTO文を多用し拡張性を考慮していないなどの不満が高まり、次第に利用率が低下しました。対して、JavaScriptは多くの言語の優れたところを取り入れ、ここ数年、Webアプリケーションの開発としてクローズアップされています。長年、多くの言語に親しんできましたが、JavaScriptによるプログラミングは少ないプログラムコードで制御や処理を実現できるという特長があります。昔のアセンブリ言語によるプログラムに比べると1/10おろか1/100のコンパクトサイズになっています。オブジェクト指向言語の処理系が多くの機能をライブラリに内包しているので、黎明期の言語に比べてプログラミングのしやすさが格段に向上しています。JavaScriptによるプログラミングの準備プログラミングを始めるに当たり、JavaScriptを選ぶのも一つの方法です。準備のための経費はゼロといってもよいでしょう。用意するものを以下に示します。1テキストエディタを用意する。パソコンについているメモ帳で十分だが、大作のアプリ開発に備えフリーソフトGreenPadなどが推奨される。2「設定」の「コンテンツの設定」からJavaScriptを有効にする。3HTML5の仕様に則ったJavaScriptコードファイルを作成し、ファイル拡張子をhtmlにして保存する。Sample.htmlを作成する。下に挙げたコード2例を含め、ブログや解説書に掲載されている動作確認済みのサンプルコードをコピー&ペーストする。4エクスプローラーなどのファイル管理ツールで保存したファイルにカーソルを当て、JavaScriptプログラムを実行する。JavaScriptを有効にした場合、拡張子がhtmlであればJavaScriptが実行される。5首尾よく実行になったら、少しずつ機能を強化するなど高級化を図る。本格化への移行プログラミング解説書サンプルコードを走らせるまでは容易に進むことができます。機能の高いアプリケーションを作成するには、多くの先達が発表している既存のプログラムコードに接することにつきます。そのコードを入手して動作させましょう。その際、ファイルの保存文字コードに気を配ることが必要です。文字コードはShift_JISかUTF-8コードが多いです。シフトJISはアンダースコア(_)でUTFはハイフン(-)を使うことを知らなければなりません。大作を開発するには機能の高いテキストエディタやプログラミング解説書の一読も欲しいところです。サンプルコード以下に等差数列の総和をJavaScriptで求めるコードです。等差数列の総和はn*(n+1)/2で求めることができますが、0~9までを10回加算して算出しています。求めた結果を合計値と計算値として表示します。"+w);</script></html>考察10項の等差数列の総和は10回の繰り返し加算でも算出時間はかかりませんが、項数が100万にもなるとそれなりの時間がかかるので、n*(n+1)/2による算出が優れています。単純な加算が重要な役割をする例を次項で示します。n回繰り返しによる算出方法は次のような場合に必須です。10個の配列の総和を求める規則性のあるデータの集まりを配列といいます。10個の箱に入っているボールの合計を求めるには、10回の加算をします。前回のサンプルコードを改良し、配列の扱いをコードに反映させます。10個の箱10個の箱に入っているボールの数に規則性がないのならば、地道に加算することになります。サンプルコード2規則性のないところに、アルゴリズムは成立しません。愚直に配列要素の値を加えていきます。10個の箱のボール数を加算し、合計総数を表示するJavaScriptコードを示します。"+t);</script></html>サンプル実行結果おわりにJavaScriptは言語仕様の制定などにおいて、全世界の技術者が協力して作っており、BASICの立ち上がり時とは趣を異にしています。デバッグの環境も整備されています。JavaScriptなどのスクリプト(インタープリター)言語は、ソースコードが丸見えになるという問題点を残しているものの、アプリケーションの開発には極めて効率の良い言語であるといえるでしょう。ものづくり筆耕ブログinventorマンドリンとはマンドリンは弦楽器のひとつで、4複弦(8本)からなるギターよりも小ぶりな楽器です。ギターのように和音を奏でることは苦手な楽器で、主にメロディーを担当しソロ演奏よりも合奏に似合います。イタリアなどで普及したようです。ロシアには音質がマンドリンに似ていて、形が角ばったバラライカと呼ばれる弦楽器があります。ほかにリズム楽器などがあり、指揮者のもと、全員の呼吸が一致したときは最高の気分になります。複数の弦楽器、管楽器および打楽器の編成による音楽を演奏するオーケストラにおいて、コンサートマスターといえば第1ヴァイオリンの演奏者が務め、演奏前のチューニング(音合わせ)をまとめます。マンドリンはヴァイオリンやピアノなどの楽器に比べて地味な存在です。それでも、マンドリンを中心にしたマンドリンクラブが作られ、演奏会が開催されます。合奏では打楽器やトライアングルが加わると演奏に厚みや深みが増し、強い印象を与えることとなります。過去の作曲者がマンドリンをフィーチャーする(特徴づける、際立たせる)大曲を手がけたことは多くありませんがないことはないのです。ヴィヴァルディは江戸時代、4代徳川家綱将軍の頃に生まれた音楽家であり、先の協奏曲を残しています。上記曲の著作権は戦時加算条項など戦争の負の遺産を加えたとしても、とうの昔に消滅していますので、以下に掲載します。http://aidesign.lolipop.jp/wp-content/uploads/2016/07/viva_mandocon425-1.mp3作曲者が死後、50年や70年を超えていても、編曲者や演奏者が現存している場合もあり、著作権の扱いは厄介です。ヴィヴァルディの名曲を聴くには、イ・ムジチ合奏団によるヴァイオリン協奏曲『四季』が有名ですが、たまにはマンドリン協奏曲に想いを寄せましょう。マンドリンのクローズアップ古い話で恐縮ですが、倍賞千恵子の青春歌謡曲《下町の太陽》でマンドリンが一躍、注目を浴びました。