2020-08-19に更新

【アップデート】Crieitバッジを作りました

Crieitバッジ

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

これが私(ckoshien)のバッジです。
Crieit経験値

ちなみにCrieit開発者だらさんはといえば....
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ライフを!!

ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント