プログラミング

QRコードの画像ファイルから内容を読み取るWebページを作りました

投稿日:2017年10月6日 更新日:

1. はじめに

QRコードの画像ファイルから内容を読み取る を作りました。

2. スクリーンショット

スクリーンショット

3. URL

以下の URL でアクセスできます。

4. 操作と内容

  1. QRコードの画像ファイルを選択します。
    • ローカルのファイルをアップロードすることもできますし、Web上にある画像ファイルの URL を指定することもできます。
  2. [ファイル送信] ボタンを押します。

以上の操作により、QRコードから取得した内容を画面に表示します。

5. ソースコード

6. 参考情報

📂-プログラミング
-

執筆者:labo


  1. 阿野 より:

    初めまして。
    どうしてもワードプレスのサイトからQRコードを読み込みたいと考え、こちらのサイトを拝見して実装しようとしたのですが、何をどうしてもワードプレス上ではエラーが出て動作しません。
    大変ご面倒かと存じますが、ご助言いただけましたら幸いです。

    宜しくお願い致します。

    • labo より:

      コメントありがとうございます。

      https://tools.laboradian.com/qrcode-reader/
      は、以下のようにして作っています(WordPressのサイトです)。
      (1) 固定ページ(スラッグを “qrcode-reader” とする)を作成します。内容は空です。
      (2) 使っているテーマのディレクトリ直下に、page-qrcode-reader.php ファイル(”page-” + スラッグ名 + “.php” )を作成します(上のURLにアクセスすると、こちらが呼ばれるようになります)。
      (3) page-qrcode-reader.php に、好き勝手に QRコードを読むPHPコードや画面のHTMLを記述します。
      ・ テーマのディレクトリで Composer を使っており、このPHPファイル内では、QRコードを読み込むライブラリを利用しています。
      ・ HTMLのヘッダ部分では get_header() 関数を実行してヘッダを出力し、フッター部分では get_footer() 関数を実行してフッタを出力させています。

      おおまかにはこのような仕組みです。

comment

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

関連記事

web development

Web Development for Beginners を読む:レッスン4と5

目次1. はじめに2. Lesson 4: JavaScript Basics: Data TypesVariables(変数)Constants(定数)Data Types3. Lesson 5: …

web development

Web Development for Beginners を読む:レッスン12, 13, 14

目次1. はじめに2. Lesson 12: Browser Extension Project Part 1: All about BrowsersIntroductionAbout the bro …

Web Components

Web Components: カスタム属性の利用方法

Web Components を使ってカスタム要素を作成し、そのタグを記述する際に、独自の属性を利用する方法について説明します。

React Redux

React と Redux を使ったウェブページのサンプルその1

React と Redux を使ってウェブページのサンプルを作ってみました。以下のURLからアクセスすることがでます。 デモページ 🔗 React + Redux のサンプル002 こ …

CSS Flexible Box Layout Module のサンプルページを作りました

CSS Flexible Box Layout Module のサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンシ …