月別アーカイブ: 2016年9月

ルール改正と斬新な手法

技術の進歩

スポーツや知的な競技のルール改正は常につきまといます。決められたルールの中で新しい手法を考えていち早く導入して他を圧倒することはよくあることです。

%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e3%82%88%e3%82%8a

その方法がえげつなかったり、危険を伴う場合は使用禁止となる場合がありますが、合法的に誰でもが採用できる方法ならば禁止になることはありません。

過去の事例

doping薬物を使って体を強化したり、イルカの生態を極限まで応用した水着などは禁止されました。バレーボールではアンダーハンドサーブが一般的でしたが、今ではオーバーハンドサーブやジャンプサーブが使われます。

これらはなんの制約もありませんが、サーブ権を持った場合のみ得点になるというルールがラリーポイント制にルール改正されました。

最近のルール改正あるいは検討

将棋や囲碁の試合で第三者の助言を得ることはルール上、禁止されています。個人対個人の対戦だから厳格に守られなければなりません。最近、コンピューターが進化して人間をs-role凌駕するようになり、他人に隠れてコンピューターから助言を得ることが可能になりました。文明の利器を使わない方が不利になります。これからは試合場にスマホの持ち込みが禁止になりそうです。

陸上競技などでは、外部からの助言は応援であり許されています。将棋や囲碁での外部からの情報は助言というより、代理行為そのものになっています。

将来の形

将来は人間の体の一部にICチップを埋め込んだり、遠隔地から他人に知られることなく情報を取得することも可能になるでしょうから、外部から不正に情報取得できないようにルーinfomationル改正が行われたり、人間と機械が一体になってなんでもありの対戦が行われるのでないかと推定されます。

野球はチームによる団体競技ながら、スターティングメンバーに常時、選ばれなければならず、ある面、個人競技ともいえます。

対戦ピッチャーの記録は、球団が管理・解説してくれます。個人的に球団(会社)よりももっと精緻な情報を収集して分析し、他に抜きんでる選手が現れるかも知れません。

最後に

dokuso斬新な手法で天下を取っても、それが著作権で保護されるように他が入り込めないようならば、優勢を長期に維持できますが、一般には牙城を崩されてボロボロになりかねません。

長期政権を続けるには鉄壁な実力を築くほかないでしょう。

台風襲来の特異日

台風襲来

9月26日は台風襲来の特異日です。今年は12号~17号が9月に発生しています。9月になって各地に風水害の被害を引き起こしましたが、幸いにして特異日の本日は静かです。

1959-9-261959年の9月26日18時頃に和歌山県潮岬の西に上陸し、のちに伊勢湾台風と呼ばれた台風第15号は、死者4,697名、行方不明者401名、負傷者38,921名、住家全壊40,838棟、半壊113,052棟、床上浸水157,858棟、床下浸水205,753棟などの甚大な被害をもたらしました。

大きな台風がやって来ると水不足は一気に解消されますが、「過ぎたるは猶及ばざるが如し」と言われる中、ちょうどには物事は進まないのです。

真田丸がクライマックスに

NHK大河ドラマ『真田丸』が佳境に入っています。石田光成憎しと関ヶ原の戦いでは東軍に与した加藤清正が、今回のドラマでは家康の手にかかって毒殺されました。

sengoku_kiyomasa_1秀吉の遠い親戚とも言われ城づくりの名人である加藤清正は、徳川家康にとって相当に怖い存在であったと思われます。

加藤清正の死因には諸説あって、公式には(生き残った勝ち組には)多くの女性に接したことによる梅毒が原因とされています。

池波正太郎作の『火の国の城』では山中忍びの手により遅延性の毒を盛られて死に至りました。

語られる歴史

aobanofue歴史は勝者によって語られます。その点、小説は作者の創作であり、自分の思い入れを主人公の行動に織り込むことも可能です。

いつかは笛の名手、哀れの公達「平敦盛」怜悧な官僚の石田光成天皇想いの乃木希典を主人公にしたドラマが人気を博することでしょう。

話は真田丸に戻って、真田信繁は相当の艶福家でありました。多くの魅力的な女性に囲まれ10人を超える子女が育ちました。

後に幸村と呼ばれ人気沸騰しました。真田幸村(信繁)の直系子孫は現在14代目にあたり、宮城県仙台市でご存命です。

高視聴率のNHK放映『真田丸』による影響も落ち着きそうです。上田周辺、真田丸史跡、九度山真田庵などを巡る旅もほどよい季節になりました。

