johmonjin のすべての投稿

小数派受難時代

ものづくり筆耕ブログ

寄らば大樹の陰か

生きとし生けるもの、群れを作って生きていくものです。先日、急な冠婚葬祭に出会い、200㎞程の移動をしました。

世の中、市場経済で動いており少数派が生きにくい体験をしました。群れの一員になることを潔しとせず孤高を貫くことはなかなか大変なことです。

そのことで嫌がらせ、村八分、いじめなど顕在化することがあります。それは自分で実行する勇気がなく大勢に流される自分への不満、実行に移したものへの妬み、嫉み、やっかみの現れです。

少数派は面倒

一人の指導者が多人数を指導する場合、標準からはずれた人への対応は並大抵ではありません。そこで少数派は切り捨てられかねません。

その間隙を縫って「権兵衛が種まきゃ我が家も始める」、「五人組制度」、「運命共同体」、「相互監視社会」、「密告制度」、「前例主義」、「コネ、縁故採用」などが台頭してきます。

完璧な対応

世の中、完璧や絶対の言葉が躍っていますがなかなか、怪しいものです。自動車免許証の更新で警察や免許センターに行くことがあります。

有効期限が迫っている免許証を差し出すとすぐに穴があけられ、次の手続きに進みます。それから啓発のためのビデオなどを見せられ、1~2時間後に新しい免許証を発行してもらえます。

この講習時間中に大地震などが起きてしまったら、穴のあいた免許証が通用するのでしょうか。新旧免許証の交換は同じタイミングでないとはなはだ危険です。物事を円滑に進めるために時間差は生ずるものですが絶対あり得ないことではありませんという例をあげました。

効率優先で少数ケースを切り捨てる

通常は特急を使っているコースを気まぐれで在来線を使うことにしました。

切符は通常、A-B-C間を特急、C-E間を普通列車で買いますが、先日はA-B-F-Dと普通列車にし、D駅から知人の車でE駅近辺の会場に向かう予定でした。

ところがB-F間のローカル線の運転間隔が90分と長く待ち合わせ時間に間に合いそうもなく、E駅に直行することを連絡しました。

切符は先のD駅まで買ってあり途中下車のつもりで降りようとしたところ、乗り越しの警告で止められました。

駅員はD-E間を乗り越しと判断したため改札のドアが閉まったと説明しましたが、途中下車ではと主張したところ改札を通してくれました。

切符購入でB、Fを経由地と告げてありシステムのどこかに不備があったのでしょう。2系統以上の特定区間では短い方の距離で運賃計算するようですが、今回のように大幅に異なる場合は実際に乗ったコースで運賃を決めるのではないだろうか。

雑感

日本列島は時計の針に例をとれば、12時40分のような形をしています。鉄道や高速道路は国土を縦断することに便利に作られていて、横断するには不便です。

横断するには一度、縦断しそこで乗り換え、更に縦断した方がどれほど時間の短縮になるかを身に知らされました。

少数派はいつの世も切り捨てられる運命にあるのでしょうか。

トリミングと拡大表示

プログラミング

トリミングとは

トリミングとはコンピューターで画像を加工するとき、画像の周囲や映像の前後を切り取って、必要な部分だけを抜き出し画面を整えることを言います。ここでは10種の動物を集めた1枚の画像から指定された動物をクローズアップします。合わせてタイマー管理を紐解きます。

画像トリミングとボタン操作 ©TacM,2019 Ver0.01





❼whale 
クジラ

©TacM,2019 Ver0.01



トリミング実現方法

トリミングするには多くはclip:rectを用いますが、今回、position:relativeにoverflow:hiddenを指定し、合わせてposition absoluteを併用して必要な画像を切り抜いています。

一つのことを実現するに当たり様々な方法が存在します。いろいろな手法を身に着けることによって深みのある文書や作品を作成することができます。

HTMLとJavaScriptサンプルコード

