便利ページ：カスタムQRコードの生成

WiFi接続のためのQRコードを毎回生成するので、便利ページに追加しました。

「便利ページ：Javascriptでちょっとした便利な機能を作ってみた」のシリーズものです。

すでにQRコードのためのユーティリティとして、以下を作成済みです。
・文字列からQRコードを生成する
・WebカメラからQRコードをスキャンする
・クリップボードの画像からQRコードをスキャンする

今回は、それに加えて、以下のQRコードを生成します。
・WiFiアクセスポイントへの接続
・ユーザID・パスワード付きURL
・Androidアプリ検索

(参考）Barcode Contents
https://github.com/zxing/zxing/wiki/Barcode-Contents

ソースコードもろもろは、以下に上げてあります。

poruruba/utilities

すぐに使いたい場合は以下から参照し、ユーティリティタブからQRコードを選択してください。（すべてJavascriptのみで動作します）

WiFiアクセスポイントへの接続

こんな感じで作ります。

WIFI:T:WPA;S:{SSID};P:{パスワード};;

ユーザID・パスワード付きURL

こんな感じで作ります。

https://{ユーザID}:{パスワード}@hogehoge.com

Androidアプリ検索

こんな感じで作ります。

https://play.google.com/store/search?c=apps&q=${キーワード}

ソースコード

Javascriptで書くとこんな感じです。

js/comp/comp_qrcode.js

    qrcode_cusom_generate: function(){
      var input = '';
      if( this.qrcode_custom_type == 'text'){
        input = this.qrcode_custom_text.text;
      }else
      if( this.qrcode_custom_type == 'wifi'){
        var escapeWiFiString = (str) => {
          return str.replace(/([\\;:])/g, '\\$1');
        }
        var ssid = escapeWiFiString(this.qrcode_custom_wifi.ssid);
        var password = escapeWiFiString(this.qrcode_custom_wifi.password);
        input = `WIFI:T:WPA;S:${ssid};P:${password};;`;
      }else
      if( this.qrcode_custom_type == 'url'){
        var userid = encodeURIComponent(this.qrcode_custom_url.userid);
        var password = encodeURIComponent(this.qrcode_custom_url.password);
        if( this.qrcode_custom_url.userid ){
          input = this.qrcode_custom_url.url.replace(/^(https?:\/\/)/, `$1${userid}:${password}@`);
        }else{
          input = this.qrcode_custom_url.url;
        }
      }else
      if( this.qrcode_custom_type == 'android'){
        var keyword = encodeURIComponent(this.qrcode_custom_android.keyword);
        input = `https://play.google.com/store/search?c=apps&q=${keyword}`;
      }

      var element = document.querySelector('#qrcode_custom_area');
      element.innerHTML = '';
      new QRCode(element, input);
      this.qrcode_custom_generated = input;
    },

以上