word pressにてgoogle vision apiを使い画像の検索機能を作成する

word press(wp)環境下で、Google Cloud Vision Apiを使用して苦労した話
https://zenn.dev/crinoid/articles/f41a4a09753a71#11.-web_detection
こういった記事を見つけ、画像を検索するシステムを作成しようと思った。
公式:

https://cloud.google.com/vision/docs/detecting-web?hl=ja#vision_web_detection-python
#wpにて、apiを使用する
まず、apiの登録をする。こちらは結構情報があるので割愛。
downloadしたjsonを用意する。(image.json)

### vision clientを使う
結構情報が少なく苦労した部分ですね。特にPHPの情報が少ない....
参考:
https://googleapis.github.io/google-cloud-php/#/docs/google-cloud/v0.165.0/vision/visionclient?method=annotate

※vision clientを今回使いましたが、image annotate clientを使うことをお勧めします。(次のリリースでvisionは非推奨になるため)
ただ今回は、visionの情報しか見つけることができなかったため、vision clientを使います。

```test.php
use Google\Cloud\Vision\V1\ImageAnnotatorClient;
use Google\Cloud\Vision\V1\Feature;
use Google\Cloud\Vision\V1\Feature\Type;
use Google\Cloud\Vision\VisionClient;
use Google\Cloud\Storage\StorageClient;

putenv('GOOGLE_APPLICATION_CREDENTIALS=/home/image.json');
require_once('/home/vendor/autoload.php');
$vision = new VisionClient();
$familyPhotoResource = fopen($_FILES['image']['tmp_name'], 'r');
$image = $vision->image($familyPhotoResource, [
    'web'
]);
$result = $vision->annotate($image);
$info = $result->info();

foreach( $info['webDetection']['pagesWithMatchingImages'] as $v ){
    echo $v['url'];
```
参考:

https://cloud.google.com/vision/docs/libraries#client-libraries-install-php

https://github.com/googleapis/google-api-php-client

上記のgithubが肝です。

donwloadしたimage.jsonを適切な場所に置き、pathを
puenvを使い、GOOGLE_APPLICATION_CREDENTIALSに設定してあげます。→これにより、認証(auth)が通ります。
※本来であれば、サーバーの環境変数に設定するのですが、wpだとこんな形になりました。(最善策より苦肉の策です)

その後、vendorというフォルダをgithubからdownload！
※vendorを使う方法は2種類。composerを使うか、downloadして使うか。
しかし、`require_once '/path/to/google-api-php-client/vendor/autoload.php';`を使い、downloadを使ったのですがダメでした。
使用してみると、参照するファイルがないなどのエラーが頻発しまくりました。
そのため、composerを使うことを決めました。
composerを使ったとしても、`composer require google/apiclient:^2.10`を打ち込みフォルダをdownloadするだけです。
wpでcomposerが使えなかったとしても、downloadしたvendorのフォルダをまるまるコピーすれば使用可能になります。適当な場所にvendorフォルダを置いて、pathを`require_once`に設定する

とにかく、vision clientのインスタンスの作成に手こずりました。
classが見つかりませんなどのエラーが頻発しましたが、composerでdownloadしてきたvendorを使えば解決できました。


# phpのデータの取得(オブジェクト)
```php
$familyPhotoResource = fopen($_FILES['image']['tmp_name'], 'r');

$image = $vision->image($familyPhotoResource, [
    'web'
]);

$result = $vision->annotate($image);
$info = $result->info();
```
参考:

https://www.youtube.com/watch?v=DCpVlEadW7o&ab_channel=TraversyMedia

ただの画像を検索するのであれば、
`$familyPhotoResource = fopen('test.jpg', 'r');`
にすれば良い。今回はformから送信した画像を検索にかけたかったため、このような形になりました。
web detectionという機能を用いて、似ている画像を検索するoptionを使います。
最後の$infoの情報は以下のようになっています。

```text
Google\Cloud\Vision\Annotation Object
(
    [info:Google\Cloud\Vision\Annotation:private] => Array
        (
            [webDetection] => Array
                (
                    [webEntities] => Array
                        (
                            [0] => Array
                                (
                                    [entityId] => /g/11c4769n5h
                                    [score] => 1.282842
                                    [description] => Carnival in Rio de Janeiro 2019
                                )
                     [fullMatchingImages] => Array
                        (
                            [0] => Array
                                (
                                    [url] => https://triniinxisle.com/wp-content/uploads/2019/01/Carnival-Budget.jpg
                                )
```

取得できる情報は、phpのobjectで取得することができました。
取り方は、`$info = $result->info();`のように->info()を使ってobjectである
`[info:Google\Cloud\Vision\Annotation:private]`の情報を取得する。
ここも苦労しました。(infoの記述がobjectだと判明するのに時間を要した..)

info objectを取れたことにより、ネストされたwebEntitiesなどの情報が取れるようになりました。
for文などを用いて、中にある、urlやtitleの情報を取得することができ目的達成です!

# wp環境下での使用
wpにすでに上がっている、画像やurlがついている画像などは検索できるが
formから送った画像方法を検索するのに骨が折れました。

自作のformを固定ページに作成し、別ページに飛ばす方法を取りました。
しかし、wpはformで情報を送ると、記事検索機能が働いてしまいます。

そのため、function.phpに新たに、関数を作成しそれを呼ぶように設定します。
short codeの自作を交えて、formから呼ぶようにすると、検索機能の出来上がりです。

```php
function test(){
  return test
}

add_shortcode('test1',test);
//使用したい際には、[test1]を記述すればよい。

```


参考：https://www.webopixel.net/wordpress/53.html