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

プログラミングの初歩6

コンピューター版万華鏡

夏休みの自由研究としてコンピューター万華鏡の初期バージョンが完成しました。クリアした課題は以下の項目です。

  • タイトルを付ける。
  • 重厚なBGMを流す。
  • BGMの参照を明記する。
  • 円筒万華鏡を模す。
  • キーボードでも背景色を反転できる。
  • メニューを表示する。
  • 参照した著作物のクレジットを表示する。
  • 著作権表記とバージョン情報を付記する。

万華鏡(錦眼鏡)を動作

下の図をクリックすると別ウィンドウでコンピューター版万華鏡の実行画面が現れます。

新しい画面ではマウスとキーボードにより万華鏡の描画に変化を付けられます。BGMの再生ボタンをクリックしてゆったりした雰囲気でお楽しみください。

  1. マウスクリック: カンバスの背景色を「黒」「白」のいずれかに切替
  2. 「R」キー: マウスクリックと同じ機能
  3. 「スペースキー」: 残像・ぼやけを4段階に変更
  4. 「H」キー: ステージの回転を止める(停止時に押すと再開)
  5. 「P」キー: 画面イメージをPNG画像として保存
  6. 「▶」ボタン:BGM再生
  7. 「⏸」ボタン:BGM停止
  8. 「←」ボタン: このページに戻る

 

 

動作コード

<!DOCTYPE html>
<html>
<body>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KaleidoSimple.html for p5.js</title>
</head>
<audio id='s0' style="float:left;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/BADARZEWSKA-TheMaidens-Prayer.mp3"
               loop controls controlslist="nodownload"></audio>
<div style='float:left; width:310px; height:50px; font-size:18px; color:darkcyan; border:0px solid blue'>&nbsp;バダジェフスカ作曲&ensp;乙女の祈り
<span style="font-size:12px; color:navy; vertical-align:top;"><br />&nbsp;R:背景色を反転&ensp;△:残像・ぼやけ変化&ensp;H:回転を制御</span></div>
<DIV style="position:relative; clear:both;">
<img style="position:absolute; left:0px; top:0px; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
<div id="m0" style="position:absolute; left:0px; top:0px; font-size:28px; color:pink; font-weight:bold; line-height:1.2em;">幻想的な<BR>万華鏡</div>
<img id="d0" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:0px;top:40px; overflow:hidden; clip:rect(0px 60px 86px 0px)">
<div id="m1" style="position:absolute; left:440px; top:0px; font-size:24px; color:navy;">Kaleidoscope</div>
<img id="d1" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:430px;top:20px; overflow:hidden; clip:rect(0px 160px 86px 60px)">
<div id="m2" style="position:absolute; left:0px; top:550px; font-size:24px; color:navy;">参照:p5.js<BR><span style="font-size:14px; vertical-align:top;">&copy;TacM,2018 ver0.01</span></div>
<img id="d2" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:-170px;top:455px; overflow:hidden;clip:rect(0px 215px 86px 160px)">
<div id="m3" style="position:absolute; left:430px; top:570px; font-size:24px; color:navy;">夏休みの課題例</div>
<img id="d3" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/illust4.png" width="300" height="86" style="position:absolute; left:300px;top:485px; overflow:hidden; clip:rect(0px 300px 86px 215px)">
</DIV>
<div style="position:absolute; left:0px; top:670px;">
《p5.jsはLauren McCarthyによって作成され、共同編集者のコミュニティによって開発され、 Processing FoundationとNYU ITPのサポートを受けています。》
</div>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/sketch2.js"></script>
</body>
</html>

 

動作コードの解説

 

  1. ①~⑧行、htmlで記述、ヘッダー、タイトル情報。
  2. ⑨~⑩行、BGM「乙女の祈り」を読み込み、再生・一時停止、音量の各機能を制御するコントロールを表示する。
  3. ⑪行、BGMの作曲者等を表示する。
  4. ⑫行、マウスとキーボードによるメニューを表示する。
  5. ⑬~㉓行、画像にテキストを重ね書きする指示を表示する。
  6. ⑭~㉒行、四隅に絵とメッセージを表示する。
  7. ㉔~㉖行、p5.jsのクレジット。
  8. ㉗行、ライブラリーp5.jsの縮小版を読む。
  9. ㉘行、p5.jsの制御部。
  10. ㉙~㉚行、タグを閉じる要素。

ひとこと

