配列の並び替え方法について

サイト作成の勉強中です。

GCPのVisionAPIで以下の画像を

以下のプログラムで読むと、

scan.php
1<?PHP
2// APIキー
3$api_key = "私のAPIキー" ;
4
5// リクエスト用のJSONを作成
6$json = json_encode( array(
7  "requests" => array(
8    array(
9      "image" => array(
10        "content" => base64_encode(file_get_contents("test.jpg")),
11      ) ,
12      "features" => array(
13        array(
14          "type" => "TEXT_DETECTION",
15          "maxResults" => 10,
16        ) ,
17      ) ,
18      "imageContext" => array(
19	"languageHints" => array("ja"),
20      ),
21    ) ,
22  ) ,
23) ) ;
24
25// リクエストを実行
26$curl = curl_init();
27curl_setopt($curl, CURLOPT_URL, "https://vision.googleapis.com/v1/images:annotate?key=" . $api_key);
28curl_setopt($curl, CURLOPT_HEADER, true);
29curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
30curl_setopt($curl, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
31curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
32curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
33if(isset($referer) && !empty($referer)) curl_setopt($curl, CURLOPT_REFERER, $referer) ;
34curl_setopt($curl, CURLOPT_TIMEOUT, 15);
35curl_setopt($curl, CURLOPT_POSTFIELDS, $json);
36$res1 = curl_exec($curl);
37$res2 = curl_getinfo($curl);
38curl_close($curl);
39
40// 取得したデータ
41$json = substr($res1, $res2["header_size"]);
42$array_json=json_decode($json, true);
43
44$text = $array_json["responses"]["0"]["textAnnotations"]["0"]["description"];
45// $text = $array_json["responses"]["0"]["fullTextAnnotation"];
46// var_dump($text);
47$arr = explode("\n", $text); 
48foreach($arr as $line) {
49  echo $line . "<br />";
50}

A 1
B 1
A 2
B2
のようにNのような格好で読み込まれます。

NではなくてZのように読み込みたいです。
※Zの例とは写真のままで
A1 A2
B1 B2
という具合に読みたいです。

そこで、取得したデータをvar_dumpしてみました。

array(2) { ["pages"]=> array(1) { [0]=> array(3) { ["width"]=> int(4032) ["height"]=> int(3024) ["blocks"]=> array(3) { [0]=> array(3) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1874) ["y"]=> int(2389) } [1]=> array(2) { ["x"]=> int(1844) ["y"]=> int(2032) } [2]=> array(2) { ["x"]=> int(2043) ["y"]=> int(2015) } [3]=> array(2) { ["x"]=> int(2073) ["y"]=> int(2372) } } } ["paragraphs"]=> array(1) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1874) ["y"]=> int(2389) } [1]=> array(2) { ["x"]=> int(1844) ["y"]=> int(2032) } [2]=> array(2) { ["x"]=> int(2043) ["y"]=> int(2015) } [3]=> array(2) { ["x"]=> int(2073) ["y"]=> int(2372) } } } ["words"]=> array(2) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1874) ["y"]=> int(2389) } [1]=> array(2) { ["x"]=> int(1860) ["y"]=> int(2227) } [2]=> array(2) { ["x"]=> int(2059) ["y"]=> int(2210) } [3]=> array(2) { ["x"]=> int(2073) ["y"]=> int(2372) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(5) "SPACE" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1874) ["y"]=> int(2389) } [1]=> array(2) { ["x"]=> int(1860) ["y"]=> int(2227) } [2]=> array(2) { ["x"]=> int(2059) ["y"]=> int(2210) } [3]=> array(2) { ["x"]=> int(2073) ["y"]=> int(2372) } } } ["text"]=> string(1) "A" } } } [1]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1856) ["y"]=> int(2181) } [1]=> array(2) { ["x"]=> int(1843) ["y"]=> int(2033) } [2]=> array(2) { ["x"]=> int(2043) ["y"]=> int(2016) } [3]=> array(2) { ["x"]=> int(2055) ["y"]=> int(2164) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(10) "LINE_BREAK" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1856) ["y"]=> int(2181) } [1]=> array(2) { ["x"]=> int(1843) ["y"]=> int(2033) } [2]=> array(2) { ["x"]=> int(2043) ["y"]=> int(2016) } [3]=> array(2) { ["x"]=> int(2055) ["y"]=> int(2164) } } } ["text"]=> string(1) "1" } } } } } } ["blockType"]=> string(4) "TEXT" } [1]=> array(3) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2267) ["y"]=> int(2427) } [1]=> array(2) { ["x"]=> int(2250) ["y"]=> int(2075) } [2]=> array(2) { ["x"]=> int(2452) ["y"]=> int(2065) } [3]=> array(2) { ["x"]=> int(2470) ["y"]=> int(2417) } } } ["paragraphs"]=> array(1) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2267) ["y"]=> int(2427) } [1]=> array(2) { ["x"]=> int(2250) ["y"]=> int(2075) } [2]=> array(2) { ["x"]=> int(2452) ["y"]=> int(2065) } [3]=> array(2) { ["x"]=> int(2470) ["y"]=> int(2417) } } } ["words"]=> array(2) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2267) ["y"]=> int(2427) } [1]=> array(2) { ["x"]=> int(2260) ["y"]=> int(2278) } [2]=> array(2) { ["x"]=> int(2462) ["y"]=> int(2268) } [3]=> array(2) { ["x"]=> int(2470) ["y"]=> int(2417) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(5) "SPACE" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2267) ["y"]=> int(2427) } [1]=> array(2) { ["x"]=> int(2260) ["y"]=> int(2278) } [2]=> array(2) { ["x"]=> int(2462) ["y"]=> int(2268) } [3]=> array(2) { ["x"]=> int(2470) ["y"]=> int(2417) } } } ["text"]=> string(1) "B" } } } [1]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2256) ["y"]=> int(2211) } [1]=> array(2) { ["x"]=> int(2249) ["y"]=> int(2075) } [2]=> array(2) { ["x"]=> int(2452) ["y"]=> int(2065) } [3]=> array(2) { ["x"]=> int(2459) ["y"]=> int(2201) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(10) "LINE_BREAK" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2256) ["y"]=> int(2211) } [1]=> array(2) { ["x"]=> int(2249) ["y"]=> int(2075) } [2]=> array(2) { ["x"]=> int(2452) ["y"]=> int(2065) } [3]=> array(2) { ["x"]=> int(2459) ["y"]=> int(2201) } } } ["text"]=> string(1) "1" } } } } } } ["blockType"]=> string(4) "TEXT" } [2]=> array(3) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1862) ["y"]=> int(1160) } [1]=> array(2) { ["x"]=> int(1855) ["y"]=> int(699) } [2]=> array(2) { ["x"]=> int(2437) ["y"]=> int(690) } [3]=> array(2) { ["x"]=> int(2444) ["y"]=> int(1151) } } } ["paragraphs"]=> array(2) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1865) ["y"]=> int(1149) } [1]=> array(2) { ["x"]=> int(1856) ["y"]=> int(742) } [2]=> array(2) { ["x"]=> int(2048) ["y"]=> int(738) } [3]=> array(2) { ["x"]=> int(2057) ["y"]=> int(1145) } } } ["words"]=> array(2) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1865) ["y"]=> int(1149) } [1]=> array(2) { ["x"]=> int(1861) ["y"]=> int(964) } [2]=> array(2) { ["x"]=> int(2053) ["y"]=> int(960) } [3]=> array(2) { ["x"]=> int(2057) ["y"]=> int(1145) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(5) "SPACE" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1865) ["y"]=> int(1149) } [1]=> array(2) { ["x"]=> int(1861) ["y"]=> int(964) } [2]=> array(2) { ["x"]=> int(2053) ["y"]=> int(960) } [3]=> array(2) { ["x"]=> int(2057) ["y"]=> int(1145) } } } ["text"]=> string(1) "A" } } } [1]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1860) ["y"]=> int(934) } [1]=> array(2) { ["x"]=> int(1856) ["y"]=> int(742) } [2]=> array(2) { ["x"]=> int(2048) ["y"]=> int(738) } [3]=> array(2) { ["x"]=> int(2052) ["y"]=> int(930) } } } ["symbols"]=> array(1) { [0]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(10) "LINE_BREAK" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(1860) ["y"]=> int(934) } [1]=> array(2) { ["x"]=> int(1856) ["y"]=> int(742) } [2]=> array(2) { ["x"]=> int(2048) ["y"]=> int(738) } [3]=> array(2) { ["x"]=> int(2052) ["y"]=> int(930) } } } ["text"]=> string(1) "2" } } } } } [1]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2216) ["y"]=> int(1154) } [1]=> array(2) { ["x"]=> int(2212) ["y"]=> int(694) } [2]=> array(2) { ["x"]=> int(2437) ["y"]=> int(692) } [3]=> array(2) { ["x"]=> int(2441) ["y"]=> int(1152) } } } ["words"]=> array(1) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2216) ["y"]=> int(1154) } [1]=> array(2) { ["x"]=> int(2212) ["y"]=> int(694) } [2]=> array(2) { ["x"]=> int(2437) ["y"]=> int(692) } [3]=> array(2) { ["x"]=> int(2441) ["y"]=> int(1152) } } } ["symbols"]=> array(2) { [0]=> array(2) { ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2217) ["y"]=> int(1154) } [1]=> array(2) { ["x"]=> int(2215) ["y"]=> int(981) } [2]=> array(2) { ["x"]=> int(2439) ["y"]=> int(979) } [3]=> array(2) { ["x"]=> int(2441) ["y"]=> int(1152) } } } ["text"]=> string(1) "B" } [1]=> array(3) { ["property"]=> array(1) { ["detectedBreak"]=> array(1) { ["type"]=> string(10) "LINE_BREAK" } } ["boundingBox"]=> array(1) { ["vertices"]=> array(4) { [0]=> array(2) { ["x"]=> int(2214) ["y"]=> int(921) } [1]=> array(2) { ["x"]=> int(2212) ["y"]=> int(694) } [2]=> array(2) { ["x"]=> int(2436) ["y"]=> int(692) } [3]=> array(2) { ["x"]=> int(2438) ["y"]=> int(919) } } } ["text"]=> string(1) "2" } } } } } } ["blockType"]=> string(4) "TEXT" } } } } ["text"]=> string(14) "A 1 B 1 A 2 B2" }

