Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

【個人開発】Vue.jsとFirebase、Yahoo YOLP(地図)を使うとあっという間にサービス作れるんだなぁ...

タイトルままですが...

私は非喫煙者なんですが、ネットニュースで禁煙な店舗を探せるという某サービスが紹介されてました。

ほ〜と思ってサイトに行ってみると登録店舗が600ちょいしかありませんでした...

なんじゃこりゃ?と...なら自分で作ってみようかと金曜日の夜からこの週末を使って空き時間で禁煙なお店を検索できるサービスを作ってみました、実質8時間くらいかな?

こんな短時間でサービス作れちゃうご時世なんですね、ほんとに驚きです。

利用したサービスやフレームワーク

簡単にリストアップします。どれも有名ですので個別には紹介しませんが。

  1. Vue.js : 言わずとしれたUIフレームワークです。シンプルで好きです。
  2. Firebase : 今のところHostingのみ利用させていただいてます。
  3. Bootstrap : 非デザイナでもそれっぽいサイトができていいですね。
  4. Yahoo YOLP : 地図と施設検索に利用させていただいてます。Yahoo!ローカルサーチAPIの検索パラメータに禁煙度がついていたのがこのサービスを自作しようとおもったきっかけにもなってます。
  5. Font Awesome : アイコンで利用させていただいてます。
  6. Flaticon : アイコン画像で利用させていただいてます。
  7. Google Chart API : 地図のピンで利用させていただいてます。

禁煙店が探せるサービス「No Smoke !」

サイトのURLはつぎのようになります、Firebaseでありがちなプロジェクト名つけるとproject-xxxxとランダムな文字列がついちゃうんですが、「no-smoke」は空いててラッキーでした。

http://no-smoke.web.app/

また、Firebaseのホスティングは.firebaseapp.comでしたが、先月末から.web.appというのも使えるようになりました、シンプルでいい感じですよね?

メイン画面(検索)

検索画面になります、【現在地】ボタンをタップすると(座標が取れたら)その場所が地図の中心になります。

1.png

一覧の【★】ボタンをタップするとお気に入りに登録できます。

メニュー画面

ハンバーガーメニューをタップするとドロワー形式でメニューを出すようにしました。

ジャンル指定と、分煙でもいいかを選びます。

2.png

お気に入り画面

お気に入りに登録してある施設一覧を表示します。

3.png

Mapボタンをタップするとその場所が地図の中心になります。

技術的ポイント

う〜む、ツール類が良すぎてほとんど悩むこともなかったんですが、設定オプションやお気に入りの施設のデータをVuexで管理しつつlocalStrageにも保存・読み込みすることでブラウザをリロードした時でも設定が保存されるようにしたことくらいですかねぇ〜

また、Yahoo!ローカルサーチAPIの結果ですがCORS制限に引っかかってしまうためどうしようかとおもいましたが、vue-jsonpというまさに今回のためにあるようなモジュールがありましたのでそれを利用させていただきました。

また、YahooのAPIには1日の利用制限があるんですがそれを超過した時にエラーを判定してごめんね画面を出るようにしてあります。

ただそこそこ利用してもらわないと、この画面の確認ができないんですよね。😉

それにしても(繰り返しになりますが...)こんな簡単にWebサービス作れちゃうんですよね、恐るべしです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
20
Help us understand the problem. What are the problem?