# 100DaysOfCode #27: QiitaのOrganizations内ユーザーの取得/canvas要素をPNG化

やったこと

QiitaのOrganizations内で 誰が一番活動しているのか どれくらい頑張っているのか が知りたくて調べています(2h)

集計結果をHTMLで出せばWebフロントエンドにも関われる…はず。

今日の進捗のコードはコチラ。

Qiita内で特定のOrganizationsに所属しているユーザー一覧 例えばこちら を取得するAPIが無いため、ページのHTMLを取得して取り出しています（いわゆるスクレイピング）

github.com

十数行しかないため、コチラにも貼り付けますが

• requests でHTMLを取得して
• BeautifulSoup でHTMLからユーザー名を取り出す

手順になります。

ユーザー名の部分は開発者ツールで要素/id/classを調べましょう

import requests
from bs4 import BeautifulSoup

# Organizationsのユーザーでとりあえず1ページ目を取り出す
o_s = requests.get("https://qiita.com/organizations/opst/members")

# ページ全体をBeautifulSoup
o_soup = BeautifulSoup(o_s.text, features="html.parser")

# メンバー表示部を選択
member = o_soup.find("ul", attrs={"class", "p-organization_memberlist"})

# メンバーのリストを取得
member_list = member.find_all("div", attrs={"class", "od-MemberCardContent"})

# メンバーの名前を出してみる
for m in member_list:
    name = m.contents[0].find("strong", attrs={"class", "od-MemberCardHeaderIdentities_username"}).contents
    print(name)

ピックアップ

今の作業には関係ないけど、次以降のネタで関わってくるものについて…

canvas要素をPNG化: toDataURL()

Twitterで映える？OGP画像を作るにはcanvas 要素で toDataURL() メソッドを使う。

toDataURL() を呼ぶと Base64になったPNGが出てくるので、 ごにょごにょしてその画像を保存・配信までもっていくとOGP画像を生み出すサービスになるらしい。

＃ブラウザにある開発者ツールのConsoleで任意の canvas をPNGにすることができました。

qiita.com

シェアするOGP画像はクライアントで生成・アップロードしているのかな？