月別アーカイブ: 2019年4月

令和こんにちは

平成ありがとう ➡ 令和こんにちは

 

Temple bells of New Year’s Eve


経過時間

 

子供の成長を祝う

戦国武将のそれぞれ

五月人形には凛々しい戦国武将の姿が多いです。戦国武将と言えば、信長、秀吉、家康が有名です。

最近は刀剣を趣味にする女性も現れ、従来からの歴女(歴史通の女性)は島左近、片倉小十郎、立花宗茂、竹中半兵衛などを慕う通人が多いと聞きます。

一般的には真田幸村や直江兼続の人気は随一といってよいでしょう。二人の兜は六文銭をテーマにしています。「空高く飛ぶ」の意味を込めて名付けられた翔君は代表する4歳児ということでお祝いのメッセージを載せました。

五月節句のお祝い

右の画像をクリックしてお祝いのメッセージをご覧ください。4歳になる翔君の健やかな成長を願っています。

この図は平和な時代のファッション用です。実際には、鎧、兜、脛あてなどの防具で肌を覆い戦闘に向く服装をしたことでしょう。

五月人形に携わる関係者全員が好戦的なはずがありません。歴史的美術品として後世に残れば幸いです。

 

 

プログレス一例

主要ブラウザで動作

HTMLの表現で進捗度を表すとき、progress要素を使います。ダウンロードの完了度や音楽、ビデオの進行状況を表示するときに多用されています。progress要素は進捗度の他、音量の目盛りなどにも使われます。

ほとんどのブラウザでプログレスバーの長さを設定することができません。上図の中央に示したようにMicrosoft Edgeでは他のブラウザよりも長くなるので、右のように統一した表現をしたいと考え、自前のプログレス表示を作ってみました。

実行例

すでに実行済みであり、再実行にはブラウザのリロードボタンをクリックします。

サンプルコード

親要素に幅、長さ、背景色を指定し子要素のwidthに%を指定するだけです。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.prog100 {
    margin-top: 2px;
    background: palegoldenrod;
    width: 160px;
    height: 14px;
}
</style>
</head>
<body onload="progressSample();">
<Div class="prog100" style="width:120px;">
<div id="prg0" style="width:0%; height:14px; background:seagreen;"></div>
</Div>
<Div class="prog100" style="width:200px;">
<div id="prg1" style="width:0%; height:14px; background:deepskyblue;"></div>
</Div>
<Div class="prog100" style="width:240px;">
<div id="prg2" style="width:0%; height:14px; background:crimson;"></div>
</Div>
<script type="text/javascript" charset="Shift_JIS">
var percent=0;
function progressSample(){
	var p = percent+"%";
	console.log("progressSample", p, 20+percent*0.5+"%");
	document.getElementById("prg0").style.width = p;
	document.getElementById("prg1").style.width = p;
	document.getElementById("prg2").style.width = 20+percent*0.5+"%";
	if(++percent <= 100)	setTimeout(progressSample, 50);
}
</script>
</body>
</html>

苦労話

参考にした例は子要素にimageを使った方法でした。その方法でも期待した結果が得られましたが、プログレスバーの色を変更する場合はその都度、画像を用意しなければならず、上の方法を編み出しました。

参考例ではclass名にmainを使っており、ローカル環境で満足いく動作になり、公開サーバーにアップロードするととんでもない動作になりました。原因は容易にわからずclass名をprog100に変更したら期待した動作になりました。

ブログ画面にはヘッダー画面、ウィジェット画面などがかみ合っています。本画面でないところでmainという要素名を使っているようで、予約語のようなclass名を使う事は避けた方が賢明という体験をしました。

どうぶつのおまつり

好きなことに熱中する

藤井聡太センセイ「負けは失敗ではない」 小中学生に指南

囲碁や将棋の世界で大人以上の成績を上げている小学生、中学生、高校生がいます。

これは親からの押し付けで練習や勉強を始めたものでなく、好きなことに熱中し研鑽を積んだ結果、プロになって大人を負かす成績を上げるまでになっています。

仲邑菫(なかむらすみれ)さん

『門前の小僧習わぬ経を読む』のことわざがあります。

知識を吸収するなどと気合を入れずとも繰り返し耳から入った記憶は残り血肉になるという意味です。

広い世界があることを知らしめるのも親の務めです。

多くの世代に役立てば

新年度が始まりました。新しいことを始めた若者が多いことでしょう。最初は誰でもが戸惑うものです。

継続は力なり、めげずに続けて欲しいです。

今回、多くの世代に役立てばありがたいとの思いで動物の名前と絵を表示してみました。

対象は1歳~20歳です。1歳児は1から12までの数字と動物名、2歳児はひらがな、だんだんとカタカナや英単語を覚えます。

