プログラミングの初歩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版万華鏡はできるのでしょうか。魚釣りにでかけ成果が何も得られず、帰りは魚屋さんに寄っていくことにならないように頑張りたい。

 

コメントを残す

下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。

CAPTCHA