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

ものづくりに関する想い

夏休み課題例の解説

課題例のおさらい

前回、初秋を感じさせる風景画に、郷愁を誘うBGMを流して和歌を縦書きに表示する課題を作成しました。

そして、表現方法を中心に作り方の概要を総花的な説明に終始したきらいがあります。今回は、説明しきれなかった部分について補足説明します。

最初の目標

まず、先人が発表しているサンプルコードを入手して動作させることが理解の早道になることが多いです。車を改造して公道を走ることは許されませんが、ひな形として入手したソースコードを変更して動作させても問題は起きません。

黎明期のコンピューターでは不安定なソフトウェアを動作させるとシステム破壊などがありました。システムが進化した今日、このような心配は皆無です。異常動作が自分のアプリ以外に波及することはありません。

我田引水になりますが、ハードウェアと周辺工学の進化にともなう環境整備はコンピューターの学習者にとってたいへん恵まれた状況にあると言えるでしょう。

動作確認済みと称されるコードを走らせて、その動きを観察します。その中でたった一か所を変更して動作の変化を調べましょう。例えば、コードの一部分color:red; をcolor:blue; に変えたときの動きを注視して両者の違いを確認しましょう。赤色で表示されていたものが青色に変わったことが分かれば大きな自信になることでしょう。

超簡単例


HTMLコード表示
簡単な例です。
<span style="color:red;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。

HTMLコード表示
簡単な例です。
<span style="color:blue;">赤色で表示する。</span>
簡単な例です。
赤色で表示する。
少しずつ変更して違いを確認します

HTMLコード表示
簡単な例です。
<span style="color:blue;">青色で表示する。</span>
簡単な例です。
青色で表示する。

 

夏休み課題例の解説

本題の課題例の解説に入ります。課題例を隈なく理解するためには、HTMLやJavaScriptの初歩からの手ほどきが必要ですが、母校の校歌やお気に入りの歌詞を縦書きに表示するために参考になるような説明をします。

課題例の説明

前回に示したコードの行に沿って説明します。

  1. 1~7行、HTML文書であることを宣言し、縦書きライブラリーを組み込む。体系づけて知識を吸収するには《動作させながらゼロから学べるJavaScript, 256円》、《作りながら学ぶ HTML/CSSデザインの教科書, 2800円》等を参照。
  2. 8~56行、このドキュメントの表紙や縦書きで表示する主要部。
  3. 9~17行、表紙のイメージ図、再生ボタンの扱い方、BGMの曲名、本ドキュメントの著作権表示、夏休み課題例の著作権表示例などを定義する。
  4. 18~55行、JavaScriptで定義することを宣言。。
  5. 19~20行、和歌二首の現代語訳を定義、三首めに最後のメッセージを代替。
  6. 21~23行、和歌の本文を振り仮名付きで定義。縦書きはh2vRの仕様で定義。
  7. 25~26行、音声データファイル名、曲名などを定義。
  8. 27行。曲名に対する音量、タイトル文字表示色、背景画像を定義。
  9. 28行、和歌の表示順カウンタ。
  10. 29~33行、BGMのイベントオブジェクトのプレイイベントを捕捉した時の処理を定義。
  11. 34~37行。再生完了時の処理を定義。
  12. 38~54行。再生完了イベントで起動する関数。
  13. 39行、デバッグ文。
  14. 40~44行、背景画像、textcolor、ブロックを可視化、現代語訳と和歌を設定。
  15. 45~46行、切り替えを有効化。
  16. 47行、BGMの音声データを設定。
  17. 48行、BGMのタイトルを設定。
  18. 49~52行、BGMのとき、BGM関連データを設定。
  19. 53行、開始、一首目、二首目、終わりカウンタを更新。
  20. 57行、このドキュメントを締めくくる。

 

さらなる試み

ものごとを大成させるに王道はありません。当ブログでは優しいサンプルを入手して自分のものとして吸収し、それを少しずつ拡大・拡張して高みを極めることを目標にしてきました。