小学生以上にはプログラミングの妙味を体得してください。

作品の説明

トラのパンツをはいた赤鬼と青鬼

親しみが湧く12種の動物が一定時間で変化し繰り返し描かれます。

漢字をなるべく少なくしてひらがなを使っています。

色と濃さの階調を変化させ、揺れを付加した画像をアクセントにしています。

BGMは世界最古のコマーシャルソングともいわれる「フニクリ・フニクラ」から始まりますが、最近は「オニのパンツ」で有名です。その後、人気の高い童謡が続きます。

家族内で楽しむ場合は音楽の著作権は免除されます。「CTRL+U」を押してプログラミングコードを入手し、團伊玖磨氏作曲の「ぞうさん」などに切り替えてはいかがでしょう。それではそれぞれの世代でお楽しみください。

お役立ち

はじめボタンをクリックして始まります。絵を切り替える間隔とBGMの音量を変えることができます。それぞれ⇦ ⇨の矢印ボタンの上にカーソルをかざせば変化します。

どうぶつのおまつり
©2019 TacM, Ver0.04
おんがく:オニのパンツ
❿とら トラ tiger
きりかえ時間とおとの大きさを調節する
みじかく⇦ 
⇨なが~く🔄 4000ミリ秒
ちいさく⇦ 
⇨おおきく🔊 0.3
🎜

 

 

 

 

グラデーションを楽しむ

アニメーションのひとつ

HTMLで動的な表現をする場合は、JavaScriptで記述すれば、かなり細かな動作を行うことができます。一方、HTMLにanimateメソッドがあり、CSSファイルの中に少ない記述で様々なアニメ表現を可能にしています。その中にグラデーション機能があります。

グラデーションとはホームページやブログの記述において、色や濃淡を連続した階調で表現することを言います。アニメーションについては探求を始めたばかりです。まずはグラデーションを使ってみます。

背景色を連続的に変更する

さんぷる

 

グラデーションのサンプルコード

