inventor のすべての投稿

マガジンリーダー

隆盛を極める電子書籍

今や形あるものが見えないものに押されっぱなしです。新聞、雑誌は紙媒体から電子媒体に移行しつつあります。電子媒体は経費が掛からず、発行速度が格段に優れています。

信じてもらえないかも知れませんが、はるか昔、当日のプロ野球ナイター結果が報じられるのは翌日の夕刊というありさまでした。

当初は歌手でしたが芸能プロダクション社長として名をはせた山田太郎氏が歌った《新聞少年》の歌詞は何のことか理解できない時代が間もなく到来しそうです。

手紙も電子書籍にすれば、本体を送らずともそれを記憶した管理先のアドレスを知らせればよいのです。

電子書籍を読む

新しいものが普及するには本体が優れたものであることはもちろんですが、周辺環境が整うことが必須です。電子書籍においてはそれを読むツールがイマイチです。先日、雑誌を滑らかにめくるで自動マガジンリーダーについて語りました。滑らかさが不足していたので改良した使用例をまとめました。参照先はturn.jsです。

自動読込みにした場合、めくり動作の表示が地味な感じだったので派手にしました。ライブラリー参照時のオプション設定が可能か調査しましたが発見できなかったので、直接ソースコード(turn.js)を変更しました。turnOptionsにあるduration[Duration of transition in milliseconds]のdurationを600から2400に変更したところ、ゆっくりしためくり動作になりました。

夢のよう拡張理念

まだ作り始めたばかりなので、多くを望むことはできません。ページを順にめくったり戻したりが基本機能です。全体を斜め読みする自動読込み機能が付いています。ダイレクトに指定したページに飛ぶ機能や音声による指定は未実装です。音声入力は一人の書斎ならば問題ありませんが、図書館などでは不都合です。

いまでは、考えていることをロボットなどに伝える技術が実用化されつつあるようです。念力によるページめくりを目標にしていますが、呪詛(じゅそ)などは非科学的なものと考え信じていません。

納得いく機能にまとまったらソースコードなども公開できるようになるかもしれません。

動作例

進化版 ©TacM,2018 Ver0.02  

 

早春賦

春は名のみか

春のかおり

極寒を体験すると春はもうすぐです。晩冬から早春の風景を思い浮かべ、童謡『早春賦』を聴きながら時の流れを感じ取ります。音楽はいつものように著作権保護期間終了の作品から選びました。

ただで使わせていただいて愚痴をこぼすのも何ですが、古い歌は意味が難解です。「氷解け去り葦は角ぐむ」は『氷は溶けて消え葦は芽を吹き出した』との意味のようです。歌の歌詞はしっかり縦書きにしました。

音楽、画像、春さきのおりおりのことばにより、押し込められた季節から早春へと弾けてください。

春を待つ心


 

ドローンによる演出

ドローンによる巧みな演出

viva-drone.comより

ピョンチャン冬季オリンピック開会式をテレビで見て、たいへん楽しい想いをしました。予算が潤沢にあればいろんなことができるのだと感心しました。

オリンピックマークは5色で青黄黒緑赤をLEDで出せると思います。人の姿から5輪のマークに変わるところは圧巻でした。そのとき、1つずつ、フラッシュして色が変化したら猶、良かったでしょう。

予算がないものにはコンピューター上で動作させることにしましょう。

ドローンに色を付けてみる

動くドキュメント作成法

ドローンを制御してイベントを演出したような描画をするには、Javascriptによるプログラミングをします。今回の作品は110行ほどのコードで成り立っています。

時間をおいてゆっくり動作させるためにsetTimeoutを使います。興味が湧きましたら、まず、簡単なことからスタートするとよいでしょう。

様々な学習方法があります。専門学校の門をたたいたり、著名な先生のプログラミング講座を受けることもできます。一方、赤ちゃん、幼児が言葉を覚えるように先達者の言動をひたすら模倣して学習する方法があります。

この方法がお金もかからず、自分の努力で進むことができます。インターネットが身近に普及している時代です。習得のための材料・資料はネット上にあります。

手っ取り早くサンプルコードを入手する場合は、少しばかりのお小遣いを使ってください。もし、よかったら右の画像をクリックして多くのサンプルコードに触れてください。他と異なる習得方法があることを知っていただけたら幸いです。

身近な生活への応用

今年の冬は記録的な大雪で悩まされています。道路に降り積もった雪で道路側溝が隠れて見えなくなり、車が転倒する事故が多発しています。

今やGPSによる位置検出精度は数センチになっており、道路や障害物の詳細情報が整理されたら、自動運転技術で雪に埋もれた道路から車がはみ出すことはなくなることでしょう。

