ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。ものづくり筆耕ブログinventor技術の進歩スポーツや知的な競技のルール改正は常につきまといます。決められたルールの中で新しい手法を考えていち早く導入して他を圧倒することはよくあることです。その方法がえげつなかったり、危険を伴う場合は使用禁止となる場合がありますが、合法的に誰でもが採用できる方法ならば禁止になることはありません。薬物を使って体を強化したり、イルカの生態を極限まで応用した水着などは禁止されました。バレーボールではアンダーハンドサーブが一般的でしたが、今ではオーバーハンドサーブやジャンプサーブが使われます。これらはなんの制約もありませんが、サーブ権を持った場合のみ得点になるというルールがラリーポイント制にルール改正されました。将棋や囲碁の試合で第三者の助言を得ることはルール上、禁止されています。個人対個人の対戦だから厳格に守られなければなりません。凌駕するようになり、他人に隠れてコンピューターから助言を得ることが可能になりました。文明の利器を使わない方が不利になります。これからは試合場にスマホの持ち込みが禁止になりそうです。陸上競技などでは、外部からの助言は応援であり許されています。将棋や囲碁での外部からの情報は助言というより、代理行為そのものになっています。ル改正が行われたり、人間と機械が一体になってなんでもありの対戦が行われるのでないかと推定されます。野球はチームによる団体競技ながら、スターティングメンバーに常時、選ばれなければならず、ある面、個人競技ともいえます。対戦ピッチャーの記録は、球団が管理・解説してくれます。個人的に球団(会社)よりももっと精緻な情報を収集して分析し、他に抜きんでる選手が現れるかも知れません。最後に斬新な手法で天下を取っても、それが著作権で保護されるように他が入り込めないようならば、優勢を長期に維持できますが、一般には牙城を崩されてボロボロになりかねません。長期政権を続けるには鉄壁な実力を築くほかないでしょう。ものづくり筆耕ブログinventor台風襲来9月26日は台風襲来の特異日です。今年は12号~17号が9月に発生しています。9月になって各地に風水害の被害を引き起こしましたが、幸いにして特異日の本日は静かです。1959年の9月26日18時頃に和歌山県潮岬の西に上陸し、のちに伊勢湾台風と呼ばれた台風第15号は、死者4,697名、行方不明者401名、負傷者38,921名、住家全壊40,838棟、半壊113,052棟、床上浸水157,858棟、床下浸水205,753棟などの甚大な被害をもたらしました。大きな台風がやって来ると水不足は一気に解消されますが、「過ぎたるは猶及ばざるが如し」と言われる中、ちょうどには物事は進まないのです。真田丸がクライマックスにNHK大河ドラマ『真田丸』が佳境に入っています。石田光成憎しと関ヶ原の戦いでは東軍に与した加藤清正が、今回のドラマでは家康の手にかかって毒殺されました。秀吉の遠い親戚とも言われ城づくりの名人である加藤清正は、徳川家康にとって相当に怖い存在であったと思われます。加藤清正の死因には諸説あって、公式には(生き残った勝ち組には)多くの女性に接したことによる梅毒が原因とされています。池波正太郎作の『火の国の城』では山中忍びの手により遅延性の毒を盛られて死に至りました。歴史は勝者によって語られます。その点、小説は作者の創作であり、自分の思い入れを主人公の行動に織り込むことも可能です。いつかは笛の名手、哀れの公達「平敦盛」や怜悧な官僚の石田光成、天皇想いの乃木希典を主人公にしたドラマが人気を博することでしょう。話は真田丸に戻って、真田信繁は相当の艶福家でありました。多くの魅力的な女性に囲まれ10人を超える子女が育ちました。後に幸村と呼ばれ人気沸騰しました。真田幸村(信繁)の直系子孫は現在14代目にあたり、宮城県仙台市でご存命です。巡る旅もほどよい季節になりました。ものづくり筆耕ブログinventorサービス開始ストリートビューのサービスが始まった頃、知り合いの家や観光地をネットサーフィンならぬストリートサーフィンしました。「A氏の住んでいるところがサポートされているのに、ここはまだ未サポートとは理不尽な」などと感想を述べていました。いざ、サービス領域に入るとプライバシー保護が十分かなどと不安も生じます。心配や思わぬ経験を綴っていきます。トピックス的な事柄を取り上げてみます。1会社の前で従業員の集合写真が写っている。2道路上に牛が写っている。3新築前の旧宅が掲載されている。4胸の谷間がくっきりな女性が写っている。5路上に死体が写っている。(説明文による)6路チューのカップルが写っている。7微妙な洗濯物が写っている。8くわえタバコの歩行者が写っている。9撮影者が警察官の職務質問を受けている。10お店や業者の幟が写っている。意外な使い方ストリートビューについては、個人情報があまりにもあからさまになるとの不安がささやかれています。物事には光と影が必ず付きまといます。ぼかしを入れて欲しい場合などは、「問題の報告」で申告することができます。この他にも、ネット社会は多くの問題をはらんでいます。実際に体験した意外な使い方をまとめてみました。現在地から、何百kmも離れた面識のある場所の業者と連絡を取らなければならないことになり、ネット検索や電話帳による調査を考えました。対象を絞り切れず困っていると、ストリートビューにたどり着きビューイングを繰り返すと核心に触れる幟旗を発見しました。その旗は風にたなびいて店名や電話番号が裏返しに写っていたので、PrintScreenで画像を取り込み、そのイメージを左右反転して求める情報を取得することができました。プログラミングinventorユーティリティーからhtmlへ最近、文書ファイルを配布したり、メールマガジンの書式にHTML仕様を採用するケースが多くなったことを《文書配布にhtml採用》で語りました。お礼状や年賀状の作成は、印刷サービスアプリを使うことが定番になっています。それらは住所録の作り方などで群を抜いたすぐれものと言えましょう。住所録が完成すれば、印刷は独自仕様を採用したいことがあります。様=往復ハガキやあらかじめ配布する回答用ハガキには、上図のように宛名を書いておきます。その際、宛名の最後は「様」でなく「行」にしています。印刷サービスアプリではどのようにも指定することができますが、「行」に二重取り消し線を引き、横に「様」を印刷する指定は容易にできるものではありません。自分に敬称を付けることは礼を失するとの意見が強い中、受け取り側に煩わしい手順を強いることは避けるべきという風潮が少しずつ芽生えてきて、最初から「様」にした方が相手に敬意を払ったやり方であると先駆者は提唱しますが、まだ大勢を占めるには至っていません。《礼儀・常識は変化します》にてこの辺りの思いを述べています。そこでワープロソフトで印刷するのならば、二重取り消し線を引いて「行」を取り消し、「様」を印刷する方法は可能です。ここではHTMLを用いたひとつの方法を以下に示します。「行」に「様」を上書きする手法はHTMLのDIV要素、STYLE属性のmargin-top、margen-leftにより画像や文字を重ね書きすることができます。次にサンプルコードを示します。ものづくり筆耕ブログinventorストリートビューでご案内グーグルストリートビューをハイパーラプス技術でコマ落とし処理を施し、京都駅から比叡山延暦寺までを末尾の段落でご案内します。ストリートビューの解説や閲覧可能場所について、《一期一笑ラボ》さんが一年前に発表しています。これによると主要離島を含め日本全土のほとんどをカバーしています。一定の通行量がある主な道路だけです。京都御所近辺ハイパーラプスの制御ではアップロードするとなぜか動画が動作しません。解決には時間がかかりそうです。ローカル環境では期待した動作になるのでScreenCastifyでデスクトップキャプチャーして動画に保存しました。それをvideo要素で動画を表示しています。動画はmp4,ogv,wmvの3種類を用意しているので主要ブラウザで動作しますが、すべてのブラウザに対応するものではありません。ハイパーラプスとコマ落としについてハイパーラプスとは、そもそも、インターバル撮影を長時間、カメラを移動しながら撮影する方法です。日本の主要沿道風景はグーグルによって撮影され公開されています。商用利用でなければ無料で参照できます。それをもっと高速に、さらに自動で、そして折々に効果的な機能を付加する技術がHyperLapseです。HyperLapseを応用するにはHTMLやJavaScriptの知識を必要としますが、世界中の先発開発者が組み込み手法を解説しています。当ブログでも、それらを参照して幾分、かみ砕いた記事を《グーグルストリートビューとハイパーラプス》や《奥の細道》街道をゆくに載せています。この技術を土台にして60秒のガイドブックに仕上げています。京都駅から比叡山山頂までバスが運行されています。左上の地図で走行場所を確認しながら沿道風景をご覧ください。このページはウィジェット欄が非表示になっています。動画再生は全画面表示に切り替えてご覧ください。動画を再生するには、videoタグをサポートしたブラウザが必要です。前々回に、《CSSで作る全ブラウザ対応marquee》を発表しましたが、全ブラウザ対応と謳っておきながら、実際はChromeでしか、正常動作になりませんでした。Explorerではサポートされないなどが原因でした。未サポート機能は代替策を採用し、画像とテキストの左と右スクロールを織り込み、童謡に同期して画像を切り替えるCSSで作るマーキープログラミングについて語ります。marquee要素との違いマーキーはネオンサインのようにスクロールするので、経過とともに画像やメッセージを変更したり、一定回数の繰り返しで終了したいことがあります。marquee要素ではloopオプションで簡単に設定できましたが、jQueryライブラリとgithubプラグイン方式ではloopのようなオプションはないようです。代りにfinishイベントが用意されて、きめ細かい処理を織り込むことができます。これらを解析するにあたり、aamirafridi.comサイトに記載されているサンプルコードがたいへん参考になりました。CodePen.」の小さなサンプルコードを動作させ、理解して発展させています。CSSで作る全ブラウザ対応marquee第3弾Up:marquee要素はいずれ消滅する恐れがありますが、CSSで作るMarqueeはjQueryライブラリサポートのスパンが長いほか、marqueeプラグインソースを取り込んでいるので安定した動作になるでしょう。ブラウザの特徴ブラウザは数種類あり、各人の好みもありどれが最高とは申し上げられません。過去はともかく、今もって予算を投じて改良し続けているブラウザが良いと思われます。機能の高いブラウザは、セミコロンや閉じブロックを忘れても、ほぼ正常に動作します。反面、機能の低いブラウザはセミコロンの省略などに厳しく対処してくれます。気に入ったブラウザをいつも使っていても、文法エラーを厳しく指摘してくれるブラウザを見捨てることなく使うと何かと役に立ちそうです。Explorerで動作を確認することができました。Edgeではなぜかスクロールが始まりません。Marquee要素を使った場合は、スクロール動作にぎこちなさが見られましたが、CSSで作るMarquee動作はいずれのブラウザでもスムースな動きになっています。プラグイン第2弾の実行例marquee要素は一つも使われていません。解説は次回に行われます。当ブログの近頃の記事で秋の七草を取り上げています。今回も下から上にスクロールする画像を載せています。そこで万葉集から秋の七草を参照します。万葉集に山上憶良の「秋の七草にまつわる歌」を2首、掲載されています。最後の七草に朝顔を取り上げていますが、今では桔梗を挙げる場合が多いようです。薄(ススキ)は別名の尾花(オバナ)と表現されています。栄枯盛衰いつの世も栄枯盛衰は付いて回ります。未来永劫に一人勝ちはあり得ません。勝ち続けると慢心が生まれます。放ておいてもトップ交代は起きます。この辺りを平家物語が突いています。平清盛は武家政権を確立したことで、歴史的にはもっと評価されて然るべきなのに低いのは平家物語の冒頭の文言がその理由でしょうか。画像や文字をスクロールする機能であるmarqueeの歴史は深く、利用度も高いのに鬼っ子的な扱いは気の毒です。HTML5の正式な仕様からも排除され、低評価です。何か平清盛に似ているように感じられます。テコ入れ正式仕様から外されてもすぐに使えなくなるわけではありませんが、いずれ問題は起きそうです。<markquee>〇〇〇〇</marquee>とするだけで左にスクロールする機能は重宝です。これに代替する先進的なテクニックはまだ見ていません。そこでマーキー要素(marqueeタグ)を使わずに、全ブラウザ対応を目指してCSSだけでスクロール機能を実装してマーキーをテコ入れしました。前回の《秋の七草と赤とんぼ》で多用した<marquee>要素はひとつも使っていません。JavaScriptライブラリのデファクトスタンダード管理機関からjQueryライブラリとgithubからダウンロードしたjquery.marquee.jsを利用しています。実装方法1ソフトウェア開発プロジェクトのためのソースコード管理サービスを司るgithubからプラグインソースコード一式jQuery.Marquee-master.zipをダウンロードします。2jQuery.Marquee.jsをインクルードする前に、新しいjquery.min.jsをインクルードします。公開サーバーのアドレスにリンクします。3jQuery.Marquee.jsを自分のフォルダに確保し、ソースコードを参照できるようにインクルード指定します。自分のローカルアドレス、または自分のリモートサーバーアドレスにリンクします。JS)からひな形のソースコードを作ります。5スクロールするコードが確認できれば、実装の玄関口にたどり着いたことになります。タイニー版マーキーコードと実行例タイニー版コード上で示したgithubのサイトからHTML,CSS,JSを一つのファイルにまとめてあります。jquery.marquee.min.jsのファイルは適切な場所に格納し、正しいアドレスを設定します。worldおわりに下から上にスクロールする画像を載せる予定でしたが、都合により次回にしたいと思います。前回の「秋の七草と赤とんぼ」はChromeでしか、思ったような動作になりませんでした。今回の方式に焼き直してこそ、鬼っ子「marquee」へのアシスタントと言えるので宿題ということになります。童謡・赤とんぼの演奏にmarquee(スクロール機能)を組み込んでみました。最後に『秋の七草』のイラストが表示されます。再実行は↻ボタンをクリック。前奏0%マーキーの新機軸マーキーが一巡すると空白が生じます。これは「一巡しましたよ」と明白に知らせてくれるので意味がありますが、時間と空間がもったいないと感じる時があります。そのような不満を解決するために、今回は背景画像を表示しています。同じ気持ちを抱いていた方への参考になれば幸いです。プログラミングinventorJavaScript動作環境の違いJavaScriptでWebアプリケーションを開発するとき、まずはローカル環境で実行し、動作を確認する場合が多いでしょう。機能の高いテキストエディタを使って、○○○○.htmlのファイル名でJavaScriptコードを自分のパソコンやスマホのディスクに収録して動作確認することをローカル環境で実行すると言います。あらかた動作確認ができたときに、サイトにアップロードして最終確認へ進みます。そのとき、両者間で動作の違いが発生することがあります。動作の違いのみならず、ローカル環境で問題なかったコードがアップロードしたとたんに、文法エラーになることがあります。文法エラーになることは経験的に把握されていて、多くの例がサイト上で公開されています。その中で&&演算子で苦労された方が多いと思われますので、当方の失敗話をまとめてみます。物事を選ぶとき、条件が複数存在するときがあります。賃貸物件を探すとき、通勤時間と賃貸料をかみ合わせて検討します。検索の絞り込みにはif条件式の中に論理AND演算子が複数個並ぶようになります。論理AND演算子(&&)が2個以上になると文法エラーになります。ローカル環境で正常動作だったので大いに悩んだ思い出があります。そこで以下に示すような関数(check1)を作って、環境に依存しないコードを作成しましたので公開します。確認して範囲外ならば0を、範囲内ならば1を返します。2つの論理演算子は使わずに済みます。条件を並立する場合は*演算子を使うので文法エラーから解放されます。