これをZのように読むように整形しなおすにはどうしたら良いのでしょうか？
アドバイスのほどよろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

回答

質問の内容だけであれば

PHP
1foreach($arr as $line) {
2  echo $line . "<br />";
3}

を

PHP
1foreach($arr as $key => $line) {
2  echo $line;
3  if($key%2 === 1){
4      echo "<br />";
5  }
6}

という感じで、二つ出力するごとに改行を出力するようにすればいいです。

ポイントは

データ読み込みと出力はそれぞれ別であることを把握する
foreachの使い方を知る https://www.php.net/manual/ja/control-structures.foreach.php のサンプルをいくつか動かしてみると分かりやすいです
n個出力するごとに区切り文字を表示するのに剰余を利用するのはよくあるアルゴリズムなので、言語はなんでもいいので基本的なアルゴリズムを勉強してみるとこういう時に対応するための引き出しが増えます

補足

サイト作成の勉強中です。

というのがHTMLやCSSの勉強も含むということであれば、先行して少しHTMLとCSSの基本的なところを学習すると、改行タグ以外の方法で表示を成形する方法を学習することが出来ますので、学習用途に合わせて適宜HTMLとCSSを学習されることもお勧めです。

投稿2023/01/21 08:33

編集2023/01/21 09:34

tanat

