ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。ものづくり筆耕ブログinventor良寛禅師の漢詩またまた、旅立つ若者へのはなむけの言葉を贈ります。良寛禅師の漢詩から『行春』を開始画面に表示しました。花火を上げてお祝い申し上げます。文字だけの記事は読みにくいです。そこに写真やイラストなどが入ると読みやすくなります。説明する文面より、一枚の写真が大いなる訴えを提起したことは数えきれないでしょう。通り一遍の表現に飽き飽きして訴え力が低下することがあります。そこで画像を縁取りにする方法をハート型写真を作るで語りました。今回は、もう少し高度化して縁どる方法を示します。画像や文字との重ね書きは二つのdiv領域をmargin-leftとmargin-topで重ねるやり方と、もう一つはposition:relativeとposition:absoluteによって重ね合わせる方法があります。前者がシンプルですが納得動作にならないことがあり、後者のやり方を採用しています。縁取り型に文字や画像を入れてアクセントを出した表現をするには、まず鯛焼きを作るときなどに使う型を用意します。その手順を以下に示します。ひな型になる画像を用意する絵心があれば、お絵かきソフトで型を作りますが今回は既存のイラストから作りました。写真を入れやすいように空洞を作ります。Windows10に常備しているペイントで目や口を消します。その後、中を透明色にします。透明色にするにはフリーソフトのPaint.netの魔法の杖を使っていますが、ペイントでも可能のような気がします。透明色にすると上書きした時に下になった画像が消されずに表示されます。上の図のように背景が白色、型の内部を透明色にします。HTMLコードdiv要素で表示領域を定義しposition:relativeで基準とします。次に本命の図をimg要素で指定します。その後、熊を象(かたど)ったマスキング画像を指定します。二つの画像はposition:absoluteで表示位置を調整します。上書きした画像の透明色部分だけが浮き彫り表示されます。今回の例題は、4行からなるHTMLコードで成り立っています。ここで月始めに季節ごとの花を描画するためには、JavaScriptコードを追加します。JavaScriptには日付を取得する関数があり、日付に同期した12種の画像を呼び出すようにプログラミングします。象(かたど)り画像がひとつでは見栄えがしなければ、曜日ごとに変化させることが可能です。近くの気象台から天気データを取り込んで、天候に応じた描画に改変することもできます。HTMLとJavaScriptによる機能を組み合わせて魅力的なブログ、ホームページを構築しましょう。天気情報を取得する関数も参考にしてください。さいごに画像、写真、イラストの扱い方をマスターして記事を装飾することにより魅力あるブログに変身します。寒さから解放されたのを機に新しい分野に挑戦され、大いなる飛躍を期待します。ものづくり筆耕ブログinventor新しい旅立ちを祝う季節はめぐり巡ってきます。うれしい桜の開花ニュースが流れてきました。新たに旅立つ皆様へ、はなむけの言葉に代えてHTMLとJavaScriptで祝意を述べます。BGMの演奏に応じて風景と和歌の透過率が変わります。プログラミングinventor雲路(うんろ)とは雲路(うんろ、くもじ)とは進路、針路、行き先のことです。JavaScriptのcanvasを用いてリサジュー曲線を描いてみました。リサジュー曲線(LissajousCurve)はパラメーターをちょっと変えるだけでさまざまな幾何学模様を表現することができます。大学などにおいて、そのアカデミックな雰囲気を醸し出す形を象徴にした校章が採用されています。動作例のヘッダー画像に電気通信大学などのロゴマークを取り上げています。リサジュー曲線を描くとき、その軌道を予測しクリックして当たったときの得点数を競うゲームを作りました。ゲーム名は軌道予測が合っていますが、ちょっとひねって、雲路みちゆきと怪しげな名前にしてあります。使い方を以下に示します。使い方は、開始ボタンをクリックしスタートします。リサジュー曲線の2000ヶ所に及ぶポイントを通過する際、進路を予測し的中すれば当たりとなり、得点が1点加算されます。描画速度をinput要素のnumberタイプで3ms~30msに変更可能です。初期値を15ms以外でゲームをする場合、速度設定後に開始ボタンをクリックします。描画予測位置の少し先をクリックするとヒットしやすいです。描画速度が極端に遅い場合、的中回数が複数になる場合があります。思いを記録した時代を考えると隔世の感がします。インターネット時代にはHTMLの規約に則って多くの人に格安で迅速に意思を伝達することができるようになりました。その中で動きのある文書にするにはJavaScriptによる表現が適しています。JavaScriptを使った動的表現を以下に示します。Ver0.02JavaScriptはHTMLから独立して語られるほど大きなテーマです。CSSの中にAnimateプロパティがあり、コンパクトな定義ながら動きのある表現を可能にしています。Animateはモダンブラウザならば、おおかた、動作するようですがIE11でつまずき解決に至ったので記録に残します。edgeでは期待した動作になりましたが、IE11ではどうしても正常動作にはできませんでしたが、ネット上のアドバイスにより解決しましたので記録に残します。動作コード以下のサンプルコードにおいて、CSSは別ファイルにせず、style要素で定義し一つのファイルに納めました。none;上記のようにnoneの後のrunningを削除しました。インターネットを検索したら、ありがたい情報が見つかり採用したところ期待した動作になりました。桃の花言葉:天下無敵、気立ての良さひとこと動作コードに示すように、JavaScriptコードを一行も使わないで動きのある文面を作ることができましたがまだ、納得のいかないところがあります。動きのある文書作りの一環として、animateを見直しもっと深く理解したいと考えています。文学作品の読み方は人それぞれです。何かテーマを決め、その周辺をひとりの作家に関わらず横断的に読みほぐす方法があります。特定の作家を決めその作家の作品を縦断的に読む方法があります。当方は後者に属します。この場合は多くの作品を発表している作家に偏りがちですが、長い期間にわたり楽しむことができます。このたびの作家の作品はテレビドラマにもなり放映されたようですが、気が付きませんでした。作品に気を取られていたのでしょう。作品の終結ここ2~3か月、江戸時代の武家・町人の暮らしを描いたシリーズもの、北海道出身の女性作家の作品を追いかけました。見習いの職人からスタートし、身分違いではないがきっぷのいい美人芸者との異質な組み合わせの思いがけない恋愛を成就させ、地道な生活を営む通い髪結い職人・同心の小者とその周辺を取り巻く人々の生き方がテーマになっています。職人・芸者夫婦に息子が生まれ、主家の武家娘との交流が読者を惹きつけます。経て山あり谷あり修行の身の青年期を乗り越え、最大難関の身分違いの恋をクリアしてハッピーエンドを期待しながら読みました。二人が人生の荒波に揉まれながらも登山ならば9合目まで到達していました。読者も否、私は次の進展を期待しましたが、作家が乳がんでお亡くなりになりました。作家本人が一番の心残りだったことでしょう。さいごに総合南東北病院のホームページより作家のプロフィールや作品のあらすじを調べてから読書に入ればこのような不完全燃焼を体験することはないでしょう。それは楽しみを半減させます。修行中の別式女と絵師のほのかな恋情も読み手の心の中で暖められ大切にされることでしょう。作品の完結の前に作品の終結を迎えてしまいました。充実した3か月をありがとう。ものづくり筆耕ブログinventorカスタマイズとはイージーオーダーのような中途(半)完成品をユーザーの好みに設定を変更することです。洋服や家具などは自由に改良を加えることが可能ですが、車や精密機器は改変は許されていません。安全基準を守ることを義務付けられているものへのカスタマイズは難しいです。HTMLとJavascriptのサンプルコードを自分の好みに改訂することについてまとめます。毎度、古い話で恐縮ですが知っていると何かの役に立つことがあります。プログラムコードを安易に変更して実行させるとコンピュータがクラッシュを起こす時代がありました。コンピュータシステムの総額が数億円する大型コンピュータで体験したことがあります。今では未完成ソフトを実行しても、異常状態で停止するのは該当ソフトだけであり、他に影響を及ぼすことはほとんどなくなっています。ほとんど無いというのが実情ですが致命的なダメージを与えることは皆無と思われます。改造の薦め当ブログは古い内容が多く明るさに欠けていると思われていることでしょう。それは様々な理由があり、著作権の保護期間が保有者がなくなってから50年後までと定められていることが一因しています。音楽を鳴らすにも人気のある楽曲には著作権が付いています。著作権問題をクリアするために古典や明治時代の唱歌などを取り上げています。家族やサークル内だけで楽しむ場合は著作権を気にする必要がない場合もあります。そのような条件下ならば、軽快な音楽に変更してください。著作権の保護期間中なのにダウンロードできるものが多いです。ダウンロードしても営利活動をしたり個人利用の範囲を超えて利用しなければ心配することはありません。自分流を貫いて改訂してください。それでも自己責任で行うことは忘れないでください。あまりに、いいものができたので公開したいという前に著作権のことを考えてください。前ですがYoutube上に公開した動画に一瞬、テレビが映って、その番組の著作権に抵触している旨の警告がありました。人気タレントが移った画像なども芸能事務所から苦情が届くかも知れません。ディズニーや日本の人気芸能プロダクションの商品は厳格な著作権管理がされていると聞きます。学校の教育課程上の運動会などで漫画の複製などは著作権者に無断で利用することができるようです。このことが許諾を受けることなく無断使用できると生徒に錯覚を植え付けていないでしょうか。当ブログもすべて許諾を得ているわけでないので要自戒です。遠く離れた家族や同好の友人に自分の作品を贈る例を以下に示します。例そのものは著作権保護期間が終了したものにしてあります。このようにひな型になるものを入手して、少しずつ改訂してみてください。BGMを気に入った曲にするには許されているときはリンクを貼る(張る)のが簡便なやり方です。それにはリンクの貼り方をマスターしなければなりません。リンクの貼り方はネット上に回答がありますので検索してください。曲のダウンロードが可能ならば自分の環境に格納して参照します。彩りのあるサイトを始めるにはこれらの周辺知識をマスターしてください。カビが生えた、古臭いとの愚痴は自分で解消しましょう。今回は今までのHTMLとJavascriptの系譜から離れ、日本から発祥し世界的な広がりを見せている絵文字さらにemojiをフィーチャーします。右の絵は絵文字(ユニコード:0x1f691)です。今や顔文字は市民権を確立したのだろうか。報告書の氏名欄に、自分の名前の後にハートマークやビックリマークを付ける癖を持った女性がおりました。役所や事務所では違和感があります。顔文字はインターネットが普及し、感情表現に使われ始めたと記憶しています。インターネットの普及は、洋の東西を問わず研究機関から始まりました。よって硬派な雰囲気が漂っていて顔文字の類も怒ったり笑ったりが中心で、複雑な表情を含んだものは皆無でした。顔文字はキャラクタ文字を組み合わせたものから始まり、5~10文字程度が多かったようです。笑い、泣き、驚き、混乱、苦笑などを表す次のような顔文字がありました。そのうち、少数ながら顔などを象った顔文字が普及しました。それが発展して今や13万文字を超すemojiがUnicodeに定義される時代になりました。絵文字からemojiに時代は進みました。顔文字から絵文字へ嬉しい、悲しい、さみしい、照れる、しょぼん、怒る、泣くなど様々な顔文字が策定された今、複数の半角文字を組み合わせて表す絵文字は時代遅れと言えます。顔文字から絵文字へと変更したとしてもユニコードは1~6バイトと多岐にわたるので、情報の節約になるとは限りませんがデバイスごとに絵文字が定義・規格化され文字形式で絵文字を表示することができます。その上、絵をカラーで表示するブラウザが多くなっています。絵文字のカラー化スマホのサポート状況は詳細はわかりませんがパソコン用バラウザでは、インターネットエクスプローラーを除きほとんどのブラウザでemojiはカラー表示されます。カラー表示をサポートしているブラウザではp、span、div要素のstyle属性やCSSによるcolor指定で絵文字に色を付けるのはできませんが、鮮やかなカラー表示は大きな魅力です。歌の状況を絵文字で表示します。遅延動作ボタンをクリックしてください。前回は詩や和歌を表示するのにふさわしい縦書をサポートしました。ここまでは、いずれもスタティックなものばかりでダイナミックなものはありませんでした。今回から動的な記事作りに挑戦します。動的な記述はanimateタグを使うことによりHTMLだけの範疇でも実現可能ですが本格的な機能をサポートするにはJavascriptタグを使用します。バックグラウンドミュージックを鳴らして画像やメッセージを切り替えてみます。音楽の終了に同期して描画は終了になります。静から動への進展は大きな飛躍です。処理を遅らせるコンピュータにおいて処理を遅らせることが苦手です。機能の小さなパソコンで動作したアプリが高速になった新しいパソコンで誤動作するという話はよく耳にします。こられを本格的に処理するには同期やイベントについて調べなければなりませんが、今回は一定時間後に動作する関数setTimeoutを使って簡便な同期を実現します。読込み時の処理HTMLやJavaScriptは高速に対応できるマルチ処理を可能にしています。ビデオの描画では読み込みながら表示していることは進行状況を表示するバーで確認できます。このため、動作時間の短縮が図られますが読込みが表示動作に追い付かれて期待した動作にならないことがあります。これを解消するために、onLoadというイベント関数を定義します。二つの画像データロード完了で切り替え動作が起動するようにしています。音声の再生と画像やメッセージの切り替えaudio要素をJavaScriptから操作するためのさまざまなメソッドが用意されており、今回は再生メソッド(play)を使います。画像においてはcanvas要素のdrawImageメソッドを使って切り替えます。8;//BGMの長さ(56秒)を8等分する、7秒間隔。3500);//(56秒)を8等分し、さらに半分にする。前回は文字に色、サイズ、書体などの装飾を加えたり、俳句に彩りを添えるイラスト画像を追加しました。今回は俳句や和歌に相応しい縦書きに挑戦します。今では縦書きをサポートする市民権を得た何種類かのライブラリが存在します。その中からh2vR.jsを採用し、小林一茶の俳句二首を縦書き表示します。タグと改行タグ(要素)について深堀りします。前回、p、div、spanタグを使いました。それらのタグは始まりのタグ(<div>など)とスラッシュのついた終わりタグ(</div>)から成っています。ブロックを形成し有効範囲を明示します。linkタグも同類ですが単独タイプは極少です。使われるタグを理解することがHTMLマスターの早道です。ライブラリの入手と参照法h2vR.jsの公式サイトから縦書をサポートするライブラリをダウンロードし「ライセンス情報」を確認します。h2vR.jsおよびh2vR.cssを参照できるようにします。具体的にはHTMLコードの3~4行に示します。サンプルコードの説明1行、オーソドックスにhtmlタグを指定。6~8行、いままで通りの横書き領域を定義。9~15行、一首目の俳句を表示。左に図、右に振り仮名付き俳句を指定。10行、float:leftで横並びを指定。11行、float:leftで隙間なく俳句を横並びにする。16行、clear:bothで横並びをリセット。17行、第二首目の俳句を表示。左に振り仮名付き俳句、右に図を指定。21行、float:leftで隙間なく画像を横並びにする。23行、htmlコードの終わりを示す。機能を拡張する際、直前のファイルを残しておいて、改訂時に誤動作した場合、両者の差分を確認できるようにする。公開サーバー上にアップロードする際は、h2vR.jsおよびh2vR.cssを参照するコードは不要で自動的に言語処理系が取り込む。動作例においては2~5行を削除している。次回には動きのある記事にするためにscriptタグを使って更なる高級化を目指します。