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

Programing

夏休み課題例

縦書き文化に親しむ

この記事は夏休みの課題例です。公開サーバーにアップロードすることなく、自前の環境で動作するように配慮されています。我が国の古来からの縦書き文化を尊重する意思が込められています。

電子表現においてこのような解説記事も縦書きで表現する方法もありますがそれは現実的ではありません。ひいきの引き倒しはよくありません。

伝統的な和歌、俳句、習字などの分野で縦書き文化が花開くことを願いつつ、この試みが親子で完成させる宿題のひな型になれば幸いです。

目次

  1. 準備するもの
  2. 表現の構想を練る
  3. 表現する題材を選ぶ
  4. BGMを選ぶ
  5. 具体的な表現方法
  6. 動作例
  7. サンプルコード
  8. 自前の課題を作成するには
  9. 余談
  10. さいごに

準備するもの

  1. パソコン、またはスマートフォン。
  2. テキストエディタによるテキストファイルの編集法。
  3. 画像編集ソフトとその扱い方。
  4. HTMLの初歩的な知識。
  5. マウスイベントを補足するaddEventListenerの知識。
  6. プログラムを動作させる一般的な動作環境。

 

表現の構想を練る

多くの人にアピールするにはテキストの表示に加え、写真や画像を表示すると存在感が高まります。また、バックグラウンドミュージック(BGM)として表現内容を支援したり雰囲気を和らげる音楽を流すと表現効果が格段にアップします。

 

表現する題材を選ぶ

表現する題材は古くから縦書きが似合う短歌(五七五七七)を選びました。著作物には著作権があります。

著作権の保護期間が過ぎれば、著作権が消滅するわけではありませんが著作権料等の心配はなくなります。

そこで万葉集と古今和歌集のなかから一首ずつ選びました。

  1. 万葉集 巻10-1972 作者未詳
  2. 古今和歌集 秋歌上 一六九 藤原敏行

 

BGMを選ぶ

著作権の保護期間が消滅している古典的な童謡から赤とんぼ、フリーBGM DOVA-SYNDROMEから著作権フリー素材を選択しています。

  1. 『赤とんぼ』、作詞:三木露風、作曲:山田耕筰
  2. 『Coffee Break』, DOVA-SYNDROME(by Chiaki)

 

具体的な表現方法

当記事を読み始めると文面や画像が表示され、BGMが自動的に再生されるのが理想的です。

しかしながら、今年になり主要ブラウザにおいてaudioタグのautoplayが無効になったので、音楽の再生ボタンがクリックされたら音楽が開始されます。

今までのようにすべてHTMLだけで賄うことは無理です。HTMLのコードに加え、主に動的なパートを担当するJavaScriptコードにより制御されます。細分した処理を以下に示します。

記事を読み込む。

音楽を再生するボタンのクリックで発生するイベントを捕捉できるよう仕掛けを作る。

音楽の再生完了イベントの処理を取り付ける。

《赤とんぼ》を再生する。

秋空にコスモスの花が咲き乱れる画像を描画する。

万葉集から、秋の到来を心待ちする心情を詠った和歌を表示する。

《Coffee Break》を再生する。

ススキの穂が秋空に映える画像を描画する。

古今和歌集から、秋の訪れを風の音で感じた様を詠った和歌を表示する。

むすびの言葉やエンドクレジットを表示する。

 

動作例

次の図をクリックすると別ウィンドウで《夏休み2018課題例1》が開きます。その後は、BGMの再生ボタンをクリックすれば、課題が動作します。戻るボタンをクリックすれば、当ウィンドウに戻ります。

 

サンプルコード

次のサンプルコードは、CSS,HTML,JavaScriptをひとつにまとめてあります。コピー&ペーストでソースコードをローカルディスクに格納して実行します。アップロードする場合はh2vRライブラリーを組み込むコード2行を削除しなければなりません。

