JavaScript

2019.08.11

[HTML5] カメラのフロントとリアを切り替える

スマホなどでカメラを操作する際に、リアとフロントのカメラをJavaScriptで切り替える簡単なサンプルです。

2019.07.29

[HTML5] カメラをJSで操作しフォトフレーム付き写真を撮影する

以前、JavaScriptでカメラを操作し写真を撮影するサンプルコードを作成しましたが、今回はそこにフォトフレームを合成してみたいと思います。

プリクラやスマホアプリでよくある見かけるやつですね。撮影した画像をダウンロードすることもできます。
続きを読む

2019.07.14

[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に変換して返却
}

2019.06.22

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

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

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

2019.06.21

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

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

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