カテゴリー別アーカイブ: ものづくり筆耕ブログ

ものづくりに関する想い

クッキーの扱い方

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

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

クッキーとは一般的には小麦を主原料にした焼き菓子のことですが、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>

 

画像部分表示2

画像トリミング第2弾

画像の部分表示第2弾です。10枚の動物の画像を2行5列に並べたイメージがあります。これを順に1秒間隔で描画します。

 

作り方は前回、説明してありますがその肝は、親要素にposition:relativeや画像描画サイズとはみ出し部分の表示法を設定し、イメージ画像は孫要素に入れ、子要素のstyle属性にはposition:absoluteで切り抜く画像位置を指定し、widthとheightで幅と高さを設定することです。

動作サンプルコード

<html>
<body>
<img id="uenozoo" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/06/animals10.png" width="385px" height="160px"><BR><BR>
Ver0.01&emsp;<button onclick="if(v==0)setClip();">開始</button> <span id="num" style="color:red">&#x277c;whale</span>
<DIV style="position:relative; width: 150px; height: 150px; overflow:hidden; border:0px solid green;">
<div id="sample" style="position:absolute; left:-300px; top:-150px; width:750px; height:300px;">
<img id="animal" src="http://aidesign.lolipop.jp/wp-content/uploads/2015/08/animal10.png">
</div>
</DIV>
<script type="text/javascript" charset="Shift_JIS">
const animal_10=['squirrel', 'bear', 'racoon-dog', 'lion', 'fox', 'giraffe', 'elephant', 'whale', 'koala', 'hippopotamus'];
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("num").innerHTML="\u24ff\u2776\u2777\u2778\u2779\u277a\u277b\u277c\u277d\u277e".substr(v, 1) + animal_10[v];
 if(++v < 10) setTimeout(setClip, 1000);
 else v = 0;
}
</script>
</body>
</html>

動作例



Ver0.01  ❼whale

 

マガジンリーダー

この記事の概要

ここでは雑誌を自動的に読む方法について語っています。後半の動作例で、用意した雑誌を読んでいます。そのため、ウィジェット欄を非表示にしてのびのびと表示しています。

自動ページめくり器

「本は読みたしページめくりはめんどうだ」とものぐさを決め込むことがあります。そこで自動ページめくり器が考案され発売されています。ものぐさというより福祉機器の観点から開発されているのが多いです。

メカニックを駆使したページめくり器は、本のセッティングに2~3分かかり、ページをめくるのに7~8秒かかるそうです。体が不自由ながら積極的な人生をめざす人々を応援する意気込みが感じられます。「自由気ままに読書を楽しむ楽らく読書生活」のサイトが参考になりました。

電子書籍をめくる

紙媒体の書籍を自動ページめくりしながら読むには、かなりの経費が掛かりそうです。ここでは電子書籍を自動ページめくりする方法について語ります。すでに多くの先駆者が開発され、格安料金あるいは無料で配布されています。GitHub等からJavaScriptを使ってページをめくるjQueryライブラリーが公開されています。



その中で実際に本をパラパラめくる効果を出せるjQueryプラグイン「turn.js」に出会いました。サンプルコードはここから入手しました。HTML、CSS、JavaScriptをコピー&ペーストしそのまま実行可能です。

試作版の概要

この基本ソースにsetTimeoutによる自動めくり機能を追加してあります。動作はまだ、納得いかない部分があり落ち着いたら公開する予定です。

設定機能

  1. めくり速度
  2. ページ移動
  3. 1ページ戻る
  4. 1ページ進む
  5. マガジン速読
  6. マガジン速読の停止・再開
  7. ←→キーによるページ移動

 

めくり速度はこの記事の起動時にただ一度、設定することができます。そのため、❷~❻の設定に先立ちパラパラ読みのスピードを500~5000ミリ秒で設定し、その80%をめくり速度にしています。その他の設定は適切なタイミングで複数回、設定することができます。

動作例

パラパラ読みの速度(500~5000)を設定後、マガジン速読をクリックすると指定されたスピードでパラパラ読みが開始します。停止/再開ボタンを使って途中で読み込みを停止し再び開始することができます。キーボードが付いているデバイスで読む場合は、←、→の矢印キーの利用が便利です。

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

