JavaScript

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

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

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

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

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

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

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

解説

キーコードを取得

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

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

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

続きを読む

[Node.js] Math.random()よりセキュアな乱数を生成する

JavaScriptで乱数を利用したい場合はMath.random()を使うことがほとんどだと思いますが、内部のロジック的に暗号などセキュアな用途には向いていないとされています。Node.jsでは標準モジュールであるcryptoを利用することでこの問題を解決することができます。

サンプルコード

結論から言うと具体的なコードは以下になります。getSecureRandom()関数を実行する度にランダムな整数を取得できます。

const Crypto = require("crypto");

function getSecureRandom(){
  const buff = Crypto.randomBytes(8);  // バイナリで8byteのランダムな値を生成
  const hex  = buff.toString("hex");   // 16進数の文字列に変換

  return ( parseInt(hex,16) );         // integerに変換して返却
}

続きを読む

[HTML5] QRコードリーダーを作成する

今回はHTML5の機能を利用した「QRコードリーダー」を作成します。
以前作ったJavaScriptによるカメラを操作するコードに、QRコードを読み取ってくれる便利ライブラリをくっつけただけのお手軽版。

PCやスマホに付いているカメラの映像を0.3秒毎にチェックし、QRコードが見つかったらQRに埋め込まれている情報を表示してくれます。見つかったQRコードの場所も簡単にマーキングする機能も付けてみました。

続きを読む

JavaScript/CSSをコマンドラインでminifyする

JavaScriptやCSSには人間が読みやすいよう、改行やスペースを設けたり、パット見て何に利用するかわかりやすい変数名をつけるわけですが、これは対人間用であってそれを実行する機械にとっては邪魔でしかありません。変数は1文字あれば十分ですし、改行やスペースなどのいわゆる「ホワイトキャラクター」はそもそも不要です。

そんなときに利用するのがminify。
webpackなどを利用していれば、最終的な出力時に自動的にやってくれますが、手元で個別のファイルに対して実行したいときがありますよね。今回はwebpackも内部で採用しているUglifyJSと、CleanCSSのCLIツールを利用して、JavaScript/CSSのminifyを行ってみます。

続きを読む

[HTML5] カメラをJSで操作し写真を撮影する

HTML5ではPCやスマホのデバイスの機能をJavaScriptから直接利用することができるようになりました。今回はカメラを操作し、デジカメのような要領で静止画を撮影する簡単なサンプルを作ってみたいと思います。

カメラの映像が向かって左側に写り続け、良いタイミングで下にある「シャッター」ボタンをクリックすると、右側に撮影した静止画が表示されます。ボタンをクリックするとシャッター音も再生されます。
続きを読む

[Node.js] QRコードを生成する

今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。

QRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。
しばらく前から日本はQRコード決済が世を賑わせていますが、個人的には早く滅んでくれないかなと思っていますがそれはまた別の話しw なんでFeliCaから退化しとんねんw

続きを読む