自動運転装置は高価です。まずはNAVIスクリーンに実際の風景に加えて雪の下にあるセンターラインや縁石を表示する機能を追加してほしいです。この装置はそんなに高価にはならないでしょう。とりあえず、運転者がその画面を参考にしながら運転して危険を察知する方式が考えられます。

今までにないシステムを構築するには総合的な知識が要求されます。若者が遊び心を持ちつつ楽しみながら新しい技術を学んで身近な生活に役立つことを願っています。

 

虚礼と実礼

真心と下心

心がこもってない形ばかりの礼儀を虚礼といいます。一方、相手に対する敬意がこもった礼を実礼と呼びたいです。その他、心にもいろいろあるようです。ある4コマ漫画で『真心を込めてお歳暮』を先頭の一文字に紙を貼り『下心を込めてお歳暮』という作品を見たことがあります。クリックボタンを押すとめくり効果でキャッチコピーが変化します。

 ©TacM,2018 Ver0.01
名言・迷言・格言・至言

 

『虚礼廃止』という掛け声を鵜呑みにして、面倒くさいことを避けたがります。定年退職すると届く年賀状が激減すると言われます。

減少率で人望度を推し量ることができます。人は損得勘定で動く動物です。

歳を重ねるほど付き合いは減るので本当はお金のかからない手間を惜しんではならないのですが、多く(小人)はそこを端折ってしまいます。大人物になる人とここが違うのでしょうか。

プレゼントや贈答

お世話になった方への贈答は難しいです。高価な贈り物はなにがしかのもくろみが込められています。上司や担任の先生への贈り物など邪心がないとは言い切れません。
お世話になったお礼ならば、成績や進路に影響を与えることができませんが、卒業後がいいと言われています。感謝は見返りを求めるものではありません。定かではありませんが六年間で一度、三年後に一度贈ったような記憶があります。

大昔は病院にかかるにも菓子折りなどを持っていきました。景品の多寡で診療に差をつけることは民主化とはかけ離れている行為であり、今ではプレゼント合戦はなくなったようです。

お金が余って使い道がないときは、退院後、落ち着いた時期にお礼したり行政機関に寄付するといいでしょう。

季節の挨拶

お中元、お歳暮、暑中見舞い、年賀状などの季節の挨拶は本来、虚礼とは無関係だったことでしょう。

日ごろ余裕がなく年に1~2回の挨拶で親交を継続する手段が時節のお礼であったことでしょう。それが過熱してあらぬ方向に変わっていきました。

62円、82円で年2回ほどの挨拶は日本古来の『歳時記のある暮らし』、『和みの暮らし』の一つといえましょう。費やす金額が100円にも満たないのだから虚礼からは程遠いのではないでしょうか。

雑誌を滑らかにめくる

美しいページめくり

パソコンの出荷台数が減少してスマホが右肩上がりに増えています。一方、媒体別広告費をみると新聞、雑誌が元気がなくインターネット関連の伸びが堅調です。

これらの傾向を反映して電子書籍が市民権を得て、多くの人々の手に触れる機会が増えています。

そこで、雑誌をめくるように美しくページをめくれないものかと探した顛末をTurn.jsを中心に備忘録としてまとめておきます。

プラグインツール

プラグインツールとは、エアコンの付いている車が少なかった時代に、外付けでエアコンを付けるようなあんばいで、有料・無料のツールをスマホやパソコンに組み込んで機能の大きな製品に作り上げるものです。

電子本のページをめくるツールは以前からあり、紙芝居やぱらぱら漫画のように切り替えるものが一般的でした。写真を対象にしたスライドショーでは前の画像の余韻を残しつつ次の画像を映し出すものや画面と画面の間に切り替え効果を挿入できる高度なものまでそろっています。

プラグインツールにはシステム内に組み込まれ、その効能が全体に及ぶものと、個別に働くものと複数あります。Wordpressのプラグインは前者に当たり、GitHubのライブラリーではそれを利用しているプログラムにのみ波及されます。

ほとんど無料で公開されている

新しいツールは先駆者が、人的、経済的資源・資産を投入して開発し、創業者利益を得て多くの人々に広めます。

世界の研究者は便利なものに心を奪われるので、研究対象に選びます。また、利用者は高すぎるツールに疑問を抱き始めます。

研究者は先駆者のアイデアを使わせてもらうことがあり、自分のアイデアを公開することが多いです。

それらをサポートする会社や組織があり、新しいことに挑戦するときにはGitHubなどを参照するといいでしょう。

【5分でわかる】GitHubとは?概要やメリットを簡単解説!がGitHubについて解説しています。一読をおすすめします。

