QRコードを生成するTweet今回はNode.js上で簡単にQRコードが生成できるnode-qrcodeを利用し、動的にQRコードを生成してみたいと思います。GitHub.GitHubQRコード自体は非常に便利ですよね。2次元バーコードよりも情報量が増やせるため様々な用途に利用できます。参考ページインストールnode-qrcodeはコマンドラインから利用できるコマンドも用意されていますが、今回はNode内からモジュールとして利用します。installしてやります。qrcodeHelloWorld利用方法は実にシンプルで最短で2行書くだけです。1行目でモジュールを読み込み、2行目でQRコードを生成し画像として保存しています。QR');コマンドラインから実行すると、foo.pngが作成されます。foo.png実際に生成されたQRコードは以下です。スマホなどのQRコードリーダーで読み取ってみてください。出力方式BASE64HTMLのimgタグ内に直接埋め込むために、BASE64でエンコードした形で出力することができます。src="${url}">`);});以下のようなHTMLタグが出力されます。src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAAB0CAYAAABUmhYnAAAAAklEQVR4AewaftIAAAK6SURBVO3BQW7sWAwEwSxC979yjpdcPUCQusfmZ0T8wRqjWKMUa5RijVKsUYo1SrFGKdYoxRqlWKMUa5RijVKsUYo1SrFGKdYoFw8l4ZtUTpJwh8pJEr5J5YlijVKsUYo1ysXLVN6UhJMkdCpdEt6k8qYkvKlYoxRrlGKNcvFhSbhD5Q6VO1TelIQ7VD6pWKMUa5RijXLxj0tCp/KXFWuUYo1SrFEu/rgkdCqdSpeEyYo1SrFGKdYoFx+m8kkqT6g8ofKbFGuUYo1SrFEuXpaEb0pCp9IloVPpktCpnCThNyvWKMUapVijxB8MkoRO5V9SrFGKNUqxRrl4KAmdSpeETqVLQqfSJaFTOVG5Iwmdyh1J6FROktCpvKlYoxRrlGKNEn/wQBKeUOmS0KmcJKFTOUlCp9IloVN5UxJOVJ4o1ijFGqVYo1y8TOUkCV0SOpUuCd+kcpKE36xYoxRrlGKNEn/wQBKeUOmS0KmcJOGTVN6UhE7lTcUapVijFGuU+IMXJeGbVLok3KFykoROpUtCp/J/KtYoxRqlWKNcvEzlm5LQqXRJ6FTepHKShBOVNxVrlGKNUqxRLh5KwjepdCpdEu5IQqfSqXRJOFG5IwmdyhPFGqVYoxRrlIuXqbwpCXeodEk4UTlJwonKiUqXhE7lTcUapVijFGuUiw9Lwh0qdyThiSR0KicqXRI6lROVTyrWKMUapVijXPxxKl0STpLQqXRJ6FS6JNyRhBOVNxVrlGKNUqxRLv64JJyodEm4IwmdSpeEO1S6JHQqTxRrlGKNUqxRLj5M5ZNUuiTckYQTlSdUuiR0Km8q1ijFGqVYo1y8LAnflIRO5Q6VLgldEk5UnkhCp/JEsUYp1ijFGiX+YI1RrFGKNUqxRinWKMUapVijFGuUYo1SrFGKNUqxRinWKMUapVijFGuU/wDBCBfkDBM1EQAAAABJRU5ErkJggg==">SVGimgタグ以外にもSVGでの出力にも対応しています。console.log(str);});出力結果は以下。0h2"/></svg>実際に表示させてみるとこんな感じです。サイズはCSSで調整してます。文字列おそらくコンソール画面などで表示するためのものだと思いますが、文字列でQRコードを取得できます。console.log(str);});以下のような結果が得られます。typeの値をutf8にすると(指定を行わない場合のデフォルト値)、以下のような結果になりますが、こちらは私の環境だとQRコードリーダーが認識してくれなかったので、表示する際のフォントやら何やらをがんばらないとダメそうですね。canvasnode-canvasに出力することも可能です。HTML5から搭載されたcanvas要素がnode上でも利用できるという物ですが、別の画像を上に載せたり、QRコード自体に装飾をするなど加工が簡単にできるようになりますね。Automattic/node-canvasGitHubnode-canvasは別途インストールする必要があります。canvasここでは最終的に画像データをBASE64に変換して出力しています。/>');});出力結果は以下の通り。/>実際に表示するとこのようになります。文字列Helloが左上に入っています。第3引数に様々なオプションをハッシュで指定することができます。widthに横幅のピクセル数を指定すると、そのサイズのQRコード(画像)が生成されます。options);基本的にQRコードは正方形ですので、高さを指定する必要はありません。色colorにRGBを指定することで、QRコードや背景色を指定できます。以下のコードではQRコードを白、背景が黒になります。options);厳密にはRGBではなくRGBAとなっており、最後にアルファチャンネルの指定が可能です。デフォルトでは以下の指定がされています。(背景)以下のような出力結果になります。背景色color.lightで、アルファチャンネルの指定を行います。options);以下のような出力結果になります。背景色をCSSで薄いピンクにしてあります。余白QRコード画像のマージンを指定できます。「エラー訂正レベル」と「文字列の種類」によって、QRコードに埋め込める最大文字列長が変わってきます。784エラー訂正レベルエラー訂正レベルのデフォルトはMですが、オプションによって指定することが可能です。options);要はエラー訂正レベルが強いほど、たくさんの文字を埋め込めるというお話です。その代わりQRコードのサイズも大きくなります。通常、文字列の種類は自動的に判別されますが、手動で設定することができます。各文字は8bit以下のコードでいうと変数segmentに代入しているハッシュのように、文字列毎に種類を設定します。options);次のQRコードが生成されます。2つの要素が結合されているのが確認できます。......まぁ基本的にはライブラリにお任せしちゃうのが良いですね。なにか特別な事情がある場合に利用する感じでしょうか。UTF8を利用するには結論から言うとByteモードにすれば、大抵のQRコードリーダーで読み取ることが可能です。設定する必要はありません。(ただし1文字あたり最大4byteかかる点に注意)詳しくはドキュメントを参照ください。デザインQRコードを作成するhttps://blog.katsubemakito.net/nodejs/qrcode-design-generates1今回はQRコードの真ん中あたりに画像を埋め込む「デザインQR」をNodeで作成してみます。通常のQRでも機能自体に問題ありませんが、以下のような欲求が出てきます。自宅警備がてらゲームのお仕事や講師などしてご飯を食べてます。ご質問やリクエストなどお気軽に。メールアドレスの入力は任意です。書き込みが反映されるまで時間がかかります。コメントデータの処理方法の詳細はこちらをご覧ください。ブログをメールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。