ソースコードのほとんどは公開されているものにリンクしています。sketch.jsに小機能を加えてsketch2.jsにしました。

 

考察

夏休みの自由研究として自前の作成コードが少ない割には、HTMLの数種のタグを使いこなしており難解であったことでしょう。

既存のものを集めてより付加価値の高いものを作り上げるには総合力が必要です。

不明な点は熟達者に教わるなりして完成されるように願っています。

今回は動的な表現ですがJavaScriptについてほとんど触れていません。これを踏み台にして、プログラミングについて興味が深まることを願っています。

 

プログラミングの初歩5

先人の作品を模倣

何かを表現したいと考え、絵を描こうとします。その前に絵に対する造詣を深めるために美術館巡りをします。それと同様にプログラミングにおいても先人の優れた作品に触れることが習得への近道になることがあります。

この回ではp5.jsという優れたライブラリーをそっくり使って、コンピューター版万華鏡を描画します。

p5.jsとは

Lauren McCarthy氏はプログラマでない人たち(アーティスト、教育者、初心者)がJavaScriptを簡単に利用できるようにするためにライブラリとしてp5.jsを開発して世に公開しました。

開発機構からのP5.jsインストール方法画像

ここでは、開発の経緯や歴史についてはこれ以上、深入りしません。McCarthy氏はGitHubにおいてp5.jsのこと以下のように説明しています。

ソフトウエアのスケッチブックを目指しているp5.jsは描画に関する一式の機能をすべて備えています。さらに、描画するカンバスには制限がありません。ブラウザのページ全体をスケッチに使えます。このため、p5.jsはアドオンのライブラリを持っています。アドオンによって、テキストやインプット、動画やウェブカメラ、音声などのHTML5のオブジェクトを扱えます。

 

p5.jsを導入する

p5.jsはかなり大きな山と言っても過言ではありません。プログラミングの初歩者にとっては高い垣根です。ここでは中味はともかく、高級電卓を使う感覚で進めてまいります。

 

上記のサイトを参考にしてp5.jsを導入します。

p5.jsでコードを書く

夏休みの課題として、いきなりコードを書くのは難儀です。ここでは先人のコードをそのまま参照させてもらいました。ねらったような動作が得られたら次へのステップを考えましょう。

p5.jsはクレジット(出版物,新聞記事,テレビ番組などに使用された著作物等の出所を明示する行為)すれば非商業目的で再利用することができます。

コンピューター版万華鏡

下の図をクリックすると別枠でコンピューター版万華鏡の実行画面が現れます。従来のようにHTMLコードを埋め込んでも期待した動作にはなりません。当ライブラリーはローカル環境で実行するのを前提にしているのでしょうか。htmlファイルをアップロードしてリンクを貼って実行しています。

新しい画面でマウスとキーボードにより万華鏡の描画に変化を付けられます。

  1. マウスクリック: カンバスの背景色を「黒」「白」のいずれかに切替
  2. スペースキー: 残像・ぼやけを変更
  3. 「H」キー: ステージの回転を止める(停止時に押すと再開)
  4. 「P」キー: 画面イメージをPNG画像として保存
  5. 「←」ボタン: このページに戻る

 

サンプルコード

<!DOCTYPE html>
<html>
<body>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Psychedelic Kaleidoscope 3 for p5.js</title>
</head>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/libraries/p5.min.js"></script>
<script src="https://infosmith.biz/scripts/035-kaleidoscope/sketch.js"></script>
</body>
</html>

 

サンプルコードの解説

  1. ①~⑧行、htmlで記述、ヘッダー、タイトル情報。
  2. ⑨行、p5.jsライブラリーから冗長度を省いたファイル。
  3. ⑩行、制御ソースコード、初期化時に1回動作するsetup関数とフレーム起動タイミングで毎回起動するdraw関数を含む制御処理コード。
  4. ⑪~⑫行、タグを閉じる要素。

ひとこと

ソースコードはすべて公開されているものばかりです。まずはサイケデリックな描画が出現することです。先人のコードを眺めて自分の引き出しを豊かにしましょう。

 

