ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。会うは別れの始めとか。会者定離(えしゃじょうり)、春は別れと出会いが交錯します。親子ならばスープの冷めない距離で過ごせたら最高と言われています。手元で仲良く暮らせたらと願うものです。「かわいい子には旅させよ」、「他人の釜の飯を食え」、「世界に羽ばたけ」、「大志を抱け」など、ぬるま湯に浸っていてはせいぜい、町内会の世話役で終わりそうな若者を励ます言葉に事欠きません。たくさんの選択肢で迷うほどです。商売を始めるにあたり、資金や労力が用意できれば十分というわけではありません。書類には表すことのできない、秘伝、ノウハウなど人知を超えたものが成功・不成功を決定づけることがあります。JavaScriptを用いてHTML文書を作るにも、ツールを使って価値の高い文書に近づけます。このたび、Svg要素で矢印付き円弧を含む図形を作成するための小さな道具を作りましたのでお知らせします。Graphics)はテキストを含めて、図形を表示するにあたり、すべて文字で表現するので、図形を拡大しても画面が粗くなることがありません。曲線や直線を表すには、豊富なコマンドを使います。コマンドはHTMLリファレンスマニュアルにしたがって作りますが思い通りになるとは限りません。矢印の角度や長さが適切でないと寸胴のようで醜く、誤差で矢印が逆向きになることがあります。そこで動作を確認できるサポートツールを作りました。矢印付き円弧を作る矢印付きの円弧はpaint.netなどを使うと作成可能ですが、容易ではありません。今回のツールは描画するためのコマンドを仮に作り表示させます。そのとき、そのコマンドをファイルに出力します。満足のいく結果が得られたときに、ファイルにセーブしたコマンドをソースに反映します。console.logデバッグ文にてファイル出力を代替します。コマンドをsvg要素のなかに設置すれば、JavaScriptを使わずにきれいな図形を描くことができます。上の図は今回のツールを用いて円弧に矢印を付けています。長を入力して描画ボタンをクリックすると下図のような円弧と仕切り線が描画されます。次の開始角度は前回の終了角度がコピーされます。よって、2回目以降、連続した領域に円弧を描くには終了角度だけを入力して描画ボタンをクリックします。描画は4回で終了になります。デバッガを起動しconsole.logで出力したメッセージをコマンドに使えるように、コピー&ペーストで取り込み、テキストエディタで編集しHTMLコードを作成します。さいごにこのたびの例題では360度を最高4つの領域に分割するにとどまっています。firefoxなどのブラウザをお使いください。デバッガはどのブラウザにも付属されています。デバッガの使い方については別の機会に譲りますが、右クリックし「検証」から進みます。ものづくり筆耕ブログinventorきれいな表示canvasはHTML5でサポートされた図形を描く時の描画仕様です。最近、設定された歴史が浅い規格だからか、漢字がきれいに表示されません。動的な表現は、CANVASでしかできないと思っていましたが、従来からのdivタグやspanタグでもメッセージや画像データを動的に切り替えられるので動的表現は可能です。CANVASでのテキスト表示はきれいとは言いがたいです。CANVASで動的にテキストを変更するやり方をマスターできたので、最近はdocument.getElementById(“div2”).innerHTMLのような使い方をしています。}}</script></html>動作結果あいうえおさいごに両者を比較するとDIV要素で表示したテキストが鮮明です。これだけの例では差は少ないですがもっと、顕著です。これからは図形はCANVAS、テキストはなるべくDIV,SPANを使っていきたいと考えています。世の中、いろいろなことが起こりすぎています。犯罪を防止するために監視カメラがいたるところに設置されています。暗いところ、人通りの少ないところには危険が潜んでいます。そこに監視カメラを設置という有様です。収穫期になると丹精込めて作った果物を根こそぎ盗んでいく行為も後を絶ちません。確たる証拠がないだけに泣き寝入りが多くなります。他人の振る舞いを見極めることはある程度、可能です。パソコンの音量、TV視聴直前チャンネルなどは履歴が残っています。他に帽子、スーツまでは高級品を揃えても靴がエナメルの安物だったので詐欺師と見破ることができたと聞きました。アランドロン主演映画のワンシーンにありました。趣味として小鳥を飼っていると思っていたら、無断で家宅捜索を受けたときの対策でした。小鳥により飼い主以外の人が知らぬ間に入室したかを知ることができるようです。実印を押す角度を少し傾け、自分で押したか勝手に利用されたかが分かるようにする話はよく聞きますが、角度はまっすぐにして力のかけ具合で左上を薄めに押印するなど高度なセキュリティを施す達人もおられるようです。便利さと危うさTV、ラジオ、新聞は無料かそこそこの料金で見ることができます。ネット検索も無料に近いです。そこには運営者が広告収入で賄っているからです。グーグルなどの検索提供者には通常の人には到底、集めることのできない情報が得られます。それらを必要な人に提供して別の収入を得ることができます。ブログに広告を載せると収入が得られます。そのためにオーバーな表現で広告収入を増やす大企業や個人も存在します。当ブログの広告収入は年間、数百円です。額は少ないですが運営者には閲覧ツールの種類など得難い情報を入手できます。まとめサイトなど、本来の目的から離れて開設されるいるものがあります。ブログなどのSNSも同じ穴の貉(むじな)でしょうか。掲載される広告を選ぶこともできますが、細かな設定は無理です。困ることはブログ記事に反応して広告内容が変わることです。ブログには愚痴めいたことを書く時があります。そのような主張(なかは単なる愚痴)に広告が反応するのは本当に困ります。最後に愚痴は年に二度ほどは許されると思っていますが、四六時中、広告にでてくるのは本意ではありません。『今どきの若者は...』は、たまには許されますが、たびたび出てくると『若者は頑張っているぞ』と言いたくなります。お節介もほどほどにしてもらいたいし、介入するのならば、もっと真意を理解してもらいたいものです。「みつを」はせんだみつお氏ではありません。相田みつをさんの名言を参照させていただきました。地図を目次にする簡潔方法では、47都道府県をすべて長方形に見立てて、クリックした位置から詳細な情報にたどり着くために道筋を立てられるような内容でした。地図画像の複数点をクリックして、その位置に応じた流れにするには、ある点が多角形に内包するかという問題に帰着します。今回はもう少し、複雑な領域をサポートしてみます。度であれば、その点は多角形の内部にあり、そうでなければ外にあると判定する簡便法があります。多角形が単純な凸型ならば問題は起きませんが、左図のような凹部があると期待した動作にならないことが知られています。Algorithm)があります。この回数(cN)が奇数ならば、その点は多角形の内側にあり、偶数ならば外側にあると判定されます。度であるかどうかで判定する方法では、九州・沖縄の地図を図のように簡略化して実装したときに、鹿児島県をクリックしたときに誤動作しました。形領域内部に点が含まれるかどうかを判定を参考にさせていただきました。ここでは、九州・沖縄に限定して実装を試みました。1ヶ所で独立しているのは北海道と沖縄だけであり、この課題をクリアすれば47都道府県をカバーできるでしょう。role-1:上向きの辺。点Pがy軸方向について、始点と終点の間にある。role-2:下向きの辺。点Pがy軸方向について、始点と終点の間にある。role-3:ルール1,ルール2を確認することで、ルール3も確認できる。role-4:辺は点pよりも右側にある。福岡県は8角形、鹿児島県は6角形でありともに凹部を含んでいます。他県はすべて4角形です。本格的な処理に発展させるには38行と42行を拡張させるとよいでしょう。県内、県外の領域をクリックし、納得のいくメッセージが表示されるかを試してください。比叡山延暦寺までご案内でハイパーラプスによる道案内を載せました。ストリートビュー用の動画が完成するまで時間がかかるのが難点です。今回はその時間を利用して、名所のイラストや写真をスクロール表示してみました。ストリートビューイングの手順コマ落としのストリートビュー動画が完成するまでの工程。最後にハイパーラプス動画は準備に時間がかかる割には、表示があっという間に終わってしまうことが残念です。遅らせて表示する方法を模索中です。以前に、地図を目次にするウィジェットの作り方で本格的な地図の利用法を掲載しましたが、今回は違う仕組みで簡単な地図目次を作ってみます。仕組みここでは、canvas要素にaddEventListenerを用いてマウスイベントを取り付けて、クリック位置を管理します。地図の所定位置をクリックするとその県都の情報が表示されるものです。地図を目次にする手順1基準となる地図を用意する例として最後の方に示す関東地方の地図(KantoArea1.png)を考えます。地図は自然な形で画面に収まるサイズが望ましいです。小さい方が更に引き立つと思われるますが、他に表示するものがないので横550px、縦520pxにしました。➁クリック有効領域を地図にマークする県や都の地図上の形は複雑ですが、長方形で代表することにします。下のような地図(KantoArea2.png)を作成します。オリジナルな地図(KantoArea1.png)を残しておくことが大切です。3補助線付き地図とクリック位置が表示されるJavaScriptコードを作成します。このサンプルコードは栃木県から群馬県まで時計回りに、黄色に象られた長方形の左上と右下を順にクリックして、領域の範囲をテーブル化するためだけにあります。入力を失敗したときは再読み込みをしてやり直します。src="http://aidesign.lolipop.jp/wp-content/uploads/2015/09/select06.mp3"></audio></html>4上の関東地方地図の右にデバッグ情報として出力されたクリック位置の値を参照してpointテーブルを編集します。5次に、これまでの開発用コードを保存し、補助線なしの地図に切り替え、クリックされた都県を認識する目次の機能を追加します。6デバッグ用ステートメントを削除するかコメント文にします。使わなくなったmesgテーブルや変数mなども削除します。完成版サンプルコードを以下に掲載します。27行の三項演算子で東京では都を、その他では県が付加されます。33行のreturnは省力できますが、29行のreturnを省略すると正しく動作しません。src="http://aidesign.lolipop.jp/wp-content/uploads/2015/09/select06.mp3"></audio></html>さいごに多角形で象られた複雑な領域をクリックして制御するデータを作成するツールが出回っていますが、ここでは単純な長方形だけをサポートしています。長方形だけでは県境で誤差が出て正確さを欠きますが、それでも県庁所在地付近では正確に都県を選択することが可能です。簡単な仕組みを理解して高みを目指しましょう。詳細な都県情報を出力するには、上記コードの28行を拡張して都県が運営するホームページにジャンプするように編集します。人口の多いところでは、食事提供の専門店が繁盛しています。中でも都市部ではラーメン店が多いです。地方では峠の一軒家の食事処と言えば、日本そばです。ラーメン店は少なく、いまでは差別用語ととられかねない支那そばという呼び名を使っているお店もあるようです。大都市では店がひしめいている激戦区や大手レストラン等との競争も熾烈を極めます。細い麺が特徴で店主が一人で切り盛りしている一味違うラーメン店に通い始めた頃、居酒屋チェーン店が道向かいにできて、昼食客を採算度外視で誘導するためにチラシ配りを始めました。客が激減してラーメン店は廃業のやむなきに至りました。小船が大きな波に飲みこまれた例です。波及効果かつて、青梅マラソンが長距離の登竜門として人気を博していました。国際大会ではないのに高い知名度に支えられていたようです。ところが同じ時期に東京マラソンが新設され、青梅マラソンは著しく地盤沈下しました。人や物の評価は相対的です。毒舌で有名なラジオ中心の人気司会者は、気の利いた言葉を発する客に対して「俺より目立つことを言ってら」とわめき立てます。似たようなことで、庶民的な家並みに豪邸ができると周りがくすみます。世の中、割り切れないことが多いです。難題や危機は自衛することで避けられることもあれば、何百年に一度と言われるような大災害や隕石の落下などは避けることが難しいです。そのために逃げるが勝ちという諺があります。いつも逃げてばかりいると信用をなくします。「やる時はやる」という気概を示さないと誰もついてこなくなります。俯瞰するいつの世も栄枯盛衰はついて回るものであり、衰退は怠慢だけで起きるものではありませんが、時代の流れを読み切れなかったというそしりは受け止めなければならないでしょう。長くやっていると、逆風が吹いてきたと思っていたら追い風が吹いてウハウハしたこともありました。して逆境を切り抜けるかです。特効薬があったら教えてほしいものです。ものづくり筆耕ブログinventor春に因んで漢詩から著名な詩のひとつを掲載します。戦乱で荒廃した故郷を歌った詩です。外国語を日本語で朗読するものであり、漢字のフリガナと読みが違う箇所があります。)別れと出会いの季節、センチメンタルな気分もたまにはいかがでしょうか。ものづくり筆耕ブログinventor春うららか寒さに耐え忍んでいた草木が生い茂る季節となりました。うららかな春日和(はるびより)は心地よいものです。日当たりの良い野原につくしが生え、もうすぐ蝶が飛びかう頃です。http://aidesign.lolipop.jp/wp-content/uploads/2017/03/hinamatsuri_Strings_Quartet.mp3雪洞(ぼんぼり)ほのかな雪洞の灯りに安らぎを感じます。女の子の幸せを願う桃の節句ひなの祭りはもうすぐです。ひな祭りが終わるとひな人形のあと片付けに忙しいことでしょう。