<html>
<body>
<img id="uenozoo" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px">
<DIV style="font-size:24px;">
<button onclick="if(v==0)setClip();">開始</button><span id="num1" style="color:red">&#x277c;whale</span>&nbsp;
<span id="num2" style="color:blue">クジラ</span>
</DIV>
<DIV style="position:relative; width:300px; height:300px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px; zoom:2.0;">
<img id="animal" src="https://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<div style="font-size:12px;">&copy;TacM,2019 Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
const animalName =    ["リス", "クマ", "タヌキ", "ライオン", "キツネ", "キリン", "ゾウ", "クジラ", "コアラ", "カバ"];
var v=0;
function setClip(){                                                             //animal10.png  original-size : 750*300
 document.getElementById( "sample" ).style.left = (- v % 5 * 150) + 'px';
 document.getElementById( "sample" ).style.top = (-Math.floor(v / 5) * 150) + 'px';
 document.getElementById("num1").innerHTML ="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
 document.getElementById("num2").innerHTML = animalName[v];
 if(++v < 10) setTimeout(setClip, 2000);
 else v = 0;
}
</script>
</body>
</html>

画像を丸く縁どる

ものづくり筆耕ブログ

画像にインパクトを付ける

写真や図は縦、横の長さこそ異なるものの長方形で扱われます。時には丸、楕円形、雲形、ハート形で縁どられた写真を見かけることがありますが、通常のものに較べて目を引きます。

今回、重ね合わせの方法によって画像を丸く縁どってみます。

縁取りの仕組み
ameblo.jpより

下図のように、表示したい画像に透明色を持つ縁どった画像を重ね合わせます。手法は実際の写真立ての原理そのものです。

先に本命の画像を表示し、そのあとに縁取り用の画像を重ね合わせます。丸い部分は透明なガラスのような効果を生み下の画像が素通しになりますが、円の外は白色のため何も表示されません。

白色でなく淡いグレーにすれば曇りガラスのようにぼんやりした画像にすることができます。



HTMLによる表示例

<div style="float:left;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png" width="300" height="300"></div>
<div style="float:left;"><img src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-98.png" width="300" height="300"></div>
<!-- ================ 【method】POSITION:ABSOLUTE ================ -->
<Div style="clear:both; position:relative; width:620px; height:660px; border:0px solid orange;">
<div style="position:absolute; top:50; background-image: url('https://aidesign.lolipop.jp/wp-content/uploads/2018/04/P17_Amanohashidate.png'); width:600px; height:600px;"></div>
<img style="position:absolute; top:50; width:600px; height:600px;" src="https://aidesign.lolipop.jp/wp-content/uploads/2018/07/poly-99.png">
</Div>

画像に文字を入れる

ものづくり筆耕ブログ

夏を楽しむ

画像に文字を入れてみます。画像の説明文を画像の周辺や画像上に添えることがあります。今回は画像上に上書きしています。黒色による夏の風物詩は画像イメージであり、夏を楽しむがテキスト表示です。

画像エディタなどで画像に文字を入れて一体の表示物にする場合と、HTMLのテキスト表示機能によりテキストを入れる場合があります。双方に長所と短所があります。

タグ名は大文字と小文字を区別しません。入れ子になった開始タグと終了タグが明確になるようDivとdivを使い分けています。


夏を楽しむ

HTML表示コード

<Div style="width:640px; height:265px; border:1px solid blue;">
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/07/e4e718a86f9ae87f820a7909d0ee171e.png" width="640" height="260">
<div width="640" height="100" style="margin-top:-120px; margin-left:190px; font-size:80px; color:khaki;">夏を楽しむ</div>
</Div>

ひと夏の恋

ものづくり筆耕ブログ

情熱のサマー2019

夏は人を開放的に、大胆にさせます。タイトルに挙げたことは夏に始まり、季節が切り替わる前に終わる儚い出来事でしょうか。それでも永遠のエネルギーを燃やしたいものです。古典の秀歌、クラシックの名曲をお楽しみください。

また、若き力をたぎらせている活人におかれては、幻想的な電子万華鏡を自作してはいかがでしょう。作り方はこのブログを紐解いてください。

次の画像をクリックし、さらに切り替わった画面でBGM再生ボタンをクリックします。

 

 

動画を表示する

ものづくり筆耕ブログ

動画ファイル形式

