作りたかったもの
Twitter APIを使って、自分のTwitterのいいねリストから、ツイートを選んでメモすることができるアプリ。
FirebaseでTwitter認証し、そのユーザーのアクセストークンを使って、いいねAPIを叩く（ユーザー認証方式でTwitter APIを使う）、というもの。
これをVue.jsでやろうとしてました。
早速ですが、諦めました
いいねリストからツイートを選んで保存できるという 簡単そうなアプリ を作りたかったのですが、予想以上に壁にぶつかりました。
Twitter APIはバックエンドからじゃないと叩けない
Vue.jsで作ってたので、Twitter APIを叩くと、CORSエラーになってしまっていました。
ググってみると、そうか、バックエンドからでないとリクエストが叩けないのかとわかった。
なので、バックエンドをつくれば良かったのだけど、どうせやるならバックエンドもフロントものってるNuxt.jsにしちゃえと思いたち、Nuxt.jsに書き換えました。
参考:
- クロスオリジンリソース共有（CORS)とAccess-Controll-Allow-Originの関係性
- CORS issue in Twitter OAuth API [duplicate]
アクセストークンをバックエンドにどう渡したらいいの？
で、Nuxt.jsに書き換えた後に、"いいねAPIをリクエストするAPI"を作ってみたのだけど、そういえばユーザーのアクセストークンをどうやってバックエンドに渡そうか・・・となってしまった。
バックエンドのAPIを叩く際に、FirebaseのTwitter認証後に取得できるcredentialをリクエストヘッダに付与する？ httpsだし大丈夫なの？と悩んだりしたけど、あまり良い方法が思いつかず、ここらへんで活力を失い、結局Twitter APIを使うのを諦めてしまいました。（何か良い方法はあるのでしょうか？）
Twitter認証したユーザーのトークンでAPIを叩きたかったのだけど、Twitterアプリのトークンを使うなら、ここまで悩まなくて良かったのでしょう。
結局、私がつくったもの
メモしたいツイートをタブで管理できるメモアプリ。
メモツイート - ツイートをタブで管理してメモする
ホーム画面に追加すると、アプリっぽく動きます。
機能
ツイートのURLを貼り付けることで、そのツイートをメモできる。
「Twitter APIで、いいねリストを取得し、そこからメモするツイートを選ぶ」というのをなくしただけ。
構成は、こんな感じの簡単なもの
- Nuxt.js
- Firebase
- Auth: Twitter認証
- Firestore: メモしたいツイートのデータを保存
- Hosting
- UIは、Vuetify
似たサービスや機能はあるじゃん？
私は、おもしろいツイートやタメになるツイートを、Twitterアプリのブックマークをつかって保存しまくる人。
メモしまくったツイートを、後で見返す時って、
消していいツイートと残しておきたいツイートがある。
それがTwitterのブックマークにずっと混在しているのが気持ち悪いし、昔にブックマークしたツイートを見返すのが辛かったりしました。
だから、「ツイートをパッとメモできて、そのメモしたツイートをタブ（カテゴリ）で管理できたらいいんじゃない」と思った。
似た機能やサービスを挙げるとこんな感じ？
- Twitterのモーメント
- 非公開にできない
- モーメントを作成完了にするには、画像がついてるツイートが必要でめんどくさい
- Twitterのブックマーク
- ブックマークしたツイートが並んでるだけで見にくい。
- ツイートを種類ごとに分けて、後で読みたいけどできない
- togetter
- つくり方がめんどくさい（慣れてないから？）
使ったライブラリ
-
vue-tweet-embed- ツイートのIDを付与するだけで、埋め込み型ツイートを表示できる
-
vuedraggable- リストの中身を、ドラッグして入れ替えることができる
-
vuex-persistedstate- Vuexのストアをローカルストレージに保存して永続化してくれる
Vuetify
今までBulmaしか使ったことがなかったけど、今回はVuetifyにしてみた。
BulmaはUIが綺麗だけどくgithu
、少し複雑でとっつきにくい。慣れたら綺麗な見た目が簡単につくれます。
だけど、Bottom Navigation を使いたかったから、今回はBulmaからVuetifyに乗り換え。
Vuetifyにしてから、やりたいUIを作るのに困らないし、時間もかからないから、とても良かった。
Firebase Hosting
めちゃくちゃ簡単にリリースできました！
独自ドメインも簡単に接続できるし、勝手にhttpsにしてくれる。
総じて作ってみてよかった
Nuxt.jsを触ってみることができたし、新しいライブラリに出会えたし、Firebase Hostingの手軽さに感動できた。
UIがBulmaではなく、Vuetifyを使う選択肢もできた。
失敗したけど、Twitterアプリをつくる知見ができたのが一番良かったのではないかと思います。