xryuseix’s diary progress

イベント参加記とか,何か進捗でたら書きます

BaestaMapを支える技術 & 技育展参加記

技育展って?

技育展は、アウトプットの促進を目的とした エンジニアを目指す学生のためのピッチコンテストです。 自らのアウトプット(作品)を展示(プレゼン)し、 もの創りの楽しさ、厳しさ、可能性を知ることができます。 (公式サイトより)

です。あとはTwitter#技育展とかインターネットで「技育展」とかググってください(適当)。

BaestaMapって?

BaestaMap(バエスタマップ)とは、気軽に”映える”スポットを見つけられるサービスです。 最近では、「ググる🔍」ではなく「タグる🏷」が主流になってきています。 おしゃれなスポットを見つけるために、インスタグラムでハッシュタグ検索をする若者も多いです。 しかし、ハッシュタグで検索すると、実際に遊びたい場所よりも遠いところまで引っかかってしまうことがあります。 そこで、本サービスを使用することで、ハッシュタグ検索で引っかかったものを近い順に見つけることができます。 ぜひ、本サービスを使用して、おしゃれで映えるスポットへ足を運んでみてください🐾 (公式説明ページより)

です。

ここのサイトにデプロイされています。

wanwan0622.github.io

他のリンクはこれ

あと一緒に作ったばんぶーさんのブログがこれです。経緯とか諸々の詳しくはこっちをみてください。

bamboo-music.hatenablog.com

それと、これが発表動画です。

drive.google.com


では、そろそろ本題です。このソフトウェアがどのようにしてできたか記載していきます💪

イデア出し

イデア出しは1時間くらい通話しながらmiroでやりました。

なんかよくわからないネタがいっぱい出ています。アイデア出しはアイデアの質よりも量とポジティブな意見を尊重して進めていきました。

最終的には(アイデアとしては)この「デートスポットのsuggest」を採用し、これを中心として仕様を考えていきました。

どのアイデアを採用するかに関して、以下の点を重要視しました。

  • テーマが具体的なものになっているか
  • なんらかの問題を解決しているか
  • 他の既存のソリューションと差別化できているか
  • 楽しく開発できそうか

その他、技術イベントは若い女性が非常に少なく、若い女性目線で(のみ見つかりやすい)なんらかの問題点をピックアップできるのであれば、他と差別化できるだろうと予め話していました。

最初は「女性特有の悩み」の問題点と解決策の考察をしました。案自体は多く出たのですが、以下の点で最終的には採用できませんでした。

  • 生理、薬に関係する問題は大抵「botのリマインダー」で解決するが、それ以上それ以下にはならない
  • 他の問題は物理的なソリューションが多いが、僕らは"ソフトウェアエンジニア"
  • 実際かなり既存のものがある

個人的にこの中だと「生理用ナプキンを持ち歩くのが大変」という問題点に対して、このOiTrってソリューションが素晴らしいと感じましたが、素晴らしすぎて僕らの力でこれ以上のものに発展させることができず捨ててしまいました。

www.oitr.jp

用件定義

以降、ドキュメントはNotionを使用しました。

なんか色々いい感じに便利です(適当)。

まず、メインコンセプトとしてはこのようになりました。

その後、どんな機能を入れるか、そしてそれはどのような技術を採用するか話して議事録にまとめました。

技術選定

今回の最終的な構成としてはこのようになっています。

仕様を決めたタイミング(&アイデア出しのタイミング)でInstagramAPIの調査をしたのですが、「特定の座標から近くかつ#●●ランチのタグがついている」投稿を取得できるAPIは存在しなかったため、自鯖で投稿DBを作ってAPIを立てる必要がありました。

バックエンドに関して、Web REST API、DBが使えればなんでも良さそうです。しかし、中でGoogle Place APIを呼び出す関係で、ある程度高速に処理してあげる必要がありそうです。

また、僕はGolangが書きたい欲で溢れていました💕。そこで、API自体はFunction+Golangでややモダンで高速なサーバーレスAPIを作成し、1ヶ月しか時間がなかったので楽なNoSQLのFirestoreをDBということにしました。

フロントは

ばんぶー「ReactとTypeScriptとNext.jsを使いたい!!!!使ったことないけど!!!!!!!!!」

って言ってたので採用しました(?)まあ基本的によさそうなので。実際かなり時間がなかったので、できるだけ時短になる用に意識していました。例えばデプロイ先はGitHub Pagesを使用したのもそのためです。

開発

フロント

GitHubでいい感じにやりました

github.com

まずFigmaでデザインを決めました。ばんぶーさんがなんかいい感じに作ってくれました。

バックエンド

github.com

バックエンドのAPIは3つ立っています。

  • Get Instagram Posts API (from Coordinates)
    • 主に現在地から投稿を取得するAPI
  • Get Instagram Posts API (from Query)
    • 検索クエリ「サポーターズ本社など」からその場所の近くの投稿を取得するAPI
  • Get Location from Query API
    • JSでGoogle MapをEmbedするときに画像の中心をどこにすればいいんかと言われ、前日くらいに立てた

APIを書くにあたって、Golangはエラー処理がしやすかったり高速だったりと非常に楽でした。Firestoreもcloud.google.com/go/firestoreライブラリを使えば(Cloud Functions内なら)認証情報なしで動いたので非常に良かったです。

インスタ投稿クローラー

めんどいのでPyhtonで書きました。

github.com

データセット作成の流れとしては以下の3手順になっています。

  1. タグを登録
    1.1. 全国の駅名を取得
    1.2. 駅名ランチ、駅名ディナータグをFirestoreに登録
  2. タグからタグIDを取得
    2.1. FaceBook Graph APIig_hashtag_searchAPIを使用しました。しかし、これは週100件くらいで上限がきてしまいます(カス)
    2.2. そこで、instagrapiを使用しました。これはスマホやWebページのInstagram内部APIを呼び出せるPythonライブラリで、こちらなら10000リクエストくらい出来ました。
  3. タグIDから投稿を取得
    3.1. タグから最近/トップ投稿を取得します。これもFaceBook Graph APIInstagram内部APIの両方を使用しています。
    3.2. ついでにタグに対して最終取得日を追加し、あんまり取得していないタグから順にいい感じに取得します。

余談なんですが、baestamap公式Instagramは凍結されました😇

現在15000投稿くらいがDBに保存されています。お近くの場所も保存されているかも??

wanwan0622.github.io

(※もしなかったらそこは田舎、田舎です。はっきり言って田舎です。映えるスポットじゃないってことです。)

運用・保守

なんか書こうと思ったんですが、忘れました。DBの投稿は少しずつ増やして行こうと思ってるんですが、なんせグレーなAPIを使用しているのでよく落ちます。なので自動化はめんどいなという気持ちです。

その他

ばんぶーファンの方へ、こういうことなのでよろしくな👋

あと実はもう一個提出しています。インフラ/セキュリティです。こっちもよろしくお願いします。

それと、女性エンジニアテーマの「RiST Library」チームと同じサークル(RiST)なんですが、深夜に限界開発頑張ってたので見てきました。やっぱりハッカソン前日みたいなのは(見てる分には)面白いね^^

おわりに

次見るブログはこれ!!!!

bamboo-music.hatenablog.com