終わりに

四隅をドラッグ&ドロップしページをめくる本来の操作で読むこともできます。

パラパラ読みで読みたい箇所を見つけマガジン速読の右にある停止ボタンをクリックして、そこからNext→ボタンを利用して精読することができます。速読と矢印ボタンを組み合わせて多様な講読をお楽しみください。

今回は試作版にて、PDFを読むのではなく、あらかじめ用意した画像を読んでいます。次にはPDFを読んで表示する機能を追加する考えです。

廃れ行く風習

氷の朔日(こおりのついたち)

義理や人情は時とともにすたれていくものです。このブログでも変わっていかなければならないと力説を繰り返しています。折々の季節の行事も同様です。生活スタイルが変わり効率を重視すると変わらざるを得ません。

節分の豆まきには障子の桟にイワシの頭などをのせたように記憶しています。洋風の住まいには障子がありません。

旧暦の6月1日は氷の神様に感謝をささげる日とされ、氷の朔日(こおりのついたち)と呼ばれています。6月1日は私の郷において古老中心にムケビと呼んでいたようで、もうすぐ亡くなりそうな風習と感じていました。

幼少の身には詳細不明であり一年の中間地点にはまだ、30日もあるのにちょうど一年の前半を無事に過ごしたお祝いの行事と思っていました。

ふいご祭り http://miki-idol.rdy.jp/wp-content/uploads/2012/11/IMGP5863.jpg 参照

地方により6月1日の行事は少しずつ異なりますが、氷に関わるものが多く感じられます。古来は、氷室(ひむろ)の蓋を開いた日とされたり、古いものから新しいものに剥(む)けることを祝うところが共通しています。ムケノツイタチ、ムケビも起源は同じのようです。

余裕があれば残したいもの

仕事でふいご祭りに出会ったことがあります。ふいご祭りは11月初旬に行われる行事であり、鍛冶屋、刀工、鋳物師など鉄を商いにする匠たちのおまつりです。ふいごとは鉄を暖めるために風を送る送風器のことでより大型で足踏み式のものはたたらと呼びます。

アコーディオンの原理で送風板を上下や左右に動かし風を送ります。今では電動で送風することでしょう。「たたらを踏む」の言い回しはここからきています。

名前の由来となったものが消え去っても風習を残す意味はあります。鉄の溶解物は危険です。炎を恐れ敬い作業の安全を考えるきっかけに毎年、行っていたと思われます。余裕があれば残したいものの一つです。何でもかんでも新しいものに切り替えるのは短慮と言えましょう。

ちぐはぐを克服

 

痒いところに手が届かない

福祉施設に用事があり出かけました。玄関口付近の利用度の高い洗面所がきれいに整っているのに、個別用洗面所の清掃にまで手が回らず不潔な思いをしました。深刻な人手不足が起きているようです。

ゴールデンウイークの前に小旅行でこれとは逆の体験をしました。地方のホテルにも外国人が押し寄せることが多くなり、ホテルのトイレはウォッシュレットの水洗トイレになっていて、全室Wi-Fiの利用が可能になり国際化に対応していると感心しました。

エレベータを待っているとなかなか来ないので共用のトイレに入ったら、和式トイレでした。ホテルでは共用より個室のトイレを使うのが一般的です。個室のトイレを洋式に改装できても、共用トイレを改装するまでの余裕がなかったのでしょう。

名門ホテルの閉鎖話を聞きます。経営的には十分に現状維持を保てる状態にあっても、防犯・防災や衛生面の法改正があると厳しい状況に追い込まれるとも聞きます。超豪華か格安ホテルは安泰かも知れませんが、中程度のホテルはいかがでしょうか。

違和感

ホテルの共同風呂に入ると、先客が二人いましたがスリッパがなく、登山靴に近い頑丈な靴が2足ありました。先客は外国人で浴衣に着替えてくつろいだ格好で風呂に入るという日本の習慣に精通してなかったようです。

これらの状況がのみ込めたのは風呂を出るときでした。もっと早めに分かったらつたない英会話で裸の付き合いで日本風様式を説明できたのかなと負け惜しみを言っています。

洋風化

ホテルの朝食はほとんどバイキング方式で食べ過ぎに気を付けなければなりません。団体旅行では競争心がちょっぴり入ると危険です。

