プログラミング

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

メールアドレスが公開されることはありません。

関連記事

webpack Bootstrap

Webpack 4 (もしくは 3) で Bootstrap v4.0 を利用するサンプルコード

目次1. はじめに2. サンプルコード3. 想定する環境OSその他4. 今回のディレクトリ構造5. 動作させるための手順1. 今回作業するプロジェクトのディレクトリに移動します2. npm のパッケー …

Bootstrap

ボタンを押した直後に BootstrapのTooltipを数秒間表示する方法

ウェブページ上のボタンを押した直後に、Bootstrap の Tooltip を一定時間だけ表示する方法を紹介します。 スポンサードリンク 目次1. はじめに2. 参考になる情報3. プログラムの書き …

WordPress

WordPressのソースコード。HTMLにPHPを埋め込むスタイル。

WordPress本体のPHPソースコードや、テーマに含まれているPHPのソースコードを見ると、やたらと PHPの開始タグ(<?php)と終了タグ(?>)が埋め込まれています。 例えば、こ …

Web Components

Web Components のサンプルコード

Web Components を使ったサンプルコードを紹介します。

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …