QiitaAPIを利用して、FacebookみたいにQiitaユーザーの「知り合いかも」リストを作成する機能を作った【記事内で試せます】

# はじめに
筆者は仕事中、Slackの雑談チャンネルや技術共有チャンネルを見ているとたまにQiitaアカウントが流れてきます。

> 〇〇さんの記事が伸びてるね。(記事かアカウントページへのリンク)
> 
> ROM専だけどQiita垢こちらです。(アカウントページへのリンク)

リンクをクリックして記事やユーザーページだけでなくフォローフォロワーアカウントも見ることが多いですが、あることに気付きました。
`フォローフォロワーアカウントに弊社の社員が居る確率がやけに高い`ことです。
そして、以下のことを考えました。

> **現実世界での知り合いや同僚がフォローフォロワーに居るQiitaユーザーは多いのではないか?**
> **フォローフォロワーアカウントを探索することで、特定ユーザーの`知り合いかも`リストが作れるのではないか?**

という訳でQiitaAPIを叩いて以下のように知り合いかもしれないユーザーのリストを作成する機能をhtmlとjsで作りました。
![リストの例](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318712/a73ca771-67d9-db9d-1e96-7a35d74dcbf1.png)

# 「知り合いかも」リスト生成ページ
実際に作成したものがこちらです。
JSを使用し、[CodePen](https://codepen.io/)でページを作ったので埋め込むことでQiita内でもリスト生成が可能です。
IE以外のブラウザであれば問題なく動作すると思います。
貴方のIDや気になるアイツのIDを入力して知り合いかもしれないユーザーのリストをまじまじと眺めましょう。

<p class="codepen" data-height="500" data-theme-id="light" data-default-tab="result" data-user="td12734" data-slug-hash="ZEQXwZR" style="height: 500px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Qiita知り合い探索">
  <span>See the Pen <a href="https://codepen.io/td12734/pen/ZEQXwZR">
  Qiita知り合い探索</a> by T.D (<a href="https://codepen.io/td12734">@td12734</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

[大きい画面で作成したい人はこちら](https://codepen.io/td12734/full/ZEQXwZR)

## ヘルプ、備考など
- `深度`を設定し、深度n+1のユーザーは深度nのユーザーのフォローフォロワーと定義します。
- 特定ユーザーのフォローアカウントIDまたはフォロワーアカウントIDを調べることを`探索`と定義します。
- `アカウントID`のフィールドに入力したIDを持つアカウントの知り合い候補のリストを生成します。
 - このユーザーの深度を1とします。
- `探索深度`のフィールドに入力した深度まで知り合い候補を探索します。
 - 例えばフィールドの値が2のとき、深度1のユーザーのみ探索し、深度1のユーザーのフォローフォロワーは探索しません。
- 何度もエラーが生じる場合はこのページの下に書いてある方法でアクセストークンを発行し、`アクセストークン`を`自分で用意`にして発行したものを貼り付けてください。

# 「知り合いかも」リストのアカウントの選定方法
「知り合いかも」リストを生成する上で、Facebookの「知り合いかも」リストの選定方法を参考にしました。
[Facebookのヘルプ](https://www.facebook.com/help/336320879782850)を読むと、以下の基準で選定しています。

> - 共通の友達がいる人。おすすめに選ばれる最も一般的な理由です。
> - 同じFacebookグループに参加している人、または同じ写真にタグ付けされている人。
> - 同じネットワーク(学校、大学、職場など)に所属する人。
> - アップロードした連絡先に登録されている人。

最初の`共通の友達がいる人`ですが、Qiitaで置き換えると`共通のフォローフォロワーがいるユーザー`になると考えられます。
Facebookが最も一般的と言い張る選定方法なのでQiitaでも知り合いっぽい人の選定方法としてかなり期待できそうです。

2番目と3番目の`グループやネットワーク`をQiitaで置き換えると`Qiita Team`でしょうか?
Qiita Teamについてはよく知りませんし、有料なのもあってFacebookのグループ機能ほど一般ユーザーに浸透していないと考えられるので今回は選定方法から外します。

最後の`連絡先`はQiitaで置き換えるとプロフィールで設定できる`所属している組織・企業`になります。
全ユーザーの所属している組織や企業を調べる場合、APIを大量に叩くことになってすぐ規制されそうなのでこちらも選定方法から外しました。

よって、今回は`共通のフォローフォロワーがいるユーザー`、より具体的に言うと`対象のユーザーのフォローフォロワーと、対象のユーザーのフォローフォロワーたちのフォローフォロワーに共通して存在するユーザー`をQiitaAPIを叩いて探索し、ヒットしたユーザーたちを「知り合いかも」リストに含めることにしました。

# 「知り合いかも」リスト生成の流れ
大まかな流れです。
そんなに難しいことは行っていません。

1. アカウントIDなど必要な情報を入力し、知り合い探索開始ボタンを押す。
1. 入力したIDを持つアカウントが存在するか確認する。無ければここで終了。
1. 入力した深度のユーザー全員を探索し終えるまで以下を繰り返す。
 1. 現在の深度のユーザー全員のフォローフォロワーをfetch apiで探索し、リストに入れる。
 1. リストの表示を更新する。

詳細な実装を見たい人はCodePenにあるコードを見てください。

# 使用したQiitaAPI
**[GET /api/v2/users](https://qiita.com/api/v2/docs#get-apiv2users)**

ユーザーの存在確認に使用しました。

**[GET /api/v2/users/:user_id/followees](https://qiita.com/api/v2/docs#get-apiv2usersuser_idfollowees)**
**[GET /api/v2/users/:user_id/followers](https://qiita.com/api/v2/docs#get-apiv2usersuser_idfollowers)**

上のAPIでユーザーのフォローアカウント一覧、下のAPIでユーザーのフォロワーアカウント一覧を取得しました。
どちらも1回の呼び出しで最大100件のアカウントしか取得できませんが、ユーザーの全取得処理の実装が面倒だったので100件までの取得で妥協しました。

# QiitaAPIの呼び出し制限について
今回の「知り合いかも」リスト生成における最大の難点が`QiitaAPIの呼び出し制限`の存在です。
初期状態では`毎時60回`しかAPIを叩けません。
これでは深度3までの探索が関の山で、連続してリストは作れません。

しかしアクセストークンを発行すれば`毎時1000回`までAPIを叩けるようになるので今回は発行しました。

# QiitaAPIのアクセストークン発行の流れ
1. 右上のメニューの`設定`を開きます。
![設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318712/44f01b61-da2e-6686-e9d6-a3e6d11284d7.png)

1. 左から`アプリケーション`を選択し、`新しくトークンを発行する`を選択します。
![新しくトークンを発行する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318712/07a2a24c-6337-0635-2b67-2e96d5cf08ad.png)

1. `スコープ`の`read_qiita`にチェックを入れてアクセストークンを発行します。
![スコープの設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318712/a90190df-fe08-ad3e-7cbd-6626937da482.png)

1. アクセストークンが表示されるので保存します。アクセストークンの文字列は`再表示できない`ので気を付けましょう。
![pic4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/318712/fd46d270-b1bb-352c-b8cf-8d41e25f8e10.png)

# おわりに
ここからポエムになります。

## 使ってみた感想
弊社の社員のQiitaアカウントは何件か知っていますが試しに知り合い探索したところ、弊社の社員っぽいアカウントが出るわ出るわの大漁でした。
我ながら恐ろしいもの作っちゃった感はあります。
また、10件以上ヒットしたユーザーは知り合いよりではなく有名ユーザーの方が多かったです。
ヒット数が2～5程度のユーザーの方が知り合いっぽい人を見つけられるかもしれません。

## 作ってみた感想
あんまり使い慣れていないfetchやPromiseを使用しましたが、非同期処理ってやっぱり何かと便利ですね。
エラー処理をはじめとする全体的なコードやhtmlのデザインはかなり雑ですが動いたからヨシ！(現場猫並感)

## 今後実装したい機能など
Facebookで言う`同じグループやネットワークに所属する人`からの知り合い探索ですが、QiitaではQiita Teamではなく`特定のタグのフォロワー`の中から探索するのが良い気がしてきました。
なぜならタグのフォローは一般ユーザーでも無料でできて敷居が低いですし、マイナーなタグのフォロワーは必然的に現実世界での知り合いまたは知り合いになると意気投合しそうな人たちになるかなって思ったからです。
余力があればタグのフォロワーから知り合い探索をする機能も追加してみたいなーっと考えています。