総合スコア18778

goola

2023/01/21 08:47

ご回答ありがとうございます。ご紹介いただいたサイトも拝見しようと思います。試してみたところ、動きませんでした。 $text = $array_json["responses"]["0"]["textAnnotations"]["0"]["description"]; $arr = explode("\n", $text); foreach($arr as $key as $line) { echo $line; if($key%2 === 1){ echo "<br />"; } } また、アドバイスいただいた内容は、2行ごとに改行を入れるというものだと思いますが、これだと、 A 1　B 1 A 2　B2 となると思います、実現したいのは、写真のように、 A1　A2 B1　B2 なので、お教え頂いたソースを動くようにしても実現できない気がします。

tanat

2023/01/21 09:53 編集

ソースは間違っていましたね。修正しました。 > なので、お教え頂いたソースを動くようにしても実現できない気がします。こちらも確かにその通りです。ただ、もう少し機能を整理しないと適切な回答が難しいですね。 A1 B1 A2 B2 がそれぞれどのようなルールで格納されている値なのかを質問からは知ることが出来ないためです。 A3移行ややC、Dが存在するのか、AとBで要素数が異なることがあるのか等も不明です。少し難しいと思いますが、図を文章（要件）に落とし込んでください。（プログラミングの半分以上はこの文章に落とし込む作業です）例えば、本当に任意の順番で表示したいのであれば foreachのところを echo $arr[0]; echo $arr[2]: echo "<br>"; echo $arr[1]; echo $arr[3]; と言う感じでハードコーディングする以外ないです。すこしルールを言語化して数が増えても対応できるようにした場合、 n個の要素がある配列を値に添え字の偶数/奇数でそれぞれ別配列に格納しなおし、偶数の配列、奇数の配列を順に表示する。それぞれの配列を表示した後には改行を行う。で要件が満たせるのであればこんな感じになります。 foreach($arr as $key => $line) { $index = $key%2; $line_group[$index][] = $line; } foreach($lines_group as $lines ){ foreach($lines as $line){ echo $line; } echo "<br>"; }

goola

2023/01/22 01:00

おっしゃるとおりです。考えているプログラムはレシートのOCRです。一般的なレシートは合計と金額がサンプル画像のように離れているため、合計金額を見つけにくいです。（受け取り金額があるので、2番目に高いもしくは一番高い金額がふたつの場合はそれとすることも可能です）なので。質問にある長いarrayには読み取りのX,Yがあるので並び替えられないかと思ったんです。ただ、読み込む方法や格納する方法、思った順序に表示する方法など多くのことがわからず、曖昧な質問をしてしましました。すいません。初学者には難しいかもしれませんが考えてみるとします。

goola

2023/01/22 01:02

目標とするのは、以下のサイトです。 http://asprise.com/receipt-ocr-data-capture-api/extract-text-reader-scanner-index.html 写真をUPして、OCRTextをみると、きちんとレシートのように整形されたテキストが返ってきます。

goola

2023/01/22 03:14

配列の並べ替えは別で質問しようと思います。クローズさせていただきます。

行動規範の内容に同意します