inventor のすべての投稿

プログラミングの初歩3

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

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

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

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

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

回覧板で町内会の折々のお知らせを流す原稿をHTML文書で作成します。冒頭に町内会のロゴマークヘッダーを入れました。この部分は毎回更新することがなくロゴマークを微細に表現するために画像がふさわしいです。

町内会会報を作る

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

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

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>

 

リサイクルと整理

不用品回収

最近、使用済みパソコンを一掃しました。これまでは暮れのイベント時期に業者の集積所に運んで無料で引き取ってもらいました。

チャンスを逃して、貯まりに貯まっていたところなので、大量の不用品を適切に廃棄できてせいせいしています。

レアメタルを回収してリサイクルの一助になれば幸いです。このたびは、決められたサイズの段ボールに、複数のパソコンを梱包してインターネットによる申し込みをすると宅配業者が着払いで集配してくれる方式でした。

廃棄物が処理場に届いた時と処理が完了した時にメールにより連絡が入るので、適切に回収が行われたものと思われます。

限りある資源を再利用する機運を大切にしたいものです。電子部品から金、銀、インジウム、錫、タンタルなどを分離して再利用します。都市鉱山を掘り当てて巨万の富を目指せるかも知れませんが、地道な作業になることでしょう。

リサイクル運動

江戸時代は究極の循環型社会が結実した時代ではないでしょうか。近視眼的な経済効果で物が動く傾向に鎖国制度がブレーキをかけ、資源の再利用に向かわせたのではないだろうか。

昭和の中頃までは廃品回収屋さん、鋳掛屋さんなどが辻々に回ってきたように記憶しています。その後、大量生産、大量消費時代が到来し、やがて一巡し再利用への回帰が叫ばれるようになりました。

昔は廃品でも再利用できるので、なにがしかの実入りがありましたが、今では有料で回収してもらいます。新聞、段ボール、雑誌類は回収業者が回ってくる地区があり、自治体の無料回収と競合する形になっています。

 

回収業者によるトイレットペーパーやティッシュペーパーとの交換は、玄関先まで回収に見えるので高齢者には重宝されています。

地方ではゴミ集積所が遠くにあると車で運ばざるを得ないことになり、免許証返上の高齢者には業者による回収は大変ありがたいと好評です。

自治体への回収物は公共の集積場に置くので、それを無断で持ち去るものがいます。

一方、回収業者は自宅の私有地に置くことを奨励し、私有地からの持ち去りは明らかな窃盗であり無法者をけん制しています。

自治体の予算が年々、先細りになりコミュニティの市民運動費も激減し、無償提供を薦める自治体と回収業者とのバトルは、きめ細かなサポートが採否を分けそうです。

6月の梅雨明け

関東甲信梅雨明け

関東甲信の梅雨明けが発表されました。6月中の梅雨明けは例を見ないことです。関西、東海地方がまだなのに気の早いことです。一方で、少雨で農作物への悪影響が心配です。

いつも言ってますが、平均的に万遍無く降ってほしいとの願いむなしく、九州北部から土砂崩れなどのニュースが流れてきます。

夏真っ盛り

今日は6月の末日で2018年前半の最後の日でもあり、平成30年もあと半年を残すのみとなります。歳月、人を待たずは意味の深い言葉です。自分に都合のいいように解釈したいです。

これからは灼熱の猛暑がやってきます。寒さや暑さは生きとし生けるものにインパクト、ショックを与えます。一方、ぬるま湯は怠惰に流れます。暑さに対抗するというよりも暑さを楽しむのが一番です。

逆療法

うだるような暑さが続くと食欲が減退します。かき氷、ところてん、冷やし中華、そうめんなどに目が行きがちです。熱めの風呂に入り、焼肉や唐辛子たっぷりのあつあつラーメンなども夏を楽しむ一つの手です。

キャンプ村や自然塾でバーベキューパーティーなど、楽しい企画が満載です。

仕事の多忙さにかこつけて折角のチャンスを逃すのはもったいないです。大きな組織との調整をはかるのは大切です。

ですがいつも期待を裏切っていては器量・度量の問題です。家族や周りに尽くす力が不足しているとそしりを受けても仕方ないことでしょう。

