Netlify Functions를 사용하여 Qiita 트렌드 API를 비공식으로 만들었습니다.

2022.02.12추가: 여러 가지 사정 있음 Netlify Functions에서 Vercel Serverless Functions로 마이그레이션되었습니다.
앞으로는 h ttps://qiita-api.netlify.app가 아닌 h tps // 쿠타타-아피.ゔ ㄱ l. 아 p을 방문하십시오 (만약을 위해 이전 링크에서 리디렉션을 날리려고하지만 ...).

Zenn 버전은 여기

Qiita 의 API 에는 트렌드 기사 일람을 취득하는 API 가 없기 때문에, 만든 본이라고 하는 이야기입니다.
조속히 시도하고 싶은 분은

h ttps://qiita-api.netlify.app/.netlify/functions/trend
h tps // 쿠타타-아피.ゔ ㄱ l. 아 p/아피/t렌 d

또는

h ttps://qiita-api.netlify.app/trend.json
h tps // 쿠타타-아피.ゔ ㄱ l. p/t 벽돌 d. j 그런

확인해보십시오.
(만일 잘 취득되지 않은 경우는 코멘트란이나 리포지토리의 Issue 로 알려 주세요.)

배경

QiitaAPI에 트렌드가 보이지 않기 때문에 울면 이라는 기사에 경위가 있습니다만, 과거에는 트렌드 기사 일람은 htps : // 이 m/t 벽돌 d. j 그런 을 GET 하는 것으로 얻을 수 있었지만, 2019년 12월 현재는 공식적으로는 API가 제공되고 있지 않습니다.
다만, 톱 화면의 div 태그에 포함되는 형태로 JSON (의 캐릭터 라인)이 있어, 이것을 스크래핑 하는 것으로 기사 일람을 얻을 수 있습니다.
　
일부러 스크래핑하는 것은 귀찮다는 기분이 들었으므로, 직접 JSON 을 돌려줄 수 있는 URL 을 자발적으로 세우기로 했습니다.

Netlify Functions

Netlify에서 AWS Lambda를 사용할 수 있습니다.
무료라고 Requests 가 125,000/월, Runtime 가 100 hours/월 (2019년 12월 현재)까지 사용할 수 있으므로, 취미 제품이라면 전혀 여유의 범위군요.

어떻게 사용하는지

다음과 같은 함수를 작성하고 있습니다. Qiita 의 URL 을 axios 로 GET 하고 cheerio 로 퍼스하고 있을 뿐이므로, 매우 간단하네요.

src/lambda/trend.ts

import axios from 'axios'
import cheerio from 'cheerio'

const fetchTrend = (html: string) => {
  const $ = cheerio.load(html)
  const raw = $('script[data-component-name=HomeIndexPage]').html() ?? ''
  if (raw === undefined) return {}
  const rawData = JSON.parse(raw).trend.trend.edges

  return rawData.map(obj => {
    // 不要なプロパティを削除
    delete obj.followingLikers
    delete obj.isLikedByViewer

    delete obj.node.isLikedByViewer
    delete obj.node.isStockableByViewer
    delete obj.node.isStockedByViewer
    delete obj.node.followingLikers
    delete obj.node.recentlyFollowingLikers

    return obj
  })
}

export const handler = async () => {
  const url = 'https://qiita.com/'

  return await axios
    .get(url)
    .then(({ data }) => {
      return {
        statusCode: 200,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json; charset=utf-8'
        },
        body: JSON.stringify(fetchTrend(data)),
      }
    })
    .catch(err => {
      return {
        statusCode: 500,
        body: err,
      }
    })
}

Lambda 본체의 구현 외에는, 기본적으로는 netlify.toml 와 .babelrc 를 만지기만 하면 됩니다. 자세한 내용은


확인하십시오.

유용한 링크

netlify/functions

Netlify 공식 샘플

【입문】Netlify Functions 코토하지메 - Qiita

입문 기사

Netlify Functions + TypeScript 보일러 플레이트를 만들었습니다.

보일러 플레이트

havveFn/atcoder-charts

나는 이것으로 처음으로 Netlify Functions의 존재를 알았습니다.