月別アーカイブ: 2018年1月

新しい暮らし方

2018-01-30ものづくり筆耕ブログjohmonjin

新しい言葉の多用

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

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

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

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

多様な価値観

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

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

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

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

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

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

新しい生き方

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

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

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

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

クリッピングをマスター

2018-01-26プログラミングjohmonjin

長年の課題

複数のピースを一枚にまとめ集合画像にしたとき、クリップして部分的に表示することができず悩んでいました。今回、以下のような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="https://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

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

2018-01-25ものづくり筆耕ブログjohmonjin

バリアフリー

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

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

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

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

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

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

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

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

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

スモールチェンジ

2018-01-22ものづくり筆耕ブログjohmonjin

原材料の高騰が影響

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

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

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

知恵の絞り方

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

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

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

やむを得ぬ策か

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

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

生活防衛と根本対策

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

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

QRコードの新境地

2018-01-20プログラミングjohmonjin

QRコードの利用例

QRコードはあらゆるところで利用されています。ここで取り上げることは新しくも珍しくもないことでしょうが、新参者にとっては語るに価値がありと、いまさらながらスポットライトを当ててみました。

QRコードが世に出たころはまだ、インターネットが普及途上にあったので当時は基本的な利用方法のような気がします。今はあらゆるものがインターネットにつながる時代であり、昔とは趣きが異なることでしょう。

QRコードの新機軸

以下の実行例は10個のQRコード画像を読み、取り出された文字列をJavaScriptスプリプト言語処理系が解釈して表示しています。文字が赤色で表示されたり大きなサイズになるのはspan要素で指定されているからです。あくまでもQRコード画像の色は単色です。