ストリートビューあれこれ

streetview3サービス開始

ストリートビューのサービスが始まった頃、知り合いの家や観光地をネットサーフィンならぬストリートサーフィンしました。

「A氏の住んでいるところがサポートされているのに、ここはまだ未サポートとは理不尽な」などと感想を述べていました。

いざ、サービス領域に入るとプライバシー保護が十分かなどと不安も生じます。心配や思わぬ経験を綴っていきます。

あれこれ

ストリートビューについてネット検索するといろいろな出来事が発生していることが分かりまstreetview-sす。トピックス的な事柄を取り上げてみます。

①会社の前で従業員の集合写真が写っている。
②道路上に牛が写っている。
③新築前の旧宅が掲載されている。
④胸の谷間がくっきりな女性が写っている。
⑤路上に死体が写っている。(説明文による)
⑥路チューのカップルが写っている。
⑦微妙な洗濯物が写っている。
⑧くわえタバコの歩行者が写っている。
⑨撮影者が警察官の職務質問を受けている。
⑩お店や業者の幟が写っている。

意外な使い方

ストリートビューについては、個人情報があまりにもあからさまになるとの不安がささやかれています。物事には光と影が必ず付きまといます。ぼかしを入れて欲しい場合などは、「問題の報告」で申告することができます。この他にも、ネット社会は多くの問題をはらんでいます。

実際に体験した意外な使い方をまとめてみました。現在地から、何百kmも離れた面識のある場所の業者と連絡を取らなければならないことになり、ネット検索や電話帳による調査を考えました。

%e5%b7%a6%e5%8f%b3%e5%8f%8d%e8%bb%a2

対象を絞り切れず困っていると、ストリートビューにたどり着きビューイングを繰り返すと核心に触れる幟旗を発見しました。その旗は風にたなびいて店名や電話番号が裏返しに写っていたので、PrintScreenで画像を取り込み、そのイメージを左右反転して求める情報を取得することができました。

重ね書きの新しい使い道

ユーティリティーからhtmlへ

最近、文書ファイルを配布したり、メールマガジンの書式にHTML仕様を採用するケースが多くなったことを《文書配布にhtml採用》で語りました。お礼状や年賀状の作成は、印刷サービスアプリを使うことが定番になっています。それらは住所録の作り方などで群を抜いたすぐれものと言えましょう。

住所録が完成すれば、印刷は独自仕様を採用したいことがあります。その一つを挙げます。

ユーティリティーから独自仕様

様=




往復ハガキやあらかじめ配布する回答用ハガキには、上図のように宛名を書いておきます。その際、宛名の最後は「様」でなく「行」にしています。

印刷サービスアプリではどのようにも指定することができますが、「行」に二重取り消し線を引き、横に「様」を印刷する指定は容易にできるものではありません。

自分に敬称を付けることは礼を失するとの意見が強い中、受け取り側に煩わしい手順を強いることは避けるべきという風潮が少しずつ芽生えてきて、最初から「様」にした方が相手に敬意を払ったやり方であると先駆者は提唱しますが、まだ大勢を占めるには至っていません。

《礼儀・常識は変化します》にてこの辺りの思いを述べています。

そこでワープロソフトで印刷するのならば、二重取り消し線を引いて「行」を取り消し、「様」を印刷する方法は可能です。ここではHTMLを用いたひとつの方法を以下に示します。

重ね書きの手法

「行」に「様」を上書きする手法はHTMLのDIV要素、STYLE属性のmargin-top、margen-leftにより画像や文字を重ね書きすることができます。次にサンプルコードを示します。

サンプルコード

<div>
<img src="https://aidesign.lolipop.jp/wp-content/uploads/2016/09/Hagaki-T.png" width="450" height="660">
<div STYLE="font-size:40px;color:blue;font-family:serif-ja,serif;font-weight:bold;margin-left:132pt;margin-top:-95pt">様=</div>
<BR><BR><BR>
</div>

比叡山延暦寺までご案内

ストリートビューでご案内

グーグルストリートビューをハイパーラプス技術でコマ落とし処理を施し、京都駅から比叡山延暦寺までを末尾の段落でご案内します。

ストリートビューの解説や閲覧可能場所について、《一期一笑ラボ》さんが一年前に発表しています。これによると主要離島を含め日本全土のほとんどをカバーしています。ただし、一定の通行量がある主な道路だけです。

京都御所近辺
京都御所近辺

ハイパーラプスの制御ではアップロードするとなぜか動画が動作しません。解決には時間がかかりそうです。ローカル環境では期待した動作になるのでScreenCastifyでデスクトップキャプチャーして動画に保存しました。それをvideo要素で動画を表示しています。

動画はmp4,ogv,wmvの3種類を用意しているので主要ブラウザで動作しますが、すべてのブラウザに対応するものではありません。

ハイパーラプスとコマ落としについて

ハイパーラプスとは、そもそも、インターバル撮影を長時間、カメラを移動しながら撮影する方法です。

日本の主要沿道風景はグーグルによって撮影され公開されています。商用利用でなければ無料で参照できます。

rocketnews24_625212

それをもっと高速に、さらに自動で、そして折々に効果的な機能を付加する技術がHyperLapseです。HyperLapseを応用するにはHTMLやJavaScriptの知識を必要としますが、世界中の先発開発者が組み込み手法を解説しています。

当ブログでも、それらを参照して幾分、かみ砕いた記事を《グーグルストリートビューとハイパーラプス》《奥の細道》街道をゆくに載せています。この技術を土台にして60秒のガイドブックに仕上げています。

比叡山延暦寺までご案内

京都駅から比叡山山頂までバスが運行されています。左上の地図で走行場所を確認しながら沿道風景をご覧ください。このページはウィジェット欄が非表示になっています。

動画再生は全画面表示に切り替えてご覧ください。

動画を再生するには、videoタグをサポートしたブラウザが必要です。

Marquee with CSS プラグイン第3弾

CSSで作るMarquee第3弾

前々回に、《CSSで作る全ブラウザ対応marquee》を発表しましたが、全ブラウザ対応と謳っておきながら、実際はChromeでしか、正常動作になりませんでした。output要素がInternet Explorerではサポートされないなどが原因でした。

未サポート機能は代替策を採用し、画像とテキストの左と右スクロールを織り込み、童謡に同期して画像を切り替えるCSSで作るマーキープログラミングについて語ります。

marquee要素との違い

マーキーはネオンサインのようにスクロールするので、経過とともに画像やメッセージを変更したり、一定回数の繰り返しで終了したいことがあります。marquee要素ではloopオプションで簡単に設定できましたが、jQueryライブラリとgithubプラグイン方式ではloopのようなオプションはないようです。

css-marquee

代りにfinishイベントが用意されて、きめ細かい処理を織り込むことができます。これらを解析するにあたり、aamirafridi.comサイトに記載されているサンプルコードがたいへん参考になりました。Events「See the Pen shqKg by Aamir Afridi (@aamirafridi) on CodePen.」の小さなサンプルコードを動作させ、理解して発展させています。

Marquee with CSS プラグインの機能
A Options: オプション
1 allowCss3Support
2 css3easing
3 easing
4 delayBeforeStart
5 direction
6 duplicated
7 duration
8 gap
9 pauseOnHover
10 pauseOnCycle
11 startVisible
B Events: イベント
1 beforeStarting
2 finished
3 paused
4 resumed
C Methods: メソッド
1 pause
2 resume
3 toggle
4 destroy


Marquee with CSS プラグイン

CSSで作る全ブラウザ対応marquee第3弾

Up:







marquee要素はいずれ消滅する恐れがありますが、CSSで作るMarqueeはjQueryライブラリサポートのスパンが長いほか、marqueeプラグインソースを取り込んでいるので安定した動作になるでしょう。

ブラウザの特徴

ブラウザは数種類あり、各人の好みもありどれが最高とは申し上げられません。過去はともかく、今もって予算を投じて改良し続けているブラウザが良いと思われます。

機能の高いブラウザは、セミコロンや閉じブロックを忘れても、ほぼ正常に動作します。反面、機能の低いブラウザはセミコロンの省略などに厳しく対処してくれます。

気に入ったブラウザをいつも使っていても、文法エラーを厳しく指摘してくれるブラウザを見捨てることなく使うと何かと役に立ちそうです。

今回の動作例は、Chrome, FireFox, Internet Explorerで動作を確認することができました。Edgeではなぜかスクロールが始まりません。Marquee要素を使った場合は、スクロール動作にぎこちなさが見られましたが、CSSで作るMarquee動作はいずれのブラウザでもスムースな動きになっています。

童謡に同期するマーキー動作例

CSSで作る全ブラウザ対応marquee第3弾Ver 0.11, ©Aidesign,2016再実行は↻ボタンをクリック



Marquee with CSS プラグイン第3弾



