ChatGPT Plus Code Interpreter でスクレイピングと集計とグラフ化する（Qiita のへーしゃランキングを作成する）

# 今回やりたかったこと

ChatGPT Plus Code Interpreter に慣れたい

※最終的なプロンプトの入力と出力の全文は本ページ下部に貼り付けてます。

# 作ったもの概要

Qiita のへーしゃ（ACCESS） organizations の Contributions ランキングを作成します。

具体的には以下の部分です。
https://qiita.com/organizations/access/members

```
Hiromi Sawada
@shiromi
184 Contributions
3 記事
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/36586d18-e28c-01b6-8def-1af06cbb5e6f.png)

プロンプトを2つ使用しています。

- プロンプト1
  - 使用物： WebPilot プラグイン（URL を渡しその URL の情報を使うことが出来るようになるプラグイン）
  - やってること： Qiita URL 食わせて csv テキスト出力
    - 入力： Qiita URL（ACCESS Organization のメンバページ）
    - 出力： csv データ（テキスト）
  - シェア URL ： https://chat.openai.com/share/c7dcb9ad-fa09-409f-9ca6-6cdef9010da9 // このシェア機能も地味に便利ですね！
- プロンプト2
  - 使用物： Code Interpreter
  - やってること： 1の csv テキスト食わせてグラフ作成
    - 入力： 1の csv データ（テキスト）
    - 出力： ランキングのグラフ（画像）
  - シェア URL ： https://chat.openai.com/share/c4bcbdba-3e24-4dbc-a7a1-734653e64872

# 感想（得られた知見）

- 便利、簡単、楽すぎる
- もう一歩かゆいところに手届いてほしいと思った部分（近い将来対応してくれそうな気はする。。）
  - 現状これをやりたいときはプロンプトは2つに分ける必要ありなところ = Code Interpreter とプラグイン同時に使いたい
  - （Code Interpreter 無しでも）csv ファイルも吐き出してくれればいいのに
  - シェア機能ではグラフは表示してくれない。「Image output is not supported in a shared chat」と表示される
  - グラフは現状日本語は表示できないことがわかったｗ（渡邊裕貴さんのところが豆腐）

# 環境

* ChatGPT(GPT-4)
* Mac macOS 12.5.1

# 作成物スクリーンショット

## プロンプト1の出力： csv データ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/51989042-367f-e960-a983-45ef4156d6dc.png)



## プロンプト2の出力： グラフ

注：Contributions Ranking の1位の「□□ □□」が本来「渡邊 裕貴」と表示したいところ

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/35e601e9-d37a-fec5-0e39-02725dbee07e.png)

# 対応時間

1時間。
＃数年前しこしこ GAS でスクレイピングと集計した数時間？数日？は何だったのか。。ｗ

# プロンプト

## プロンプト1：開始

「GPT-4」 > 「Plugins」 > 「WebPilot」を選択して開始。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/113d043d-3efc-0872-7226-9288bd3f848a.png)

## プロンプト1：入力

```text
以下の URL から、アカウント名、  Contributions 数、記事数、のcsv データをテキストで頂戴。
もしファイル化できるならファイルで。

■URL
https://qiita.com/organizations/access/members
https://qiita.com/organizations/access/members?page=2
https://qiita.com/organizations/access/members?page=3
https://qiita.com/organizations/access/members?page=4