たとえば、小林一茶の俳句は以下のような文字列から成っています。そのほか、メッセージが左右にスクロールしたり、イラストが左から右へ流れて描画されるのはJavaScriptのMarquee要素(タグ）によります。

めでたさも<BR>
　中くらいなり<BR>
　　おらが春<BR>
　　　<span style="font-size:11px;">小林一茶</span><BR>

開始ボタンをクリックしてスタートです。

QRコードリーダー
©TacM,2018 Ver0.15　

認識名称:

QRコードサイズ:FileSize
進行

読み取り結果

　日本語サポート

二十四節気のアンカー

2018-01-16ものづくり筆耕ブログjohmonjin

もうすぐ大寒

二十四節気は立春から始まり大寒で終わりになります。1月20日～2月3日の期間を大寒と定めています。一年で最も寒い時期です。

2月は如月、着更着と言われ、着物を更に着重ねる意味がありますが2月の頃には寒さにも慣れ、やはり大寒の頃が一番寒く感じられます。

季節の風物

1月の行事として、七草がゆ、成人の日、鏡開き、どんど焼き、藪入りなどがありましたが、下火になったり、中身の変貌と様変わりしています。

女性の成人を狙い撃ちしたような悲しい詐欺事件が起きました。少子化のあおりを受けて2～3年前から成人式の着付けを予約していたようですが、やはり危惧が現実のものとなりました。

性善説は限界か

仲間の飲み物に異物を混入させたり、立派な建物の中で商売している会社が詐欺行為をするこのごろです。

ちょっと古くなりましたがザ・ガードマンというドラマが登場して人気を博し、セキュリティーをサービスする警備会社が大企業に成長している時代です。

性善説はとっくに崩壊しています。おちおち、知り合いでも信用することはままならなくなっています。

企業間の競争が激しくなって、消費者の青田買いのような雰囲気が強くなっています。早割、早得の名のもとに大きな割引率で客を惹きつけています。

かつてある定期購読本を5年契約で読んでいましたが、景気低迷で本のページ数が年々、少なくなり年ごとに充実した内容を期待した側として納得いかないものがありました。

一生に一度ということで晴れ着の予約に何十万円という金額を事前に渡し、信用だけが担保というのは危険極まりないことです。

冬の食べ物

今年の冬は殊の外、野菜の値段が高く鍋料理の回数は多くありません。白菜は柔らかい触感で、海のミルクと言われている牡蠣との相性も良く、寒い冬にはうってつけです。しらたき、湯豆腐にかつお節をまぶして日本酒で温まりたいものです。

QRコードリーダー

2018-01-13ものづくり筆耕ブログjohmonjin

日本語QRコード

QRコードの発祥地の日本として全角文字を自在に扱える技術を調査していました。

これらはとっくの昔に開発されて商品化され市場に出回っています。ただ、この状況は先頭を走っているごく一部のフロントランナーだけの秘伝になっているようです。

ここでは、すでに公開されている技術を寄せ集めて短歌や俳句をQRコード化して楽しむ方法をまとめています。

詳しい規約

商品には仕様が示され、商品開発の規約や制度は万人に公開されるのが原則です。

それらの原文は英文だったり有料だったりし、かつ、中身が実態を反映してなく時代遅れになっている場合があります。

それを言い訳にして原文を読んでないことが多くなります。そのため、何度も動作を繰り返して実態をつかみ現状に合わせています。

日本語表示例

ここでは4つのQRコードを読み込み、コードを解析して識別した内容を表示します。最初の2つはURLアドレスをQRコード化しており、全角文字は含まれていません。後の2つは俳句を題材にしていて漢字のほか全角のスペースと改行コードが含まれています。

残念ながら画像データは含まれていませんが致命的ではありません。なぜならば、共有のアルバムに登録したURLアドレスを載せれば画像を描画できるからです。よって、間接的ながら画像をQRコード化できるといっても過言ではないでしょう。

開発のあれこれ

1.全角文字を含むQRコードでは画像サイズが小さいとエラーになりやすい。

2.QRコード収納文字数により、デコードのキャラクタタイプが異なるようだ。

3.収納した文字数が多くなるとUTF-8からデータ数の少ないShift_JISになるようだ。

4.複雑なJavascriptタグは正しく動作しないことがある。

5.IE11を含むモダンブラウザで動作することと思われる。

6.読み込んだ文字がhttpから始まる場合、クリックすればそのページにジャンプ。

動作例

QRコードリーダー
©TacM,2018 Ver0.12　

進行　ｘ　ｙ

認識名称:

QRコードサイズ:FileSize

読み取り結果

　日本語サポート

QRコード探求版

2018-01-10ものづくり筆耕ブログjohmonjin

伸び行く若者

疲れを知らない子供のように…は「シクラメンのかほり」の一節です。歳を感じさせない昔の青年も存在します。「歳を重ねたらいたずらに若ぶらずに、盆栽や写経などに没頭すればよいのだ」という意見もあります。

世代交代は必要です。長年にわたって築き上げたことを灰にするのはもったいない、かっこよく言うならば次の世代に引き継ぎたいというのは最後のあがきでしょうか。多くのことを吸収できる小中学生に期待しましょう。

QRコード探求の始まり

QRコードを巡る様々なサポートは飽和状態になるほどに出回っています。しかしながら、自分の引き出しのなかに理解した技術として蓄積されているとは限りません。今回、JavaScriptプログラミングの一環として、動く物体に貼られているQRコードを読み取って表示する例を考えてみましょう。

QRコード解析方法

指定した文字列からQRコード画像を自ら作るサンプルコードはGithubから容易に入手することができますが、今回、WebサイトでサービスされているQRコード画像を作るサービス—QRコード作成 CGI’s『ご入力いただいた文字列のQRコードを作成する』を利用しました。

指定されたテキストボックスに URLやメールアドレスなど任意の文字列を入力し、作成ボタンをクリックして取得しました。

『誰やらが　形に似たり　けさの春』という芭蕉の句は左図のようになります。一般的に使われる全角文字もコード化することが可能です。正確にエンコード・デコードされないものが出回っていますが、漢字圏に身を置くものとして早めのマスターを心がけたいです。

上記サイトから設定した文字列のQRコード画像を4個、用意する。
jqueryソースコード(jquery.min.js)をインクルードする。
githubから20個近いmegapix-image.jsなどのQRコードサポート関数群を入手してインクルードする。
ベルトコンベア、小車、大車の画像を作る。
画像ファイルをサーバーのアップロードする。
指定されたファイルをimg要素でQRコード画像を読み込む。
読み込んだ画像イメージをCanvasに設定する。
Canvasを利用してBase64コードに変換する。
Base64をQRコードにデコードし、文字列を抽出する。
抽出した文字列を解析結果として表示する。
クロスオリジンエラーをクリアするため、オプションパラメーターに「-allow-file-access-from-files」を指定してChrome.exeを立ち上げておく。
Chromeならば、–disable-web-security –user-data-dirのパラメータも指定する。立ち上げ時にエラーメッセージが表示されてもこれを指定しないと思い通りの実行になりませんでした。