この度は雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」をダウンロードしてアプリに組み込みました。

拡張利用法

電子書籍を読むにはキンドルリーダーのようなアプリを利用しますが、このturn.jsを用いてかゆいところに手が届くような文書リーダーが可能になります。パソコンのマウスでは少し扱いにくいです。試していませんがスマホのタップは軽快でしょうか。

パソコンではマウスオーバー(マウスホバー)がよいのではないだろうか。ソースコードがそろっているので、音声入力で「次!」、「戻る」を認識してページめくりできるように改訂することも可能です。また、自動的にマガジンを読む仕組みは写真のスライドショーに応用することが可能です。

マガジンの読み方

  1. マガジンの四隅にマウスを置いて前のページに向かってドラッグ&ドロップしてページをめくる。
  2. 上の操作を最後のページまで繰り返す。
  3. 前のページの四隅から現ページに向かってカーソル操作をすれば、1ページ戻る。
  4. 以上は手動でマガジンを読む方法。
  5. 最初からあるいは途中から自動で読むには自動的にマガジンを読むをクリックする。
  6. 最後のページに到達すれば自動的に終了する。
  7. Ver0.04から→キーと←キーによりページをめくることができる。
  8. 特定ページを長時間にわたり読むには矢印キーによる操作が便利。

ブラウザの動作

  1. chrome, FireFox, operaブラウザで動作する。
  2. IE11では自動的にマガジンを読む機能は思い通りの動作にならない。

動作例

 ©TacM,2018 Ver0.04
 ①
 ②
 ③
 ④
 ⑤
 ⑥
 ⑦
 ⑧
 ⑨
 ⑩
 ⑪

 

動きのある画像

2月の風物詩

雪を見ながら野趣(やしゅ)いっぱいの露天風呂に浸る。

画像の概要と拡張方法

ここでは10種類の動物をまとめた集合画像を用意し、それを1つずつ取り出し縮小サイズから徐々に大きく拡大表示して2倍の拡大率になるまで継続します。

そして動物の鳴き声を出力するには、10種のaudio要素に音声データを用意します。

26行目の動物に対応する変数vを使って鳴き声を鳴動します。今回は仮の音声データとして3種のファンファーレを鳴らしています。

動作例

10種類の動物を0.5倍のサイズから2倍まで拡大して順に描画します。開始ボタンを押下してスタートさせます。

 ❼whale  ©TacM,2018 Ver0.02 scale=2.0

動物を描画するプログラミングコード

<html>
<body>
<button onclick="setClip(0);">開始</button>&nbsp;<span id="num" style="color:red">&#x277c;whale</span>
<span style="font-size:10px">&nbsp;&copy;TacM,2018 Ver0.02 </span>scale=<span style="font-size:16px; color:lime" id='scl'>2.0</span><br />
<div style="position:relative; width:750px; height:300px; border:0px solid gray; overflow:hidden;">
<img id="sample" width="750px" height="300px" style="position:absolute; top:-150px; left:-220px; transform:scale(2.0);
 clip:rect(150px,450px,300px,300px)" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
<audio id="s0" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf0.mp3"></audio>
<audio id="s1" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf1.mp3"></audio>
<audio id="s2" src="http://aidesign.lolipop.jp/wp-content/uploads/2014/12/mf2.mp3"></audio>
</body>
<script type="text/javascript" charset="Shift_JIS">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'Lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'Hippopotamus'];
const rectT=[	//GenClip3.html
'rect(  0px, 150px, 150px,   0px)', 'rect(  0px, 300px, 150px, 150px)', 'rect(  0px, 450px, 150px, 300px)', 'rect(  0px, 600px, 150px, 450px)',
'rect(  0px, 750px, 150px, 600px)', 'rect(150px, 150px, 300px,   0px)', 'rect(150px, 300px, 300px, 150px)', 'rect(150px, 450px, 300px, 300px)',
'rect(150px, 600px, 300px, 450px)', 'rect(150px, 750px, 300px, 600px)'];
var v = 0;
var r = s = 500;		//0.5;
var p = document.getElementById( "sample" );