自分流とオーソドックスを交互に繰り返してもよいでしょう。早く自分に見合った学習法を確立されるように祈っています。

 

地球はめぐる

立秋2018

近ごろ、大雨、強風、竜巻、河川の決壊、土砂崩れ、海の向こうでは山火事が頻発しています。

化石燃料の大量使用や森林の減少が原因なのか。

限りある地球を大切にしたいものです。

一方、八月七日は立秋です。記録的な猛暑はあと、わずかで終わってほしいです。

地球はめぐり、夏から秋の到来です。

 秋の到来

 

赤とんぼ 作詞:三木露風、作曲:山田耕筰

【現代語訳】
秋が来たと、はっきりと目には映らないが、
風の音で秋の訪れに気づかされました。
あきぬと
 にはさやかに
  えねども
かぜおとにぞ
 おどろかれぬる
 古今和歌集 秋歌上 一六九 藤原敏行ふじわらのとしゆき

 

夏祭り

眠り流し(ねむりながし、ねぶりながし)

夏祭り

眠り流しとは夏の睡魔を払う行事の総称。青森のねぶた祭り、弘前のねぷた祭りなど東北地方に多いですがこの祭りは全国的です。

伝統的なお祭りは主催者にとって、生活そのものそれ以上の感慨があることでしょう。

ここにも人口減少の現象が影を落としています。

かつては神輿を担ぐにも優先順位があり、新参者には担がせてもらえないとの嘆きがあったようですが、今では担ぎ手が減り「来る者拒まず」が定着しつつあります。

開催の意味

秀吉の茶会、お城の花見、専制時代の夏祭りは政治的な意味合いが強いとも言われています。

為政者は日ごろの締め付けを和らげ、うっぷんから目をそらせるガス抜きの効果を期待したことでしょう。

娯楽の少ない庶民には数少ないワクワク感のある時期であったことと思われます。

一般には五穀豊穣、子孫繁栄、疫病撃退を願って民衆のエネルギーをぶつけ合ったものと思われます。

夏の俳句

芭蕉が《奥の細道》を著した旅の行程で、登米-一関-平泉とたどったときに詠んだ夏の俳句を衣川の風景に重ね合わせて挙げます。

 
 夏草なつくさ
  つわものどもが
   ゆめあと
     松尾芭蕉まつおばしょう
平泉、奥の細道

 

群雄割拠の戦国時代

将棋界のタイトル

将棋界には8大タイトルがあり、昨日、豊島棋聖が誕生して8人が一つずつタイトルを分け合う群雄割拠の戦国時代に突入しました。相撲界において1年6場所制で6人の優勝者が出現するなどはあり得ないのではないだろうか。

レベルの低い優勝争いで時の運が大きく影響してコロコロ優勝者が変わることをどんぐりの背比べなどと言います。一方、力が拮抗した実力者(豪傑、英雄、英傑、風雲児、国士無双…)がしのぎを削りあって覇権を競い合っているさまを群雄割拠といいます。将棋界はまさに群雄割拠であり、ファンとしてはワクワク感でいっぱいです。

コストパフォーマンス

話が飛びます。昔、ハイセイコーという人気競走馬がいましたが、賞金の高いビッグレースはタケホープにもっていかれました。大衆は雑草のような存在のハイセイコーを応援しましたが、世の中、思い通りにいかないものだと知らされました。また、人気の高い巨人戦のために力を温存すべく、他のチームとの対戦は全力投球を控えて立ち向かった熱血投手もいたようです。

 

将棋の話に戻って、1年間の全対戦勝率が5割を切るタイトル保持者が存在します。体調やスランプのせいでしょうかコストパフォーマンスの高いライフスタイルです。常態化すれば人気面で不利になることでしょう。人気があれば将棋以外のコマーシャルで稼ぐこともできますがそれがかなわなくなります。

マージャンにおいて安い点で数多く上がっても勝てません。将棋界で賞金の高いタイトル戦に全力を傾注するのは自然です。多くのタイトル戦には参加資格があり、予選を勝ち上がらないと決勝には進めません。ぽっと出のにわか馬鹿力で永続的な活躍は難しいです。

