Twitterで草を生やせるTwithubを作った

リンク

Twithub
リポジトリ

サイトの内容

Twitterのつぶやきの頻度に応じて草を生やしたヒートマップを描画するサイトです
過去のつぶやきの取得には外部サイトであるTwilogのcsvを使用しています(ユーザーが多そうなため)
Twilogはすぐ登録できますし、Twilogの設定内ですぐ過去3000件のツイートが取得できるので新規ユーザーの方も大丈夫です
csvの読み込みはそんなに時間かからないのでちょっとの手順で見れると思います
今後の課題はスマホからの動作とツイート時の結果画像添付です

背景

QiitaHubに触発されて作りました
正直誰か作ってるやろと思ったが反応を見るにいないっぽい？
意外と作りたかった人が多いことに気づく
月曜日にアイデアを思いつき、火曜日に開発しあとはちょくちょく触りつつ土曜日にリリースしたので一週間くらいでできました
Twitterにツイートしたらわりとバズりました 通知が来すぎて電池が切れそうになりました

https://t.co/tqz1kycFvF

TwitterでGithubみたいな草生やせるサービス作ったので皆さん良かったら使ってください

なおAPIの制限が厳しいためTwilogからcsvを読むようにしています pic.twitter.com/hXv48O5Baw

— しゅけピー (@_Ancient_Scapes) 2018年11月3日

結構反応をもらえてよかったです

使用技術

• フレームワーク Vue.js(vue-cli3)
  • VueもReactも使ったことがなかったのでとりあえずVueから
• UIライブラリ Vuesax
  • Vuetifyも選択肢に入っていたが新しめなものが良かったのでVuesax
• デプロイ Netlify
  • 話には聞いていたが使ったことがなかったので使ってみた めっちゃ簡単で良い

ライブラリ

• vue-calendar-heatmap - npm
  • vueでGithub的なヒートマップを描画するライブラリ 正直これが全て いろんなものに応用できると思います 簡単に使えました
• csv-parser - npm
  • csvのパースに使いました 色々なものがあるので正直なんでもいいと思います
• canvg - npm
  • svg→canvas→pngに変換するために使用しました svgから画像への変換は結構手こずるみたいで画質が粗くなりました 悲しかったです

苦労したこと

・ファイルを読んでCSVをパースするまでの作法
CSVのパースはFileReaderで捕まえてかららしい
調べてもNodeの情報が多く苦戦した
FileReader - Web API インターフェイス | MDNも含めコールバック関数で処理をする感じだったので書き方がちょっと苦労した

・ヒートマップのsvgを画像としてダウンロードさせる方法
Export SVG as PNG using canvg.js and Canvas – Anson Keeps
ほぼここのコピペで作った canvgというライブラリを使えばsvg→canvasへの変換ができるっぽい そのままだと画像が汚くなるのでcanvasのwidthとheightに指定して解決した

学べたこと

UIライブラリであるVuesaxを初めて使ったのですが便利でした

例えば

<vs-button color="primary" type="border" icon="file_download">ダウンロード</vs-button>

これを書くだけで

こんな感じのボタンができます。

ページのデザイン面で結構楽できたしサクサクいけたのでよかったです🚀

妥協した点

・ツイートボタンからユーザーごとに画像で結果を添付させたい場合の知見がなかった

Twitterカードを使えばシェアする時にURLごとに別の画像を持たせることができるが、ユーザーの数だけ画像を用意しなければならないためS3などのストレージを使う必要があるとわかった

今回はURL1つでやっているのでここで当初の設計が悪いことに気づいたが、今更リプレースするにもかなり変えることになるのは明白なので引き返せなかった

ちゃんと実現したい機能を列挙して、それが可能であるかを情報収集し検証してから開発するのが大事だと思う

・Twitter公式のAPIを使わなかった点
本当はスマホからでも見れるようにTwitter公式のAPIを使用して過去ツイートを収集したかった
しかし、ユーザーごとに15分で180回のアクセス制限があり、苦労の割にリターンが見合っていないなと感じた。

そこで、Twitterのつぶやきを記録するサービスである「Twilog」のcsvを利用することにしたのだがすぐリリースすることができたので結果的にこの選択は賢かったと思う
いや、csvをあげなきゃいけない都合上PCからしか動かせないしTwilogからcsvをダウンロードした時はgz形式だからしんどいしUX的に普通によくないですね

ここは今後の課題にしてなる早で動かせるようにしたいです

スマホで見れてもcsvが指定できないせいで動かないのは本当にすみません

これから

テストもしておけば良かったと思っているのでテストもしていきたい

また、当初の予定であったTwitterのAPIを使用してスマホからでも動かせるようにしたい！！！

多分さらっと見た感じfirebaseで認証をよしなにやってあげるのが良さそう

感想

フロントエンドエンジニアとして活動していて自分のプロダクトを作ったことがないのはなんかアレだったので作ってみました

正直例外処理とかまだまだ甘いですけど速さと鮮度が命だと思っているのでとりあえずリリースの精神でいこうと思いました

物好きな方はプルリクやIssueもどんどんしてください