動画を投稿して楽しむには動画形式に則ったファイルを作り動画を表示します。動画形式にはmp4, avi, wmv, flvなどたくんさんの種類があります。採用する形式はいつも使っているブラウザがサポートしているタイプがいいでしょう。

 

上の開始ボタンを押下してスタートです。

動画表示用HTMLコード

動画を表示するにはvideoタグを用います。autoplayを指定してもmuted以外の音声付き動画では記事のロードとともに開始にはなりません。一般にはcontrols属性を指定してコントロールバーを付加します。

poster属性は動作開始前に表示する動画内容を代表する静止画像を指定します。srcに指定するアドレスはyoutubeの投稿先アドレスやアップロードした公開サーバーアドレスを設置します。

<video id="wild" src='https://aidesign.lolipop.jp/wp-content/uploads/2016/02/WildAnimals.mp4' poster="https://www.crazyvector.com/wp-content/uploads/2018/11/Wildlife-Landscape-Illustration.jpg" controls width="100%" height="100%" controls></video>

動画の作り方

動画を利用するにあたってデジタルカメラで撮った画像を動画形式を確認してそのまま利用することができます。その形式をブラウザがサポートしていなければ変換します。

変換ツールは良質なフリー素材をダウンロードすることが可能です。写真をスライドショーのように動画風にまとめるときにはムービーメーカーを利用します。

表現豊かな動画を作るには

驚異的な閲覧数を期待するには、表現する題材もさることながら、編集技術などの知識が必須です。多数の閲覧者を誇るユーチューバ―と呼ばれる一部の人は多額の広告収入を得ていることが報道されています。

一定の訪問者数を長きに渡って保有し続けるには大変な努力が必要ですが誰にも開かれた門戸です。一念発起して頑張ってみてはいかがでしょう。

 

画像を表示する

ものづくり筆耕ブログ

写真やイラストを表示する

すでに作った画像、写真、イラストはimgタグを用いて表示します。

 

実際のHTMLコードは次のようになります。

<div>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/08/season4.png" width="828" height="226" />
</div>

imgタグのsrc属性にて画像の格納先を指定します。ブログやホームページは多くの人々に見てもらうのが目的ですので公開サーバーのアップロード先をアドレスとして指定します。動作確認時には自分のローカル記憶装置のアドレスで構いません。

画像の多彩な表現方法

画像を横に並べたり、説明文を加えるにはimgタグの他の属性を指定しなければなりません。まずは簡単な表現をマスターします。

画像の作り方

画像やイラストをどのようにして作るのでしょうか。まずは既存の画像を表示してみます。公開することなく自分のローカル環境で表現するぶんには著作権の心配はありませんので、ネット上にある画像を表示してみます。

自信がついて友達に見せたいときには、フリー素材を探して表示するようにします。

魅力的な画像入り記事をつくるには

表現力の高い画像記事にするには画像編集ソフトやデジタルカメラの扱い方などの知識を吸収するとよいでしょう。

 

音楽を鳴らす

ものづくり筆耕ブログ、プログラミング

音楽を鳴らしてみる

音楽を鳴らす ©TacM,2019 Ver0.01

おんがく:オニのパンツ



開始ボタンを押してスタートです。

HTMLコード

<div style="font-size:26px; color:violet;">音楽を鳴らす<span style="font-size:12px; color:blue;">&nbsp;&copy;TacM,2019 Ver0.01</span></div>
<audio id='bgm' src="https://aidesign.lolipop.jp/wp-content/uploads/2019/04/oninopantsu.mp3" controls controlslist="nodownload"></audio>
<div id="kyoku" style="height:24px; font-size:14px; line-height:2.0em; border:0px solid navy;">おんがく:オニのパンツ</div>

説明

音楽を鳴らすにはaudioタグを用います。タグという言葉が出ましたが初めて出会う方は画像を表示したり音楽を鳴らすための仕組みと理解してください。タグは100を超える種類があり少しずつ理解していきます。タグや要素の意味を図にしてみました。




上記のように開始タグと終了タグがあります。divはdivision、hはheader、pはparagraphのように英単語の1字以上の短縮形から成り立っています。

