QRコード生成

TurboWarp拡張機能とWeb APIを利用して、QRコード生成プロジェクトを作成しました。僕は中学2年生なりに試行錯誤して頑張ってみました。

概要

開発環境はTurboWarpで、Web APIを呼んで生成したQRコードの画像を表示するプログラムを作成しました。
多くのテンプレートを用意しました。

以下のテンプレートを用意しています。

• URL or TEXT
• Wi-Fi
• 電話番号
• SMS
• Eメール
• 位置情報
• カレンダー
• 連絡先追加
  これらのテンプレートは必要な情報を入力する必要があり、その入力した情報がQRコード用のデータに変換し、APIに送信されます。送信にはインターネットが必要です。
  ※生成するQRコードの誤り訂正レベルはL(約7%)です。

具体的な仕組み

全体の流れ

Web API送信用データの作成

URL or TEXT

このテンプレートが選択されるとテキストの入力を要求されるので、URLまたはテキストを入力すると、まずは入力したテキストがURLエンコードされます。https://api.qrserver.com/v1/create-qr-code/?size=345x345&data= という文字列にURLエンコードされた文字列が繋がることで、Web API送信用URLが完成します。

Wi-Fi

入力する情報は以下の通りです。

• SSID:Wi-Fiネットワーク名
• 暗号化方式:WPAなどのWi-Fiで使用する認証方式(ここでは、番号で選択。)
• Password:Wi-Fiに接続するためのパスワード(パスワードなしの方式ではスキップ。)
• 非表示SSID設定が有効か:有効と書かない限りは無効として解釈
  Wi-Fi用のQRコードのデータは以下のテキストです。
  WIFI:T:[暗号化方式];S:SSID;P:[パスワード];H:[SSIDを非表示にするか(するならtrue,しないならfalse)];;

電話番号

入力する情報は電話をしたい相手の電話番号のみです。電話番号用のQRコードのデータは以下のテキストになります。
tel:[電話番号]

SMS

入力する情報は相手の電話番号と本文です。SMS用のQRコードのデータは以下のテキストになります。
SMSTO:[電話番号]:[本文]

Eメール

入力する情報は相手のEメールアドレスと件名と本文です。Eメール用のQRコードのデータは以下のテキストになります。
このテンプレートが選択されるとテキストの入力を要求されるので、URLまたはテキストを入力すると、まずは入力したテキストがURLエンコードされます。https://api.qrserver.com/v1/create-qr-code/?size=345x345&data= という文字列にURLエンコードされた文字列が繋がることで、Web API送信用URLが完成します。

Wi-Fi

入力する情報は以下の通りです。

• SSID:Wi-Fiネットワーク名
• 暗号化方式:WPAなどのWi-Fiで使用する認証方式(ここでは、番号で選択。)
• Password:Wi-Fiに接続するためのパスワード(パスワードなしの方式ではスキップ。)
• 非表示SSID設定が有効か:有効と書かない限りは無効として解釈
  Wi-Fi用のQRコードのデータは以下のテキストです。
  WIFI:T:[暗号化方式];S:SSID;P:[パスワード];H:[SSIDを非表示にするか(するならtrue,しないならfalse)];;

電話番号

入力する情報は電話をしたい相手の電話番号のみです。電話番号用のQRコードのデータは以下のテキストになります。
tel:[電話番号]

SMS

入力する情報は相手の電話番号と本文です。SMS用のQRコードのデータは以下のテキストになります。
SMSTO:[電話番号]:[本文]

Eメール

入力する情報は相手のEメールアドレスと件名と本文です。Eメール用のQRコードのデータは以下のテキストになります。
MATMSG:TO:[メールアドレス];SUB:[件名];BODY:[本文];;

位置情報

入力する情報は位置情報で、都道府県と市区町村と丁目を繋げて指定します。(日本の位置情報の場合)
例 a県b市c町d丁目(日本の位置情報の場合)
この情報はhttps://nominatim.openstreetmap.org/search?format=json&q=という文字列に繋げてnominatimというWeb APIを呼び出し、緯度と経度を取得します。そして、
geo:[緯度],[経度]というテキストを作ってQRコードのデータが完成します。

カレンダー

入力する情報は以下の通りです。

• タイトル
• 開始日の日付(yyyymmdd)
• 開始日の時刻(hhmmss)
• 終了日の日付(yyyymmdd)
• 終了日の時刻(hhmmss)
  カレンダー用のQRコードのデータは以下のテキストになります。
  BEGIN:VEVENT%0ASUMMARY:[タイトル]%0ADTSTART:[開始日の日付]T[開始日の時刻]%0ADTEND:[終了日の日付]T[終了日の時刻]%0AEND:VEVENT
  ※%0Aは改行文字をURLエンコードした結果です。

連絡先追加

入力する情報は以下の通りです。

• 相手の姓
• 相手の名前
• 相手の組織名
• 相手の役職名
• 相手の電話番号(ハイフンなし)
• 相手のEメールアドレス
  連絡先追加用のQRコードのデータは以下のテキストになります。
  BEGIN:VCARD%0AVERSION:3.0%0AFN:[姓]%20[名前]%0AORG:[組織名]%0ATITLE:[役職名]%0ATEL:[電話番号]%0AEMAIL:[Eメールアドレス]%0AEND:VCARD
  ※%0Aは改行文字を、%20はスペースを、URLエンコードした結果です。
  Wi-FiからここまでのQRコードは "特殊QR" ボタンをクリックすると使えます。

SAVE

SAVE機能を紹介します。SAVE機能は生成したQRコードをsvgファイルとしてSprite1のコスチュームに追加するもので、SAVEボタンをクリックすることで実行できます。

Export

Export機能を紹介します。Export機能は生成したQRをsvgファイルとしてデバイスのストレージに直接保存するもので、Exportボタンをクリックすることで実行できます。

さいごに

僕は将来、エンジニアになりたいので、興味本位で作ろうと思って始めました。途中から、少しでもクオリティを高くしたいと思うようになり、ここまで試行錯誤を重ねることができました。そして、このTurboWarpプロジェクトは公開しています。

プロジェクト公開リンク

Web版プロジェクト公開リンク

ソースコード公開リンク

Web版プロジェクトのソースコード公開リンク

参考リンク

qrserver:

nominatim: