質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.62%

  • PHP

    19807questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Zend Framework 2

    44questions

    Zend Framework 2は、PHP 5.3以上に対応している MVCフレームワークとコンポーネントライブラリーの集合です。

jpg内のバーコードをクリックしたとき特定のアクションを起こしたい

解決済

回答 5

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 188

ms5025

score 5

 前提・実現したいこと

言語:PHP
フレームワーク:zendFramework3

質問内容:
★画像内の特定の文字列(バーコード、1画像に複数)をクリックした時のアクションをとりたい
★一つ一つマッピング処理をせずにそれを実現できないか?

現在以下のような動きをするシステムを開発しました。

①jpgファイルに複数のバーコードがあります(カタログ1ページのような感じです)
②バーコードをクリックすると、その商品がカートに入る

現在はjpeg一つ一つに手作業でマッピングをし、そのアクションをもってカートに入れています。

ここで質問したいのは、画像の量が膨大なので、手作業のマッピングをせずに、
画像からバーコードを自動でよみとり、クリックアクションをとれないかということです。

 現在既にやっていること

jpg内のバーコードにひとつひとつマッピングして実現している。

 試してみたこと

画像のバーコードを文字列として認識させてなんとかできないだろうかと思っているのですが
どのみちマッピングが必要になるので、今と変わらないかもしれません

 力を借りたい事

画像のバーコードの部分をクリックしたときに動作をさせたい、
この紐づけを自動で行う方法が他にないか
何かヒントを頂けるとありがたいです。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    2018/09/14 15:01

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • ms5025

    2018/09/14 15:52

    カートの処理ごと質問を丸投げしていると思われたのかもしれないと思い、修正しました。

    キャンセル

  • papinianus

    2018/09/14 16:03

    バーコード部分というのは具体的にどうやって識別すればいいのでしょうか?今やっているマッピングで対処というのはどういうことを表現していますか?マウスはバーコードスキャナと違って領域を持っていないので何を手掛かりにすべきか前提を教えてください

    キャンセル

  • ms5025

    2018/09/14 17:59

    >バーコード部分というのは具体的にどうやって識別すればいいのでしょうか? というのが今回の質問です。現在はjpgにmapタグでイメージマップを手作業ではっています。 「何を手がかりに」の箇所が今回の質問です。カートに入れたり注文したり、それをどうこうする部分はどうとでもなるので、そのアクションを取りたいというのが私の質問です。

    キャンセル

回答 5

checkベストアンサー

+2

ZXingのライブラリを利用すると画像内の複数のバーコードから値や座標を取得することができます。
仕事でWebカメラからバーコードやQRコードを読み取りするモジュールを作ったことがあり、その時ZXingを使いました。読取精度は商用ライブラリと引けを取りません。
下のスクリーンショットはC#で1つの画像から複数のバーコード読み取りをやってみた結果です。

実際に実行してみた状態

このようなツールを作りコードと座標を取得、データベース化すれば、あとはphp側でそれを元にmapを作ることは可能だと思います。

ただ、取得できる座標ですが、1次元バーコードはバーコードの矩形で認識ではなく、「線」扱いになってしまいます。
(一次元のレーザーバーコードリーダーを使う際、リーダーから1本の線が出ますよね、あのようなイメージです)
QRコードならポリゴンで領域が取れるのですが…
横幅は取れるので、うまい具合に縦幅を取る仕組みを追加で実装できれば、自動化できなくもないかなと思います。
(ResultPointsで取れた座標の画素と上下の画素を比較し、大きく変わったところが境界とみなすとか・・・)
頑張ってください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/18 09:10

    ありがとうございます。ZXingのライブラリを使ってそのようなことができるのですね!
    バーコードのサイズが固定なら、(メーカーごとの違いはあれど、1カタログはみな同一だとおもうので)
    自動化できそうです。
    ヒントありがとうございます。質問してよかったです。

    キャンセル

+2

Web 系は門外漢なので、画像処理に関してコメントします。

 質問者さんの課題

複数のバーコードが写っている画像から、バーコードの位置及び数字を認識したい

 自動化する手順

バーコード認識は ZXing というライブラリが有名なようです。
ただし、ZXing は1つのバーコードだけ写っている画像でないと駄目なようなので、まず最初に複数のバーコードの部分をそれぞれ切り出す必要があります。

  • 1. OpenCV でバーコードの位置を検出し、それぞれ切り出す。
    実際の画像を見ないとわからないですが、本をスキャンしたようなものであれば、そこまで画像の状態は悪くないと思うので、そこまで難しくもないと思います。
  1. ZXing に切り出したバーコードをそれぞれ認識させる。

ZXing については今回始めて知ったのですが、Web上で試せるサイトがあったので、以下のバーコードを試してみました。
すると、ちゃんとバーコードの数字が認識されました。

イメージ説明

認識結果: 12345670

以上で画像からバーコードの位置及び数字が認識できそうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/18 09:11

    ありがとうございます!ZXing のライブラリを使って実現してみようとおもいました!
    そのようなライブラリをしらなかったので助かりました!ありがとうございます。

    キャンセル

+1

質問者様あるいは類似の疑問を持って訪れたかたが、求めておられる回答ではないです。

議論がしたいわけでも、批判がしたいわけでもなく、質問に対する要望でもなく、一つの見解ですが、求めておられるようなライブラリや一般的な解決策などはないと思います。

前提として私が認識したこと

  • 1つのjpgに複数のバーコードがある
  • (おそらく)2次元バーコードではない
  • 1つのjpgのどこにバーコードが配置されるかは指定できない

一般的に、バーコードを解釈するツール類は、1ファイルに1つのバーコードがあって、そこからデータを抜くものであって、座標を切り出すものではないと思います。
2次元コードのように位置を合わせるマークが四隅にあったりするならまだしも、棒が並んでいるだけの図柄が任意の位置に複数個ある(下手したら回転がある)と考えると、そこから正しいデータを読み取るのさえ難しいと思います。

スキャンした結果を画像上の座標で返すというのは、用途として一般的ではないですが、それ以上にレジで使われるようなバーコードは、直線でスキャンすれば(多少斜めになっていても)データが読み取れるところに利点があるので、それを矩形に抜くような仕組みを前提にしていません。
座標に対応しているとしても、斜めに赤い線を引くようなことが規格的に限界だと思います(レジの読み取りで目にする赤のスキャン線を想定してください)
色の明度の差を直線で走査したときに値を読み取れるのが、バーコードであって、そもそも縦方向については、規格がありません。

一切調べていませんが、バーコードをクリッカブルな領域(矩形)に切り出すライブラリはないと思います。

やりたいことをプログラム的にどう解決するかの方法としては、バーコードが白の矩形で囲まれている、ことを前提として予約し、画像処理をして、その白い四角形を抜き出す、ということだと思います。
もはやバーコードであるかどうかは関係ないです。
(バーコードっぽい図をphpで切り出すというのは画像処理としてもそこそこハードルが高いと思います、バーコードが白と黒だと想定してさえも)

バーコードをボタンとして使おうというUIそのものは良いと思います。
もし私が、そういう画面を実現するとしたら、個々の商品の図とそれに対応するバーコードを用意して、それら個別の図を大きなキャンバスに適宜配置して一つの商品選択ページを作ると思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/14 19:36

    回答ありがとうございます!

    そうですよね、単純に考えたらそのとおりだと思います。。
    ちなみにバーコードの棒ではなく49854124785みたいな文字コードだとしたらどうでしょうか?
    (それでも一緒か・・)
    pdf化してocr処理みたいなこともできないのかなぁとか色々思ったのですが
    本日色々さぐってみて、確かに実現できるようなものが見当たりませんでした。

    お客様からはペライチのカタログの画像だけがやってくる状況です
    (それ以上のデータは用意してもらえないようです)
    >もし私が、そういう画面を実現するとしたら、個々の商品の図とそれに対応するバーコードを用意し>>て、それら個別の図を大きなキャンバスに適宜配置して一つの商品選択ページを作ると思います。

    これすごくいいなぁと思ったのですが、
    お客様が視覚的に、カタログと同じものを電子データとして見ながら
    そのレイアウトで注文したいっておっしゃってて・・・

    それで現在そのカタログファイルの座標マッピングでここからここまでクリックされたら
    このバーコード、みたいな処理を手作業で入れてる状況なんですよね・・
    けどこれが結構大変で。

    実現が難しいということで、その旨を報告したいと思います。
    ありがとうございました。

    キャンセル

  • 2018/09/14 19:39

    ちなみに、
    商品マスタとバーコードと商品画像を羅列して、
    非同期処理を多様してさくさく動く注文画面は作ったのですが
    できれば、カタログ画像クリックで注文したいみたいです。

    キャンセル

  • 2018/09/14 20:03

    せめてQRコードだとしたら、
    https://qiita.com/enkatsu/items/34e53965b945cdcb2b7b
    のようにZXingのライブラリは座標をとれます。

    書き方がいささか無礼であったことをお詫びします。ご苦労お察しいたします。

    数字の話ですが、数字なら話は別になると思います。OCRは座標を返してくれるものがあります。カメラの笑顔認識などもそうなのですが、どこを文字だと認識したか疑わしい、確認したくなるようなものは一般に座標を取得できます。
    これに対してバーコードは、デコードできたら正しく認識できたことが推論できます。たまたまバーコードとして誤認識してしまうデザインはそう流通してないですし、バーコードをつけるものにそういうデザインを採用しないからです。つまり座標と照らしあわせて、ここをこういう数字と認識したのです、と人間に提示する動機がありません。
    人間からするとバーコードは図柄として特徴的ですが、求められている要件は、カタログから商品画像を切り出すのとさほど変わらない難しさだと思います。

    UIのアイデアは良いですし、こだわりたくなる気持ちは理解できますが、ペライチの画像しか用意できないってのはあまりにもひどいですね。
    カタログは版組してるはずで、そのときのメタデータがあれば難度は下がってくると思います。

    キャンセル

  • 2018/09/14 20:06

    バーコードの数字をOCRで認知して、バーコード部分をそこから導くとしたら、数字が必ず下にある、バーコードのおおよそのサイズが統一されている、と仮定できるなら可能かと思います

    キャンセル

  • 2018/09/18 09:12

    お返事おそくなりました。ZXingのライブラリが使えそうですね!
    わかりにくい質問に丁寧に回答していただきありがとうございました。
    ためしてみます!

    キャンセル

0

具体的なコードもないのでヒント程度の回答しかできないですが、
商品コードと画像ファイル名のフィールドを持つデータベース(テーブル)を作り
それをもとに表示、また管理画面でそのようなデータを管理という流れが一般的ではないでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/14 15:48

    すいません、質問がわかりにくくてすいません。修正しました。
    もちろんそのようなDB構成でカートに商品を追加して、発注するシステムはすでに作成済です。

    ただ1つのjpgに複数の商品のバーコードがあるようなものをクリックして
    それがカートに入るようにしてほしいという客先の要望があり、
    現在はjpg一つ一つマッピング処理を加えてアクションを取っています。

    そのようなマッピング処理をせず
    jpg内の文字列を自動認識し、アクションを取る方法はないかとおもって質問してみました。

    キャンセル

  • 2018/09/14 16:16

    「BarcodeReader.php」と検索するとライブラリが有料、オープンソース多数ヒットしますよ。

    ライブラリの使用も検討してみては、このさきは私もやったことないので詳しいことはわからないです。すいません。

    うまく動くライブラリがあれば、画像のあるフォルダを指定して、自動で入力するプログラムを作れるかもしれません。

    キャンセル

  • 2018/09/14 18:25

    >taka2063

    ヒントありがとうございます!!早速参考にしてみます

    キャンセル

0

svgで処理してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    19807questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • Zend Framework 2

    44questions

    Zend Framework 2は、PHP 5.3以上に対応している MVCフレームワークとコンポーネントライブラリーの集合です。