が2021年09月08日に更新

GitHubを使いやすくするChrome拡張をリリースした【個人開発】

Chrome GitHub chrome-extension Vue.js 個人開発

GitHubのIssueを業務や個人開発でもっと使いやすくするChrome拡張「Mokuren」を作りました。
エンジニアやプロジェクトマネージャーの方に使っていただけると、劇的に変わると思います。

仕事の隙間時間を使いながらコツコツ開発してきましたが、無事公開できました。
開発は半年くらいかかったと思います。友人との開発だったので感謝でいっぱいです。

今回は、Mokurenの紹介と技術周りの話を書いていきます。
個人開発をしている人のモチベアップにでも繋がれば嬉しいです。

その前にさくっとMokurenについて紹介させてください。

Mokurenを使ってる人のGitHubの画面

こちらはGitHubのIssue一覧の画面です。画面右側と下に普段見ないような表示があります。
これがMokurenの機能です。

機能紹介

(画面右側)サイドバー

これはIssue一覧画面からIssueの詳細情報をサイドバーで開けるようにした機能です。
Issue一覧ページから離れずに、詳細情報を見たりコメントしたりラベルも変えられます。
動画でのが伝わりやすいかと思うので、Twitterにあげたやつですが再生してみてください。

(画面下)ピン

次はピンです。ピンはIssueやPull requestをピンしておけばGitHub上の全てのページからアクセスできる機能です。
エンジニアだったら実装に関係するIssueやPull request。Issueを管理する立場の方なら、後で確認するIssueをサクッとピンしておくなどの使い方ができると思います。

こちらも動画があるのでよかったら再生してください！

技術周りの話

ここからは技術周りについてです。

Mokurenの動作環境

Vue.js
typescript
Firebase Realtime database
GitHub API V4
Apollo
sass

Chrome拡張でVue.jsを使うには

Webアプリケーションを作るならvue cliやnuxtを選択する手もありましたが、今回はGitHubページのDom操作をしないといけないため、
Vueインスタンスを直接埋め込む方式にしました。
以下は例です。

new Vue({
  store: store,
  render: (h) => h(App),
}).$mount("#id");

ビルドにはこちらのpackageを使用しました。ここら辺需要があれば別記事で詳しく書こうと思います。
https://github.com/adambullmer/vue-cli-plugin-browser-extension

GitHub V4を選んだ理由

GitHub APIのv4はGraphQLなのですが、今まで使ったことがありませんでした。
それでも使用した理由は、Mokurenの仕組み上、GitHub内の複雑な情報を取得しないといけなく
REST APIだとリクエスト数が半端ないことになってしまいました。

GraphQLは取得するデータをフロント側が操作できるので、普通であれば10回リクエストしないといけないところを1回で済み、パフォーマンス的にも向上しました。

リリースした後

ProductHuntといった海外の、プロダクト投稿サイトに載せました。
毎日ランキングが走るサービスで、Mokurenはその日の8位になりました。
この時の記事はnoteに書きましたが、多くのユーザー流入がありました。個人開発だと作って使われずに終わるケースになりがちですが、いろんな人に使ってもらえるのでProductHuntはお勧めです。