JavaScript
HTML5
Bootstrap
SEO
から揚げ

クリスマス当日も安心!!現在地から、からあげ(チキン)を探してみる

More than 1 year has passed since last update.


からあげ好きですか?

僕は大好きです。

はじめまして、karaagedaisukiです。

リブセンスでは、SEO施策の企画とからあげの啓蒙活動を行なっております。

今回、会社の先輩からの強い勧めにより23日目を担当させていただきました。

内容をご覧になっていただければおわかりいただけると思いますが、

「非エンジニア」ですので温かい目で見守っていただけますと幸いです。


あー、もうすぐクリスマスなのにからあげのお店探してない…

そんなときあなたはこう思うはずです。

クリスマス当日に、現在地から、からあげのお店を探せたらどんなに幸せか…

ええ、僕もそう思います。

ですので今回は、誰もが抱えているであろう大きな問題を解決できる手段を

「プログラム」を用いて解決することに挑戦してみます。


まずは検索してみよう!

さて、非エンジニアである僕には、一からプログラムを作り上げる(もしくは考える)力はございません。

そこで頼るのが「Google先生」です。


単語を組み合わせる

さて、今回の質問(課題)は「クリスマス当日に、現在地から、からあげのお店を探せたらどんなに幸せか…」でしたね。

これを単語に分解してみます。


  • クリスマス

  • 当日

  • 現在地

  • からあげ

  • お店

  • 探す

こんな感じでしょうか。さて次に必要な要素を追加してみましょう。

必要な要素はもちろん「プログラミング」です。

上記の単語に、「プログラミング」を組み合わせると、新しい単語を見つけることができました。

※例えば、「現在地 プログラミング」と検索することで、「Geolocation API」が見つかりました。


  • ぐるなびAPI

  • API

  • GeolocationAPI

もうここまできたら、Web上に存在する偉大な先人の力を借りることができます。


参考にさせていただく偉大な先人の方々

見つけた単語を組み合わせることで、下記参考記事が見つかりました。

GeolocationAPIはこちら

実際に同じようなものを作った人の記事はこちら

もうほぼ答えのコード(Gist)

特に最後の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キロまで我慢しましょう

APIの仕様についてはこちら


さあ、からあげを探そう!!

必要な条件を追加したら実際に探してみましょう!!

スクリーンショット 2016-12-23 22.55.54.png

「近くのからあげを探す」を押すと、、、、

スクリーンショット 2016-12-23 22.56.10.png

出た!!!

いやー、嬉しいですね。

自分がイメージしたことを実現できる喜び、エンジニアの方はいつもこんな感動を味わっているのか、、、


例年以上にクリスマスにからあげを楽しむ人が増えそうですね

それだけで僕は幸せです。

あ、もちろん3連休初日にこんな記事を書いているので、僕はリア充ではございません。

この記事を読んだ人がパートナーとからあげを楽しむことができるようになると考えるだけで、満足です。

みなさん素敵なクリスマスを。。。


おまけ

あ、大事なことを忘れていました。おすすめのからあげ(東京)を紹介します。

とりなご(恵比寿店)

寒い夜にぴったりの、「鴨すき」がメインのお店ですが、とっても美味しい「からあげ」も楽しめます。

割引券持ってるので、誰か僕に声かけてください!!


あとコードです

2017年クリスマス当日にからあげを探す