「ショートカット」でスポットの音声検索をしてみた

Patheeのメディアチームエンジニアの日向です。

インターン時代はPatheeのアプリ開発に関わっていましたが、去年社員として入社からはiOSから離れてしまっていました。 そこで、ここではその間に追加された機能などをキャッチアップしていきたいと思います。

今回は、iOS 12以降で使える「ショートカット」を使って、Patheeアプリでは叶わなかった音声検索に挑戦してみます。

作成するもの

「近くのかき氷」とか「新宿のパン屋」のように話しかけて、目的のスポットへの経路を確認できるものを作っていきます。

まず、音声入力されたエリアとキーワードでスポットを検索し、結果のリストを表示します。 次に、リストからスポットを選択するとマップに遷移して、現在地からそのスポットまでの経路を表示するようにします。

イメージはGoogleのアプリのCMで見る「近くの〇〇」みたいなやつです。

ショートカットとは

iOS 12とあわせてリリースされたアプリで、「メモを作成」「写真を選択」「メッセージを送信」など用意されたアクションを組み合わせて、それをSiriで呼び出したりウィジェットとして１タップで実行できたりできます。 ifやforのような条件分岐や繰り返しができたり、入力を要求したり、変数を設定したり、APIを叩いて結果を処理したり、アプリがなくてもさまざまな機能を実現することができます。

iOS 12にアップデートしたら自動で追加されるわけではなく、自分でストアからダウンロードする必要があるので、最近になってようやく存在に気が付きました...

作ってみる

「ショートカット」アプリを開いて、「ショートカットを作成」ボタンから新規ショートカットを作成します。

設定では名前やアイコン、呼び出し方などの設定やホーム画面への追加などができます。

「テキストを音声入力」アクションで音声入力ができます。「近くの店舗や企業を検索」アクションの検索ワードに「音声入力された内容」を設定します。

これで近くの店舗の検索結果がリストとして取得できたので、「リストから選択」アクションで、店舗を選択できるようにします。

選択された店舗が次のアクションに渡されるので、最後に「経路を表示」アクションで経路を表示します。

このように、いくつかのアクションを組み合わせて簡単に作成できます。「パン屋」で実行してみましょう。

・・・・全然近くの店舗がありません

Pathee版を作ってみる

Patheeのスポット情報を使うことで、他のサービスでは漏れていたような近くのスポット情報を得られるはずなので、Pathee版を作ってみます。

(APIは外部に公開しているものではないので、URLやレスポンスは実際のものとは異なります)

音声入力からのエリア・キーワード取得

先程と同じように、「テキストを音声入力」アクションで音声入力させます。

「〇〇の〇〇」という形で話しかけてもらうので、エリアとキーワードを「の」で分割します。 [(エリア), (キーワード)]というリストが得られるので、「変数を設定」アクションでこのリストに「エリアとキーワード」という変数名をつけておきます。

次に、「リストから項目を取得」アクションで、最初の項目を取得して、それに「エリア」という変数を設定します。

同様に、最後の項目を取得して、それに「キーワード」という変数を設定します。

これで、「エリア」という変数に「新宿」、「キーワード」という変数に「パン屋」が設定された状態になりました。

日本語から検索可能なワードへの変換

PatheeのAPIは日本語での検索にまだ対応できていないので、日本語から対応するワードに変換する必要があります。

そこで、エリア・キーワードそれぞれの一覧を取得するAPIを叩きます。

「URL」アクションにAPIのURLを入力し、「URLの内容を取得」アクションを実行することで、JSONを取得できます。

「それぞれで繰り返す」アクションで、各要素に対して新宿=shinjukuのような形式になるようにテキストを変換します。

テキストには、前のアクションの結果や、変数などを埋め込むことができます。 これを「&」で結合して「入力から辞書を取得」アクションに渡すと、{"新宿": "shinjuku"}という形式に変換されます。

前の手順で「エリア」という変数に「新宿」が入っているので、このJSONに対して「辞書の値を取得」アクションのキーに渡せば「shinjuku」が取得できるので、「エリア」の値を上書きます。

キーワードも同様にして対応するワードを取得します。

if文に相当する「次の場合」アクションを使えば、「エリア」が「近く」だった場合には現在地を取得するように処理を分岐させられます。

スポット情報の取得

エリアとキーワードが取得できたので、スポット情報を取得します。

スポット情報取得のAPIのパラメータに先程取得した「エリア」と「キーワード」を埋め込んだURLで、「URLの内容を取得」アクションを実行しJSONを取得します。 「辞書の値を取得」アクションを繰り返すことでネストされたデータから値を取得できます。 スポット情報では{"店名1": "住所1", "店名2": "住所2"}となるようにJSONを変換します。

スポット情報から経路を表示

変換したスポット情報のJSONに対して「辞書の値を取得」アクションで「すべてのキー」を選択すると、["店名1", "店名2"]のような店名だけのリストが取得できます。 これを「リストから選択」アクションに渡して、経路を表示させたいスポットの店名を選択させます。

選択された店名をキーにスポット情報の辞書から住所を取得し、最後に「経路を表示」アクションで経路を表示します。

完成

「近くのパン屋」で実行してみましょう

距離や写真など比較できる情報がないですが、店舗を選択してみます。

実はめちゃくちゃ近くにありました。

おわりに

表示できる情報が少ないですが、Patheeの音声検索版を作ることができました。

操作に慣れるまでに少し大変ですが、用意されたアクションや自前のAPIを組み合わせて簡単なアプリのようなものを作ることができます。

「ショートカット」でいろいろ遊んでみてはいかがでしょうか。