Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

Bing Image Search による画像検索

本記事は以下記事の画像検索部分についての記事になります。

www.hiromukato.com

Bing Image Search

画像検索にはBing Image Searchを利用しました。Bing Image Search とはMicrosoft Cognitive ServicesのSearchカテゴリに含まれるAPIの一つです。

azure.microsoft.com

Image Search API仕様

docs.microsoft.com

以下は仕様のポイントです。

  • 画像検索のエンドポイント https://api.cognitive.microsoft.com/bing/v7.0/images/search

  • ヘッダー詳細

    • たくさんありますが、Ocp-Apim-Subscription-KeyにAzureのSubscription Keyを設定するだけで動作しました
    • オプションではありますが最適な結果を得るためにはX-Search-Location, X-Search-ClientIPも指定したほうが良いとreferenceには書かれています
  • queryパラメータ詳細

    • referenceに必須かどうかが書かれており必須パラメータはqのみ
    • 実装においては以下のパラメータも指定しました
      • count : 何枚の画像情報を検索結果として受け取るか(デフォルト値:35, 最大値:150)
      • offset : 画像を返す前にスキップする画像の数を示す0から始まるオフセット(デフォルト値:0)
      • mkt : 検索結果として出る市場情報。通常はユーザーがリクエストを送っている国。わかる場合はmktは常に指定することが推奨されています
  • フィルターパラメータ詳細

    • フィルターパラメータは全てオプションですが指定することで画像のアスペクトやサイズ、ライセンスフリーかどうか等を指定して画像検索できます

レスポンス

以下は「猫」のキーワードで画像3枚(count=3)で検索した場合レスポンスです。画像が直接得られるわけではなくサムネイルURLや画像URL等の情報がJSONで得られます。

{
    "_type": "Images",
    "instrumentation": {
        "_type": "ResponseInstrumentation"
    },
    "webSearchUrl": "https://www.bing.com/images/search?q=%E7%8C%AB&FORM=OIIARP",
    "totalEstimatedMatches": 953,
    "nextOffset": 3,
    "value": [
        {
            "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=%e7%8c%ab&id=0AC894A8227A7D23433CC9CF0D09CF7696D2E843&simid=608028102763875329",
            "name": "猫の壁紙 | スマホ・PC用壁紙 WALLPAPER BOX",
            "thumbnailUrl": "https://tse1.mm.bing.net/th?id=OIP.Vrn7ZNqEuPLDQGZxzBowbgHaEo&pid=Api",
            "datePublished": "2018-04-23T22:11:00.0000000Z",
            "contentUrl": "http://www.wallpaper-box.com/cat/images/cat11.jpg",
            "hostPageUrl": "http://www.wallpaper-box.com/cat/",
            "contentSize": "356118 B",
            "encodingFormat": "jpeg",
            "hostPageDisplayUrl": "www.wallpaper-box.com/cat",
            "width": 1920,
            "height": 1200,
            "thumbnail": {
                "width": 474,
                "height": 296
            },
            "imageInsightsToken": "ccid_Vrn7ZNqE*mid_0AC894A8227A7D23433CC9CF0D09CF7696D2E843*simid_608028102763875329*thid_OIP.Vrn7ZNqEuPLDQGZxzBowbgHaEo",
            "insightsMetadata": {
                "pagesIncludingCount": 251,
                "availableSizesCount": 85
            },
            "imageId": "0AC894A8227A7D23433CC9CF0D09CF7696D2E843",
            "accentColor": "784224"
        },
        {
            "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=%e7%8c%ab&id=0AC894A8227A7D23433CAC14AB8CC65E0522BBC9&simid=608039733603143282",
            "name": "猫の壁紙 | スマホ・PC用壁紙 WALLPAPER BOX",
            "thumbnailUrl": "https://tse2.mm.bing.net/th?id=OIP.w7G5mgodRVLzE88qriqSCwHaEo&pid=Api",
            "datePublished": "2018-04-23T22:11:00.0000000Z",
            "contentUrl": "http://www.wallpaper-box.com/cat/images/cat14.jpg",
            "hostPageUrl": "http://www.wallpaper-box.com/cat/",
            "contentSize": "266541 B",
            "encodingFormat": "jpeg",
            "hostPageDisplayUrl": "www.wallpaper-box.com/cat",
            "width": 1920,
            "height": 1200,
            "thumbnail": {
                "width": 474,
                "height": 296
            },
            "imageInsightsToken": "ccid_w7G5mgod*mid_0AC894A8227A7D23433CAC14AB8CC65E0522BBC9*simid_608039733603143282*thid_OIP.w7G5mgodRVLzE88qriqSCwHaEo",
            "insightsMetadata": {
                "pagesIncludingCount": 213,
                "availableSizesCount": 74
            },
            "imageId": "0AC894A8227A7D23433CAC14AB8CC65E0522BBC9",
            "accentColor": "90533B"
        },
        {
            "webSearchUrl": "https://www.bing.com/images/search?view=detailv2&FORM=OIIRPO&q=%e7%8c%ab&id=3410336C259079EE3AD01465617D775286A6A325&simid=608012194240726202",
            "name": "猫の壁紙(1920×1080) | スマホ・PC用壁紙 WALLPAPER BOX",
            "thumbnailUrl": "https://tse2.mm.bing.net/th?id=OIP.PMF7KujJSO5WpIrYTwodcQHaEK&pid=Api",
            "datePublished": "2018-04-12T22:17:00.0000000Z",
            "contentUrl": "http://www.wallpaper-box.com/cat/19201080/images/cat13.jpg",
            "hostPageUrl": "http://www.wallpaper-box.com/cat/19201080/",
            "contentSize": "152702 B",
            "encodingFormat": "jpeg",
            "hostPageDisplayUrl": "www.wallpaper-box.com/cat/19201080",
            "width": 1920,
            "height": 1080,
            "thumbnail": {
                "width": 474,
                "height": 266
            },
            "imageInsightsToken": "ccid_PMF7KujJ*mid_3410336C259079EE3AD01465617D775286A6A325*simid_608012194240726202*thid_OIP.PMF7KujJSO5WpIrYTwodcQHaEK",
            "insightsMetadata": {
                "pagesIncludingCount": 104,
                "availableSizesCount": 44
            },
            "imageId": "3410336C259079EE3AD01465617D775286A6A325",
            "accentColor": "6A4825"
        }
    ]
}

Unity プロジェクト

開発環境

  • Unity 2017.2.1p2
  • HoloToolkit-Unity-2017.2.1.4.unitypackage(HoloLensで動作するUnityプロジェクトになっています)

Unity プロジェクトはGitHubにアップロードしています。 github.com

ImageSearch.unityを開きImageSearchViewのinspectorでSubscription Keyを入力し、Search Keywordに検索したキーワードを入力することで動作します。

Image Search APIのレスポンスはJSONなのでその中からurlを取得して画像を取得するWebTextureというユーティリティを作りました。WebTextureにurlを渡すことでTextureを返すのでこれをSpriteとしてシーンに表示しています。

TextureのリサイズはTexture2D.Resizeでできるかと思ったのですが灰色の画像になってしまうので以下を参照しました。

TextureScale - Unify Community Wiki

ただしこれでもUWPでビルドするとThreadを利用しているためエラーが出てしまうのでさらに以下を参照しました。

TextureScale.cs · GitHub

こちらで問題なくHoloLens向けビルドでテクスチャをリサイズすることができました。(本来ならThread部分をTaskに置き換えた実装にしたほうがベターだと思います)

画像についてはBillboard.csを付けることで常にユーザの方向を向くようにしました。