縦書きライブラリーを公式サイトからダウンロードしてローカルシステム上に構築する必要がありますが、当面、当ブログが運営中止になる予定はありませんので、コピー&ペーストで作成したHTMLコードで大方のブラウザで動作するものと思われます。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.css" charset="UTF-8">
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR.js" charset="UTF-8"></script>	<!-- when upload, delete this line -->
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/04/h2vR_extensions.js" charset="UTF-8"></script><!-- when upload, delete ... -->
</head>
<body>
<span style="font-size:28px; font-family:serif;">夏休み2018課題例1 </span><span id="ttl1" style="font-size:16px; font-weight:bold;">&#x1F39C;BGMのタイトル</span><span style="font-size:10px;"> &copy;TacM,2018 Ver0.03</span><BR>
<Div width="600px" height="100px" style="float:left; border:0px blue solid;">
<div style="float:left; width:250px; margin-top:14px; height:40px; font-size:16px; color:darkcyan;">再生ボタン&#x25B6;のクリックで開始</div>
<audio id="event" controls controlsList="nodownload" src="">終わり</audio><BR>
</Div>
<DIV id="v2" style="clear:both; width:600px; height:420px; border:0px green solid; font-family:serif; font-weight:bold; background-image:url('http://aidesign.lolipop.jp/wp-content/uploads/2018/08/diary2018.png'); color:midnightblue;">
<div id="v3" class="h2vr_22" style="float:left; margin-top:20px; font-size:18px; line-height:2em; width:150px; height:420px; border:0px blue solid; visibility:hidden;"></div>
<div id="v4" class="h2vr_12" style="float:left; margin-top:20px; font-size:32px; line-height:2em; width:430px; height:420px; border:0px red solid; visibility:hidden;"></div>
</DIV>
<script type="text/javascript" charset="Shift_JIS">
const yaku = ['【現代語訳】<BR>野辺を見ると、一面になでしこの花が咲いてる。<BR>私が待ち望んだ秋が近くまで来ているようだ。',
			  '【現代語訳】<BR>秋が来たと、はっきりと目には映らないが、<BR>風の音で秋の訪れに気づかされました。', ''];	//3番めはダミー
const waka =
 ['<ruby><rb>野辺</rb><rt>のべ</rt><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>づくらしも<BR> <span style="font-size:20px">万葉集 巻一〇-一九七二&nbsp;作者未詳</span>',
 '<ruby><rb>秋</rb><rt>あき</rt><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> おどろかれぬる<BR> <span style="font-size:20px">古今和歌集&emsp;秋歌上&emsp;一六九&emsp;<ruby><rb>藤原敏行</rb><rt>ふじわらのとしゆき</rt></ruby></span>', ''];//3番めダミー

const music = ["http://aidesign.lolipop.jp/wp-content/uploads/2016/08/JASRAC_000-0391-3_AkaTombo_xf_Music_Box.mp3",
			   "http://aidesign.lolipop.jp/wp-content/uploads/2018/08/Coffee_Break.mp3", "", "&#x2776;赤とんぼ", "&#x2777;Coffee Break", "&#x1F221;エンドクレジット"];
const volume = [0.5, 0.6, 1.0, 'midnightblue', 'maroon', 'pink', 'akizora2018.png', 'risshu2018.png', 'final2018.png'];	//音量を実態に合わせる
var j=0;													//&#x1F220;&#x2776;&#x2777;&#x1F221; 初 ① ② 終
var evnt = document.getElementById("event");				//BGMのイベントオブジェクト
	evnt.addEventListener('play', function(){				//プレイイベント
		if(j == 0)changeScreen();							//初回だけ、2回目以降は再生完了が代行する
		console.log("PLAY/PAUSE", j);
	});
	evnt.addEventListener('ended', function(){				//再生完了を知らせる
		console.log("ENDED", j);
		changeScreen();
	});
function changeScreen() {									//playイベントの1回目、再生完了イベントで起動
  console.log("CS-j", j, volume[j+6], volume[j+3]);
  document.getElementById("v2").style.backgroundImage = "url('http://aidesign.lolipop.jp/wp-content/uploads/2018/08/"+volume[j+6]+"')";//背景画像
  document.getElementById("v2").style.color = volume[j+3];	//textcolor
  document.getElementById("v3").style.visibility = document.getElementById("v4").style.visibility = "visible";
  document.getElementById("v3").innerHTML = yaku[j];		//現代語訳
  document.getElementById("v4").innerHTML = waka[j];		//和歌
  h2vR.switcher( 'v3' );
  h2vR.switcher( 'v4' );									//requeir h2vR_extensions.js!
  evnt.src = music[j];										//BGMの音声データ
  document.getElementById("ttl1").innerHTML = music[j+3];	//BGMのタイトル
  if(j < 2){												//次のBGMがあるときだけ
	evnt.volume = volume[j];								//BGMの音量
	evnt.play();											//console.log("changeScreen", j, "\nH =", music[j], volume[j]);
  }
  ++j;														//0、①、②、&#x1F221;
}
</script>
</body>
</html>

 

