APIを弄ぶ -GOURMETGRAMつくったよ!-

APIを使って何かをつくってみよう!

ということで4月中旬からどんなものをつくるか、コンセプトはどうするか、等を考え始め、「GOURMETGRAM」というものをつくってみました。

最初のきっかけは学校の課題で、

“何かWebからデータ収集してそれで何かをつくってみてよ!”

というとてもアバウトな課題がでたので、やるのなら、何かサービスをつくってみよう!と思い立ったことでした。

GOURMETGRAMはつくば市の飲食店の情報をマッピングして、その周辺でとられた写真(今のところInstagramのみ)をAPIで投げてひっぱってきて表示してくれます。

なんでInstagram?

っていうと、私がInstagramがすきだからです^q^←

Instagramって私の周りで使っている人たちは夕飯の写真とか、ランチの写真をあげている人が多くて、

しかもInstagram特有の加工によってさらにそれが1.5倍くらいおいしく見えるのですよね!(もちろん本物もおいしいです)

なので、写真をとってくるのなら、普通の写真共有サイトよりもInstagramにしようって決めていました。

問題だったのは私がAPIというものをまず最初になんだかよくわかってないところでした。

たくさんのブログ記事とGoogle先生と本を頼りにしてつくってみました。

ということで構想から完成までの一部始終を記事にしたいなって思います。

どんなサービスが面白いかなー

使いたいAPIはInstagram。最初にそれだけが自分の中で決まっていて、あと位置情報とかも表示できたら面白いなー

と思って、でもそこでずっと止まっていました。

いろんな人に聞いて知った事は

  • 全ての範囲を網羅するのではなく、範囲をしぼると面白いものができるよ!

とのことだったので、 じゃあ場所を我らが”筑波大学”にしぼってみよう!と思い立ち、

先ほども言ったように、食べ物の写真とか表示できるといいなあ・・・^q^

と思っていると”ぐるなび”がAPI公開してるよ! と先輩方に教えてもらえたのでよっしゃそいつを使ってしまおう。となってとりあえずここで材料はそろいました!☆(ゝω・)

どんなコンセプトだと面白いかなー

サービスってすごいことやってても、内容が面白くないとつまらない。

じゃあ何か面白いコンセプトを!

ということでつくったコンセプトが

  • 真夜中にいやでも食欲が沸くサービス。じゅるり。
GOURMETGRAMの目的は、
Instagramの独特の加工によってとてもおいしいそうな写真を、深夜の丁度お腹のすいた時間帯にみて、
ああ!おいしそう!….今度いってみようかな!
と思わせることです。なので、これが一つのコンセプトとしてあります。
“じゅるり”が重要なのですよ!
  • おいしい写真をとろう
こまどりのステマその2

おいしい写真をとろう

なぜInstagramを使ったか というと、その加工がとてもレトロ風で、その効果によってお店の雰囲気が、伝わってきたり、料理がとても美味しく見えてくるのです。
なので、ぜひその効果を使っておいしそうな写真を共有できると面白いんじゃないの!てことで二つ目のコンセプトです。

どうやってコーディングすればいいのかなー

APIって何!状態だったので、とりあえずいろんな人の力をかりました。

InstagramのアクセストークンをPOSTでとってこなきゃいけないってどういうことなの・・・とか

callbackてなんなの・・・・とかすごい初歩的なところでずっこけつつ

(ここらへんを参考に)なんとかげっとー

Googleは地図表示するだけであれば、アクセストークンみたいなものはいらないし、(Google +のAPIを使うときは必要)

ぐるなびは登録すればわざわざメールで送ってくれます!親切設計!


[追記 8/24]
ぐるなびのapiはこちら(ぐるなびWebサービス)から利用することができます。
左メニューの「ご利用について」からユーザー登録を行うと、登録したメールアドレスにアクセストークンを送信してくれます。
仕様などについては「ご利用マニュアル」のメニューを見てください。


とりあえずJSONやXMLからのデータ抽出の方法を学び、怖気づくことよりもとりあえずコードうって動かしてみて

あれーうごかーん ってなって、スペルミスを見つけて…

の繰り返しをするとどうにかなりました。

本当に大変だったのは最初のアクセストークン取得ぐらいだったので、それ以降は勘と運でぺぺぺーいとひたすら打つ。

 

あとは、何をどう表示したいか、ということを明確にして、そのとおりに打つ 打つ ひたすら打つ。

 

デザインはどうしようかなー

いくら学校の実験程度といっても、それほどすごいことはしていないので、これは見た目にこだわってそれで評価もらうしかない!

ということでちょっと見た目にもこだわりました。

食欲を刺激する色は 赤色 と 黄色 です。ということで赤黄あたりを使った配色にしようかと思ったんですが、

なぜだかちょっとピンクがかった可愛らしい印象に(´_`*)

いいのです。かわいいデザインしたかったし←

スプーンとフォークのマーカーマーカーのスプーンとフォークもかわいい。

完成したよ! その後思ったこととか

無事期限までに完成( ^∀^ )

なんかまさかの高評価をいただきましたありがたや。

 

写真を半径20mで取得していたので、関係ない写真ばかりになっちゃうかな。と思ったのですが、

意外とちゃんと取得できていました。

ほんとにおいしそう。

でもまだ、写真がないお店も何件かあり、こればかりはどうしようもないので、

みんなに写真撮って!と呼びかけるしかないですね(´・ω・`)

またぐるなびで”つくば市”を検索すると1000件弱でてくるのですが、

APIでなげると144件しかかえってこない・・・

まあ1000件だと描画する前にタイムアップしちゃいそうですね^q^

1000件中からランダムに100件表示とかできると面白いのでは。と思ったりしました。

 

このGOURMETGRAMはつくばだからこそできたwebサービスです。

なぜなら東京等の都市部だと人口が密集していて20m範囲で写真とってきたら、何も関係ない写真がたんまりと入ってしまうんですね。

もし東京版としてこれをつくるのならばfoursquareと連携ができそうなので、

そこらへんを利用してみたいなあと思います。

これだとお店の情報も入っているので、もしかしたらぐるなびAPI使わないで取得できる気がします。

 

初めて自分で0からつくってみたんですけど、やっぱりつくることおもしろい(ノω`)

コンセプト考えてる時が一番おもしろかったです。

甘いもの食べたい

真夜中に食欲にうなされるこまどり


こまどりのステマその2

こまどりが真夜中からステマし始める


真夜中にInstagramの料理写真見て空腹と戦っていた時に思いついたコンセプトです。^q^おなかすいた

まだまだ実装していない所もあるので、もっともっとつくりこみたいなーと思ってます。

次はRoRをちゃちゃちゃっ と使いこなせるようになりたい・ω・

Share on Facebook
このエントリーをはてなブックマークに追加
Pocket

最近更新された記事