当方は意識的に消化の良いお粥にしています。明治期から洋風化が進み様々な国難を乗り越えてきました。

地方では湯治場の旅館がホテルの前身であったことでしょう。チェックインと集合時間を勘違いしてチェックインの1、2時間も前に来て部屋に案内してと受付で押し問答している客を見かけることがあります。

バイキング料理を残すのはマナー違反かを論ずるのは意味がありません。食べる分だけ盛り付けます。さらに食べたいときは追加します。また、チェックインタイムより前に入室してはならないルールは身に付けたいものです。浴衣やスリッパで個室外で出ることが可能かどうかは確認した方が良いようです。

終わりに

人手不足や雇用のミスマッチは深刻です。大手チェーンレストランで人手不足のあおりを受けて気になる体験をしたことがありました。

労働者が労働条件の改善を求める権利は認められますが客を人質にするような行為はいかがなものでしょうか。当事者間で話し合って利用客に迷惑をかけない労働争議行為があるはずです。

蛇足

日本人は靴を脱ぐことに抵抗感はありません。古式豊かな仏閣の中を拝観する場合は必ず靴を脱ぎます。

これにも欧米人は靴を脱ぐことに抵抗があると聞きました。

10代の頃、靴を履いたままベッドに横たわっている外人女性のヌード写真を見たときはカルチャーショックを受けました。

欧米人には靴を脱ぐのは処刑台に立たされるときだけという意識があるようです。外国人にも我が国の風習を理解してもらって郷に入りては郷に従うのがいいようです。

原点回帰

しぼむ経済

ほとんどの自治体で人口減が進んでいます。閉鎖的、硬直的、閉塞感ただよう組織ほどその傾向が顕著です。

金を掘って一時代を築いても金山の資源はいつか尽きるものです。早めに対策を立てておかないと掘りつくしたときは廃墟の一歩手前ということになります。

従来路線を突き進もうとする集団とそれを変えようとする集団がいて、両者の利害を両立すべくそこそこ対応することは至難です。そこには強力なあるいは病的な独裁的なリーダーシップが要求されます。多くは力のある集団が覇権を握って進んでいくのです。

持続可能な発展

「大きいことはいいことだ!」とある作曲家がテレビCMに出ていました。素朴、ひっそりより大規模、豪華、金ぴかが貴(たっと)ばれました。

「お客様は神様です」と経営者や演歌歌手が囃したて消費活動を鼓舞し、24時間戦えますかと煽り立てました。

そこには数百年前の戦国時代、戦争することで周辺諸国を蹂躙し領土を拡大し、部下に恩賞を与え、ひたすら膨張主義でかけ走る様に似ているかのようでした。どんどん、物を買い、捨て、消費することがステータスとされました。

「持続可能な発展」、この耳障りのよい言葉を実現することは至難です。暴論を覚悟に発言すれば永久機関を発明するに近いと言えましょう。組織はにっちもさっちもいかないという状態まで進まないと事態を変えることは難しいです。

原点回帰

200年を越す鎖国政策をしながら、資源を再利用して絢爛文化を築き上げた時代がありました。

ないものは他から調達することができますが、今の時代、あまりに安易にことが運ばれ過ぎます。かつては繕(つくろ)うという行為があり、嫁入り支度に母親から伝えられました。

高度成長前の話ですが、ある中堅鉄道電車に破れを繕った座席を見つけ感心したことがありました。破れをガムテープで覆い隠すような補修でなく、目立たない糸で細かに破れを結んでいました。人件費がそれほどかからない時代だから可能だったかも知れません。

昔、ズボン(今流にはパンツ)を買うと必ず端切れが付いてきました。不注意でカギ裂けしたときの補修用布です。ミシンでギザギザに目立たないように補修したものです。

働いてお金を稼げる環境にある場合は、古いものは捨て新しいものを購入した方が効率的です。今は労働時間の短縮が叫ばれ、休みになる祝祭日が増えています。

以前より人件費は高くなっていますが、逆に考えると自分が他人に仕事を依頼するときには高額な経費を必要とします。

ここらへんで昔に帰れる部分は原点回帰を図り、新しいやり方が相応しいのならば現状を踏襲して大胆に見直す時期が到来したと言えるでしょう。変わらないと置いて行かれます。合言葉は原点回帰です。

終わりに

あり余る時間を利用して、オリジナル作品を家族のために作ってみましょう。

頭を休めるために、よろめきドラマや三面記事番組もよく見ます。

最近、コンビニで買うおにぎりは大変おいしいですが、おばあちゃんが作るおにぎりに感動する青少年の出現を期待したいものです。

山号・寺号・院号

日本30景バージョンアップ

日本30景を案内するにあたり、趣きのあるBGMが流れるなか、観光地を地図上に表示しました。そして、デジタル時計には個別の背景色を付けました。また、主なモダンブラウザ(Chrome, opera, firefox, edge, ie11)で動作するように、自動案内を止め案内スタートボタンをクリックして観光地のアナウンスに進むように改訂しました。いきさつは詩人・杜甫ブラウザの改訂による変更をご覧ください。

寺院の呼称は様々

仏教の寺院は寛永寺のように寺号で呼ばれます。その他に東叡山という山号を持っいます。東叡山寛永寺より上野の山の寛永寺が聞き慣れています。

一方、成田山新勝寺は山号を省略しないことが習わしです。

東京都台東区浅草(あさくさ)にある浅草寺(せんそうじ)は金龍山(きんりゅうざん)という山号がありますが、金龍山浅草寺とは呼ばず山号を省略して浅草寺と呼ばれています。

また、数は多くありませんが知恩院のように院号でよばれることもあります。院は皇族が門跡となっている寺院に許された呼称で華頂山知恩教院大谷寺(知恩院)や高尾山薬王院(有喜寺)があります。

[フリー絵画] 小林清親 「浅草寺雪中」 (1881)

その他、寺院や関連する建物に堂、閣、坊、庵、亭、殿の付くものが多いです。金色堂、今日庵、清涼殿、冷泉家時雨亭、起雲閣、海宴坊などがあります。

今回、日本30景として金龍山浅草寺音羽山清水寺を取り上げているので山号・寺号・院号に触れてみました。

おまけ

寺院や地名を英語表記しましたが、曖昧さが入っています。富士山はMt. Fujiが通例ですが大山はMt. OhyamaあるいはMt. Daisenが一般的です。Mt. OhあるいはMt. Daiとは表現しません。

平安神宮はHeian-jingu Shrineですが、南禅寺はNenzen-ji Templeになるようです。

決して、月山をMt. Gatsuと表記しないでください。英語表記には観光庁の多言語対応ガイドラインにみる固有名詞の表記方法10のポイントが参考になります。

 

Japanese tourist information

Japanese thirty big tourist spot game

日本名勝地30案内(Japanese scenic spot place 30 guide)

日本において、爽やかな季節を迎えています。この時期、『風かおる五月』と称し、一年のうちでも最も爽やかな気持ちのいい月の一つとされています。日本の名勝地30箇所を案内します。30の選定には、読売新聞創刊135周年を記念して選ばれた「平成百景」を基に筆者の好みを加味しています。

画面の左に、日本発祥の絵文字1100個余りを描画しました。お楽しみください。

日本にはこれといった鉱物資源はありませんが、くっきりとした四季に彩られた豊かな自然に恵まれています。日本の美しさを知るきっかけになれば幸いです。

A refreshing season is met in Japan. One over 1 calls “wind Kaoru Satsuki” this time, and it’s said to be one of the most refreshing pleasant months even over 1. 30 Japanese scenic spot places are shown. 135th anniversary of Yomiuri Shimbun first publication is commemorated in selection of 30 and writer’s taste is being seasoned based on chosen “Heisei hyakukei”.

About 1100 pictographs of Japanese origination were drawn to the left of a screen. Please enjoy yourself.

There are no mineral resources such as this in Japan, but it’s blessed with the abundant nature colored clear four seasons. I should be very much obliged if it be the trigger from which I learn about beauty of Japan.

遊び方(How to play)

退屈しのぎに、ルーレットゲームを用意しました。ラッキー番号を引き当てるとファンファーレが鳴り響きます。適宜、ご利用ください。

To kill time, a Roulette game was prepared. When the lucky number is won, a fanfare rings. Accordingly, please use it.

Japanese scenic spot place 30 guide