■例
Hiromi Sawada
@shiromi
184 Contributions
3 記事
```

## プロンプト1：出力

```text
以下に、各ページから取得したデータをCSV形式でまとめました。ただし、一部のユーザーは記事数やContributions数が表示されていないため、その部分は空白としています。
```

```
Name,Account,Contributions,Posts
Hiromi Sawada,@shiromi,184,3
@bols_blue,@bols_blue,482,10
@aMasashiOgawa,@aMasashiOgawa,0,0
Kasumi Suzuki,@keigo1450,210,16
Nobuyuki Nakamura,@aNobuyukiNakamura,0,0
Naohiko Watanabe,@naohikowatanabe,1549,39
Seiji Urushihara,@aSeijiUrushihara,81,2
渡邊 裕貴,@magicant,11774,45
@ynakase,@ynakase,162,3
@aMasatoYui,@aMasatoYui,164,7
Kenta Koyama,@aKentaKoyama,583,8
Takayuki Morita,@aTakayukiMorita,26,2
Takayuki Toyoda,@TakayukiToyoda,7,1
Shinji Hoshino,@aShinjiHoshino,0,0
Takuya Kaneko,@aTakuyaKaneko,0,0
@asukamirai,@asukamirai,318,9
@akegashi,@akegashi,97,7
Ryo Kuroda,@aRyoKuroda,203,16
kyoichiro iizuka,@aKyoichiroIizuka,58,3
Daisuke Sakyo,@aDaisukeSakyo,58,2
Sumio Shingu,@ssingu,40,3
@aMasashiUmeda,@aMasashiUmeda,126,5
Katsuhiro Mihara,@aKatsuhiroMihara,264,11
Kentaro Tokutomi,@kenrota,57,6
@g0117736,@g0117736,143,5
Takaaki Seki,@SekiT,433,13
金井 祐輔,@YusukeKanai,26,2
Kaname Takano,@Momijinn,43,5
@hnishi,@hnishi,2687,68
@aTomoyaKubo,@aTomoyaKubo,76,3
@komitake,@komitake,354,27
@Giimo,@Giimo,0,0
@macotok,@macotok,1487,93
鷹松 直樹,@Naoki-Takamatsu,19,2
Kensuke Takahara,@KensukeTakahara,74,7
Soichi Ikebe,@aqua_ix,432,22
Nobuhisa Masaki,@aNobuhisaMasaki,5,1
sysadm ACCESS HQ,@access-hq-sysadm,0,0
松井 耕介,@matsui_685,136,2
@takao-arima,@takao-arima,0,0
@krmtmint,@krmtmint,0,0
Koki Ito,@kiito1000,58,6
@ttokit,@ttokit,11,1
@Yam3939,@Yam3939,58,7
@kokd,@kokd,0,0
kokada,@kokada420,22,6
@nube266,@nube266,11,3
Yuki Yoshida,@jyoppomu,60,4
@irisTa56,@irisTa56,105,11
高野 てん,@ten_takano,96,10
@aym,@aym,27,3
@yocidama,@yocidama,37,3
Keisuke IRII,@illypong,126,10
Akio Fujita,@aAkioFujita,0,0
XIUYU LIANG,@lxymopan,1,1
Ayaka Yamamoto,@aAyakaYamamoto,13,3
Yongjune Park,@yjpark,0,0
大槻 隼也,@Shunya-Otsuki,5,2
@rairaii,@rairaii,68,23
@B-SKY-Lab,@B-SKY-Lab,31,11
@fjtsh,@fjtsh,0,0
```

## プロンプト2：開始

「GPT-4」 > 「Code Interpreter」を選択して開始。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/18efb537-cc20-cc89-a71c-5142f48157a3.png)

## プロンプト2：入力

```text
以下の csv データから「Contributions 数」ランキング、「Posts」ランキングの2つ作って。グラフで。

■csv 
Name,Account,Contributions,Posts
Hiromi Sawada,@shiromi,184,3
@bols_blue,@bols_blue,482,10
@aMasashiOgawa,@aMasashiOgawa,0,0
Kasumi Suzuki,@keigo1450,210,16
Nobuyuki Nakamura,@aNobuyukiNakamura,0,0
Naohiko Watanabe,@naohikowatanabe,1549,39
Seiji Urushihara,@aSeijiUrushihara,81,2
渡邊 裕貴,@magicant,11774,45
@ynakase,@ynakase,162,3
@aMasatoYui,@aMasatoYui,164,7
Kenta Koyama,@aKentaKoyama,583,8
Takayuki Morita,@aTakayukiMorita,26,2
Takayuki Toyoda,@TakayukiToyoda,7,1
Shinji Hoshino,@aShinjiHoshino,0,0
Takuya Kaneko,@aTakuyaKaneko,0,0
@asukamirai,@asukamirai,318,9
@akegashi,@akegashi,97,7
Ryo Kuroda,@aRyoKuroda,203,16
kyoichiro iizuka,@aKyoichiroIizuka,58,3
Daisuke Sakyo,@aDaisukeSakyo,58,2
Sumio Shingu,@ssingu,40,3
@aMasashiUmeda,@aMasashiUmeda,126,5
Katsuhiro Mihara,@aKatsuhiroMihara,264,11
Kentaro Tokutomi,@kenrota,57,6
@g0117736,@g0117736,143,5
Takaaki Seki,@SekiT,433,13
金井 祐輔,@YusukeKanai,26,2
Kaname Takano,@Momijinn,43,5
@hnishi,@hnishi,2687,68
@aTomoyaKubo,@aTomoyaKubo,76,3
@komitake,@komitake,354,27
@Giimo,@Giimo,0,0
@macotok,@macotok,1487,93
鷹松 直樹,@Naoki-Takamatsu,19,2
Kensuke Takahara,@KensukeTakahara,74,7
Soichi Ikebe,@aqua_ix,432,22
Nobuhisa Masaki,@aNobuhisaMasaki,5,1
sysadm ACCESS HQ,@access-hq-sysadm,0,0
松井 耕介,@matsui_685,136,2
@takao-arima,@takao-arima,0,0
@krmtmint,@krmtmint,0,0
Koki Ito,@kiito1000,58,6
@ttokit,@ttokit,11,1
@Yam3939,@Yam3939,58,7
@kokd,@kokd,0,0
kokada,@kokada420,22,6
@nube266,@nube266,11,3
Yuki Yoshida,@jyoppomu,60,4
@irisTa56,@irisTa56,105,11
高野 てん,@ten_takano,96,10
@aym,@aym,27,3
@yocidama,@yocidama,37,3
Keisuke IRII,@illypong,126,10
Akio Fujita,@aAkioFujita,0,0
XIUYU LIANG,@lxymopan,1,1
Ayaka Yamamoto,@aAyakaYamamoto,13,3
Yongjune Park,@yjpark,0,0
大槻 隼也,@Shunya-Otsuki,5,2
@rairaii,@rairaii,68,23
@B-SKY-Lab,@B-SKY-Lab,31,11
@fjtsh,@fjtsh,0,0
```

## プロンプト2：出力

```text
まずは、このテキストデータをpandasのDataFrameに変換しましょう。その後、「Contributions」と「Posts」でソートされたランキングを作成します。最後に、それぞれのランキングを棒グラフで表示します。

Finished working
Show work

以下の表は、「Contributions」数と「Posts」数でソートされた上位5人のランキングです。

Contributions ランキング（上位5人）
Name	Account	Contributions	Posts
渡邊 裕貴	@magicant	11774	45
@hnishi	@hnishi	2687	68
Naohiko Watanabe	@naohikowatanabe	1549	39
@macotok	@macotok	1487	93
Kenta Koyama	@aKentaKoyama	583	8

Posts ランキング（上位5人）
Name	Account	Contributions	Posts
@macotok	@macotok	1487	93
@hnishi	@hnishi	2687	68
渡邊 裕貴	@magicant	11774	45
Naohiko Watanabe	@naohikowatanabe	1549	39
@komitake	@komitake	354	27
次に、これらのランキングをグラフで表示しましょう。ランキングの上位10人について描画します。

以下に、上位10人による「Contributions」数と「Posts」数のランキングを棒グラフで示します。

「Contributions」数ランキング:

「Posts」数ランキング:

これらのグラフは、個々のユーザーがどれだけの「Contributions」を行い、「Posts」を作成したかを比較するのに役立ちます。渡邊 裕貴さん(@magicant)は「Contributions」で圧倒的なリードを保っていますが、「Posts」では@macotokさんが最も多く投稿しています。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/d12fd40c-e6c1-ca8c-cd7c-3f7649646581.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/35e601e9-d37a-fec5-0e39-02725dbee07e.png)


# その後

一日経ったらプロンプトからグラフ消えちゃってました。。。

当初は、
```
以下に、上位10人による「Contributions」数と「Posts」数のランキングを棒グラフで示します。
「Contributions」数ランキング:
```

の下にグラフがありましたが、一日後はグラフは消え、以下のアラートダイアログが表示されるようになりました。
```
This code interpreter (beta) chat has timed out. You may continue the conversation, but previous files, links, and code blocks below may not work as expected.

// 簡易翻訳
このコード・インタープリタ（ベータ）チャットはタイムアウトしました。会話を続けることはできますが、以下のファイル、リンク、コードブロックは期待通りに動作しないかもしれません。
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/23dc73bf-7207-dffc-345b-213fe1eecde0.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/63a3483c-8d15-cc95-8d56-7c9c78ddd56c.png)

しかし、もう一度作ってとお願いすると作成してくれました。
どうやら内部的には最初からやり直している様子。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35514/3750c84f-9fcf-9c3e-5b56-10bfca0aeb8c.png)