movee(モビー) オノデラのブログ

(株)movee代表。週末は自社サービスを作っています。

QiitaAPIで自分の関心事を検索して作成日の降順で表示している

自社HPに何かエンジニアの関心事に関する情報を載せたいなと思っていた。というのもエンジニアの関心事ってエンジニアには理解できるけど、非エンジニアからしたら「はて?」というトピックなので関心事に関する技術記事をいくつか見てもらえれば、全体像が見えたりして、「はて?」→「へぇ」にはなってくれるかなという想いから。 で、関心事キーワードを技術記事サービスAPIにポストして関連する記事を取ってくるようにしようとした。

代表的な技術記事サービスといえばQiitaとZenn。Qiita APIは以前に素振りしたことがあったので大丈夫。Zennは非公式のAPIはほんのりあるっぽいがあまり情報がなかったので今回はQiitaだけにした。本当は両方から取得したかったが。 まずカールで試した。API KEYの発行は必要なもののとても簡単に取れた。titleにAPIが含まれる記事を作成日の降順で取ってきている。 curl -H 'Authorization: Bearer xxxxx' 'https://qiita.com/api/v2/items?query=title:'API'&sort=created'

関心事は1つとは限らないのでOR条件で複数のキーワードに対応した。 これでtitleにAPIか、redisが含まれる記事を作成日の降順で取ってこれる。

curl -H 'Authorization: Bearer xxxxx' 'https://qiita.com/api/v2/items?&query=title%3A'API'+OR+title%3A'redis'&sort=created'

curlでデータ取得の確認はできたので実装してみた。APIを呼び出す部分はaxiosですぐに取れるが、手こずったのは、関心事キーワードをいい感じに加工してquery=title%3A'API'+OR+title%3A'redis'にする部分。

以下の様にした。

let interests = profileInfo[key].interest;
const replacedInterests = interests.split(',').map((interestItem) => `title%3A'${interestItem}'`);
const convertedInterests = replacedInterests.join('+OR+');

profileInfo[key].interest;にはAAA,BBB,CCCの様にカンマ区切りで関心事が書いているので、カンマをtitle%3Aに変換して、先頭に追加。+OR+を追加。 雑さはあるがこれでクエリ部分の加工はできた。 で、実際のページがこちら

アクセス数の上限があるため、1時間に1回のペースでAPIを取得して取得したデータはcacheファイルに書いておく。 で、cacheファイルからデータを取得して表示している。 定期的に記事が更新されているので自分自身が記事を読むためにもなかなか良いコンテンツな気がしている。

ただQiitaにあまり投稿してないのでAPI使うのに少し後ろめたさはあるけど、HPからQiitaへ流入が促進できれば良いかなと自己完結している。終わり。