長い人生からすると子育ての時間は短いです。会社は大勢の人から成り立っています。俺がいなければ…とうぬぼれないで小さな、大切なことから始めましょう。

今が旬

生き物には時間がつきまとい、食べ物には旬があり、人間にも年齢に応じた行動が期待されます。

それを放棄してただひらすら大義に尽くし、その代償として広大な屋敷に住んだとしても、一生を平穏に過ごせるとは限りません。贈収賄事件などに巻き込まれて、晩年を畳2枚ほどの独房生活を送らざるを得ないということになったらつまらないです。

行き詰ったり、他人の出世をうらやましく思ったときは、野原を駆け花を愛でるのがよいのでは。

いつも思うのですが、廻りを蹴散らして権力闘争の覇者になったのならば、ずっと覇王でいて欲しいと願っていても、よどんだ水は濁り腐って自らこけてしまうのです。

高校野球地方大会の決勝戦の勝者は、『負けた多くの高校の分まで甲子園では全力で戦ってきます』と語りますが、その気持ちは大人には通用しないようです。

あと半年もある

2018年はまだ、たっぷりと残っています。先ずは『隗より始めよ』でしょうか。不遇な家に生まれた、上司に恵まれなかったなどグダグダ言いつのるのはいかがなものでしょう。

若い時には周りを呪いがちですが、たとえ恵まれた環境でも成功者になっていたかはわかりません。その人の器量・資質に依存する確率がもっとも高いと言われています。

あと半年はあります。無為に過ごして、9回裏、ツーアウトで逆転はさらに難しくなります。

 

クッキー具体例

入力を省略する例

クッキーを利用することにより、いつも入力する項目を省略することができます。ある組織の中で掃除当番や発表者をくじ引きで決めることがあります。

あみだくじゲームで決める場合は参加人数を指定する必要があり、この人数は一定していることが多く、前回の値を記憶しておけば、入力を省略することができます。

前回の参加人数をクッキーに保存し、次回に利用する例を挙げます。

動作例

アプリを動作させると、ここでは参加人数の初期値は10に設定されます。あみだくじ参加人数を設定し、再び、起動すると前回の参加人数に初期値が切り替わります。その人数でよければ、オレンジの確定ボタンをクリックすると、参加人数の設定を省略することができます。

クッキー具体例 ©TacM, 2018 Ver0.01

 参加人数(3~16)
「あみだくじ参加人数を設定中」

 

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※

あみだくじの作り方についてはあみだくじの資料を参照してください。

サンプルコード

<!doctype html>								<!-- participants.html, 2018-06-26 -->
<html>
<body>
<p style="font-size:32px; color:royalblue;">クッキー具体例<span style="font-size:12px; color:magenta;">&emsp;&copy;TacM, 2018 Ver0.01</span></p>
<input id='sp' type="number" id="step2" min="3" max="16" step="1" value="10" style="width:50px; font-size:20px; font-weigt:bold; color:navy;">
<a onclick='numberSet()'><span style="text-decoration:underline; color:orange; font-size:20px;">&nbsp;参加人数(3~16)</span></a>
<div id="guide" style="font-size:28px; color:green;">「あみだくじ参加人数を設定中」</div>
<script type="text/javascript" charset="Shift_JIS">
const keyName = "numberOfParticipants";		//2018-06-24-20:25
const maxAge=24;							//保存期間、24時間
var speed = 10;								//参加人数初期値

if (!navigator.cookieEnabled) alert("cookieを使用可能にしてください。");	//cookieを使用できるようにする
	var velocity = GetCookie(keyName);		//参加人数を取得
	console.log("VELOCITY=",velocity,speed);
	if(velocity != speed)	document.getElementById('sp').value = velocity;	//参加人数を更新する

