Wi-FiにQRコードでアクセスできるの便利だよね…

巷で見かける、QRコードをスマートフォンで読み取るだけでWi-Fiにアクセスできるやつ。

めちゃくちゃ便利なので、作ってみようと思いました。

 

今回の内容は以下のリポジトリにあります。

ree-rishun/wifi-qr – GitHub

 

構成

という程、大したものでもないのですが…

  • Vue.js(慣れてるから)
  • vue-qrcode

以上!

 

vue-qrcodeのインストール

Vue.jsプロジェクトは作成してある前提ではじめます。

まずは、vue-qrcodeを追加してください。

 

QRコード生成部分

早速コード紹介します。

 

ざっくり解説

Wi-Fiの解説

今回Wi-FiをQRコードにする当たって必要なパラメータは以下の通りです。

  • SSID
  • パスワード
  • タイプ(WEP/WPA)

尚、パスワードが必要ない場合、パスワードを省けばいいのだと思うのですが、試せる環境が無かったため、未検証です(コメント等で送っていただけると助かります)

 

vue-qrcode(HTML側)

こんな感じ。

propsに関しては、たくさんあるので、公式を参照してください。

vue-qrcode – npm

今回は長くなるので optionsにまとめています。

尚、画像形式の設定等、一部使えないものもありました…

 

vue-qrcode(JavaScript側)

QRコードの生成部分です。

パスワードの有無で分岐させています。

基本的に、

こんな感じのフォーマットをQRコードにしてしまえば、読み取るだけでiPhone等からWi-Fiへの接続が可能です。

 

最後に

今回の内容はめちゃくちゃ薄いですが、Wi-FiのQRコード化は普通に便利なので、何か利用できるといいなと思いました。

 

参考

 

今回のブログ曲

今回投稿中に聴いていた曲はこちら

カテゴリー: JavaScriptvue.js

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です