ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。ものづくり筆耕ブログinventorおさらい前回はHTMLについて何も知らないとこらからスタートして動作させる例をあげました。表示したい文言をテキストファイルにし、拡張子をhtmlにしてファイルに保存するだけでした。今回はこれらを拡張して高級化を図ります。拡張子(かくちょうし)その前に拡張子について考えます。英数字3文字」のことです。今では英数字3文字に限定されることはありません。テキストファイルだと「.txt」、HTMLファイルだと「.html」が拡張子です。ファイルの扱いに慣れてくると拡張子を気にすることがなくなりますが、拡張子を明示的に表示する方法を示します。ファイル名がABCD.TXTの場合、Windows10ではABCDと表示され、ABCD.DOCなどと区別しにくいことがあります。拡張子はアプリケーションに関連を明示するものです。数を数える際の数詞のような役割を持ち、相応しいアプリケーションの起動を手助けします。前回に追加する機能を示します。1文字に色、サイズ、書体などの装飾をする。2俳句に合ったイラスト画像を加える。3領域に枠線を付ける。4読みにくい漢字に振り仮名をふる。5バージョン情報を付ける。領域に枠線を付ける部分は枠線なしになっています。コピペするときに、border:0pxをborder:1pxに2ヶ所、変更します。height="250"/></div>あとがき今回は16行のHtmlコードですが、満足のいく仕上がりになるまで結構な時間がかかりました。慣れれば短時間で作成できるようになります。完成品を少しずつ手直しして所望するものに仕上げる際の速成方法に応用してください。ものづくり筆耕ブログinventorはじめにHTMLやJavaScriptで文字や画像をローカル環境(公開サーバー上でない自分だけの動作環境)で表示・描画するには、拡張子がhtmlのテキストファイルを作成します。小林一茶の俳句を画面に表示させるには以下のようなファイルを作ります。ファイル名はyasegaeru.htmlなどとします。ここにあり同じようなことをC言語での記述は以下のようでありました。0;}2つを比較するとCに較べHTMLでは前提条件は何もなく、表示内容を記述するだけです。あげればhtmlというファイル拡張子だけです。ここにありが表示されたら、あなたは立派なHTML(Javascript)の習得者です。HTMLやJavaScriptを扱うのならば、実際に動作させて自信を深め自分の血肉にしてください。進化これらを少しずつ進化させます。本文だけでも構いませんが拡張したり高級化のために本文を<p></p>で囲みます。<や>は本来、半角文字ですが説明のために全角文字を使っています。ブログ記事はHTML言語を用いて記述しており、要素に用いる記号文字に半角文字を使うと表示が乱れるので便宜的に全角文字を用います。加えて、<div></div>で大きく囲みます。divはdivisionを省略したものであり領域を定義します。本文は通常サイズで補足説明は小さな文字で表示する場合、有効領域をブロックとして定義します。このような場合にdiv要素を使います。これらの改良コードと実行例を以下に示します。yasegaeru1.htmlは最初の例と大差ありませんがp要素により段落として定義しています。<や>により囲まれた単語は要素、タグと呼ばれ特別な働きをしますが、ここでは多くを語りません。美人かな今回のまとめ今回はHTMLにより、実際にプログラムコードを作成し実行させてみました。divとp要素を使った単純な例です。HTMLには多くの要素(タグ)が用意されており、これらを縦横無尽に使いこなしたときに熟達者と呼ばれることでしょう。次回は定番の例題を味のあるものに変身させてみます。上述しましたが、既存のものに手を加えて応用し、少しずつ力を付けていきます。車を勝手に改造し公道を走らせることは許されません。これに対し、自由に改造して成長できることはなんと恵まれたことでしょう。テキストファイル、拡張子とは何ぞやについては端折って語っていません。厳密に詳細に語るのは容易ではありません。100%理解できなくても前に進み、後に振り返るのも一方法です。次回以降で触れる機会があることでしょう。これにあり』と記されることが多くなっています。上を早春の歌詞がスクロールする記事を作りました。今回は詞を固定しバックの画像をスクロールしています。早春の候、もうすぐ新しい旅たちに別れもあります。切ないですがゴンドラの唄と冬から春への3風景をお贈りします。ボーとしていても歳は取ります。外見はいずれ衰え老醜(ろうしゅう)をさらすことになります。内面を磨いたら落ち込みをカバーできるでしょうか。今や形あるものが見えないものに押されっぱなしです。新聞、雑誌は紙媒体から電子媒体に移行しつつあります。信じてもらえないかも知れませんが、はるか昔、当日のプロ野球ナイター結果が報じられるのは翌日の夕刊というありさまでした。当初は歌手でしたが芸能プロダクション社長として名をはせた山田太郎氏が歌った《新聞少年》の歌詞は何のことか理解できない時代が間もなく到来しそうです。手紙も電子書籍にすれば、本体を送らずともそれを記憶した管理先のアドレスを知らせればよいのです。電子書籍を読む新しいものが普及するには本体が優れたものであることはもちろんですが、周辺環境が整うことが必須です。電子書籍においてはそれを読むツールがイマイチです。先日、雑誌を滑らかにめくるで自動マガジンリーダーについて語りました。滑らかさが不足していたので改良した使用例をまとめました。参照先はturn.jsです。自動読込みにした場合、めくり動作の表示が地味な感じだったので派手にしました。ライブラリー参照時のオプション設定が可能か調査しましたが発見できなかったので、直接ソースコード(turn.js)を変更しました。milliseconds]のdurationを600から2400に変更したところ、ゆっくりしためくり動作になりました。夢のよう拡張理念まだ作り始めたばかりなので、多くを望むことはできません。ページを順にめくったり戻したりが基本機能です。全体を斜め読みする自動読込み機能が付いています。ダイレクトに指定したページに飛ぶ機能や音声による指定は未実装です。入力は一人の書斎ならば問題ありませんが、図書館などでは不都合です。いまでは、考えていることをロボットなどに伝える技術が実用化されつつあるようです。念力によるページめくりを目標にしていますが、呪詛(じゅそ)などは非科学的なものと考え信じていません。納得いく機能にまとまったらソースコードなども公開できるようになるかもしれません。プログラミングinventor春は名のみか春のかおり極寒を体験すると春はもうすぐです。晩冬から早春の風景を思い浮かべ、童謡『早春賦』を聴きながら時の流れを感じ取ります。ただで使わせていただいて愚痴をこぼすのも何ですが、古い歌は意味が難解です。「氷解け去り葦は角ぐむ」は『氷は溶けて消え葦は芽を吹き出した』との意味のようです。歌の歌詞はしっかり縦書きにしました。音楽、画像、春さきのおりおりのことばにより、押し込められた季節から早春へと弾けてください。プログラミングinventorドローンによる巧みな演出viva-drone.comよりピョンチャン冬季オリンピック開会式をテレビで見て、たいへん楽しい想いをしました。予算が潤沢にあればいろんなことができるのだと感心しました。オリンピックマークは5色で青黄黒緑赤をLEDで出せると思います。人の姿から5輪のマークに変わるところは圧巻でした。そのとき、1つずつ、フラッシュして色が変化したら猶、良かったでしょう。予算がないものにはコンピューター上で動作させることにしましょう。ドローンに色を付けてみる動くドキュメント作成法ドローンを制御してイベントを演出したような描画をするには、Javascriptによるプログラミングをします。今回の作品は110行ほどのコードで成り立っています。時間をおいてゆっくり動作させるためにsetTimeoutを使います。興味が湧きましたら、まず、簡単なことからスタートするとよいでしょう。様々な学習方法があります。専門学校の門をたたいたり、著名な先生のプログラミング講座を受けることもできます。赤ちゃん、幼児が言葉を覚えるように先達者の言動をひたすら模倣して学習する方法があります。この方法がお金もかからず、自分の努力で進むことができます。インターネットが身近に普及している時代です。習得のための材料・資料はネット上にあります。手っ取り早くサンプルコードを入手する場合は、少しばかりのお小遣いを使ってください。よかったら右の画像をクリックして多くのサンプルコードに触れてください。他と異なる習得方法があることを知っていただけたら幸いです。今年の冬は記録的な大雪で悩まされています。道路に降り積もった雪で道路側溝が隠れて見えなくなり、車が転倒する事故が多発しています。今やGPSによる位置検出精度は数センチになっており、道路や障害物の詳細情報が整理されたら、自動運転技術で雪に埋もれた道路から車がはみ出すことはなくなることでしょう。自動運転装置は高価です。NAVIスクリーンに実際の風景に加えて雪の下にあるセンターラインや縁石を表示する機能を追加してほしいです。この装置はそんなに高価にはならないでしょう。運転者がその画面を参考にしながら運転して危険を察知する方式が考えられます。今までにないシステムを構築するには総合的な知識が要求されます。若者が遊び心を持ちつつ楽しみながら新しい技術を学んで身近な生活に役立つことを願っています。心がこもってない形ばかりの礼儀を虚礼といいます。相手に対する敬意がこもった礼を実礼と呼びたいです。その他、心にもいろいろあるようです。ある4コマ漫画で『真心を込めてお歳暮』を先頭の一文字に紙を貼り『下心を込めてお歳暮』という作品を見たことがあります。クリックボタンを押すとめくり効果でキャッチコピーが変化します。いう掛け声を鵜呑みにして、面倒くさいことを避けたがります。定年退職すると届く年賀状が激減すると言われます。減少率で人望度を推し量ることができます。人は損得勘定で動く動物です。歳を重ねるほど付き合いは減るので本当はお金のかからない手間を惜しんではならないのですが、多く(小人)はそこを端折ってしまいます。大人物になる人とここが違うのでしょうか。プレゼントや贈答お世話になった方への贈答は難しいです。高価な贈り物はなにがしかのもくろみが込められています。上司や担任の先生への贈り物など邪心がないとは言い切れません。お世話になったお礼ならば、成績や進路に影響を与えることができませんが、卒業後がいいと言われています。感謝は見返りを求めるものではありません。定かではありませんが六年間で一度、三年後に一度贈ったような記憶があります。大昔は病院にかかるにも菓子折りなどを持っていきました。景品の多寡で診療に差をつけることは民主化とはかけ離れている行為であり、今ではプレゼント合戦はなくなったようです。お金が余って使い道がないときは、退院後、落ち着いた時期にお礼したり行政機関に寄付するといいでしょう。季節の挨拶お中元、お歳暮、暑中見舞い、年賀状などの季節の挨拶は本来、虚礼とは無関係だったことでしょう。日ごろ余裕がなく年に1~2回の挨拶で親交を継続する手段が時節のお礼であったことでしょう。それが過熱してあらぬ方向に変わっていきました。62円、82円で年2回ほどの挨拶は日本古来の『歳時記のある暮らし』、『和みの暮らし』の一つといえましょう。費やす金額が100円にも満たないのだから虚礼からは程遠いのではないでしょうか。みると新聞、雑誌が元気がなくインターネット関連の伸びが堅調です。これらの傾向を反映して電子書籍が市民権を得て、多くの人々の手に触れる機会が増えています。そこで、雑誌をめくるように美しくページをめくれないものかと探した顛末をTurn.jsを中心に備忘録としてまとめておきます。プラグインツールプラグインツールとは、エアコンの付いている車が少なかった時代に、外付けでエアコンを付けるようなあんばいで、有料・無料のツールをスマホやパソコンに組み込んで機能の大きな製品に作り上げるものです。電子本のページをめくるツールは以前からあり、紙芝居やぱらぱら漫画のように切り替えるものが一般的でした。写真を対象にしたスライドショーでは前の画像の余韻を残しつつ次の画像を映し出すものや画面と画面の間に切り替え効果を挿入できる高度なものまでそろっています。プラグインツールにはシステム内に組み込まれ、その効能が全体に及ぶものと、個別に働くものと複数あります。Wordpressのプラグインは前者に当たり、GitHubのライブラリーではそれを利用しているプログラムにのみ波及されます。投入して開発し、創業者利益を得て多くの人々に広めます。世界の研究者は便利なものに心を奪われるので、研究対象に選びます。利用者は高すぎるツールに疑問を抱き始めます。研究者は先駆者のアイデアを使わせてもらうことがあり、自分のアイデアを公開することが多いです。それらをサポートする会社や組織があり、新しいことに挑戦するときにはGitHubなどを参照するといいでしょう。【5分でわかる】GitHubとは?概要やメリットを簡単解説!がGitHubについて解説しています。一読をおすすめします。読むにはキンドルリーダーのようなアプリを利用しますが、このturn.jsを用いてかゆいところに手が届くような文書リーダーが可能になります。パソコンのマウスでは少し扱いにくいです。試していませんがスマホのタップは軽快でしょうか。パソコンではマウスオーバー(マウスホバー)がよいのではないだろうか。ソースコードがそろっているので、音声入力で「次!」、「戻る」を認識してページめくりできるように改訂することも可能です。自動的にマガジンを読む仕組みは写真のスライドショーに応用することが可能です。マガジンの読み方マガジンの四隅にマウスを置いて前のページに向かってドラッグ&ドロップしてページをめくる。上の操作を最後のページまで繰り返す。前のページの四隅から現ページに向かってカーソル操作をすれば、1ページ戻る。以上は手動でマガジンを読む方法。最初からあるいは途中から自動で読むには自動的にマガジンを読むをクリックする。最後のページに到達すれば自動的に終了する。Ver0.04から→キーと←キーによりページをめくることができる。特定ページを長時間にわたり読むには矢印キーによる操作が便利。operaブラウザで動作する。IE11では自動的にマガジンを読む機能は思い通りの動作にならない。雪を見ながら野趣(やしゅ)いっぱいの露天風呂に浸る。画像の概要と拡張方法ここでは10種類の動物をまとめた集合画像を用意し、それを1つずつ取り出し縮小サイズから徐々に大きく拡大表示して2倍の拡大率になるまで継続します。動物の鳴き声を出力するには、10種のaudio要素に音声データを用意します。26行目の動物に対応する変数vを使って鳴き声を鳴動します。今回は仮の音声データとして3種のファンファーレを鳴らしています。動作例10種類の動物を0.5倍のサイズから2倍まで拡大して順に描画します。開始ボタンを押下してスタートさせます。鳴き声を出力する場合、ここに設置する。