ホーム>Web サイト構築リソース>ウェブサイトデータ
ダウンロード

@easyqrscanbot - Telegram QR コード スキャナー - ミニアプリ

Telegramを使ってQRコードを簡単にスキャン！

TelegramでQRコードをスキャン！TelegramでQRコードをスキャン！

このリポジトリには、QR コードをスキャンする Telegram Mini アプリである @easyqrscanbot のコードが含まれています。

QRコードスキャナーの使用方法

Telegram アプリが更新されていることを確認してください。Telegram API の最小必要バージョンは6.9です。

  1. Telegram で@easyqrscanbotを検索し、プライベート チャットを開始します。
  2. 左下隅にあるメニュー ボタン ( Scan QR ) をタップします。

QRスキャンボタン

  1. QRコードのスキャンを開始してください！

互換性

QR コード スキャナーは、Telegram API バージョン6.9以降の Telegram スマートフォン クライアント (Android および iOS) でサポートされています。残念ながら、QR スキャンは Telegram Web クライアントでは利用できません。ただし、Web クライアント上のミニ アプリにアクセスしてスキャン履歴を確認することはできます。

プロジェクトについて

このプロジェクトは、Vue などの最新の JavaScript フレームワークを使用して Telegram ミニ アプリを作成する例として機能します。また、Telegram API バージョン 6.9 で導入された次のような最新機能を活用する方法も示します。

  • QRコードのスキャン
  • ミニアプリからアクセスできるキーと値のデータベースである Telegram Cloud Storage を利用する

このプロジェクトは、Telegram Cloud Storage バックエンドを使用して取得したスキャンを保存する純粋な Vue フロントエンド アプリケーションを表します。

ミニアプリの導入

デプロイメントプロセスは、GitHub Actions を使用して完全に自動化されています。 masterブランチにプッシュするたびに、ミニ アプリが自動的に構築され、関連する GitHub Pages サイトにデプロイされます。

ここからミニ アプリにアクセスします: ミニ アプリ リンク。

開発者向け

プロジェクトを開始するには、次の手順に従います。

  1. リポジトリのクローンを作成します。 
 git clone https://github.com/MBoretto/easy-qr-scan-bot.git
cd easy-qr-scan-bot
  1. 依存関係をインストールします。 
 npm install
  1. プロジェクトをビルドします。 
 npm run build

コードのリンティングを実行するには、次のコマンドを使用します。 

 npm run lint

コーディングを楽しんでください!

独自のミニアプリをデプロイする

始める前に、Telegram Bot があることを確認してください。まだお持ちでない場合は、この Telegram ガイドを使用して作成できます。

クローンを作成してデプロイする

独自のミニアプリをデプロイする場合は、次の手順に従います。

  1. このリポジトリのクローンを作成します。

  2. Settings -> Pages -> [ソースとしてGitHub Actions選択] に移動して、リポジトリの GitHub Pages を有効にします。 GitHub は、リポジトリに関連付けられた GitHub ページにミニ アプリを自動的にデプロイします。

https://サポートするホスティング サービスを使用してミニ アプリを展開することも選択できます。

Telegram Bot メニューを使用してミニアプリを開始する

これは、Telegram Bot Menu を 1 回だけ構成する必要があるため、ミニ アプリを開始する最も簡単な方法です。ミニアプリをボットメニューにリンクする手順は次のとおりです。

  1. @BotFather ボットを開き、コマンド/mybotsを送信します。
  2. ミニアプリにリンクするボットを選択します。

ステップ1

3. 「ボット設定」を押します。

ステップ2

4. 「メニューボタン」を押します。

ステップ3

5. 「メニューの設定ボタン」を押します。

ステップ4

6. ミニアプリの URL を挿入し、メニュー ボタンの名前を指定します。

ステップ5

これで、Telegram ボット メニューからミニ アプリを起動できるようになりました。

Telegram Bot コマンドを使用してミニアプリを開始する

この方法は開発段階で役立ち、Telegram Bot Menu を再構成せずにミニ アプリに別の URL を指定できます。ただし、Telegram ボット サービスが実行されている必要があります。次の手順に従います。

  1. python-telegram-bot ライブラリをインストールします。 
 pip3 install python-telegram-bot --upgrade
  1. config.py内のconfig-example.pyの名前を変更します。 
 mv config-example.py config.py

  1. config.pyファイルを編集し、Telegram Bot Token TOKEN (@BotFather から取得できます)、 URL 、およびURL_TESTリンクを挿入します。

  2. web-app-launcher.pyスクリプトを実行します。 

 python3 web-app-launcher.py
  1. Telegram ボットを開き、コマンド/start (運用リンクの場合) または/dev (テスト リンクの場合) をボットに送信します。
  2. ボタンを押してミニアプリのバージョンを開きます

これで、テスト リンクを使用してミニ アプリを起動してテストできるようになりました。

データモデル

Telegram Cloud Storage は、あらゆる Telegram クライアントからアクセスできるキーと値のデータベースです。これにより、ユーザーごと、ボットごとに最大1024のキーを保存できます。各値の制限は4096文字です。データはユーザーの Telegram アカウントに関連付けられ、デバイス間で保持されます。 QR コードをスキャンした後、タイムスタンプをキーとして使用して生の文字列が保存されます。

ミニアプリは起動時に完全なスキャン履歴をロードし、ローカルに保存します。後続のスキャンは、Telegram Cloud Storage とローカルの両方に保存されます。

取得された生データは、QR コードの内容に従って情報を抽出するために操作されます。サポートされている QR コード コンテンツ タイプ:

  • URL
  • Vカード
  • Wi-Fi
  • ジオ
  • 文章

データを削除する

履歴タブで削除したいQRコードを展開し、 Binボタンを押します。このアクションにより、Telegram クラウド ストレージとローカル ストレージの両方から QR コードが削除されます。ミニアプリは他のデータを保存せず、Cookie も使用しません。

連続スキャン

QR コード スキャナは通常、コードを認識した後に閉じます。ただし、設定タブに移動してContinuous Scanボタンを押すと、連続スキャン モードを有効にすることができます。連続スキャン モードを無効にするには、ボタンをもう一度押します。左上の矢印を押すと、連続モードを終了できます。

触覚フィードバック

QR コードのスキャンに成功すると、デバイスが振動してフィードバックを提供します。

デバッグとトラブルシューティング

ミニアプリの設定セクションには、デバッグと開発に役立つツールがあります。

  • Sync Cloud Storageボタン: これは、ミニ アプリのローカル ストレージを Telegram クラウド ストレージと同期します。これは、ミニ アプリを開いたり閉じたりするのと同じです。
  • Enrich QR codesボタン: すべてのスキャンに対して生の QR コードの計算をトリガーします。
  • Show debugを有効にすると、次のように表示されます。
    • ローカルにキャッシュされたクラウド ストレージ キーのリスト
    • ローカルにキャッシュされたクラウド ストレージの Key-Value のリスト
    • ローカルに強化されたクラウド ストレージのキー情報のリスト

コンポーネント

このプロジェクトでは、Vue コンポーネント フレームワーク ライブラリである Vuetify を利用します。

ライセンス

コードは MIT ライセンスに基づいて配布されています

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて