最もLGTMを獲得したのはあの記事！プロトアウトスタジオ2021年のアウトプットを振り返る

## 今年も始まりました！ アドベントカレンダー！

この記事は[プロトアウトスタジオのカレンダー | Advent Calendar 2021 - Qiita](https://qiita.com/advent-calendar/2021/protoout)の 1 日目の記事です。

みなさんこんにちは。[プロトアウトスタジオ](https://protoout.studio/)講師の光岡([@mitsuoka0423](https://twitter.com/mitsuoka0423))です。
今年も残すところ 1 ヶ月ですね。今年はどのような 1 年でしたでしょうか？　？
毎年恒例のアドベントカレンダーもスタートしました。プロトアウトスタジオも毎日投稿していきますので、ぜひご覧ください。

## プロトアウトスタジオのQiita記事が1000件に到達しました！

2021 年もプロトアウトスタジオ学生によるたくさんのアウトプットが行われ、Qiita 記事の投稿数が 1000 件に到達しました！　祝
(10000LGTM も目の前ですね！)
<a href="https://gyazo.com/f3b7642b296d71278f1fb5fb42196ce1"><img src="https://i.gyazo.com/f3b7642b296d71278f1fb5fb42196ce1.png" alt="Image from Gyazo" width="378"/></a>
本記事では、Qiita API を利用して、2021 年に作成された Qiita 記事の中から LGTM を多く獲得した記事をピックアップして紹介していこうと思います。

## 2021年最もLGTMを獲得したのは...

### 1位: 227LGTM 疑似彼氏、作りました。 @mnana 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/90087/082880b4-348d-24ad-8878-d4380f450fb9.png)
1 位は 227LGTM を獲得した「[疑似彼氏、作りました。](https://qiita.com/mnana/items/3836aee1b749670804dc)」でした！　888888888

"彼氏を作ろう"という見出しから始まり、"タケシ(仮)"というポケモンのジムリーダーを連想させる名前の彼氏が出来上がる様子が見事に描かれています。
またネタ記事と見せかけて、いろんな返信パターンを持っていたりや天気 API のデータから傘が必要か教えてくれるなど、細かいところまで実装されている点も評価につながったのではないでしょうか。

### 2位: 142LGTM たかしくんに時速10kmで日本全国を最短距離で走らせました @canonno 

<a href="https://gyazo.com/e085d48ee4d33b55c776ba653d07f090"><img src="https://i.gyazo.com/e085d48ee4d33b55c776ba653d07f090.png" alt="Image from Gyazo" width="500"/></a>
2 位は 142LGTM で「[たかしくんに時速10kmで日本全国を最短距離で走らせました](https://qiita.com/canonno/items/29eb369d32c030fea367)」でした。

数年後の中学校くらいの教科書に載ってきそうな内容ですね。
こちらもネタ記事と見せかけて、離散最適化問題を解くアルゴリズムが実装されています。
たかしくんは 18 日と 4 時間で日本を全国を走り切ることができるそうです。以外と早いですね。

### 3位: 138LGTM 「ひらがな化API」を使って、給食メニュー変換Botを作ったら、わが子に大好評だった話 @kokano23

<a href="https://gyazo.com/663bc3f6d16f8be0d9eefc8e9ba0e8ef"><img src="https://i.gyazo.com/663bc3f6d16f8be0d9eefc8e9ba0e8ef.png" alt="Image from Gyazo" width="500"/></a>
3 位は 138LGTM で「[「ひらがな化API」を使って、給食メニュー変換Botを作ったら、わが子に大好評だった話](https://qiita.com/kokano23/items/b34b7d0361b8aaa6ad1f)」でした。

ひらがなが読めるようになったお子さんに向けて LINE Bot を作成するファミリーテックな記事です。
リッチメニューにポケモンのイラストを使うなど、お子さんが使いたくなる工夫も施されています。

また、@kokano23 さんはのびすけラジオにも登場されているので、興味がある方はぜひお聞きください。
[事務職勤めのワーママがテクノロジーを身に付けたら仕事でもプライベートでも驚きの変化が #身の丈DX #事務職DX](https://open.spotify.com/episode/0gEAeywoz9q1ykmIiGJo4o?si=YX1xsJHeR5OMVc-33DDGoQ)

### 4位〜10位

4 位〜10 位は以下の記事でした。

4 位: 90LGTM @n0bisuke [【初見にオススメ】Raspberry Pi PicoをブラウザだけでLチカする入門 (Web Serial API)](https://qiita.com/n0bisuke/items/c16f77c7017a2d4018dd)
5 位: 90LGTM @shoito66 [AIは増えすぎたガンダムを見分けることができるのか？Teachable Machineで作った分類モデルで検証してみた](https://qiita.com/shoito66/items/1b8f0ceed254f4f73f8e)
6 位: 68LGTM @canonno [強化学習で酔っ払いの挙動を見る](https://qiita.com/canonno/items/4183eabd5566af2151dd)
7 位: 54LGTM @naokiuc [顔からラグビー部かサッカー部かを判断する](https://qiita.com/naokiuc/items/ad01f4dae0f371b31fda)
8 位: 43LGTM @tkyko13 [YouTubeの動画をQiita記事に埋め込んでみた](https://qiita.com/tkyko13/items/6b8cd03cdd306ce10663)
9 位: 40LGTM @mitsuoka0423 [【ハンズオン】写真を送るとAIが分析してくれるLINE Botを1時間で作ってみよう](https://qiita.com/mitsuoka0423/items/b468ab8eb9c0639257dd)
10 位: 37LGTM @chihirokubota [これで若い子とのカラオケも安心？！COBOLしか経験なし！文系出身SE(23歳女)が若者の音楽を伝授します！](https://qiita.com/chihirokubota/items/080372b221b8ec9a1c79)

11 位以降の記事はこちらから確認できます。→[プロトアウトスタジオ2021アウトプット集計](https://docs.google.com/spreadsheets/d/1vJFGz8pWb3AcgcjKDZ6UbKFInZ6aNOcRObFamCM7Qwg/edit?usp=sharing)

## Qiita APIを使って記事を取得する

以降は技術な解説です。長いので流し読み推奨です。
さっと読んで、他のアドベントカレンダーの記事を見にいきましょう。
[Qiita API v2](https://qiita.com/api/v2/docs)を利用してデータを取得しています。

### 取得対象

取得対象は以下のとおりとします。

> ①[プロトアウトスタジオOrganization](https://qiita.com/organizations/protoout-studio)に属しているメンバー
> ②2021/01/01〜2021/12/01の期間に作成された記事

（2）の条件は、検索クエリで`created:>2021-01-01`を指定すれば良さそうです。
しかし、[検索時に利用できるオプション - Qiita:Support](https://help.qiita.com/ja/articles/qiita-search-options)を見てみても、（1）を絞り込む方法は今のところ公式に提供されていないようです。

[プロトアウトスタジオOrganization](https://qiita.com/organizations/protoout-studio)を眺めていると、メンバーアイコンのリンクから Qiita のユーザーID が取得できそうです。
<a href="https://gyazo.com/aa95a178494a24602ca8d8437972ff3c"><img src="https://i.gyazo.com/aa95a178494a24602ca8d8437972ff3c.png" alt="Image from Gyazo" width="300"/></a>
今回は、Organization に属する全メンバーのユーザーID を取得して、それぞれのユーザーが投稿した記事の情報から LGTM 数を取得していきます。

### DevToolsを使って、OrganizationメンバーのユーザーIDを取得する

今回は手軽に、DevTools を活用してユーザーID を取得します。

まずは取得したい要素を特定できる属性を調べます。
<a href="https://gyazo.com/685e5aec85daf66981b929366b54534e"><img src="https://i.gyazo.com/685e5aec85daf66981b929366b54534e.png" alt="Image from Gyazo" width="1704"/></a>
メンバーアイコンは、`class="op-Members_member"`を持つ`liタグ`の要素として実装されているようです。
ユーザーID は、`liタグ`の子要素の`aタグのｈref属性`に含まれているので、それを取得していきます。

DevTools のコンソールタブで、以下のコードを実行します。

```js
Array.from(document.getElementsByClassName('op-Members_member')).forEach(element => console.log(element.children[0].href.split('/')[3]));
```

<a href="https://gyazo.com/764a0c87de00b0ae1c64f7029123e413"><img src="https://i.gyazo.com/764a0c87de00b0ae1c64f7029123e413.png" alt="Image from Gyazo" width="1230"/></a>
これで、プロトアウトスタジオメンバーのユーザーID を取得できました。

### Qiita APIを叩くプログラムを書く

axios を使って Qiita API を叩くプログラムを書いていきます。

<details><summary>クリックしてプログラム全量を表示</summary><div>

```js
'use strict';

const axios = require('axios');

const main = async () => {
  const users = [
    'cog1t0',
    'n0bisuke',
    'tseigo',
    'tkyko13',
    'mitsuoka0423',
    'ukkz',
    'shima-07',
    'takeaship',
    'UhRhythm',
    'RatchoTetsugaku',
    'kmaepu',
    'Toshiki0324',
    'banboo',
    'sksk_go',
    'MikH',
    'suo-takefumi',
    '3yaka4',
    'tatsuya1970',
    'zerozeronineking',
    'grayhamchan',
    'iizuka2019',
    'karu',
    'mihoko-funatsu',
    'taichi0128',
    'dashgo5go',
    'doikatsuyuki',
    'takeatakea',
    '13sayu',
    'marumaruchan',
    'harach19k',
    'kyanchi',
    'khoahv',
    'Teru_3',
    'hiromae0213',
    'cazzz',
    'Naru0607',
    'kaiser355',
    'canonno',
    'twtjudy1128',
    'PmanRabbit',
    'heihei15408697',
    'Sugizo50073508',
    'm3do',
    'sawakoshi_yy',
    'misa_m',
    'ranchi1977',
    'shoito66',
    'kkyosuke17',
    'kokano23',
    'ShinsukeSutou',
    'yuta-proto-biz',
    'boriko',
    'okinakamasayoshi',
    'dsvvpxgcseldie',
    'aya2648',
    'Ziyasumin01',
    'Junno',
    'yudiramaruyama',
    'kensyu20210726',
    'komona',
    'tanaka_LV5',
    'NagaharaHitomi',
    'tanakahiroki',
    'naokiuc',
    'Izumi0711',
    'watanabe-tsubasa',
    'TAKA_xedge',
    'kk_puruzera',
    'yui-kouy',
    'mnana',
    'ikumi623',
    'chihirokubota',
    'tishiyama',
  ];

  for (const user of users) {
    const response = await axios.get(
      `https://qiita.com/api/v2/items?query=created:>2021-01-01+user:${user}&per_page=100`,
      {
        headers: {
          Authorization: 'Bearer [アクセストークン]',
        },
      }
    );
    response.data.forEach((content) =>
      console.log(
        `${content.created_at},${content.user.id},${content.title},${content.likes_count},${response.data.length}`
      )
    );
  }
};

main();
```
</div></details>

### (オプション)StackBlitzを使って実行する

今回、オンライン IDE である[StackBlitz](https://stackblitz.com/)を利用して実行してみました。(ローカルで実行しても全然問題ありません。)
<a href="https://gyazo.com/f827381a69874721ddb9a05136b267db"><img src="https://i.gyazo.com/f827381a69874721ddb9a05136b267db.png" alt="Image from Gyazo" width="1000"/></a>
無料プランでもコードを書くだけでなく、ターミナルでコードを実行できました。
[Pricing](https://stackblitz.com/membership)を見ても、現時点(2021/12/01)では実行時間の上限もなさそうです。
(これは gitpod の代替サービスとなりうるかも。引き続き調査します。)

結果は以下のように出力されます。
<a href="https://gyazo.com/82dcd7de6454733a2a5c78ad6659842a"><img src="https://i.gyazo.com/82dcd7de6454733a2a5c78ad6659842a.png" alt="Image from Gyazo" width="800"/></a>
CSV 形式で出力されるので、Google スプレッドシートに読み込んで LGTM 数でソートしてランキングを作成しました。

## まとめ

2021 年もたくさんのアイデアが形になり、Qiita 記事として投稿されました。
疑似彼氏のような自分が作りたいから作ったというタイプのアウトプットや、ひらがな変換 Bot のように誰かのために作ったタイプのアウトプットのどちらも Qiita 上で LGTM を集められているというのは面白いですね。
残り 1 ヶ月で、疑似彼氏を超える LGTM を獲得する記事は生まれてくるのでしょうか...？

12/25 までアドベントカレンダーは続きますので、今後の記事もぜひご覧ください！
明日の担当は @suo-takefumi さんです！