前奏 






 

Marquee with CSS プラグイン第2弾

Marquee with CSS プラグイン第2弾の実行例

marquee要素は一つも使われていません。解説は次回に行われます。



Marquee with CSS プラグイン第2弾

CSSで作る全ブラウザ対応marquee第2弾

Left:

jQuery marquee is the best marquee plugin in the world



Right(data-pauseOnHover=”true”):カーソルをかざすとスクロール停止



Up(data-pauseOnHover=”true”):カーソルをかざすとスクロール停止



Down:

時刻 平日 休日
 9 10 20
10 10 20
11 10 20
12 20 30
13 25 30
14 30 25
15 25 25
16 20 20







CSSで作る全ブラウザ対応marquee

秋の七草

当ブログの近頃の記事で秋の七草を取り上げています。今回も下から上にスクロールする画像を載せています。そこで万葉集から秋の七草を参照します。

aki7flower

万葉集に山上憶良の「秋の七草にまつわる歌」を2首、掲載されています。最後の七草に朝顔を取り上げていますが、今では桔梗を挙げる場合が多いようです。また、薄(ススキ)は別名の尾花(オバナ)と表現されています。

栄枯盛衰

eikoseisuiいつの世も栄枯盛衰は付いて回ります。未来永劫に一人勝ちはあり得ません。

勝ち続けると慢心が生まれます。放ておいてもトップ交代は起きます。この辺りを平家物語が突いています。

平清盛は武家政権を確立したことで、歴史的にはもっと評価されて然るべきなのに低いのは平家物語の冒頭の文言がその理由でしょうか。

画像や文字をスクロールする機能であるmarqueeの歴史は深く、利用度も高いのに鬼っ子的な扱いは気の毒です。

HTML5の正式な仕様からも排除され、低評価です。何か平清盛に似ているように感じられます。

テコ入れ

正式仕様から外されてもすぐに使えなくなるわけではありませんが、いずれ問題は起きそうです。<markquee>〇〇〇〇</marquee>とするだけで左にスクロールする機能は重宝です。これに代替する先進的なテクニックはまだ見ていません。

そこでマーキー要素(marqueeタグ)を使わずに、全ブラウザ対応を目指してCSSだけでスクロール機能を実装してマーキーをテコ入れしました。前回の《秋の七草と赤とんぼ》で多用した<marquee>要素はひとつも使っていません。では実装方法に進みます。

 JavaScriptライブラリのデファクトスタンダード管理機関からjQueryライブラリとgithubからダウンロードしたjquery.marquee.jsを利用しています。

実装方法

ソフトウェア開発プロジェクトのためのソースコード管理サービスを司るgithubからプラグインソースコード一式jQuery.Marquee-master.zipをダウンロードします。
②jQuery.Marquee.jsをインクルードする前に、新しいjquery.min.jsをインクルードします。公開サーバーのアドレスにリンクします。
③jQuery.Marquee.jsを自分のフォルダに確保し、ソースコードを参照できるようにインクルード指定します。自分のローカルアドレス、または自分のリモートサーバーアドレスにリンクします。
④その後は、サンプルコードを収録しているサイトを参照し、例えばSee the Pen LGolj by Aamir Afridi (@aamirafridi) on CodePenあたりを参照して、動作確認済みのソース(HTML, CSS, JS)からひな形のソースコードを作ります。
⑤スクロールするコードが確認できれば、実装の玄関口にたどり着いたことになります。

タイニー版マーキーコードと実行例

タイニー版コード

上で示したgithubのサイトからHTML,CSS,JSを一つのファイルにまとめてあります。jquery.marquee.min.jsのファイルは適切な場所に格納し、正しいアドレスを設定します。

<html>
<head>
<title>Marquee with CSS プラグイン</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A.marquee%20%7B%0A%20%20height%3A%2022px%3B%0A%20%20width%3A%20300px%3B%0A%20%20overflow%3A%20hidden%3B%0A%20%20background%3A%20aliceblue%3B%0A%20%20color%3A%20green%3B%0A%20%20border%3A%201px%20solid%20navy%3B%0A%7D%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;amp;lt;style&amp;amp;gt;" title="&amp;amp;lt;style&amp;amp;gt;" />
<span style="font-size:20px; color:maroon">CSSで作る全ブラウザ対応marquee</span><BR>
Left:
<div class="marquee">jQuery marquee is the best marquee plugin in the world</div><BR>
</head>
<body>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.9.1%2Fjquery.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;amp;lt;script&amp;amp;gt;" title="&amp;amp;lt;script&amp;amp;gt;" />
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22jquery.marquee.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;amp;lt;script&amp;amp;gt;" title="&amp;amp;lt;script&amp;amp;gt;" />  ?===要、修正
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%24('.marquee').marquee()%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&amp;amp;lt;script&amp;amp;gt;" title="&amp;amp;lt;script&amp;amp;gt;" />
</body>
</html>

