#からあげ好きですか？
僕は大好きです。
はじめまして、karaagedaisukiです。
リブセンスでは、SEO施策の企画とからあげの啓蒙活動を行なっております。
今回、会社の先輩からの強い勧めにより23日目を担当させていただきました。
内容をご覧になっていただければおわかりいただけると思いますが、
「非エンジニア」ですので温かい目で見守っていただけますと幸いです。
##あー、もうすぐクリスマスなのにからあげのお店探してない…
そんなときあなたはこう思うはずです。
クリスマス当日に、現在地から、からあげのお店を探せたらどんなに幸せか…
ええ、僕もそう思います。
ですので今回は、誰もが抱えているであろう大きな問題を解決できる手段を
「プログラム」を用いて解決することに挑戦してみます。
##まずは検索してみよう！
さて、非エンジニアである僕には、一からプログラムを作り上げる（もしくは考える）力はございません。
そこで頼るのが「Google先生」です。
###単語を組み合わせる
さて、今回の質問（課題）は「クリスマス当日に、現在地から、からあげのお店を探せたらどんなに幸せか…」でしたね。
これを単語に分解してみます。
- クリスマス
- 当日
- 現在地
- からあげ
- お店
- 探す
こんな感じでしょうか。さて次に必要な要素を追加してみましょう。
必要な要素はもちろん「プログラミング」です。
上記の単語に、「プログラミング」を組み合わせると、新しい単語を見つけることができました。
※例えば、「現在地 プログラミング」と検索することで、「Geolocation API」が見つかりました。
- ぐるなびAPI
- API
- GeolocationAPI
もうここまできたら、Web上に存在する偉大な先人の力を借りることができます。
###参考にさせていただく偉大な先人の方々
見つけた単語を組み合わせることで、下記参考記事が見つかりました。
特に最後のURLとか「ほぼ完成形」でしたので非常に助かりました。
##まずは基盤をつくる
参考にする記事を見つけたはいいものの、「さて作りますか」と言えないのが、非エンジニアの辛いところです。
まずは3つめURLに書いてあるコードをコピペしてみます。
すると、「世の中そんなに甘くない」ことを実感できます。
###お、これ「からあげ」を提供しているお店以外も出るやん…
そう、このコードだけでは、「現在地から500mくらい？のぐるなびに載ってるお店」しか取得できないのです。
※それだけでも僕からみたら「すごいこと」なのですが。
そこで必要な条件を追加していきます。
####基本にしたコード
<script>
function run() {
// Geolocation APIの呼び出し
navigator.geolocation.getCurrentPosition(function(pos) {
// Geolocation APIのコールバック関数
// console.log(pos);
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
// ぐるなびAPIの呼び出し
$.get(
'http://api.gnavi.co.jp/RestSearchAPI/20150630/',
{
keyid: '24372843af15709a416f44a338d0c79f',
format: 'json',
latitude: lat,
longitude: lng,
range: '1'
},
function(response) {
// ぐるなびAPIのコールバック関数
var results = response.rest
$('#result').empty();
for (var i = 0; i < results.length; i++) {
var result = results[i];
$('<li><a></a></li>')
.find('a')
.text(result.name)
.attr('href', result.url)
.end()
.appendTo('#result');
}
},
'jsonp'
);
});
}
</script>
####必要な条件を追加したコード
<script>
function search() {
navigator.geolocation.getCurrentPosition(function(pos) {
var lat = pos.coords.latitude;
var lng = pos.coords.longitude;
$.get(
'http://api.gnavi.co.jp/RestSearchAPI/20150630/',
{
keyid: 'ぐるなびAPI登録で取得したもの',
format: 'json',
latitude: lat,
longitude: lng,
// ここから
hit_per_page: '30',
freeword: 'からあげ,唐揚げ,唐揚げ,唐揚',
freeword_condition: '2',
sunday_open: '1',
range: '3'
// ここまで追加、修正したもの
},
function(response) {
var shoplist = response.rest
$('#shop').empty();
for (var i = 0; i < shoplist.length; i++) {
var shop = shoplist[i];
$('<li><a></a></li>')
.find('a')
.text(shop.name)
.attr('href', shop.url)
.end()
.appendTo('#shop');
}
},
'jsonp'
);
});
}
</script>
元になったコードを書いてくれた方が親切に説明してくれているので、
どこを修正したら良いかが一目瞭然でした。
今回追加したのは下記です。
| 追加したい条件 | 追加・修正要素 | 説明 |
|---|---|---|
| 表示店舗数 | hit_per_page | 指定しない場合10件表示でしたので30件にしました |
| 特定の単語での絞込 | freeword | ここは必須です。からあげでないと意味がない |
| 検索条件 | freeword_condition | 指定しない場合AND検索ですので、OR検索にしました |
| 日曜日営業しているか | sunday_open | 今年のクリスマスは日曜日！お店の前で悲しい思いをしないためです。 |
| 現在地から1キロ以内 | range | すでに300m以内の指定がありましたがここは1キロまで我慢しましょう |
##さあ、からあげを探そう！！
必要な条件を追加したら実際に探してみましょう！！
「近くのからあげを探す」を押すと、、、、
出た！！！
いやー、嬉しいですね。
自分がイメージしたことを実現できる喜び、エンジニアの方はいつもこんな感動を味わっているのか、、、
##例年以上にクリスマスにからあげを楽しむ人が増えそうですね
それだけで僕は幸せです。
あ、もちろん3連休初日にこんな記事を書いているので、僕はリア充ではございません。
この記事を読んだ人がパートナーとからあげを楽しむことができるようになると考えるだけで、満足です。
みなさん素敵なクリスマスを。。。
##おまけ
あ、大事なことを忘れていました。おすすめのからあげ（東京）を紹介します。
とりなご（恵比寿店）
寒い夜にぴったりの、「鴨すき」がメインのお店ですが、とっても美味しい「からあげ」も楽しめます。
割引券持ってるので、誰か僕に声かけてください！！
###あとコードです
2017年クリスマス当日にからあげを探す