function numberSet(){						//参加人数を設定
	var w = document.getElementById('sp').value;
	console.log("numberSet", w);
	SetCookie(keyName, w);					//クッキー保存
	document.getElementById('guide').innerHTML = "参加人数を"+w+"人に決定しました。";
}
function GetCookie( name ){					//クッキーを取得
	var cookieName = name + '=';
	var allcookies = document.cookie;		//クッキー全体
	var position = allcookies.indexOf( cookieName );	//キーで指定された項目の位置
	var score = speed;						//未登録時の暗黙値
	console.log("GetCookie, allcookies="+allcookies+" position="+position);
	if( position != -1 ){					//登録されている
		var startIndex = position + cookieName.length;
		var endIndex = allcookies.indexOf( ';', startIndex );
		if( endIndex == -1 ){				//単数、複数の処理
			endIndex = allcookies.length;	//終わりの位置
		}
		score = decodeURIComponent(allcookies.substring(startIndex, endIndex));	//指定キーのデータを抽出
	}
	return score;
}
function SetCookie( name, data){			//クッキー保存
	var expire = new Date();
	expire.setTime( expire.getTime() + 1000 * 3600 * maxAge );				//保存期間
	var newData = name + '=' + data + ';expires=' + expire.toUTCString();
	console.log("SetCookie", name, data, newData);
	document.cookie = newData;				//cookieを更新する
}
</script>
</body>
</html>

余禄

JavaScriptなどのオブジェクト指向言語は、コードの記述量が少なくて済み開発工数の削減につながります。

かつては表(テーブル)をコード化する際、9999や-1、文字データならば//などを最後の項目に定義して、柔軟性のあるプログラミングをしていましたが、機能豊かな言語では、rows.lengthのようにテーブルの属性を指定すると項目数が得られるようになっています。

一方、テレビのチャンネル番号のように、最後に利用した番号を記憶する方式は利便性が高いです。

あみだくじ参加人数は一定の場合が多く、クッキーを使って前回の参加人数を暗黙値として指定することができ、具体例を示しました。

クッキーの扱い方

クッキーを使ってみました

ネット上を検索する場合、好むと好まざるとにかかわらずクッキーとかかわりを持つことになります。セキュリティを心配するあまり、クッキーの利用を禁止している人を見かけることがありますが、現実的ではありません。

クッキーとは一般的には小麦を主原料にした焼き菓子のことですが、IT用語としての意味はWebサイトの提供者がブラウザを通じて閲覧者の端末(スマホやパソコンの記憶装置)に一時的にデータを書き込んで利便性を高める仕組みのことです。

 

クッキーの利用は使わないときよりも危険性が増しますが、正しい利用で快適なウェブライフを体感することができます。飛行機利用や車の運転における危険性と利便性の兼ね合いに似ています。

多くのウェブサイトはクッキーの利用を前提に作られています。オンラインショッピングで商品を買い物かごに入れたとき、暫定的に注文数などがクッキーに記憶されます。個人情報なども記録されることがあり、しっかりしたセキュリティ対策を講じなければなりません。

今回、ウェブ上のゲームを断続的に行うに当たり、クッキーを用いる通算成績の管理例を取り上げました。

サンプルの題材

短時間で勝敗が決着するウェブ上のゲームを小刻みに利用し、通算成績を管理するために、勝ち数、負け数、引き分け数をクッキーに登録して記憶します。

本格的なゲームは才能のあるデザイナーにお任せすることにし、勝ち、負け、分けのボタンをクリックした回数でスコアがカウントされます。

光と影

クッキーの利用で単純な繰り返し操作から解放されたり、サクサク感のあるネット生活が送れるようになりました。

光が差せば影も差します。油断はできません。セキュリティソフトの設定は必須です。いつも自分の情報がどのように扱われているかに気を配ることが大切です。

ここでは勝ち数、負け数、引き分け数をひとくくりにして簡便化しているため、それぞれ999を超えた値では誤動作します。

また、Webサーバーに上げる前はローカル環境で動作を確認しますが、ブラウザChromeなどではローカル環境でのクッキー利用をサポートしていません。ブラウザfirefoxで動作確認しました。

動作サンプル

ゲーム中に急用が発生し、シャットダウンして1時間後に再開した時、過去の成績は通算されて表示されます。

※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※




感想

クッキーには寿命があり、指定した保存期間が過ぎれば消滅します。こうして、クッキーが際限なく膨張しないように、また適度なセキュリティの保全に貢献しています。

