読者です 読者をやめる 読者になる 読者になる

Make Local Happiness

自分の幸せは自分で作る!!!

Githubのissueを使って物販サイトを作ったよ

github プロダクト JavaScript

f:id:iwate_takayu:20160304144953j:plain

セブに来る前の話しになりますが、
3月にオフィスの引っ越しをしました。

引っ越しっていらないモノ沢山でますよね。
みなさんはいらなくなってしまったモノをどうしていますか?

ゴミと捨てている人やリサイクルショップで売ってしまっている人も多いと思います。

ですが、

それは「もったいない」気がしませんか?

買ったばかりのモノでも、
場所の関係で置けないから捨てるしかない場合や、
まだ使えるけど、新しいものを買ってしまった場合があるかと思います。

そんなときに、 リサイクルショップで売るよりは、
できれば普段お世話になっている人に安く売るのがいいと思いませんか?

で!考えました。
簡単に商品をアップロードできて、
誰が購入できるかがわかりやすいもの

そう、僕らにはGithubがあるじゃないか!!

GithubにはAPIが提供されているので、 簡単にissueの情報は取得できます。

細かい事はドキュメントを見てください。

GitHub API v3 | GitHub Developer Guide

こちらのコマンドで簡単にissueが取れます。 ちょっどだけ説明すると、state=allにするとCloseしたissueが取れます。

https://api.github.com/repos/ganezasan/dump/issues?state=all&per_page=100

デモ

リポジトリです。 github.com

こんな感じの画面を作りました。

f:id:iwate_takayu:20160326121815p:plain

こちらで実際に見ることも出来ます。
※現在は注文は受け付けておりません。

GithubEC

最初の構想では
PullRequestでissueの番号を指定してもらい、
以下のようなコメントを書いてもらうことで、注文ができるように考えていました。

close #29

が!最高に使いにくいね☆

とコメントを頂き、ただissueにコメントを書いてもらうだけにしました。
hubコマンドでコマンドライン上でフォークして、
空commitしてからプルリクを送るのはとっても大変でした。

しかもhubコマンドのバグもあり、リポジトリ名を変えたので、
フォークがコマンドライン上からうまくできない問題もありましたw

どんな機能があるか

1. MDをパースして表示

markedを使い、issueの商品説明はMD記法がそのまま表示されます。

github.com

2. 画像をギャラリー表示

f:id:iwate_takayu:20160326122802p:plain

画像をクリックすると上のギャラリーが表示され、 簡単に複数の画像が見れるようになっています。

github.com

3. githubホスティングで無料で公開

Gulpのコマンドに組み込んでいるので、
下のコマンド一つでGithub上に公開できます。

gulp deploy

改善点

1. 注文状態を表示

Githubのコメントの表示や注文確定の情報を表示したい

2. 連絡先や振り込み先などのやり取り

流石にGithubのコメント上でやりとりしたくない情報もあるので、 やり取りは結局メールやFacebookを使っていました。

3. 領収書の発行

あったら便利かなという感じです。

4. Githubはハードルが高いらしい

やっぱりねw

最後に

私はこちらのサイトをFacebook上の友人に公開し、
沢山買って頂くことができました。

ご協力してくれた方々、本当にありがとうございます。

メリカリやYahooオークションなどでもいいという方もいると思いますが、
大きいものだと直接取りに来てほしいこともあると思います。

その際に便利だと思いますので、
よかったら使ってみてください。