function setClip(f){
 if(f==0){
  document.getElementById("num").innerHTML = "\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1)+animal_10[v];
  document.getElementById("s"+(v%3)).play();				//music on, 鳴き声を出力する場合、ここに設置する。
  console.log("setClip:%d", v);
 }
 document.getElementById("scl").innerHTML = s = r / 1000;	//0.5~2.0
 p.style.transform = "scale(" + s + ")";					//scale
 p.style.clip = rectT[v];
 top1 = 150*s*(1-Math.floor(v/5)) - 150 + 'px';				//縦位置を調整
 p.style.top = top1;
 left = 380*(s-1)-(v%5)*150*s+'px';							//横位置を調整
 p.style.left = left;										//console.log("V="+v+" : "+rectT[v]+" "+top1+" "+left);
 if(++r <= 2000) setTimeout(setClip, 5, 1);					//1はsetClipの引数
 else{
   r = 500;
   if(++v < 10) setTimeout(setClip, 1000, 0);				//0はsetClipの引数
   else v=0;
 }
}
</script>
</html>

新しい暮らし方

新しい言葉の多用

生産性革命人づくり革命働き方改革の言葉が躍っています。かつては革命などという言葉は革新勢力が使うのが一般的でしたが、このごろは保守の本家本元の旗振りにより高らかに響き渡っています。

これらの積極的な行動が若い世代から評価され、世論調査では高い支持率に表れているようです。

古典的な革新勢力に元気がない、魅力的な人材が集まらない、仲間割れで足の引っ張り合い、守旧派には知恵者がそろっている、分け合えるパイを持っている、勉強熱心な人材がいるということが言えるかも知れません。

働き方が見直されて、古い大勢から脱却して改革に着手された業界、会社では長時間労働から解放され自由に振舞える時間が増えています。

多様な価値観

昔、大昔は『一つのことに秀(ひい)でていれば万事に通ず』、『一芸は百芸に通ず』などと喧伝されました。

一つのことが名人クラスになれば、他のことは大目に見てもらえるという余裕があったように思います。

民主化以前に、剣の達人ならば身なり服装に関わらず尊敬されたことでしょう。

ところが今では巨匠、千両役者、大家(たいか)といえども不潔・粗野・慮外な人は評価されにくいです。

一方、イケメンで主役を張っている俳優が料理もうまく話し上手だったり、雄弁なアナウンサーが気象予報士の資格を持っていたり、一芸だけではアピール度がイマイチの時代が到来しているのだろうか。

時間に余裕が出てくると多様な価値観が認められやすくなります。

新しい生き方

ひたすら、ひたむきに、脇目も振らずなどそのことだけ一心には、もう評価されないのだろうか。評価されないことはないでしょうがなにか時流に乗ってない気がします。それだけ、世の中が複雑多岐になってきてもっと総合的な、より最適解に近いものが求められているのでしょう。

長時間労働は短期間の緊急避難策であるべきです。店じまいセールを長期間にわたって営業したら笑いものです。いつまでも、「赤信号みんなで渡れば怖くない!」は通用しません。

時間に余裕ができたら、専門外の分野に心を砕くのもいいのではないでしょうか。自分にないものを持っている人との交流は得るものが多いと言われています。Javascriptの世界もなかなかのものですよ!

お山の大将は所詮、狭い領域の事柄です。『たかが井の中の蛙、されど空の高さを知り、やがて大海を知る』になりたいものです。

クリッピングをマスター

長年の課題

複数のピースを一枚にまとめ集合画像にしたとき、クリップして部分的に表示することができず悩んでいました。今回、以下のような2行5列にまとめた10枚の動物の画像を1枚ずつ表示できたので備忘録として残します。 img要素にposition absoluteを指定し、clip:rectにより取り出すエリアを設定し、位置のずれをtopとleftによって調整して期待した動作を得ました。今回、clip領域を計算により決定せずに、泥臭い方法ながらテーブルを参照する方式に変えたところ思うような動作になりました。以前はcanvasのdrawImage関数を用いて切り抜けていましたが、canvasに頼ることがないので積年の悩みが解消しました。以下にコードを示します。

サンプルコード

<html>
<body>
<button onclick="setClip();">開始</button> <span id="num" style="color:red">&#x24ff;</span>
<span style="font-size:10px"> &copy;TacM,2018 Ver0.01</span><br />
<div style="position:relative; width: 750px; height: 300px; border: 0px solid gray;">
<img id="sample" width="750px" height="300px" style="position:absolute; top:-150px; left:-300px;
 clip:rect(150px,450px,300px,300px)" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</body>
<script type="text/javascript" charset="Shift_JIS">
const SUJI = "\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e";	//0123456789
const rectT=[
'rect(  0px, 150px, 150px,   0px)', 'rect(  0px, 300px, 150px, 150px)',
'rect(  0px, 450px, 150px, 300px)', 'rect(  0px, 600px, 150px, 450px)',
'rect(  0px, 750px, 150px, 600px)', 'rect(150px, 150px, 300px,   0px)',
'rect(150px, 300px, 300px, 150px)', 'rect(150px, 450px, 300px, 300px)',
'rect(150px, 600px, 300px, 450px)', 'rect(150px, 750px, 300px, 600px)'];
var v=0;
var p = document.getElementById( "sample" );

