Crieitバッジ

GitHubなどに貼るCrieitバッジを作りました。

これが私(ckoshien)のバッジです。

ちなみにCrieit開発者だらさんはといえば....

....やっぱり強い強すぎる。

使い方

このコードの*****の部分を自分のユーザID(例:ckoshienとかdala00)に書き換えて貼るだけです。

[![Crieit経験値](https://ogp-vercel.vercel.app/crieit/*****)](http://crieit.net/users/*****)

どうやって作ったか

着想

mikkameさんのQiita のスコアをGithub風バッジに変換するサービスを見てCrieit版作ろう！と思いました。

技術的なこと

shield.io版からアップデートしました。
現在はvercel + NextJS + puppeteerでスクレイピングした情報で一旦画面を作ってスクリーンショットを撮っています。

結果的にvercelを2台分(スクレイピング/スクリーンショット)使っています。

バックエンド

• vercel/NodeJS(lambda)
• puppeteer

puppeteerでcrieitのユーザページをスクレイピングして経験値を取得しています。

async function getCrieitBadge(user_id) {
  const browser = await puppeteer.launch({
    args: chrome.args,
    executablePath: await chrome.executablePath,
    headless: chrome.headless,
  });
  const page = await browser.newPage();
  await page.goto("https://crieit.net/users/"+user_id);
  await page.setCacheEnabled(true);

  const itemSelector = "#app > #container > div.row > div > p.mb-2 > span:nth-child(1)";
  const itemSelector2 = "#app > #container > div.row > div > p.mb-2 > span:nth-child(2)";
  var item = await page.$(itemSelector);
  var item2 = await page.$(itemSelector2);
  var data = await (await item.getProperty('textContent')).jsonValue();
  var data2 = await (await item2.getProperty('textContent')).jsonValue();
  await page.close();
  await browser.close();
  return data;

}

現在は画像を1日キャッシュするようにして返しています。
ではよいCrieitライフを!!