word press(wp)環境下で、Google Cloud Vision Apiを使用して苦労した話
https://zenn.dev/crinoid/articles/f41a4a09753a71#11.-web_detection
こういった記事を見つけ、画像を検索するシステムを作成しようと思った。
公式:
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を使います。
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'];
参考:
上記の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のデータの取得(オブジェクト)
$familyPhotoResource = fopen($_FILES['image']['tmp_name'], 'r');
$image = $vision->image($familyPhotoResource, [
'web'
]);
$result = $vision->annotate($image);
$info = $result->info();
参考:
ただの画像を検索するのであれば、
$familyPhotoResource = fopen('test.jpg', 'r');
にすれば良い。今回はformから送信した画像を検索にかけたかったため、このような形になりました。
web detectionという機能を用いて、似ている画像を検索するoptionを使います。
最後の$infoの情報は以下のようになっています。
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から呼ぶようにすると、検索機能の出来上がりです。
function test(){
return test
}
add_shortcode('test1',test);
//使用したい際には、[test1]を記述すればよい。