function setClip(){
 console.log("V="+v+" : "+rectT[v]);
 document.getElementById("num").innerHTML=SUJI.substr(v, 1);
 p.style.clip = rectT[v];
 p.style.left = -(v%5)*150+'px';
 p.style.top = -Math.floor(v/5)*150+'px';
 if(++v < 10) setTimeout(setClip, 1000);
 else v = 0;
}
</script>
</html>

動作結果

   ©TacM,2018 Ver0.01

ユニバーサルデザインの始まり

バリアフリー

はるかふた昔以上も前に、バリアフリーという言葉がはやりました。バリア(barrier)とは垣根、フェンス、障害、障壁との意味であり、バリアフリーは「そこから自由な」との意味合いで、障壁のないとか障害を感じさせないなどの意味に使われてきました。

もてはやされたバリアフリーという言葉もいまでは、ユニバーサルデザインにとって代わられました。両者の違いはバリアフリーが障害・障壁を除去するという意味で使われるのに対して、ユニバーサルデザインは、できる限りはじめからバリアのないデザインを心がけるという考え方です。

すべての人にやさしい設計

当方は福祉や建築設計の専門家ではないので、ユニバーサルデザインの本質に触れることはできません。

工場の製造ラインでたとえば、五品種ほどの組み立て部品が流れる工程において、弱視や耳の不自由な方のために標準工程に何を追加したらよいかを考えてみました。

目の不自由な方には、動物をかたどった大きめのイラストと品種を寄り分けるための音声を追加しています。

製造ラインで品種を音で知らせる

耳の遠い人、弱視の人など体の不自由な方でもちょっとした工夫で健常者と同等の作業が可能になります。製造ラインの流れ作業において、体のハンディキャップを乗り越える代替策を例に挙げます。

昨今の製造ラインは作業員が直接、手を下すことは少なく異常が発生した時に適切な処置を施すことが多いことでしょう。今回の例では音と画像で知らされた注文者の希望を製品化しています。

スモールチェンジ

原材料の高騰が影響

最近、物の大きさがいつの間にか小さくなっています。これは原材料が高騰したのに価格に転嫁できずに、事実上の値上げをもくろんだ結果です。先刻、NHKが特集で報じていてその現象を《スモールチェンジ》と名付けたと語っていました。

嵩を少なくすることで材料費を抑えています。質を落としたり、水分の量を増やしたりして経営を続けている様は努力を認めつつも、いじましさも感じます。商品本体のサイズを変えると包装紙や箱のサイズも変更になりますがそこは端折って手を付けないことが多いようです。全体の積み荷サイズは変わず輸送費の節約につながらないので付け焼き刃的施策と言わざるを得ません。

インスタントコーヒー、納豆、菓子などは一様に小さくなっています。ハムなどはサイズが不変ながら枚数が少なくなっています。しゃけの切り身、ちりめんじゃこ、キャラメルなどはスモールチェンジがしやすく、インスタントコーヒー、尾頭付き魚、野菜などは知恵を絞ることになります。

知恵の絞り方

値上げせずに利益を維持するには、クラスを下げざるを得ません。尾頭付き魚や果物は小さなサイズ、野菜は半切り、贅沢付属品は削除などの方法があります。

スーパーでこれらが一気に始まったときは、行政がこの地区を低所得者特区に申請したのかなと疑ったほどです。

乾電池の本数を減らし全体の価格をちょっぴり下げる方法は巧妙な値上げです。納豆付属品の練りがらしは前よりは水っぽくなっています。作る側からも「水の味しかしない豆腐」に疑問を呈する声が挙がっています。

やむを得ぬ策か

スモールチェンジの傾向は食品だけかというとあらゆるところに蔓延しています。初詣祈願の祈祷札についてくる縁起物が年々、小さくなっています。実質的な値上げが統計上に反映されないので、いつまでもデフレ状態から脱却できず消費者心理に悪影響を及ぼしているのではないだろうか。

値上げあるいは実質値上げになって消費者として負担を強いられているのなら、せめて経済の統計に貢献したいと考えるのは庶民のほのかな願いといえましょう。

生活防衛と根本対策

図書館の電球なども3個使いが2個になっていたり努力がうかがえますが、公営住宅や道路の街灯はかなりの照度にならないと消えない古いタイプです。雨模様で暗い日には日中でも点灯しています。

水道管、橋などインフラの寿命がやがて一斉にやってきそうです。高度成長はうたかたの夢と考え、地道な生活防衛を迫られています。