買い物かごをひとつにまとめるサービスを作った話 - inokawablog

買い物かごをひとつにまとめるサービスを作った話

OneCartというサービスを作った。

買い物かごを一つにまとめることができるサービス

onecart

 

 

作ろうと思った経緯

1週間前に見たあのサイトの商品見たいんだけど思い出せないみたいなことありませんか?いろんなサイトの服をひとまとめにして比較したい時とか。ネットでよく買うものを一つのサイトにまとめておきたいとか。

 

よくネットで買い物をするのだが、気になった商品があったりするとブックマークで保存していた。しかし、これだとurlだけが残るだけで、ぱっと見で商品がわからないし、金額もわからない。
pocketみたいな感じで、URLを入力したら自動で作成されるような感じにしたかった。
よく使うAmazon,Yahooショッピング,zozoなどなど、いろんなサイトのカートをひとまとめにできたら楽だなと思ったから作った。

 

 

本当はメルカリのデータも取得したかったんですが、スクレイピングしようとすると403が返ってくるし、どうもメルカリさんはVPSサーバーのIPをブロックしているっぽい。プロキシサーバー使ったり、Seleniumやlaravelのdusk(本番環境で使えない)使ったりなんかはできると思うのですが、面倒なのでとりあえすパス。

 

 

使用した技術

Laravel + vue.js

1年くらいずっとlaravelで作っているので慣れているLaravelを使用した。バックエンドはpythonのDjangoとかでもよかったが、やはりLaravelの方が好きなのでLaravelを使った。

vueも普段から使っているのでフロントエンドとして使用

 

vuetify

これも素早くシンプルなものを作るには必須かなと。前はelementとかも使っていたが、vuetifyの方が使いやすいし、事足りるので。使っていくと多少凝ったデザインでもvuetifyで作れるようになったので今は特に困ることはな特に困ることは何もない。

 

xserver

個人開発でいくつもサービス作る!となるとawsやgcpで作っていてはサーバー代がバカにならないので、レンタルサーバーを一つ借りてぶち込んでます。大きくなったらそれを他のところに移せば良いと思うので(大きく慣ればの話ですが(笑))。

 

Goutte

スクレイピングにはgoutteを使用している
入力されたurlからogpを引っ張ってきてアイテムを作成している。

商品かどうかの判断は、まずOGPのtypeでざっくり判断し、ページから価格が取得できた場合には商品として判定している。精度はまぁまぁ。だんだんと上げていく予定。

OGPがちゃんと設定されていないサイトが多すぎる印象。しっかりしてくれ。ogpにpriceとかあればもっといいのにとか思った。

 

制作期間

これといって難しいものは特に使ってないので、だいたい5日間くらいで終わった。

ロゴとサービス名を考えるのに一番時間がかかったかもしれない。結果的にすごく適当なロゴになってしまった。

デザインとロゴを考える方が時間がかかる。毎度毎度頭を悩まされている。しっかりデザインの勉強もしなければと思う毎日。

 

思ったこと

正直スマホからの操作性が少し悪い。urlをコピーしてonecartに戻ってurlを入力。この手間は結構ストレスになる。

スマホでのUXはユーザー数に直結するような気がする。

 

最後に

次に何かを作る場合はスマホでの操作性を意識しながら作りたい。