2020-05-25に更新

好きな場所を投稿する『ご近所LIKEマップ』を作りました!

一週間で何かしらWebサービスを作るイベント、前回に続き参加させていただきました!

今回作ったもの

◼️ご近所LIKEマップ
https://local-likemap.site/localmap/

今回のテーマが「LIKE」ということで、Google mapのAPIを使って、好きな場所を登録し共有できるサービスです。
地図上をクリック(タップ)すると位置情報が取得できるので、
文章と任意で名前やURLを追記し投稿すると、そのマーカーが地図上に組み込まれます。
ユーザー登録も不要です。

image

image

※削除機能はありませんが、自由な掲示板みたく気軽に投稿してもらえればと思います!
※投稿の際にはタイトルも不要です、「なんか猫がいっぱいいる場所」とか、名前のない場所もいっぱいあるので。

散歩中にいい場所を見つけたら、現在位置を取得して、
目の前のいい場所を投稿できる感じです。

作った経緯

1weekイベントが開催されることを知り、何となくgoogle map api の情報を調べてたところ、結構簡単にいろいろできそうだなっと思い「地図を使ってなんかしよう」とは思っておりました。

コロナ自粛生活の中で多くの人が近所を散歩することが増えていると思うんですが、その中でうっすらと「テイクアウトやってるお店の情報がわかりづらいなあ」と思ってたり、
今まで知らなかった近所の美味しいお店とか、のんびりできる感じの場所を見つけることが増えたりもしました。

そういう、「近所の人に知って欲しい情報」を緩めにコメントと位置情報でシェアできるといいなと思って作りました。
もちろん、お店の中の人もPRに使ってもらえると嬉しいです。

技術的なお話

言語はPHPとJquery、Javascript、MYSQL
CSSはSASSでコンパイルしてます。

今回初めて使ったものとして、
・Animate.css
・Google Maps API
があります。
Animate.css はめっちゃ便利!このツイートで知りました!
ほとんどのアニメーションなら今後これでまかなえちゃいそう

Maps APIは登録自体は過去にしたことがありますが、カスタマイズを実際にしたのは初めてです。

Map APIはここがすごくわかりやすかったです!

詰まったところ

Google APIキーはURLで制限させているんですが、なぜかローカルではうまく表示されるのに本番ではされず。
URL指定ももれなくやっているのですが、、もう一つとってみるとうまくいけました。謎。

DBやテーブル作るのも、生のPHPで接続するのもちょっと久々なのでそれぞれ調べ思い出しつつで時間かかりました。

今後やるかもしれないこと

・投稿情報ごとにタイトル、名前をツイッターでシェアできるようにしたい
・やっぱり投稿によっては削除をしたいかもなのでユーザー登録をさせるかも
・URLにシンボリックリンクがうまく貼れず、変な感じになってるのでなおすかも
・既存のマーカーをカテゴリーやら住所とかから検索する
・画像投稿(重くなりそうなのでしなさそう)

気が向いたらやるかもしれないです。

感想

1週間でどんだけできるかってとこで没頭できてよかったです。
前回に引き続き、一斉にいろんな人がサービス作ってるのも刺激になりました。

是非とも使っていただけると幸いです。


ひよこ橋

現状趣味でプログラミングをしているものです。 php、js、javascript、vue.jsあたりをよく触りますが、いろいろ新しいことにも手を出してます。

コメント