タグの説明は図にする場合が多いです。説明のために小なり(Less Than)や大なり(Greater Than)の記号を本文記事の中に置くとタグとして機能し、説明文が乱れることがあるためです。

今回はタグの説明でした。

夏休みの宿題

ものづくり筆耕ブログ

時は巡る

梅雨がなかなか開けず、梅雨寒むが続きやきもきしていたら一気に猛暑の連続です。そこそこ、ほどほどとこちらの都合どおりには何事も進みません。

夏休みの真っ只中にあり、行楽地、博物館、図書館などは家族連れでにぎわっています。ハ月は夏休みの宿題について語ります。

道具を使いこなす

レストランでメニューを注文、駅で切符を購入するには会話よりもキー操作によって物事が決まっていく世の中です。

道具は人間特有の文明の利器と言われています。それらの仕組みや原理について知るきっかけになれば幸いです。

夏休みの宿題、特に電子絵日記に気を配りながら情報機器にまつわるあれこれについて触れていきます。

おかあさんへの感謝

先ず、おかあさんへ感謝の言葉を伝えてみましょう。それは以下のようにメッセージを入力するだけで十分です。

おかあさん、いつもありがとう



色や文字サイズを変えたり、BGMを流したりするにはちょっとした知識が必要になります。それを次に記します。

HTMLを理解する

多くの人が会話をするには共通語を用います。くせのある方言では仲間うちだけの会話になります。そこで情報機器の効能を活かせる言葉を使います。それがHTMLです。

HTML（エイチティーエムエル、HyperText Markup Language）は、情報機器を用いてウェブ上で情報をやりとりするために開発された言語です。 現在、インターネット上で公開されてる文書は、HTMLに基づいた表現方法で作成されています。

文字だけでなく、画像、音楽、動画などの多彩な表現を実現するには従来の約束事では不十分であり、新しい仕組みが導入されています。

また、昼間の毎整時に鳩が飛び出す高度な柱時計を作るにはJavaScriptと併用します。それによって動きが加わった趣きのある表現が可能になります。

簡単な表現から始める

できることから始める

HTMLをすべてマスターするにはかなりの時間がかかります。あかちゃんが母語を完全に理解せずとも意志の疎通が図れるように、簡単なところから始めればよいのです。

新しいことを始めるには若い時が有利であるというのは的を射ています。自我が確立して常識を振り回す頭の固い御仁は不利になります。

それでも向上心や謙虚さを持ち合わせている80歳を超える高齢者でも新しいことに挑戦できます。

先の例題

<div style="border: 1px blue solid;">
<h2><span style="font-family: 'arial black', sans-serif;"><span style="color: cyan;">おかあさん、</span><span style="color: purple;">いつもありがとう</span></span></h2>
</div>

 

喫緊の安全対策

ものづくり筆耕ブログ

実施の優先順位

科学の発展が無条件に人間を幸福にしているわけではありません。利用の仕方が間違っていたり、応用することを躊躇していれば宝の持ち腐れです。車の追突やアクセルとブレーキの踏み間違いによる事故が後を絶ちません。

最近、農薬散布のヘリコプターが高圧電線に引っ掛かり墜落した事故が報道されています。高圧電線は急に設置されるわけでなく、設置場所の位置や高さは安定した情報です。

この情報をヘリコプターの運転者が共有していれば事故は防げるはずです。GPS技術が導入されてかなりの時間が経過した今、電線は運転者には見えにくくてもそれをサポートするシステムの構築が難しいとは思えません。

地下に埋設されている電線、通信ケーブル、ガス管、上下水道管が映し出される画像システムが稼働しています。

雪国における右図のようなスノーポールも運転席の画像に映るようになれば実際のポールは必要なくなるかもしれません。

車載カメラが大衆価格で設置できる時代です。

車に較べて高額なヘリコプターに危険物感知あるいは危険物に接近した情報を発信する装置を搭載するのは容易に実現可能と推測します。

車の自動運転だけがクローズアップされています。船舶なども含めた交通安全対策が実現されるように期待します。

経営者、国のリーダーは目先の利益だけを追求せずに高所大所からの判断を迫られているようです。