QRコードを生成する

こんばんは、日暮です。今回はQRコード生成用のJSライブラリを試してみました。

仕事でWebサイトを作っていることもあり、テストサイトのアドレスをQRコードにしてスマホで読み込むということが度々あります。以前はMacのDashboardのウィジェットでやっていたのですが、OSをアップデートしたらDashboardが消えてしまったので、いいソフトがないか探していました。（後で気がついたのですが、Dashboardは普通にアプリケーションに入っているのですね・・・）
あまり気に入ったアプリが無かったので、どうせなら自分で作ってみようということで、いくつかJSのライブラリを探してみました。
すると、jQuery.qrcodeというライブラリが見つかりました。

ライブラリ選定のポイントは、QRコードの生成時に通信が発生しないことと、カスタマイズ性です。テストサイトということもあり、できるだけ外部に情報を送りたくないということがあります。また、今後QRコードを表示したいということがあるかもしれないので、デザインを色々いじれることもこのライブラリを選んだポイントです。

いざ実装！

実装は非常に簡単でした。
ライブラリを読み込んで、数行のスクリプトを記述するだけでQRコードを表示することができました。
オプションなども結構細かくでき、基本的にはこのライブラリだけで大体のことはできると思います。

オプション

QRコード生成時にオプションを設定することで、QRコードを細かく設定することが可能です。
オプションとしては、下記のようなものがありました。

• QRコードに入れる情報（URLやテキストを設定）
• QRコードの大きさ
• QRコードの色
• QRコードの背景色
• QRコードの細かさ
• QRコードの誤り訂正レベル
• QRコードのエリアの大きさ
• QRコードの丸み
• QRコードの中に表示するテキスト
• テキストエリアのデザイン
• テキストサイズ
• テキストの横位置
• テキストの縦位置
• テキストの色
• QRコードの中に表示する画像

試しに自分で使いそうなものでデモを作ってみました。よかったら使ってみてください！
QRコードジェネレーター

まとめ

QRコードが非常に簡単に作れることが分かったので、今度何かに提案してみたいと思います。

レッツQRライフ♪

JavaScriptの画像ビューアライブラリのPhotoSwipeが素敵だった。

仕事でJavaScriptの組み込みなども行っているのですが、画像を拡大させる様な見せ方を求められることが多々あります。
簡単な方法では、画像をblankで開くとかもあるのですが、あまりスマートではないですね。別途作っても良いのですが、PCやスマホ、タブレットなどと考えていくと、なかなか大変な話です。

「ここまで要望のある機能なら」と言うことで調べてみたら凄いのが出てきましたので紹介したいと思います。

PhotoSwipe

ページ内の設定された画像をタップすると、かっこいいアニメーションで画像が拡大されます。更に、拡大後の画像をスワイプすると、次の画像に移動できます。
他にも画像の拡大縮小やキャプション、シェアなど機能などもあります。

使ってみる

実際に組み込んでみると、非常に軽快な動作です。若干古めのiPhoneやAndroidでも問題なく動作します。
また、PCでも非常に綺麗に表示をしてくれるので、今後はこのライブラリを重宝することになりそうです。

組み込み方

こちらでは実際の組み込み方などについての説明は省略します。
以下のサイトが非常にわかりやすく解説をしてくれていたので、そちらを紹介させて頂きます。

PhotoSwipeの使い方！Light Boxの決定版を導入しよう！

まとめ

スマートフォンが普及してから、Webサイトでもアプリライクな動作を求められることが非常に多くなってきました。
フロントエンドでもやることが非常に多くなってきているので、便利なライブラリなどを上手く使いこなしていくことも大事だと感じています。
また、ライブラリを使う際には色々と気をつける点もあるので確認は忘れないようにしましょう。
ライセンスや動作環境、etc・・・

ときにはライブラリの中身を見てみるなども、とても勉強になるのでオススメです。

またいいライブラリがありましたらこちらで紹介させて頂きます。