詳しくは解明できていませんが、クッキーはブラウザ単位で制御されるようです。ブラウザAを使ってゲームを起動し、中断後にブラウザBで再開しても直前情報が引き継がれません。

ブラウザが異なったために利用者に付随する情報が継続されないことが不便になることもあり、今後の課題として議論に上がりそうです。

サンプルコード

<!DOCTYPE html>								<!-- controlCookie.html, 2018-06-23 -->
<html>
<body>
<div id="rslt" style="float:left; width:400px; height:30px; font-size:25px; color:sienna; border:0px solid blue;"></div>
<div id="brows" style="float:left;color:magenta;font-weight:bold;"></div>
<Div style="clear:both; width:102px; height:74px; border:0px solid gold; text-align:right;">
<input id="inpt" style="width:100px; height:37px; font-size:14px; background-color:cyan; color:navy;" type="button" onClick="match(0);" value="〇&nbsp;勝ち"/>
<input id="endp" style="width:100px; height:37px; font-size:14px; background-color:lime; color:blue;" type="button" onClick="match(1);" value="&#x2B24;&nbsp;負け"/>
<input id="endp" style="width:100px; height:37px; font-size:14px; background-color:pink; color:blue;" type="button" onClick="match(2);" value="▲&nbsp;分け"/>
</Div><BR><BR><BR>
<script src="http://aidesign.lolipop.jp/wp-content/uploads/2017/11/DevelopingTools2.js" charset="UTF-8"></script>
<script type="text/javascript" charset="Shift_JIS">
const maxAge=2;								//保存期間、2時間
var result=[0, 0, 0];						//2**32/2 -> 2147483648
var bName = getBrowser();
var theName = "c201806221448";				//2018-06-22-14:48

if (!navigator.cookieEnabled) console.log("cookieを使用可能にしてください。");//cookieが使用可能にする
	document.getElementById("brows").innerHTML = "browser: "+BrowsN[bName]+"&emsp;&copy;TacM, 2018 Ver0.01";
	var d = GetCookie( theName );
	if(d==null){							//wwwlllddd
		d = 0;
	}
											//d=1002003;
	result[2] = d % 1000;					//分け数 ddd
	var w = Math.floor(d / 1000);			//wwwlll
	result[1] = w % 1000;					//負け数 lll
	result[0] = Math.floor(w / 1000);		//勝ち数 www
	console.log("GetData", d, result[0], result[1], result[2]);
	document.getElementById("rslt").innerHTML = makeResult();				//〇勝〇敗〇分

function SetCookie( name, data){			//クッキー保存
	var expire = new Date();
	expire.setTime( expire.getTime() + 1000 * 3600 * maxAge );				//2時間
	var newData = name + '=' + data + ';expires=' + expire.toUTCString();
	console.log("SetCookie", name, data, newData);
	document.cookie = newData;
}
function GetCookie( name ){					//クッキーを取得
    var score = null;
    var cookieName = name + '=';
    var allcookies = document.cookie;
    var position = allcookies.indexOf( cookieName );
	console.log("GetCookie, allcookies="+allcookies+" position="+position);
    if( position != -1 ){					//登録されている
        var startIndex = position + cookieName.length;
        var endIndex = allcookies.indexOf( ';', startIndex );
        if( endIndex == -1 )				//単数、複数の処理
        {
            endIndex = allcookies.length;
        }
        score = decodeURIComponent(allcookies.substring(startIndex, endIndex));
    }
	console.log("GetCookie", score);
    return score;
}
function match(n){							//試合のスコアを記録する
	++result[n];							//指定された状態をカウントアップ
	var v = result[0]*1000000 + result[1]*1000 + result[2];	//3個の小データを1つに合成する
	SetCookie(theName, v);
	v = makeResult();						//〇勝〇敗〇分
	document.getElementById("rslt").innerHTML = v;
	console.log("MATCH", v);
}
function makeResult(){						//合成データを3つに分離して表示
	var r = result[0]+'勝'+result[1]+'敗'+result[2]+'分'+' 保存期間'+maxAge+'時間';//〇勝〇敗〇分
	return r;
}
</script>
</body>
</html>

 

画像部分表示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ヶ所でも再利用して描画したいものです。