ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。スクロール方向を別々に設定しています。大事な情報はひときわ目を引く色や長時間表示に設定することも可能です。画像の切り替えはJavaScriptにて制御されています。早朝、昼、夕方の時間によって自動的にメッセージを変更することもできます。状況に応じて表現を変えることは大きな強みです。知恵を絞って異彩を放つ情報発信にご利用ください。©Aidesign,2016合歓(ねむ、ねぶ)は日が落ちるころ、その葉と葉が合掌して眠るように閉じるので眠りの木、ねぶりの木とも呼ばれています。葉が閉じるのと入れ替わるように淡紅色の花が開きます。木と花の様子から合歓という漢字になり、そこから推察されるように、盛り上がっている二人が共寝して相歓び合う意味が含まれています。この歌は、紀郎女が大伴家持に合歓の木に想いを添えて贈ったものとされています。万葉集には清純、清楚から妖艶、官能的な大人の雰囲気まで幅広く集成されています。プログラミングinventorねぶの木の花に想いを込めるねむの花に想いを込めてプレゼントします。テキストと画像の縦スクロールおよびテキストの横スクロールはmarquee(マーキー)タグを使っています。縦スクロールにおいて、FireFox、IE、Edgeは脈動ぎみですがChromeはスムースな動きです。お店の販売促進に、メッセージのスクロール表示を使ってみてはいかがでしょう。ver0.03合歓(ねむ、ねぶ)は日が落ちるころ、その葉と葉が合掌して眠るように閉じるので眠りの木、ねぶりの木とも呼ばれています。葉が閉じるのと入れ替わるように淡紅色の花が開きます。木と花の様子から合歓という漢字になり、そこから推察されるように、盛り上がっている二人が共寝して相歓び合う意味が含まれています。この歌は、紀郎女が大伴家持に合歓の木に想いを添えて贈ったものとされています。万葉集には清純、清楚から妖艶、官能的な大人の雰囲気まで幅広く集成されています。互換性を重視して《表示例》が先頭に置かれています。はらたいらきょうは、いもうと、お父さん、お母さん、僕の四人でプールに出かけました。お父さんから新しいおよぎを教えてもらいました。Medium-D.html自由研究から得たもの夏休みの自由研究で文字と画像の重ね書きで奇妙な現象に遭遇しました。画像表示の際、透過率を1より小さな値で使っているときはわからなかったのですが、透過率を指定しないで文面を先に、画像を後に指定すると文面は表示されません。このような場合、文面を後に指定すれば事なきを得ます。透過率の暗黙値は1.0ですが、透過率を指定しない使い方において、テキストと重なった部分の画像が黒っぽいとき、テキストが見にくくなります。その場合は画像の透過率を下げるかテキストの色を、黒から離れた色にするとよいでしょう。重ね表示はスペースの節約になりますが、見にくくなることがあります。最近では新聞のテレビ番組欄にも使用され、多彩な表現に目を見張ることがあります。意表をついて注意を引き付けることができそうです。芸域を広げて魅力的なサイトを構築しましょう。ものづくり筆耕実績inventor画像よりテキストの優位ウェブサイトには文字としてのテキストの他、画像データが検索対象になります。その他、音声や動画データなどがありますが、テキストが優先されて検索されると思われます。アナログ的なイメージはともかく、文字ならば画像データではなく情報量の小さいテキストとして表現した方が得策です。文字の中に透かし画像を重ねて扱うことができれば、情報量の節約になります。Wordがサポートしていて、極秘資料の表紙に、社外秘と判を押すような利用方法が一般化しています。confidential、secretなどと注意を喚起するような表現をサポートしています。透かし文字を取り扱う当ブログでも、透かし画像の使い方で取り上げました。》にて、文字と画像を重ねて表現する方法を解説されていました。画像の中にテキストが共存して見事に生かされています。そのテクニックを発展させて、この記事がまとめられています。長い文章では、段落をまとめてタイトルにします。読む側はそのタイトルを意識して次の段落に進みます。この場合、必ずしもタイトルにしないで、説明内容を示したいことがあります。そのような場合に、透かし文字を使うことができます。透かし文字にするには、透かし文字をサポートするWORDなどのツールを用意して、最終的には画像データに変換することが必要です。専門ツールを準備してその都度、変換することは、編集や更新には不利です。そこで、画像に重ねてテキストのまま、表現する方法を探していたところ、先の記事を発見しました。その記事の肝は以下のようです。看板の内側に表示する文章です。今回は、画像の空白部分だけでなく、画像イメージと文字を共存させるために、画像の透過率を1.0よりも小さな値を採用しています。透過率の適切な値は、画像とテキストの濃淡やどちらを引き立たせるかによって決まります。発展性この記事では、テキストを動的に変更する部分は割愛されていますが、<div>や<span>タグにid属性を定義し、document.getElementById(“hoge”).innerHTMLにより、メッセージを更新してダイナミックな記事にすることができます。世界遺産に登録されています。<BR><BR>洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。世界遺産に登録されています。<BR><BR>洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。<BR><BR>日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。世界遺産に登録されています。洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。世界遺産に登録されています。洛北は京都駅から少し離れていることもあり、修学旅行コースとしての利用は少なく歴史好き、文学好きのマニア向けのエリアと言えましょう。日本の原風景がいたるところに残っています。京都の奥座敷、大人の隠れ里として魅力いっぱいの景勝地です。プログラミングinventor作る喜びスポーツや学業で得意、不得意はつきものです。好きなもの、得意なものだけに傾注せずに幅広く知識や技量を習得しなさいと教育者は語ります。社会の仕組みがそのように作られているのならば、それもやむを得ないことでしょう。オリンピックがたけなわです。強制された練習では世界一は難しいようです。苦しいけれど楽しいといった雰囲気がないと長続きしません。自由研究においても創作意欲、創る喜びを感じて欲しいものです。先日、夏休み自由研究で絵日記を作るを発表しましたが、今回、改訂しましたので、第2弾としてお届けします。最大の改良点は、再利用(リユース)にあります。ゴミを減らすことの一つに再利用があります。絵日記は当日、1回限りの利用は少なく、作成や読込みにおいて、複数日にまたがることが多く、このたびの改訂で読込みなどが改良されています。再実行にはアプリのロードをし直すのが簡単ですが、システム全体に負荷をかけることになります。ここでは説明上、多くの画面が表示されます。クリックして動作させるには末尾の実行例画面を用います。イベントと駆動処理ブラウザがウェブサイトの読込み完了時に、日記のカレンダーを作成し、カレンダーの日付をクリックしたときに、指定された日記のページをめくる処理を設定します。別の日付の日記を見ることができるように前画面に戻る駆動処理を関連づけます。ローカル環境における実行方法サイト上で実行するコードは『サンプルコード』に示してありますが、右クリック-ページのソースを表示にて得る方法もあります。それから4行目のUPLOAD定数を”image/”;のように変更し、enikkiData.jsや画像ファイルを所定のところに用意して実行環境を作り上げます。夏休みの自由研究で絵日記を作るを完全に理解してから第2弾に進まれますように。ローカル環境におけるJavaScriptを実行する際、『JAVAScriptがローカル環境で利用できるか』などの記事を参考にされるとよいでしょう。手作りへの想い毎日の天候を逐一、記録に残すことは簡単に見えて地道な努力が必要です。8月末日にまとめて新聞に載ったことがありました。今では気象庁やライブドアなどのサイトから過去の天気を無料でダウンロードすることができます。公開されたAPIを組み込んで、天気予報を記事の中に埋め込むことは天気情報を取得する関数で取り上げました。割りとスムースにできた記憶がありますが、過去の天気をオンラインで取得することは難しそうなので将来の宿題にしました。コードの説明11行、htmlタグの宣言。22行、別ファイルとして作成されたソースコード[enikkiData.js]を読み込む。34行、ローカル環境で動作させる場合は、UPLOAD定数を変更する。45~6行、描画位置の調整用。57行、夏休み開始日を定義する。7月14日ならば13と定義。69~10行、絵日記画像を早めにロードする。711行、ロード時に起動する関数を定義する。前画面に戻るボタンの押下でも起動。812~45行、関数の起動イベントが2種、引数を持つ。915行、再実行のとき、前画面を消去する。1016~22行、横縦のグリッド線を表示、外側は太い線で。1123~29行、日記作成済みなら升目を色付きでマーク。1230~31行、7月と8月を区別する表示色を設定する。1332~33行、日付番号を表示する。1435~38行、所定の位置に7月、8月をピンク色で表示。1539~40行、サンプル絵日記を透かし絵で描画する。1641行、透過率を元に戻しておく。1742~43行、初回の時、clickイベントリスナーを登録。指定された日記のページをめくる。1947~51行、7行7列のマウスクリック位置の升目を特定する。2052~54行、夏休み期間外を無効にし、日記表示日を通算番号に変換2157~69行、絵日記を表示する。この行で前表示をクリアする。2260行、天候データを作成する。2359~63行、月日と天候を表示する。2464行、前画面に戻るメッセージに切り替える。2565~66行、日記本文を表示する。2667~69行、絵日記画像をロードし、500ミリ秒後に、描画されるように設定。2772~74行、前画面に戻るボタンが押されたときに動作する処理2876~78行、ロードが指定されて500ミリ秒後に絵日記画像が表示される。2979~90行、スラッシュを改行コードに変換してテキストを表示する関数。3091~93行、日付を画像ファイル名に変換する関数。3196行、サイトがロードされるときに駆動する関数を取り付ける。3299行、前画面に戻るボタンが押されたときに動作する関数を取り付ける。33100行、canvasエリアを定義する。alert(v+"月"+d+"日の日記は未完です。早めの完成を願っています。color='orange'>の日付を指定して日記を表示。□の日付の日記は未完。0.04,©Aidesign,2016■の日付を指定して日記を表示。□の日付の日記は未完。プログラミングinventorマニアが好む演算子C、java、JavaScriptには三項演算子があります。式2三項演算子のなかで上のような演算子は条件演算子とも呼ばれ、コンパクトなソースコード、小さな機械コードの実現に貢献します。条件式の値がtrueだった場合に式1を評価した結果を返し、falseだった場合に式2を評価した結果を返します。1500;たとえば、映画館の入場料を60歳以上ならば、1000円、そうでない場合は1500円というときに使うことができます。変数answerにはageという年齢を反映した値が設定されます。『日曜日と土曜日は7時に、それ以外は6時に起きます』と表示する例を4つ示します。実行結果はどれも同じです。document.write(week[i]+"曜日は"+wake+"時に起きます。document.write(week[i]+"曜日は"+wake+"時に起きます。document.write(week[i]+"曜日は"+wake+"時に起きます。document.write(week[i]+"曜日は"+wake+"時に起きます。-1日曜日は7時に起きます。月曜日は6時に起きます。火曜日は6時に起きます。水曜日は6時に起きます。木曜日は6時に起きます。金曜日は6時に起きます。土曜日は7時に起きます。課題-2日曜日は7時に起きます。月曜日は6時に起きます。火曜日は6時に起きます。水曜日は6時に起きます。木曜日は6時に起きます。金曜日は6時に起きます。土曜日は7時に起きます。課題-3日曜日は7時に起きます。月曜日は6時に起きます。火曜日は6時に起きます。水曜日は6時に起きます。木曜日は6時に起きます。金曜日は6時に起きます。土曜日は7時に起きます。課題-4日曜日は7時に起きます。月曜日は6時に起きます。火曜日は6時に起きます。水曜日は6時に起きます。木曜日は6時に起きます。金曜日は6時に起きます。土曜日は7時に起きます。利用上の総合評価それぞれの観点から4つの課題を4段階に評価しました。夏休み自由研究では、ソースコード行数を小さくするために、三項演算子を多用しています。三項演算子は見た目が良いのですが、拡張性に乏しいです。拡張性については、課題-4,1,2に軍配が上がります。それでも、if文による判別よりはコンパクトなプログラミングになり、また他人によるプログラムコードの解析が難しくなるという理由で人気の高い演算子と言えます。プログラミングinventorコンピューター教育matome.naver.jpより最近、文科省は2020年から小学校のプログラミング教育を必修にすると発表しました。理工系教育の高まりを反映して電子工作の新時代が到来しました。手始めに夏休みの自由研究として、絵日記を作ってみましょう。昨今のIT進化には、めざましいものがあります。湖面に広がる花火の光景はさながら幻想的な光のショーのようです。玉屋、鍵屋の掛け声から始まる古くからの花火はドーンと轟音が鳴り響いたあとは、色とりどりの花火が彩りを添えていましたが、今では音響が同期して興趣を盛り上げてくれます。そこにはコンピューターの制御なしには成し遂げられないイベントとなりました。花火のテレビ中継解説者によると、広範囲にわたる地点の同期、光と音の競演・共演を1/30秒間隔で制御していると語っていました。コンピューター技術の応用カメラの主流はデジカメとなり、遠隔地への送信や写真の蓄積・取り出しには電子ファイル化が必須です。小学校の卒業式において、、証書が納められたスマホを従来の紙の代わりに卒業証書として授与される時代となりつつあります。ここでは、夏休み自由研究の絵日記を電子ファイルで提出する方法を述べます。開発・実行環境の考察ブログやホームページのことを以下はウェブサイトと呼ぶことにします。サイトは多くの人々に読んでもらうのが目的です。それには公開サーバーにアップロードすることが必須です。アップロードするにはそれなりの環境を整えることが必要なので、この記事では自宅や学校のローカル環境で動作するように配慮してあります。考えることシステムを作るには、どのような条件で動作し、どこまでサポートするかを決定しなければなりません。北部地方は24~26日、南部の九州地方では38~45日もあり、さまざまです。共通項として8月31日が夏休み最終日が多いので、最長の45日を考え、7週の49日、7/14~8/31を夏休み日程とします。『習うよりは慣れろ』で初歩的な記事を掲載してきました。今回の絵日記を作成する内容は、全角コードの漢字を扱ったり、ソースコードを分割する、ファイル構造、フォルダ、文法エラー、変数のスコープ、デバッグ方法、画像ファイルの読み込み完了タイミング、テキストファイルの編集など多岐にわたる知識が必要になることがあります。そのためには、JavaScriptのプログラミングに精通した頼りになる人がそばにいることが望ましいと言えます。望ましい開発環境プログラミングはJavaScript言語を使用します。ほとんどのパソコンやスマホはJavaScriptが実行できるようになっています。ここではWindows10のノートパソコンを使って動作の確認をしています。あなたのブラウザでJavaScriptを有効にする方法でJavaScriptの有効/無効を確認できます。ローカル環境における動作確認法ソースコード一式はUsefulGuide.zipにまとめられています。ファイル階層図を右に示します。次の段落、『サンプルコード』のソースコード一式をクリックすればUsefulGuide.zipが得られます。これを解凍し、たとえばCドライブのSampleフォルダに格納します。ファイルの説明をします。➊Medium-A.html絵日記を表示するJavaScriptアプリケーションです。次に示すenikkiData.jsを読み込んで1つのソースコードにします。❷enikkiData.js絵日記を記載したテキスト形式のデータファイルです。49日ぶんを日付ごとに天候と本文を納めています。コードとデータを管理しやすいように分割されています。❸imageフォルダ12個の画像ファイルです。Thumbs.dbはWindowsが自動的に生成しています。上記のようにファイル構成が完成し、望ましい開発環境で示したJavaScriptの有効を確認してMedium-A.htmlアプリケーションを実行します。途中まで動作し、正常動作とならない場合は、ファイルの格納先の不備が原因の場合が多いです。Medium-A.html└─image0722.png0723.png0724.png0725.png0726.png0727.png0728.png0729.png0806.png0807.png0816.pngenikki.png現状と拡張方法サンプルの絵日記は7/22~7/29,8/6,8/7,8/16の11日ぶん、作成されています。すべての絵日記を作成するには、enikkiData.jsに天候と本文を追加します。それに加えて、日付をファイル名とした画像ファイルを用意しなければなりません。日記の本文は2行分しか用意されていません。多くの字数を確保するには、画像表示領域を下方に移動し本文領域を拡大します。実行例に示したコードは画像ファイルについて、アップロードしたファイルを読み込むように修正されるなど、ダウンロードで得られる内容と一部が異なります。魅力的な絵日記にするには、画像編集の知識を磨くことが大切です。画像の作り方については、習うより慣れろprogramingFの画像の作り方を参考にしてください。最後に、公開したソースコードをひな形にして、ユニークな絵日記の完成を願っています。0.03,©Aidesign,2016■の日付を指定して日記を表示。□の日付の日記は未完。0.02,©Aidesign,2016■の日付を指定して日記を表示。□の日付の日記は未完。習うより慣れろの意気込みで、やさしいものから実用的なプログラミングを目ざしました。演奏と徐々に機能の高いプログラミングに挑戦してきました。コピー&ペーストにより、○○.htmlを作成してJavaScriptを実行すれば、おおむね結果が得られるものばかりです。思い通りの結果が得られない場合は、ブラウザを変えたり、バージョンを上げるなどの措置で解決することがあります。忙しい方は末尾の実行例で❶~⓰の番号をクリックしてください。今回は、16個の画像を集合して作った大きな画像から、一つを切り取って指定された場所に描画します。個々の画像は表示位置が固定されているので、神経衰弱のゲームを作るときに応用することができるでしょう。神経衰弱は52枚のカードを用意しますが、52個をまとめて一つの画像にするには、画像容量があまりにも大き過ぎます。同一マーク13個を一つにまとめればちょうど、程よい大きさになることでしょう。画像編集にはWindows付属のペイントでも十分です。その際、表示タブでルーラー、グリッド線、ステータスバーのボタンにチェックマークを入れて使いやすくします。個々の画像をまとめて一枚の大きな画像を作るには、規則正しい書式にすると便利です。それには個々の画像をサイズの等しい正方形、長方形にし、i行j列の碁盤の目のように並べます。詳しくは習うより慣れろprogramingEの画像形式が参考になります。画像の一部を切り抜いて表示することをトリミングと呼んでいます。JavaScriptの組み込み関数にはトリミング機能が用意されています。集合写真で両端に写ったグループ外のメンバーを削除したり、部品素材集から気に入った画像を取り出すときに利用します。drawImage関数の利用例を示します。stroke関数を用いて動的に描画しました。事前に準備した画像ファイルを使えばコードサイズは小さくなりますが、動的表示法は選択肢が広がります。処理概要タッチやクリックイベントを処理する関数を取り付けて、タッチされた位置を0~15に変換してその番号に割り当てられた画像を1回だけ表示します。よるユーザの対話によって発生したイベントを捕捉することができます。その中でclickイベントはボタンが押され、そして離されたときに発生します。イベントが発生した時に見逃すことなく処理されるように動作する仕組み《イベントドリブン機構》をJavaScript制御システムが用意しています。コードの解説11行、htmlタグの宣言。25行、丸囲み数字の定義。36行、処理済みフラグに使用。47~8行、描画位置の調整用。59行、コンテキストを退避する。610~11行、16景画像を早めにロードする。712行、ロード時に起動する関数を定義する。813行、描画コンテキストを取得する。914行、有効なコンテキストを初回に実行する。1016~25行、横縦のグリッド線と目盛を表示。1126~32行、16景番号を表示。1234行、canvasクリックイベントを取り付ける。1335~37行、カーソル位置から相対値を求める。1440~42行、相対値を0~15の通算番号に変換。1543行、初回のみ処理する。1645行、通算番号から適切な16景画像を表示。1754行、ロード時に起動する関数を設定する。1855~56行、ガイドメッセージを定義する。1957行、canvasエリアを定義する。color='forestgreen'>番号をタッチ、再実行は&#8635ボタンをタッチ。©Aidesign,2016番号をタッチ、再実行は↻ボタンをタッチ。ものづくり筆耕ブログinventor名言・金言はたくさん、あります。次の川柳は《吉川英治》の作と言われています。古い記憶ながら、本人が母親に教えてもらったと何かの書物で読んだことがあります。このような陽を写す言葉に親しみがわきます。これに対して、聖書が出典ともされる『働かざる者、食うべからず』のような堅い言葉は苦手です。♪今日の仕事はつらかったあとは焼酎あおるだけ♪という詞もありますが、私には吉川英治作といわれる川柳がちょうど似合っていると思われます。