5/17の土曜日に、はじめてのハッカソン Vol.3に行ってきました。
みまさんにお誘いいただいていたのですが、前回・前々回は都合がつかずに不参加。で、今回は都合がついたので、参加しようと。
勉強とか後回しにしがちなので、こういうきっかけをいただけるのはありがたいことです。ほんとに。
チーム
- Makoto Ogata さん （マークアップ、UI）
- Toro_Unit （バックエンドとかシステムもろもろ）
デザイナーがいなかったので、ロゴはみまさんに助けていただきました。かわいい。
作ったもの
んでとりあえず、こんなものをつくりました。
レポジトリはこちら https://github.com/torounit/catsearch
概要
HTML5 Geolocation api を使って現在地の緯度経度を取得し、その近くで撮影された（であろう）猫の写真をひたすら表示します。
あと、検索窓に適当なスポット名（「東京タワー」とか）入れるとそこの近くの猫の写真を表示します。
という非常に単純なサービスです。
実装
API等で取得した緯度経度と、検索文字列「instagram.com%20猫%20OR%20ねこ」をTwitterの「search/tweets」に投げます。そして、帰ってきたTweetからURLを取り出しそれをinstagramのAPIに投げて、画像の情報を取得するという流れです。
instagramのEmbedding EndpointsというAPIにURLを投げ、帰ってきた情報から画像IDと取り出し、もう一度別のAPIに投げるという非効率な実装をしているので、めちゃめちゃ重いです。そんなわけで一度取った情報はサーバーにキャッシュするようにしています。
いまブログ書きながら、ドキュメント見てたらこの部分無くても良さそうな感じですね。。。。せつない。。。
検索機能の実装は、Google Map APIで、住所から緯度経度を取得し投げているだけです。Google Map APIすごい。
実装の経緯
最初はinstagramの/media/searchを叩いて近所の写真をとってこれるし、余裕でしょ！とかテキトーなことを考えてたのですが、いざやってみると全然猫の写真ないし、paginationはこのAPIに無さそうだし、開始1時間くらいは「詰んだ？」とかずーっと思ってました。
そしてその後、TwitterAPIを使う方向に切り替えたんですけど、TwitterだとBotは多いし、名前も検索対象だったりするので、精度的にお話にならなかったんですが、”instagram.com”を含むツイートのみに絞ると案外、そこそこ目的のものに近い結果が取得できたので、何とかなりました。追い詰められると人間なかなかがんばれるもんですね。
そんなわけで、instagramの写真をTwitterで探すという、謎な実装になってます。
感想
とりあえず、最初のアイデア出しのときに、ただひたすら猫への愛情だけを語り、実装をろくに考えずにやったのはまずったなぁと。そんな私におつきあいいただいたOgataさんには、大変な感謝です。はい。
また、仕様的にはめちゃめちゃシンプルでコードの量もかなり少ない方だと思いますが、それでも結構ぎりぎりまで作業する羽目になってました。2時間くらい時間余らせて、そこで機能追加したいなぁとか最初は思っていたんですけどね・・・・。
自分がアイデアを出してというのも初めてだったんですが、最初の段階で、ディレクトリ構造やら、ファイルの受け渡し方法だとか、ちゃんと決めておけばよかったなぁとも。2人のチームでもファイルのマージやらで苦労しました。3人とかだったら崩壊してるかもですね・・・。
日々の制作のやり方などを改めて考えさせられます。
とにかく技術面以外の部分で考えさせられることが多かった気がします。
まぁ反省材料も多かったのですが、それでも14時過ぎから19時半という短い時間の中、実際に動作するものが作れたのはよかったのかなと。懇親会のビールがとても美味しかったです。
なかなか普段得られない気づきがあって、ものすごい勉強になった1日でした。
スタッフの皆様ありがとうございました！