絵文字からZennの記事をみつける拡張機能「Zenn Feel Lucky」を作った

Zennの記事に設定されている絵文字を活用する方法を考えてみました。

拡張機能のアイコンをクリックすると絵文字が表示されます。
絵文字を選択すると、その絵文字の設定された記事が開くだけの拡張機能です。

普段は記事のタイトルから探すと思うので、新しい発見があるかもしれません！

https://chrome.google.com/webstore/detail/zenn-feel-lucky/hjdfacaikojhdejlhmedcehggcpgnnaj

― Fin ―

プログラム紹介

これでは終われないので、作成したプログラムと学んだことを少し紹介します。
（勝手に Zenn の API 叩いているので、問題あれば対応します🙏）

popup.js

const WEB_HOST = 'https://zenn.dev'
const API_HOST = 'https://api.zenn.dev'

// ZennのAPIを利用して記事を取得
window.addEventListener('load', () => {
  const count = 9
  const order = Math.random() < 0.5 ? 'daily' : 'latest'
  const page = Math.floor(Math.random() * 50)
  const params = new URLSearchParams({ count, order, page })

  fetch(`${API_HOST}/articles?${params}`, { mode: 'no-cors' })
    .then((response) => response.json())
    .then((data) => createItems(data))
})

// 絵文字の要素を作成して表示
const createItems = (data) => {
  const container = document.getElementById('container')

  const baseItem = document.createElement('a')
  baseItem.className = 'item'
  baseItem.target = '_blank'
  baseItem.rel = 'noopener'

  const articles = data.articles || []

  // 取得した記事をランダムな順番で表示
  while (articles.length) {
    const i = Math.floor(Math.random() * articles.length)
    const article = articles.splice(i, 1)[0]

    const username = article.user.username
    const slug = article.slug

    const item = baseItem.cloneNode()
    item.href = `${WEB_HOST}/${username}/articles/${slug}`
    item.textContent = article.emoji

    container.appendChild(item)
  }

  // twemoji適用
  twemoji.parse(container)
}

fetch

fetch(url) だけで HTTP リクエストを飛ばせます。

fetch('http://example.com/data.json')
  .then(response => response.json()) // レスポンスから JSON を取得する
  .then(data => console.log(data)) // JSON データをコンソールに出力

ここで受け取れる response は JSON データではないので、json() を利用してレスポンスから JSON を取得します。
json() 以外にも blob() や text() といったメソッドが用意されています。

また、2つ目の引数にオブジェクトを渡すことでオプションを適用できます。
JSON のデータを POST で送るときはこのようなプログラムになります。

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(obj)
})

普段は axios に頼っていましたが、fetch も使いやすいですね！

URLSearchParams

URL の後ろにつけるパラメーターを簡単にパース・作成・操作できるクラスです。

// オブジェクトから作成
const param = new URLSearchParams({ foo: 'abc', bar: 100 })
console.log(param.toString()) // -> "foo=abc&bar=100"

// 文字列をパースして操作
const param = new URLSearchParams('foo=abc')
param.append('bar', 100)
param.set('foo', 'xyz')
console.log(param.toString()) // -> "foo=xyz&bar=100"

今回はじめて知りました。リクエストパラメーターの作成に利用しています！

Twemoji

絵文字を画像ファイル（png/svg）に置き換えてくれるライブラリです。

https://twemoji.twitter.com/

<a>✨</a>
↓ twemoji適用
<a>
  <img class="emoji" alt="✨" src="https://twemoji.maxcdn.com/v/13.0.1/72x72/2728.png">
</a>

今回は twemoji.js を読み込んで手動で適用していますが、
React で Twemoji を表示するときには react-emoji-render を利用するみたいです！

絵文字がフラットでかわいいデザインになるので良いですね！

さいごに

記事に絵文字を設定できるのが好きなので、活用できる方法を思いつきで実装してみました。
この拡張機能を使って、新しい発見を探してみてください！

ご覧いただき、ありがとうございました🙇