0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[AWS][Angular] 知らないことを知りたい→Googleの検索補完を一覧にしたらいい?

Last updated at Posted at 2019-10-12

動機と思いつき

  • 知らない街で美味しいご飯に巡り会いたい
  • レビューサイトを使いこなすのは難しい
  • 他のひとが何を探しているかわかったらいいかも
  • 検索語 + 「あ」〜「ん」をGoogleに渡して、なにが補完されるか一覧してみよう

さて、Google補完API

どうも公式なAPIではないようです。

Google API プログラミング解説

を参考にしました。JSONじゃなくてXMLが返ってくるんですね。

構成

Google APIはJavaScriptでたたけばいいし、Angularで作ったフロントエンドだけで完結しようと思いましたができません。
(どうしてできなかったのかは忘れました)。
間にプロキシを挟むことにしました。

image.png

稼働環境

AWSの鉄板構成です。

フロントエンドはS3に格納します。S3単体ではhttpsできないため、CloudFrnotを使います。
Google API呼び出しはLambdaで作りました。

image.png

できあがったもの

g9q54-soen8.gif

ソースコード https://github.com/sengokyu/hokanchan

考察

  • 漫然と検索語を入力すると、期待する結果を得られない。
  • 狭い範囲の検索語に絞り込むと良い結果が得られる。
    • 例)「銀座 ランチ」 → 「銀座 ランチ 天ぷら」
  • 期待する結果が得られる地域と、得られない地域がある。
    • 暮らす人々がどのくらいネットを使っているかによる?

ふりかえり

Keep

  • RxJSでエラーが起きたかどうか関係なく最後に処理を挟むのであれば、pipe(finalize(()=> { /* ... */ }) を使えばいい。

Problem

  • 欲張ってCloudFormationですべてデプロイしようとして時間がかかりました。

Try

  • CloudFormationを親子関係にして、環境全体とLambdaに分ける。

その他

  • .dev ドメインはブラウザ(Chrome/Firefox)がhttpsアクセスを強制します。httpへアクセスできなくて悩みました。

リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?