自前の課題を作成するには

今回の記事をひな型にして自前の課題を作成するには、縦書き素材、画像、BGMなどを作成しなければなりません。

ローカル環境で動作させるのであれば、それらは公開サーバーにアップロードする必要はありません。

著作権との絡みからBGMとして童謡を選びましたが、家庭で楽しむ分には最新の音楽を利用しても許されるかも知れません。

画像や音楽素材を入手して世代に合った内容に改造を試みるのも面白いでしょう。

 

余談

一般に、著作物の末尾には書籍ならば奥付、映画や動画ならばエンドクレジットを記すことが習わしです。

今回、エンドクレジットを左図のように横書きの画像で表していますが、これを縦書きの文字形式にしてオリジナル作品の一号を目指すのはいかがでしょうか。

 

さいごに

事を仕上げるには階段を上るような着実な歩みが望まれます。

絵日記を書いたり、ブログを始めるにも周辺の知識を吸収することが必要です。

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

 

プログラミングの初歩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を開発して世に公開しました。

ここでは、開発の経緯や歴史についてはこれ以上、深入りしません。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属性を利用するともっと高度な重ね合わせの描画をすることができます。この象り法は長方形に表示される万華鏡を円形に描画する手法に応用します。

     

    プログラミングの初歩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!」、あるいは日本語で「世界の皆さん、こんにちは!」と文章を作るだけでよいのです。

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

    余談

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

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

    画像部分表示3

    画像トリミング3

    画像部分表示の第3弾です。少しずつ、高級化を図れるようになりました。これまで述べた正常動作条件が必ずしもすべて正しいとは限らないようです。

    あとの記事がより信憑性が高いといえます。サイズ不ぞろいの集合画像から必要なものだけ抽出して表示する例を示します。

    今回はJavaScriptコードに頼らず、HTMLコードだけで実現しています。


    HTMLコード

    <html>
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400">
    <hr width="600px" align="left" style="border:0;border-top:4px solid green;">
    <DIV style="position:relative; width:600px; height:135px; height:135px; border:1px orange solid; overflow:hidden;">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-496px; top:-169px; clip:rect(169px 586px 303px 496px);">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-50px; top:-320px; clip:rect(320px 230px 390px 140px);">
    <img src="http://aidesign.lolipop.jp/wp-content/uploads/2016/08/0727.png" width="600" height="400" style="float:left; position:absolute; left:-235px; top:-125px; clip:rect(125px 510px 180px 415px);">
    </DIV>
    </html>
    

    杞憂

    HTMLコードを見ていただくと、同一画像イメージを4ヶ所で指定しています。恐らく、言語処理系はすでに読み込んだ画像イメージがあれば、重ねて読み込みが行われないように最適化していると信じたいです。もしそうでなければ、このサンプルコードは最悪の見本となるでしょう。その節は反面教師にして決して参考にしないでください。



    資源を有効利用するにはJavascriptにおいて var img4=new image();のように読み込んだデータを確保しておいて、他の3ヶ所でも再利用して描画したいものです。

     

    雨と詩人

    粋なセリフ

    雨はほどよく万遍なく降ってくれれば最高の恵みとなりますが、近ごろは温暖化の影響か激しく集中的に降り、山崩れや堤防決壊などの災害になることがあります。

    雨音はショパンの調べなどと古人はしゃれたコピーを考えてくれました。雨の降る様は多くの人にとって非日常であり、誰をも詩人にしてくれます。

    「雨音はショパンの調べ」の原曲は1980年代、イタリアを含むヨーロッパの国々でヒットチャートの上位に輝き、松任谷由実、小林麻実のコンビによる日本語曲も人気を博しました。

    雨にまつわる著作権保護期間終了の童謡:野口雨情作詞・中山晋平作曲《雨降りお月さん》をスクロール画像とともに描画し、雨を楽しむ試みをしました。

    縦書きプラグインh2vR.CSSとスクロールをサービスするMarquee with CSSプラグインを使用しています。

    ブラウザの改訂により記事の読み込み後に自動開始することが無効になったので、開始ボタンをクリックしてください。

    動作例