魅力的な万華鏡にするには

  • タイトルを付ける。
  • 重厚なBGMを流す。
  • BGMの参照を明記する。
  • 円筒万華鏡を模す。
  • キーボードでも背景色を反転できる。
  • メニューを表示する。
  • 参照した著作物のクレジットを表示する。
  • 著作権表記とバージョン情報を付記する。
  •  

    上記は次回以降にクリアすべき課題と考えています。

     

    電子絵日記の作り方

     

    用意するもの

    1. パソコン、またはスマートフォン。
    2. テキストエディタとテキストファイルの作り方の知識。
    3. 画像編集ソフトとその扱い方。
    4. HTMLのちょっとした知識。
    5. プログラムを動作させるローカル環境。
    6. 記事(プログラム)を公開する環境。

     

    補足説明

    パソコンやスマホはインターネットにつながっている必要があります。テキストエディタは単機能のもので十分です。

    HTMLについては《プログラミングの初歩1》などの記事を参照してください。

    プログラムを動作させるローカル環境とは記事を公開する前に、自前のパソコンだけで試しに実行させる環境であり、ごく一般的なパソコンならば、暗黙のうちにこの環境にあります。

    まずはローカル環境で絵日記を作成することが最初の目標です。

    最後に世界中の多くの人に読んでもらうためには、記事を公開しなければなりません。公開サーバーにアップロードすることです。

    学校など投稿を受け付けているサイトにアップします。SNSを運用するための十分な知識が得られたら自分のホームページを持ちましょう。



    望んでもいないのにやたらと広告がつくことに抵抗がなければ、上に挙げた無料のブログやホームページを運営することができます。

    そこには壁にぶち当たっても難題を自ら解決する力と意欲が要求されます。

    解決策はほとんどネット上にありますが最適解を見つけるまでには地道な努力が必要です。

    まずは高いハードルは見送り、徐々に力を養いましょう。

     

    具体的な作成手順

    1. 絵日記の原稿用紙を作る。用紙の上部にはヘッダー領域、次に絵を載せる領域を用意する。最後に本文領域とする。日本語の絵日記ならば上図のように縦書きが多く、最上部に絵日記画像、その下右にヘッダー、左側に縦書きの本文が定番ですが、縦書きは初心者にとってハードルが高く今回は、見栄えよりも作りやすさを重要視して横書きにする。

      紙媒体の原稿用紙は単色が割安になるが、電子媒体は色付きでも変わりないのでお祭り騒ぎのような色は避けながら落ち着いた色を選択する。



      上の画像はWindowsに付属しているペイントで作成。

    2. 絵日記画像を作る。お絵かきソフトなどで手書きする雰囲気で作れれば最高。絵日記作品をコンクールなどに出品する場合はおすすめできないが、そうでなければ著作権フリーなカット集などから実際に体験した内容と似た画像を確保することも可能。
    3. 絵日記の文章を作成する。テキストに絵文字(📖)を入れてインパクトを付けることもできる。
    4. 上から、日付、絵日記画像、本文の順に配置されるようにposition absolute属性を利用して調整する。
    5. ローカル環境で動作を確認する。
    6. 記事を公開する。

     

    動作例

    1. 家族四人で花火大会に出かける日の朝の情景を日記にした。
    2. そのほか、花火大会会場への道すがら峠の茶店における一家団欒を付け加えた。

    電子絵日記のサンプル-01

    8月11日(土) 快晴
    お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。

    途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。

     

    サンプルコード

    <html>
    <head>
    <style type="text/css">
    .figure {
    	background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/07/enikki-82.png");	/* 絵日記原稿用紙 */
    	width:  450px;													/* 縦横を原寸に */
    	height: 633px;													/* 縦横を原寸に */
    	font-size:26px;													/* フォントサイズ */
    }
    </style>
    </head>
    <body>
    <span style="font-size:32px">電子絵日記のサンプル-01</span>
    <Div style="position:relative;">
    <div class="figure"><span id="mdy" style="position:absolute; left:150px; top:29px;">8月11日(土) 快晴</span></div>
    <img style="position:absolute; left:65px; top:75px; width:320px; height:240px" src="http://aidesign.lolipop.jp/wp-content/uploads/2017/08/enikki5.png">
    <div style="position:absolute; left:22px; top:330px; width:408px; height:270px; border:0px solid blueviolet; font-size:21px;"><span>お盆前に、おとうさん、おかあさん、ぼく、いもうとの四人で花火大会に出かけてきました。その日は早起きして、近くの広場でラジオ体操に参加し、となりのおねえちゃんからハンコを押してもらいました。</span>
    <p>途中、峠の茶店によって、いもうととぼくはかき氷、おとうさんとおかあさんはところてんを食べました。</p>
    </div>
    </Div>
    </body>
    </html>
    

     

    さいごに

    事を仕上げるには階段を上るように一段ずつ進めることが大切です。絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。

    img要素とは

    HTML文書の本文に画像を表示させたい場合は、「img要素」を使います。img要素は、imgタグを使って、下のように書きます。

    <img src=”URL” width=”幅” height=”高さ” alt=”代替テキスト”>

     

    テキストエディタによるテキストの編集に加えて、簡単な画像を扱えるようになると記事が華やかになります。画像の扱い方を習得しましょう。

     

    プログラミングの初歩4

    画像をかたどる

    画像を象るにあたり、ハート型写真を作るで画像を重ね書きする方法をまとめてあります。

    画像は一般に長方形で管理されます。時計など、丸い画像は内部的に細工が施されて円形に描画されます。

    長方形の風景画像をひょうたん形に描画したい時があります。

    また、象る形をある条件によって変更する場合は、元の画像を変更せずにフィルターの働きをする効果画像を変更する方法があります。

    この辺りの確認できた事柄をまとめます。

    縁どる方法

    画像に柔らかな滑らかな味付けをするために、角を丸くするborder-radius属性があります。角を滑らかにすることを面をとると言いますが、それを幅、高さの50%まで拡大すると楕円、真円に縁どることができます。2例を以下に挙げます。ソースコードはひとつにまとめました。

    クラシック 9枚/全48枚

    このdivが丸くなります。

    border-radiusを使用したサンプル

    <style type="text/css">
    .kadomaruR {
      width: 400px;
      height: 60px;
      background-color:aliceblue;
      border-radius:10px;
      border:2px solid purple;
      color:green;
    }
    .kadomaru {
    	background: lightcyan;											/* 背景色をライトシアンに */
    	border: 5px solid orange;										/* 枠線を付加 */
    	background-position: left top;									/* 横長画像の左上を基準に表示 */
    	border-radius: 50%;												/* 角丸半径を50%にする(=円形にする) */
    	width:  300px;													/* 縦横を原寸に */
    	height: 300px;													/* 縦横を原寸に */
    }
    </style>
    <!----------------------------------------- border-radius, four corner ------------------------------------->
    <div class="kadomaruR">
    <span style="font-size:40px;">クラシック</span><span style="font-size:16px;color:red;"> 9枚/全48枚</span>
    </div>
    <!----------------------------------------- border-radius, sheerCircle -------------------------------->
    <BR>
    <div class="kadomaru">このdivが丸くなります。</div>
    

    重ね書きによる画像縁取り

    border-radiusによる画像縁取りはひょうたんのような複雑な形に象るには不向きです。このような場合、重ね書きによる縁取りが似合います。以下に日本3景の天橋立の画像を加工前の画像とともに円形に縁どった例を示します。

    加工前の画像
     

     

    画像重ね合わせ方式

    重ね書き画像縁取りサンプルコード

    <html>
    <head>
    <style type="text/css">
    .figure {
    	background-image: url("http://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png");/* 表示する画像 */
    	width:  600px;													/* 縦横を原寸に */
    	height: 600px;													/* 縦横を原寸に */
    }
    </style>
    </head>
    <body>
    <span style="font-size:24px">画像重ね合わせ方式</span>
    <Div style="position:relative;">
    <div class="figure"></div>
    <img style="position:absolute; top:0; width:600px; height:600px;" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
    </Div>
    </body>
    </html>
    

    縁取り画像の作り方

    天橋立を円形に縁どる図形(poly-99.png)の作り方を挙げます。Windowsに備え付けのペイントなどの図形エディタで図形メニュー-楕円形を選びます。

    線の幅を8pxにして楕円の縦横長さを同値にして真円を描きます。その後、中央部を透明色にして保存します。

    重ね書きの推移

    画像AにBを重ね合わせるとCの状態になります。

    JavaScriptのcanvasにおいて、globalCompositeOperation属性を利用するともっと高度な重ね合わせの描画をすることができます。この象り法は長方形に表示される万華鏡を円形に描画する手法に応用します。

     

    群雄割拠の戦国時代

    将棋界のタイトル

    将棋界には8大タイトルがあり、昨日、豊島棋聖が誕生して8人が一つずつタイトルを分け合う群雄割拠の戦国時代に突入しました。相撲界において1年6場所制で6人の優勝者が出現するなどはあり得ないのではないだろうか。

    レベルの低い優勝争いで時の運が大きく影響してコロコロ優勝者が変わることをどんぐりの背比べなどと言います。一方、力が拮抗した実力者(豪傑、英雄、英傑、風雲児、国士無双…)がしのぎを削りあって覇権を競い合っているさまを群雄割拠といいます。将棋界はまさに群雄割拠であり、ファンとしてはワクワク感でいっぱいです。

    コストパフォーマンス

    話が飛びます。昔、ハイセイコーという人気競走馬がいましたが、賞金の高いビッグレースはタケホープにもっていかれました。大衆は雑草のような存在のハイセイコーを応援しましたが、世の中、思い通りにいかないものだと知らされました。

    また、人気の高い巨人戦のために力を温存すべく、他のチームとの対戦は全力投球を控えて立ち向かった熱血投手もいたようです。

     

    将棋の話に戻って、1年間の全対戦勝率が5割を切るタイトル保持者が存在します。体調やスランプのせいでしょうかコストパフォーマンスの高いライフスタイルです。常態化すれば人気面で不利になることでしょう。人気があれば将棋以外のコマーシャルで稼ぐこともできますがそれがかなわなくなります。

    マージャンにおいて安い点で数多く上がっても勝てません。将棋界で賞金の高いタイトル戦に全力を傾注するのは自然です。多くのタイトル戦には参加資格があり、予選を勝ち上がらないと決勝には進めません。ぽっと出のにわか馬鹿力で永続的な活躍は難しいです。

    将棋界のスポンサー

        名 称 主催(協賛)
    1. 王将戦 スポーツニッポン新聞社、毎日新聞(囲碁・将棋チャンネル)
    2. 棋王戦 共同通信社
    3. 叡王戦 ドワンゴ
    4. 名人戦 毎日新聞社 朝日新聞社(大和証券グループ)
    5. 棋聖戦 産経新聞社
    6. 王位戦 新聞三社連合
    7. 王座戦 日本経済新聞社
    8. 竜王戦 読売新聞社

     

    将棋界のスポンサーは新聞社が圧倒的です。ラジオ時代に始まったNHK杯はタイトル戦ではありませんが普及などに大きな貢献があったことでしょう。

    女流プロのタイトル戦は省略しました。それにしても待望の女性棋士第一号は誰になるのでしょうか。女流棋士でなく女性棋士です。陸上100mで初めて10秒の壁を破ったジム・ハインズのように長く記憶にとどまることでしょう。

    巨人・大鵬・卵焼き

    巨人・大鵬・卵焼きは子どもに人気のあるものの代名詞でした。その当時、スポーツの世界では強大な力を持つチームが連続優勝して人気を独占していましたが、その後、変わり映えのない勢力図に飽きがきて混戦模様になったと記憶しています。

    プロ野球でリーグ優勝しても監督交代があり、「勝てば官軍、負ければ賊軍」と単純にはいかないようです。乱世は高みの見物者にとって最高の贈り物です。

    プログラミングの初歩3

    幻想的なコンピューター万華鏡

    めざすべきコンピューター万華鏡の動画を見つけました。15秒の『幻想的なコンピューター万華鏡』です。

    このサンプルは長方形に描画されていますが、万華鏡だから円形に表示できたらいいかなと考えています。そして、もう少し明るくいろっぽいものにし、15秒で終わらず無限リピートにしたいです。

    望むような幻想的コンピューター万華鏡を描画するには、HTMLとJavaScriptの知識を深める必要があります。

    まずは地道に進むべく今回も動きが含まれませんが、町内会会報をHTMLで作成する例を示します。

    回覧板で町内会の折々のお知らせを流す原稿をHTML文書で作成します。冒頭に町内会のロゴマークヘッダーを入れました。

    この部分は毎回更新することがなくロゴマークを微細に表現するために画像がふさわしいです。

    町内会会報を作る

    町内会の会報は高価なドキュメント作成ソフトを持たずとも、見やすくインパクトあるものを作ることができます。ドキュメント作成と言えば、WORDや一太郎を思い起こします。

    WORDとセットで扱われる表計算ソフトのEXCELは動作が軽いことや勘違い、知名度の高さからドキュメント作成に使われています。行政機関への申請書などをダウンロードする際、WORD、一太郎、PDFの3種の様式が用意されています。EXCELの申請書はありません。

    HTML(エイチティーエムエル、HyperText Markup Language)は、ウェブページを作成するために開発された言語ながら、一般文書も作成することが可能です。

    標準化非営利団体のW3Cが策定するHTMLは世界中の多くの技術者によって運営されています。WORD、一太郎は有料で高価です。一方、無料のHTMLにより有料ドキュメント作成ソフトに遜色ない《町内会会報》を作成しました。作成方法を述べましょう。

    テキストエディタを使う

    html文書を作成するez-HTMLのようなフリーのエディタがあります。htmlのことを深く知るにはメモ帳のような単機能エディタを使うとよいでしょう。高機能のHTMLエディタはタグをあまり意識しません。本来はその方が理想的ですが、プログラミングを知るには何もないことで考える力が備わります。

    例題:町内会の会報

    スズラン通り町内会会員様

    文化コミュニティセンターの清掃について

    標記の件について、下記のとおり実施いたしますのでご協力のほどよろしくお願いします。

    項 目 内 容   
    日 時 平成30年7月29日(日)午前8時
    場 所 文化コミュニティセンター
    持参品 鎌、雑巾
    服 装 雑草取り、清掃のしやすい服装

    スズラン通り町内会会長 鈴蘭太郎

    作成日:H30-07-16

     

     

    町内会の会報の解説

    1. 冒頭にロゴマーク入り町内会画像を描画。
    2. 宛先を指定。
    3. 表題を指定。
    4. 主文面。
    5. 詳細内容。
    6. 発信元アドレス。
    7. 作成日。

    町内会会報の詳細文面

    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2017/12/common.css" charset="UTF-8">
    </head>
    <body>
    <DIV style="width:640px; height:1030px; margin-left:20px; border:1px solid blueviolet;">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/kairanHeader.png" width="640px" height="246px">
    <p><span style="font-size:32px;">スズラン通り町内会会員様</span></p>
    <p style="font-size:28px; font-weight:bold; text-align:center;">文化コミュニティセンターの清掃について</p>
    <p style="font-size:28px;">標記の件について、下記のとおり実施いたしますのでご協力のほどよろしくお願いします。</p>
    <p style="font-size:32px;text-align:center;">記</p>
    <table style="font-size:32px;" border=0>
     <tr><th>項 目 </th><th>内 容   </th></tr>
     <tr><td>日 時 </td><td>平成30年7月29日(日)午前8時</td></tr>
     <tr><td>場 所 </td><td>文化コミュニティセンター</td></tr>
     <tr><td>持参品 </td><td>鎌、雑巾</td></tr>
     <tr><td>服 装 </td><td>雑草取り、清掃のしやすい服装</td></tr>
    </table>
    <p style="font-size:20px; text-align:right;">スズラン通り町内会会長 鈴蘭太郎</p>
    <p style="font-size:12px">作成日:H30-07-16</p>
    </DIV>
    </body>
    </html>
    

    目指すはIT版万華鏡

    夏休みの課題としてIT版万華鏡はできるのでしょうか。魚釣りにでかけ成果が何も得られず、帰りは魚屋さんに寄っていくことにならないように頑張りたい。

     

    プログラミングの初歩2

    テキストファイルを作る

    前回、教育熱心な市の取り組みで興味を引く項目に「キャラクタを動かす」、「作品を発表する」がありました。そこでHTMLを使って他の人に情報や意見を伝える文面づくりの例を示します。

    HTMLはC言語のように文章を表示するに当たり、printfやechoのような命令を必要としません。伝えるべき文章を示すだけで済み、ごく小さな作品を以下に示します。

    MySite.htmlによる表示例

    『御朱印』とは、神社や寺院において、参拝の来訪者に向けて押印される印章・印影の事です。押印の他に、参拝した日付や寺社名・御祭神・御本尊の名前などを墨書きします。初穂料(はつほりょう)は祈祷やお祓い、祝詞の謝礼のことですが御朱印の発行料も初穂料といいます。

     

    MySite.htmlは、上に『御朱印』から始まる青字で示した文字だけを使い、文章としてのテキストから成り立っています。表示に味付けをする指定は皆無です。

    実際の表示画像は以下の通りです。改行や文字の装飾はなく素朴な表現です。

    ちょっと高級に

    次に字のサイズや色を変えてみます。このとき、初めてタグ(要素)が出現します。タグの多くは<から始まり/>で閉じられます。人の目につく多彩な表現は多くのタグから構成されますが、慌ててタグを理解しなくても多くのサンプルコードに触れることにより、自ずと習得することができます。

    spanタグによる文章の表示例

    お盆とは正式には盂蘭盆といい、古代のインド語の一つであるサンスクリット語のウランバナを漢字にあてはめて読まれた言葉です。

     

    お盆から始まる文字をspanタグも含めてobon.htmlに納めた内容を以下に示します。

    下の文章はすべてテキストですが画像データにしました。なぜならば、説明するのにタグを示す<や/>が混じると表示が乱れるからです。文字のコピーができませんが内容を忠実に表現しています。

    CSSを代替する

    HTMLで文章を表現するには、表示内容をテキストエディタで編集し、拡張子をhtmlに指定したファイルを作成します。その後、ファイル管理ツール(エクスプローラーなど)により起動・実行する例を示しました。

    豊かな文面にするにはCSSファイルを用意してきめ細かい表現をします。

    CSSファイルはタグ(要素)の中にstyle属性で代替できます。

    このやり方はCSSファイルを共通化して汎用利用する利便性が後退しますが、文書の構造たる骨組み(HTML)と文章への装飾(CSS)を一つのファイルで表現できるのでファイル管理が楽になります。

    当ブログではこれを評価してstyle属性を多用します。

    プログラミングの初歩1

    プログラミングに触れながら歩を進める

    2020年から小学校において、プログラミング教育が必修科目としてスタートします。必修科目とは大げさで算数や国語のような独立した科目ではないような気がしますが、ともかくもプログラミング教育が必須の授業になります。

    最近、電車に乗ってもプログラミングの解説本の広告が目立つようになりました。夏休みを前にプログラミングについて語ります。

    紙媒体書籍は1000円~3000円ほどの料金ですが電子書籍ならば100円~1000円程度です。日本文化を維持する上にも大枚と言わず小枚をはたいてください。

    ネット上にはフリーで役に立つ情報が満載されていますが、玉石混淆を見分けなければなりません。その上、自分のレベルにピタッとはまる難易度のものを選ぶ必要があります。そこで体系的にまとまっていて多くのサンプルコードや画像データが詰まっている解説本をお薦めします。

    無料を望む方へ

    今では電子書籍ならば200円ほどでも手ほどきとして十分な自由研究本が多数あります。

    それでも無料を望む方のためにときどき、通常のブログ記事のなかでプログラミングに触れてみようと思います。ゼロからのスタートは当然でしょうが、コンピュータの操作から語るのは難しいです。やはり、テキストファイルの作成、編集ができることが最低条件です。

    プログラミング教育環境に恵まれている

    肩書を重要視する向きには次項で述べる教育機関で学ぶのがふさわしいでしょう。意欲あるものには道は拓かれ、独自に多くの知識を身につけることができます。

    プログラミング教育環境を整備するに当たり、高額な費用は必要ありません。

    すでにメールのやり取りやデジタル写真の保存ができていれば、ほとんど無料でプログラミング教育環境を作り上げることができます。

    初歩の初歩からスタートするには、テキストファイルの作成と編集などを参照してください。

    なぜHTMLなの

    ここでは、数あるプログラミング言語から将来性のあるHTMLJavaScriptについて語ります。なぜならば、多くの言語を扱うには長期間かかり、費用もまとまったものが必要です。

    それ(本格的な教育)は国から補助を受けた専門の教育機関(大学、専門学校、セミナー主催社など)が受け持ちます。

    HTMLはホームページやブログの記述言語として世界の多くの人々に利用され、初心者にも取りつきやすい言語であり、プログラミング教育を語る上でエポック的な存在だからです。JavaScriptはHTMLとの親和性が抜群でHTMLに動的な記述を加えます。

    ファイル属性について知る

    ファイルには名前が付き、拡張子が含まれます。拡張子はファイルの属性を表しており、拡張子をhtmlにしておくとエクスプローラーはそのファイルをHTMLの規定に則った記述であるとみなし解釈、実行するように取り計らってくれるのです。

    だから拡張子は重要です。拡張子は何十種類もあり、ファイル属性に注視すれば徐々に理解が深まります。まずは拡張子htmlを知ってください。ファイル拡張子とHTMLの関連については、自由研究のはじめ4を参照してください。

    最終目的と準備するもの

    もうすぐ夏休みです。親子合作による手作りの宿題が課されます。かつて、望遠鏡や万華鏡をレンズ、ボール紙などを用意して作った経験があることでしょう。今はキット商品としてのレンズや鏡は入手困難です。

    そこでIT版万華鏡を作ることに挑戦しましょう。用意する素材はパソコンのほか、プログラミングの知識です。

    すぐに高度なプログラミングは高望みですが先ずは「Hello World!」、あるいは日本語で「世界の皆さん、こんにちは!」と文章を作るだけでよいのです。

    絵が満載のやさしいプログラミング解説書を手元におけば最高でしょう。

    余談

    我が国は、欧米列国を手本にして近代化を図り先進国の仲間入りを果たしました。ひたすら追随し多くのことを学びました。これからは技術導入、優れたものを交易するだけでは明るい未来は開けません。自ら考えて難局を切り開く力が必要です。

    考える力を養うために、プログラミング的思考を身につけるためにプログラミング教育は必須です。子女の選択肢を広げるためにも新しいことに挑戦してみませんか。詳しくは次回に注目ください。

    ほおずき市2018

    四万六千日の功徳
    浅草寺発行の御朱印

    7月9日、10日は東京都台東区浅草(あさくさ)の浅草寺境内(せんそうじけいだい)において、夏の風物詩であるほおずき市が催されます。

    この日に参詣すれば四万六千日ぶん参詣したと同じご利益(ごりやく)が得られると言われています。

    しまんろくせんにちの由来は諸説あり、お米の一升が46000粒ほどで一升を一生とかけて一生平穏に過ごせますようにとの願いが込められているようです。

    ほおずきは鬼灯の字があり、鬼灯市なればどこぞの市の名前のようです。

     

     

    御朱印(ごしゅいん)ひとくちメモ

    1. 「御朱印」とは、神社や寺院において、参拝者のために押印される印章・印影の事です。
    2. 押印の他に、参拝した日付や寺社名・御祭神・御本尊の名前などを墨書きします。
    3. 御朱印を拝受するために使用する帳面を、「御朱印帳(ごしゅいんちょう)」と呼びます。
    4. 御朱印帳は大型書店や文具店で買い求めることができます。
    5. 御朱印の発行代金(初穂料)は300~500円が相場のようです。

     

     

    ほおずきを詠う

    鬼灯市で袖触れあひしことの縁  樋口玉蹊子

    ふたごころあり四万六千日の雨  小島千架子

    雨季さなか四万六千日帰依す   石山佇牛

     

    朝顔市2018

    人を惹きつける美人女性

    朝顔はアジサイ同様、色遣いが微妙で何とも言えない味わいがあります。飛び切りの美人ではないがいつも人を惹きつける魅力の女性を思い起こします。

    朝顔市(あさがおいち)は東京入谷(いりや)の鬼子母神(きしもじん)において7月上旬に開かれるものが有名です。

    話し好きな人には恐(おそ)れ入谷(いりや)の鬼子母神(きしもじん)のきめ台詞をタイミングよく発して喝さいを浴びてください。鬼子母神(きしぼじん)という言い方もあります。

    駅名と地名で使い分けているようです。これが絶対正しいということではない見本です。

    朝顔市の情景

     

     
     おしめりや
      朝顔市あさがおいち
       ひとらず

         石川桂郎いしかわけいろう

    HTML動作サンプルコード

    <DIV style="float:left; position:relative; width:400px; border:0px red solid;">
    <div class="h2vr_8" style="width:400px; color:navy;font-size:40px; line-height:2em; font-weight:bolder;">
     <BR>
     おしめりや<BR>
      <ruby><rb>朝顔市</rb><rt>あさがおいち</rt></ruby>に<BR>
       <ruby><rb>人</rb><rt>ひと</rt></ruby><ruby><rb>減</rb><rt>へ</rt></ruby>らず<BR><BR>
         <span style="font-size:20px;"><ruby><rb>石川桂郎</rb><rt>いしかわけいろう</rt></ruby></span>
    </div>
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/07/asagao-5.png" width="400px" height="320px" style="position:absolute; left:0px; top:0px; opacity:0.5;">
    </DIV>
    <DIV style="float:left; position:relative; overflow:hidden; width:180px; height:270px; border:0px gold solid;">
    <div style="position:absolute; left:-560px; top:70px; width:1200px; weight:488px;">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/07/e4e718a86f9ae87f820a7909d0ee171e.png">
    </div>
    </DIV>