プログラミング

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

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

関連記事

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

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

プログラミング

Rubyのように書け、Cのように速いプログラム言語 Crystal の基本的な使い方

Crystal というプログラミング言語の基本的な使い方について紹介します。 実際に「使ってみたい」「試してみたい」といった方に向けて、コードを書き始めるまでの導入方法について書きました。文法の説明な …

no image

ウェブプログラミングの知識があるとできること(その1)

先日、あるブログを見ていたら最新の記事だけが表示されない仕組みになっていました。 ウェブプログラミングの知識があるとこんなことができますという例として、その仕組を調べた時の過程を紹介します。 目次きっ …

JavaScript でスロットマシーンを作ってみました(Canvas版)

JavaScript でスロットマシーンを作ってみました。 前回 とは違い、今回は Canvas を使っています。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情 …

JavaScript でスロットマシーンを作ってみました(3回目)

「JavaScript でスロットマシーンを作ってみる」の3回目です。 今回は ゲームっぽくしてみました。 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. …