将棋界のスポンサー

      名 称 主催(協賛)
  1. 王将戦 スポーツニッポン新聞社、毎日新聞(囲碁・将棋チャンネル)
  2. 棋王戦 共同通信社
  3. 叡王戦 ドワンゴ
  4. 名人戦 毎日新聞社 朝日新聞社(大和証券グループ)
  5. 棋聖戦 産経新聞社
  6. 王位戦 新聞三社連合
  7. 王座戦 日本経済新聞社
  8. 竜王戦 読売新聞社

 

将棋界のスポンサーは新聞社が圧倒的です。ラジオ時代に始まったNHK杯はタイトル戦ではありませんが普及などに大きな貢献があったことでしょう。

女流プロのタイトル戦は省略しました。それにしても待望の女性棋士第一号は誰になるのでしょうか。女流棋士でなく女性棋士です。陸上100mで初めて10秒の壁を破ったジム・ハインズのように長く記憶にとどまることでしょう。

巨人・大鵬・卵焼き

巨人・大鵬・卵焼きは子どもに人気のあるものの代名詞でした。その当時、スポーツの世界では強大な力を持つチームが連続優勝して人気を独占していましたが、その後、変わり映えのない勢力図に飽きがきて混戦模様になったと記憶しています。

プロ野球でリーグ優勝しても監督交代があり、「勝てば官軍、負ければ賊軍」と単純にはいかないようです。乱世は高みの見物者にとって最高の贈り物です。

リサイクルと整理

不用品回収

最近、使用済みパソコンを一掃しました。これまでは暮れのイベント時期に業者の集積所に運んで無料で引き取ってもらいました。

チャンスを逃して、貯まりに貯まっていたところなので、大量の不用品を適切に廃棄できてせいせいしています。

レアメタルを回収してリサイクルの一助になれば幸いです。このたびは、決められたサイズの段ボールに、複数のパソコンを梱包してインターネットによる申し込みをすると宅配業者が着払いで集配してくれる方式でした。

廃棄物が処理場に届いた時と処理が完了した時にメールにより連絡が入るので、適切に回収が行われたものと思われます。

限りある資源を再利用する機運を大切にしたいものです。電子部品から金、銀、インジウム、錫、タンタルなどを分離して再利用します。都市鉱山を掘り当てて巨万の富を目指せるかも知れませんが、地道な作業になることでしょう。

リサイクル運動

江戸時代は究極の循環型社会が結実した時代ではないでしょうか。近視眼的な経済効果で物が動く傾向に鎖国制度がブレーキをかけ、資源の再利用に向かわせたのではないだろうか。

昭和の中頃までは廃品回収屋さん、鋳掛屋さんなどが辻々に回ってきたように記憶しています。その後、大量生産、大量消費時代が到来し、やがて一巡し再利用への回帰が叫ばれるようになりました。

昔は廃品でも再利用できるので、なにがしかの実入りがありましたが、今では有料で回収してもらいます。新聞、段ボール、雑誌類は回収業者が回ってくる地区があり、自治体の無料回収と競合する形になっています。

 

回収業者によるトイレットペーパーやティッシュペーパーとの交換は、玄関先まで回収に見えるので高齢者には重宝されています。

地方ではゴミ集積所が遠くにあると車で運ばざるを得ないことになり、免許証返上の高齢者には業者による回収は大変ありがたいと好評です。

自治体への回収物は公共の集積場に置くので、それを無断で持ち去るものがいます。

一方、回収業者は自宅の私有地に置くことを奨励し、私有地からの持ち去りは明らかな窃盗であり無法者をけん制しています。

自治体の予算が年々、先細りになりコミュニティの市民運動費も激減し、無償提供を薦める自治体と回収業者とのバトルは、きめ細かなサポートが採否を分けそうです。

クッキー具体例

入力を省略する例

クッキーを利用することにより、いつも入力する項目を省略することができます。ある組織の中で掃除当番や発表者をくじ引きで決めることがあります。

