Qiita Team Viewer というアプリを作った

2018-04-16

インターネットで生きていると、様々なサービスのアカウントが増えて管理が大変になったりすると思います。あるいはアカウント自体は1つだけど紐づくグループが増えるパターンもあります。

たとえば Google アカウント（G Suite アカウント）とか GitHub の organization とか Slack の team とか Qiita:Team とか、仕事してたり OSS 活動してたりするとうっかり増えちゃいますよね。

本題とは一切関係ないけど、僕はこの現象をアカウント・マルティプライズ(account multiplies)と呼んでいます。

複数の所属している Qiita:Team の記事を一覧で見たい

今回は Qiita:Team の話です。紆余曲折あって所属するチームが複数に増えてしまった僕は、わざわざチームごとにブラウザのタブを開いて個別に閲覧することにつらさを感じました。

この手の同一サービス複数アカウントについては、サービスの主旨によって対応が変わるところですが、個人的には Qiita:Team の記事自体は複数のチームのものが混ざって一覧表示されても困らないなと思ったので、そういう使い方ができるアプリを作ることにしました。

Qiita Team Viewer

作ったものはここから落とせます。

Releases · risou/qiita-team-viewer

使い方は簡単で、起動して（Gatekeeper 周りで警告でるかもしれません） Qiita のアカウントでログインしてアプリの連携を許可してもらえば、アカウントに紐づく Qiita:Team の記事の一覧が画面左側に出てきます。記事を選ぶと画面右側に記事の内容およびコメントが表示されます（その他は README をご覧ください）。

Qiita Team Viewer v0.1.0 では以下のことができます。

アカウントに紐づく Qiita:Team の記事が読める
- ただしシングルサインオンでしかログインできない Qiita:Team の記事は読めません（API の制約によるものです）
閲覧している記事に絵文字リアクションを追加／削除する
閲覧している記事へのコメントに絵文字リアクションを追加／削除する
閲覧している記事のページをブラウザで開く

Qiita Team Viewer v0.1.0 ではできないけど、今後のバージョンで以下のことができるようになる予定です（実装の難易度やアプリの方向性によって変更される可能性があります）。

Qiita:Team を横断した記事検索
記事の既読管理
記事へのコメント追加

一方で以下のことは今後もできるようにならない予定です。

Qiita:Team への記事投稿

これは主に、複数ある Qiita:Team で投稿先のチームを間違える危険を避けるためです。

Qiita Team Viewer の技術選定

ここからは素人がアプリを開発する上で考えたことを記録として残しておこうと思います。

今回アプリを作るにあたって最初に考えたのは、 兼ねてより興味のあった Electron を使ってみよう ということです。
ネイティブアプリがよかったのと、後々 Windows, Linux にも対応したかったということでちょうど良さそうに思いました。 NW.js などの類似の選択肢もありましたが、初めて触るジャンルということもあり現状で一番情報が多そうな Electron にしました。

最初は Electron の簡単なアプリをチュートリアルなどを参考に作り、そのアプリ上で Qiita の API を実行して結果を得るだけのプログラムを書きました。そこから、実際にアプリを作っていく上で必要なことを考えました。

Qiita の API をどう叩くか
- こういうのは大抵 API を扱うライブラリがある
- 公式が提供している qiita-js を使うことにした
  - 後に判明したことだが、 qiita-js は Qiita API v2 に追随できておらず、一部の API を叩けなかった
  - qiita-js が対応していない部分だけ温かみのあるリクエストになってしまった 😢
どの JS フレームワークを使うか
- フレームワークを使わないのはただの苦行っぽい
- 使ったことのない React か Vue.js にしようと思って双方を軽く調べて「この時期に始めるなら Vue.js かな」って感じで選んだ（勘です）
状態管理
- Vue.js 使うなら Vuex を使えばいいのかなと安易に選択（他の選択肢がいまいちわからなかった）
CSS フレームワーク
- 使うかどうか、ってところからちょっと悩んだけど、自力で CSS 実装するのは素人には現実的ではないと判断
- Bootstrap っていうものがあるらしい 程度の認識で軽く調べて Vue.js と相性良さそうで難しくなさそうな BULMA ってやつを選んだ

あとは「node module に electron-vue ってのがあるのかー」みたいな雑な感じで使ってみたり。

専門職の人たちからすれば最適には程遠い選択だと思いますが、素人の手遊びとしては思ったより順調に試行錯誤しつつ実装が進み、なんとか現状まで持ってこれました。

新しく触れた技術要素

Electron を使うことを決めた時点で避けられない道だったのですが、ひとつひとつのことを実現するのに新しい技術要素に触れていくことになって新鮮な経験でした。実際に触れた新しいものは以下のとおり。

Electron
Vue.js
Vuex
BULMA

どれもこれも全然知らないところからはじめて v0.1.0 をリリースするまで約1ヶ月。バッドプラクティスと言われるような使い方をしている箇所もあるかもしれないけど、なんとか使えるレベルまで持ってこれました。わからないこと多すぎてかなり勉強になった気がする（それをいちいち書き留めておく余裕は残念ながらなかったけれど）。

その他感想とか

できればテストも書きたかったけれど、特に仕事を休んだりもせず空いた時間で進めるには、試行錯誤しながら動くものを作るので精一杯でした。まあ、テスト自体は後からでも追加できるのでモチベーションが続けば。

今後はドッグフーディングしつつ、検索機能とか追加していければなあと思ってます。けど、他にもやるべきことがあるので、ここから先はゆっくり進めていこうかと。

あと、今回の開発で（僕みたいな人間にとっての） CSS フレームワークの強力さを思い知ったので、ブログのデザインとかアップデートしていきたいですね。

Qiita Team Viewer を作るにあたって参考にしたサイト

2018-04-16 22:43:19.346896 JST