実行例

Marquee with CSS プラグイン

CSSで作る全ブラウザ対応marquee

Left:

jQuery marquee is the best marquee plugin in the world

おわりに

下から上にスクロールする画像を載せる予定でしたが、都合により次回にしたいと思います。また、前回の「秋の七草と赤とんぼ」はChromeでしか、思ったような動作になりませんでした。今回の方式に焼き直してこそ、鬼っ子「marquee」へのアシスタントと言えるので宿題ということになります。

秋の七草と赤とんぼ

マーキーとの共同

童謡・赤とんぼの演奏にmarquee(スクロール機能)を組み込んでみました。最後に『秋の七草』のイラストが表示されます。



《童謡・赤とんぼ》



童謡《赤とんぼ》
 Ver 0.03, ©Aidesign,2016
音量は適切に。再実行は↻ボタンをクリック。



前奏  0





マーキーの新機軸

マーキーが一巡すると空白が生じます。これは「一巡しましたよ」と明白に知らせてくれるので意味がありますが、時間と空間がもったいないと感じる時があります。そのような不満を解決するために、今回は背景画像を表示しています。同じ気持ちを抱いていた方への参考になれば幸いです。

動作環境の違いを乗り越える

JavaScript動作環境の違い

JavaScriptでWebアプリケーションを開発するとき、まずはローカル環境で実行し、動作を確認する場合が多いでしょう。

少し機能の高いテキストエディタを使って、○○○○.htmlのファイル名でJavaScriptコードを自分のパソコンやスマホのディスクに収録して動作確認することをローカル環境で実行すると言います。

LocalEnv

あらかた動作確認ができたときに、サイトにアップロードして最終確認へ進みます。そのとき、両者間で動作の違いが発生することがあります。動作の違いのみならず、ローカル環境で問題なかったコードがアップロードしたとたんに、文法エラーになることがあります。

ErrorSourceCode

文法エラーになることは経験的に把握されていて、多くの例がサイト上で公開されています。その中で&&演算子で苦労された方が多いと思われますので、当方の失敗話をまとめてみます。

論理AND演算子

物事を選ぶとき、条件が複数存在するときがあります。賃貸物件を探すとき、通勤時間と賃貸料をかみ合わせて検討します。検索の絞り込みにはif条件式の中に論理AND演算子が複数個並ぶようになります。

LogicalAnd

論理AND演算子(&&)が2個以上になると文法エラーになります。ローカル環境で正常動作だったので大いに悩んだ思い出があります。

そこで以下に示すような関数(check1)を作って、環境に依存しないコードを作成しましたので公開します。

コードの特長

以下に示すcheck1関数は引数の値、最小値、最大値を確認して範囲外ならば0を、範囲内ならば1を返します。2つの論理演算子は使わずに済みます。条件を並立する場合は*演算子を使うので文法エラーから解放されます。

サンプルコード

<html>
<script type="text/javascript" charset="Shift_JIS">
const age =    [18, 31, 28, 36, 43, 25];  //年齢
const weight = [56, 62, 74, 58, 66, 64];  //体重
const name =   ["山田太郎", "佐藤一郎", "鈴木次郎", "斉藤三郎", "高橋史郎", "東京五郎"];
function start() {
  for(var i=0; i<age.length; ++i){
    var s1=" ";
    //if((age[i]>=20) && (age[i]<40) && (weight[i]>=60) && (weight[i]<70)) s1="●";
    if(check1(age[i], 20, 40) * check1(weight[i], 60, 70)) s1="●年齢が20~30代で体重が60kg代";
    document.write(i+" "+name[i]+" 年齢:"+age[i]+" 体重:"+weight[i]+"kg "+s1+"<BR>");
  }
}
function check1(mV, minV, maxV){   //(mV >= 最小値) && (mV < 最大値)
  if(mV>=minV){
    if(mV<maxV) return 1;
  }
  return 0;
}

</script>
<body>
<input type="button" onClick="start()" value="論理AND演算子の動作確認"/>
</body>
</html>

動作例