あみだくじゲームで決める場合は参加人数を指定する必要があり、この人数は一定していることが多く、前回の値を記憶しておけば、入力を省略することができます。

前回の参加人数をクッキーに保存し、次回に利用する例を挙げます。

動作例

アプリを動作させると、ここでは参加人数の初期値は10に設定されます。あみだくじ参加人数を設定し、再び、起動すると前回の参加人数に初期値が切り替わります。その人数でよければ、オレンジの確定ボタンをクリックすると、参加人数の設定を省略することができます。

クッキー具体例 ©TacM, 2018 Ver0.01

 参加人数(3~16)
「あみだくじ参加人数を設定中」

 

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

あみだくじの作り方についてはあみだくじの資料を参照してください。

サンプルコード

<!doctype html>								<!-- participants.html, 2018-06-26 -->
<html>
<body>
<p style="font-size:32px; color:royalblue;">クッキー具体例<span style="font-size:12px; color:magenta;">&emsp;&copy;TacM, 2018 Ver0.01</span></p>
<input id='sp' type="number" id="step2" min="3" max="16" step="1" value="10" style="width:50px; font-size:20px; font-weigt:bold; color:navy;">
<a onclick='numberSet()'><span style="text-decoration:underline; color:orange; font-size:20px;">&nbsp;参加人数(3~16)</span></a>
<div id="guide" style="font-size:28px; color:green;">「あみだくじ参加人数を設定中」</div>
<script type="text/javascript" charset="Shift_JIS">
const keyName = "numberOfParticipants";		//2018-06-24-20:25
const maxAge=24;							//保存期間、24時間
var speed = 10;								//参加人数初期値

if (!navigator.cookieEnabled) alert("cookieを使用可能にしてください。");	//cookieを使用できるようにする
	var velocity = GetCookie(keyName);		//参加人数を取得
	console.log("VELOCITY=",velocity,speed);
	if(velocity != speed)	document.getElementById('sp').value = velocity;	//参加人数を更新する

function numberSet(){						//参加人数を設定
	var w = document.getElementById('sp').value;
	console.log("numberSet", w);
	SetCookie(keyName, w);					//クッキー保存
	document.getElementById('guide').innerHTML = "参加人数を"+w+"人に決定しました。";
}
function GetCookie( name ){					//クッキーを取得
	var cookieName = name + '=';
	var allcookies = document.cookie;		//クッキー全体
	var position = allcookies.indexOf( cookieName );	//キーで指定された項目の位置
	var score = speed;						//未登録時の暗黙値
	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));	//指定キーのデータを抽出
	}
	return score;
}
function SetCookie( name, data){			//クッキー保存
	var expire = new Date();
	expire.setTime( expire.getTime() + 1000 * 3600 * maxAge );				//保存期間
	var newData = name + '=' + data + ';expires=' + expire.toUTCString();
	console.log("SetCookie", name, data, newData);
	document.cookie = newData;				//cookieを更新する
}
</script>
</body>
</html>

余禄

JavaScriptなどのオブジェクト指向言語は、コードの記述量が少なくて済み開発工数の削減につながります。

かつては表(テーブル)をコード化する際、9999や-1、文字データならば//などを最後の項目に定義して、柔軟性のあるプログラミングをしていましたが、機能豊かな言語では、rows.lengthのようにテーブルの属性を指定すると項目数が得られるようになっています。

一方、テレビのチャンネル番号のように、最後に利用した番号を記憶する方式は利便性が高いです。

あみだくじ参加人数は一定の場合が多く、クッキーを使って前回の参加人数を暗黙値として指定することができ、具体例を示しました。

クッキーの扱い方

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

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

クッキーとは一般的には小麦を主原料にした焼き菓子のことですが、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月初旬に行われる行事であり、鍛冶屋、刀工、鋳物師など鉄を商いにする匠たちのおまつりです。ふいごとは鉄を暖めるために風を送る送風器のことでより大型で足踏み式のものはたたらと呼びます。

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

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