<style>
#sample {
  background-color: #6CB8FF;
  animation: gradationTest 10s linear infinite;
}
@keyframes gradationTest {
  0% { background-color: #6CB8FF; }
  50% { background-color: #FFF66C; }
  100% { background-color: #FFA36C; }
}
</style>
<body>
<DIV id="sample" style="width:600px; height:300px; font-size:136px; color:navy; border:1px solid deeppink;">さんぷる</DIV>
</body>

応用例

先週、人里離れた気まぐれの宿に動くキャッチコピーを表現しました。こんどは次の図をクリックしてグラデーションをお楽しみください。

 

コンビニ今昔

時代の転換期か

クレーマー

最近、コンビニ業界のニュースが賑わっている中、ある体験をしました。行楽地に行く途中のコンビニでおにぎりとおやつを買いましたが、生もののおやつの賞味期限が2ヶ月も過ぎていたのです。

当商品はこの辺りではおやつに食べる風習がなく、3食の料理のおかずにしていますが、私の郷ではおやつにしており懐かしさのあまり、喜んで買いました。

好意的に考えれば商品の動きが緩慢なのでしょうか。それにしても賞味期限の管理はコンピュータ制御であり、中央からの集中管理で行われているように感じます。

寿司では数分でも賞味期限が過ぎていたら売ってくれなかったというニュースを聞いたことがあります。

対応について

商品を開封する前に気づいたので帰りに返品をすることにしました。このような体験は初めてなのでレシートと一緒に写真に収めました。

お店の対応は非を認めて返金をしてくれたので、鬼の首を取ったような野暮な振舞い(SNSへの公開)はしません。オーナーあるいは従業員の年齢は40代であり、初心者というよりはベテランの域に入るようでした。

コンビニの思い出

コンビニが出現した時は羨望の的でした。経営者の年収は今ほど公開されませんでしたが、資金や土地を投入していることもあり相当の年収のようでした。今は出店数がうなぎ上りで過当競争気味であり、オーナーの取り分は多くない気がします。

4半世紀以上も前になりますが、仕事に出かけるとき、いつもコンビニの前を通って駅に向かいますが、朝晩とも閉まっていました。

当時、24時間営業のコンビニはなく、7~23時の営業でした。こちとらはノー残業日などもなく働きづめであり、コンビニのそばを通るとき100%閉まっていたのです。

働いても働いてもやすらぎの時間はゼロであり、このような状態を続けたら体を害すると考え一大転換を図るきっかけがコンビニの営業時間でした。コンビニにまつわる苦い思い出です。

コンビニは町の指標

遅くまで灯りが灯っているコンビニは街の灯台のようでした。夜の灯りは心細さから解放してくれ、自分の力不足を知らしめてくれました。

当時は大規模店が進出し始め従来からの小売店が尻すぼみなのに対し、コンビニは右肩上がりでした。長年のサラリーマン生活に見切りをつけ早めの転進を図った世代は成功者が多いことでしょう。

自分の裁量で商売ができると思いきや、中央からの厳しい締め付けで二進も三進もいかないのではやり切れません。世論の後押しもあって是正の方向にあるのは喜ばしい限りです。

人手不足と立地条件

人手不足は深刻のようです。人手不足には細かなサービス競争もひとつの原因かも知れません。弁当やおにぎりを温めたり、行政の代行処理など事務やサービスの簡素化も必要なのではないでしょうか。

公共料金を郵便局で納付する際は手書きで申請しますが、コンビニでは不要です。すでにコンビニは先進的ですがもっともっと簡素化を目指して欲しいものです。

賞味期限でひとこと

主婦がコンビニやスーパーで買い物をする際、生産地や賞味期限をかなり吟味します。それを冷蔵庫に入れてしまうと賞味期限に無頓着になりがちです。先に買ったものから消費するを忘れて好みのものから消費しがちです。在庫にすると管理費が増大します。金利負担を忘れないで欲しいです。また、深夜12時を3分超えたので賞味期限切れになりましたも大げさです。

昔、角店(かどみせ)は努力なしでも繁盛しました。今はかなり難しいです。まず、きちんとした駐車場がないと繁盛しません。

それと入りやすい出入り口があることが必須です。コンビニも統廃合が繰り返されています。

動くキャッチコピー

手書き風アニメーションの応用

今は少なくなっていますが携帯電話の大手キャリアで、ストーリー性のあるCMがテレビから流れていました。これは制作費がかかっているぶん、インパクトがありました。

広告においてもこれらを模した動くキャッチコピーは異彩を放ちます。ひなびた宿・気まぐれの宿を手書き風アニメーションで紹介します。

開発ツール

前回にも述べましたが動くキャッチコピーを開発するツールはInkscapeLazyLinePainterです。InkscapeはSvgファイルを作成するために利用しました。予算は潤沢でなく望むらくはIllustratorの方がいいでしょう。

Windows10ではファイル名が数字だけのファイル、数字から始まるファイルでも問題ありませんが、次のLazyLinePainterでは動作が不良になりました。

単純なファイル名が動作不良の原因と突き止めるまでにはかなりの時間を要しました。開発の核心についてはおいおい触れていきます。

動くキャッチコピーの実例

都市部から離れたホテルのキャッチコピーを作ってみました。風雅庵という仮名で進んでいきます。仮の写真は庵(いおり)というよりは立派なたたずまいをしています。次の図をクリックして動くキャッチコピーを体験してください。

今回は、文字によるメッセージが中心ですが、音楽や動画を折り込むことができます。注目を引く広告の一案を提案します。

ホテルや景勝地にライブカメラが設置され、Youtube等によりオンラインで公開されている場合、ライブ画像を画面にはめ込むことが可能です。

おまけ

ライブカメラを自分のサイトで第3者がすぐ、見られるようにするにはリンクを貼ります。リンクを貼る行為を許可している場合、リンクフリーと言います。リンクフリーは少ないです。例えば、渋谷駅前の交差点には複数のカメラが設置され、誰でもがこの画像を見ることができますが、自分のサイトにリンクを貼ることはできないようです。

『五千尺ホテル上高地』のご好意により、上高地開山中24時間ライブカメラにて上高地の絶景を中継しています。



ダムや河川の状態、景勝地などを自治体や民間がリンクフリーで公開しています。公開されているユーチューブ動画を閲覧したり、リンクを貼るにはYouTube Player APIの知識を要します。マルチウィンドウYouTubeプレーヤーなどの参考記事をご覧ください。

アニメーションでお祝い

にゅうえんおめでとう

あかりちゃん、幼稚園の入園おめでとう。

健やかな成長を見守っています。アニメーションによる表現は《手書き風アニメーション》の続編です。新しいことへの挑戦はこれからも続きます。

折しも、4月から始まったNHK朝ドラ100作目《なつぞら》はアニメーション草創期をテーマにしています。

左の図をクリックするとアニメ画面に進みます。

そして画面下の音符記号をクリックすると象さんの動きが止まってかなり長めの準備時間のあと、アニメーションが始まります。

元気に起床し、おしぼりやエプロンをリュックに入れてパパと登園し、ブランコや読書をして遊び、ママがお迎えに来て一日のストーリーは終わります。

戻るボタンをクリックすると本記事に戻ります。

ブラウザとの相性

番号 ブラウザ名 動作状況
1 chrome
2 FireFox
3 opera
4 edge
5 IE11