2019年 9月 の投稿一覧

[バイク] CB400SFで行く島根ツーリング! 出雲〜三瓶山〜仁摩編

ここ数年、お盆は暑すぎるので気温が落ち着いた10月前半ごろに帰省してるのですが、今年は仕事の関係で9月13〜19日の約一週間の日程で帰省しました。メインは生まれ故郷のツーリングスポット巡り。今回はバイクで帰省しなかったので現地でレンタルし、三瓶山から仁摩町を巡る、山も海も楽しめるよくばりさんなルートを楽しんできました。

続きを読む

[AWS] Node.js版 aws-sdkを設定する

Node.jsからAWSの様々なサービスを利用できるaws-sdkを使ってみます。
今回はインストールから利用開始できるまでの設定を行います。

AWS上の操作は大丈夫という方は、「Nodeから利用する」の項目からご覧ください。

続きを読む

[HTML5] Canvasでアニメーション

Canvasを利用して簡単なパラパラアニメを作成してみます。
原理としては授業中にノートや教科書の端に描いた絵をパラパラとめくって動かしたのと同じ。Canvasに描画したあとに適当な時間待機後、Canvasをお掃除したあとに少しだけ動かした絵を描画…をひたすら繰り返すという物です。

これを実現するには大雑把に2つの方法がありまして、それぞれとりあげます。
続きを読む

[HTML5] Canvasに図形を描く – 三角形

Canavsに三角形を描画します。
HTML5では四角形と円、線以外を描画する専用のメソッドは用意されていませんので、線を組み合わせることで三角形などのの図形を描くことができます。
続きを読む

[HTML5] Canvasに画像を貼り付ける

HTML5のCanvas上に絵を描画することが可能ですが、さすがにすべてをプログラムで描画するのは現実的ではありません。というわけで今回はJPEGやPNGなどの画像を貼り付ける方法になります。

今回は「ゆるドラシル」のアセットを利用させていただきました。

続きを読む

[JavaScript] キーボードからの入力を取得する

今回はJavaScriptでキーボードの何らかのキーが押されたら、そのキーコードを取得する処理を取り上げます。

解説

キーコードを取得

結論から言うと以下のようにkeypress, keydown, keyupのいずれかのイベント処理で引数として渡されるオブジェクトのe.keyCodeを参照するだけです。

window.addEventListener("keydown", (e)=>{
  const keycd = e.keyCode;
});

ここで注意すべき点としては、例えば「A」キーを押したらAという文字列が入ってくるわけではなく、キー毎に割り当てられた数字が入っている点です。「A」キーなら整数の65ですね。

続きを読む