ものづくり筆耕ものづくり筆耕ものづくりを楽しむ。皇帝ダリアの栽培からオリジナルシステムの構築まで。プログラミングinventorHTMLとはHTML(ハイパーテキストマークアップランゲージ)はウェブページを表現するために使用される言語です。インターネットで公開されるほとんどのウェブページはHTMLで記述されています。メールでより豊かな表現をするためHTMLを用いることもあります。紙による本では巻末にある用語索引に示されたページを引き当てて本文にたどり着いていましたが、ハイパーテキストに初めて出会ったとき、用語をクリックするだけで関連記事を読めたときは驚きました。HTMLによる表現ではテキストを始め、ハイパーリンク、色づけ、サイズ、イメージ、フォントなどを指定することができます。動的な動きを表現できるスクリプトを埋め込み、静的な表現に彩りを添え画像・リスト・表などの高度な表現力を可能にしました。サンプル以下に方向キーの操作により画像を移動させるjavascriptコードを示します。html,head,meta,script,body,canvasなどのHTMLタグやキーイベント,onloadなどの知識を必要としますが、ソースコードに示されたプログラムコードをCanvasKeyEvent.htmlとしてフォルダに格納します。フォルダにbear.pngも置いておかなければなりませんが、ダウンロードが大変ですのでサーバーにアップロードしてありますのでそのまま、利用可能です。“tiger.png”;に設定すれば自分で気にいった絵柄に変更可能です。CanvasKeyEvent.htmlをクリックすれば、図の画像が表示されます。4個の方向キーを押下して画像を動かすことができます。Evolvedで表示されています。/></body></html>このコードは図にあるように3つの関数から成り立っていて、表に示す機能と起動タイミングで動作します。start関数はこのファイルがロードされる際、ただ一度実行されdraw関数が33ミリ秒ごとに動作するように設定され、キーの押下があればkeydownfunc関数が起動するように組み込まれます。ロード後はdrawとkeydownfunc関数がイベントの発生により動作することになります。まとめここではJavaScriptの詳細な説明は省いてあります。多くの参考になる解説記事がウェブ上にそろっています。サンプルコードはhttp://www.sist.ac.jp/~kanakubo/programming/canvas/canvas1_3.txt等を参考にさせていただきました。コピー&ペーストを行い、上記に示した操作で問題なく実行に漕ぎつけられました。細かい言語の文法はさておき、結果を求めるには参考になるかと存じます。コメントをキャンセル下記項目は必須ですがメールアドレスは公開されません。名前はニックネームをお使いください。コメント名前メールアドレス上に表示された文字を入力してください。コメントデータの処理方法の詳細はこちらをご覧ください。