今日研

記事 | annict-ticketを作った

2022-05-18
Tags: blog myWorks

annict-ticketを作った

ふとAnnictを試していて

Annictというアニメ視聴管理サービスがある。

Animetickを今まで使っていたがAnnictを試しに使ってみようかなと色々調べてみる。

AnnictはAPIで操作出来るらしい、調べるとGraphQL APIがあった。

GraphQLいじった事ないな、やってみようかな、と思いシンプルなウェブアプリを作ってみる。

GraphQLを学ぶ

GraphQLを学ぶのに公式のLearnが良かった

GraphQL公式のLearnが主に学ぶのに役だった。

やっぱり公式が一番ですね。

GraphiQL

GraphQLでクエリを試したりするのにGraphiQL.appが便利だった。

スタンドアロンで動いてエラー検出してくれるしサジェスト機能が付いてて便利！

なんでエラー検出やサジェスト出来るのか

Introspectionというようなのがあるので、GraphiQLがいつの間にかこれでスキーマを取得してて、エラー検出やサジェスト出来るようになってるんだと思う。

ウェブアプリを作る準備

FetchでGraphQLのquery

const query = `query {
  viewer {
    id
    username
    name
  }
}`

fetch("https://api.annict.com/graphql", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: "Bearer " + token,
  },
  body: JSON.stringify({
    query: query,
  }),
})
.then((response) => {
  if (response.status != 200) throw response
  return response.json()
})
.then((res) => {
  console.log(res)
  return res
})
.catch((res) => {
  console.error(res)
  return {}
})

結果

{
  "data": {
    "viewer": {
      "id": "xxxxxxxxx",
      "username": "xxx",
      "name": "xxx"
    }
  }
}

こんな感じで取得できる。

Nextjsで作る

紆余曲折(esbuildを試したりなど)あったが結局慣れたNextjsでSSGして適当な所にデプロイして公開するという方針に、サーバーサイドは無しにしたいので…

トークンをローカルストレージに生で保存するセキュリティ意識が低い設計でやる。

インターフェースを手動で作った

GraphQLはスキーマあるんだから、TypeScript用のインターフェースも良い感じに自動で作れる奴とかありそうだったけど、

なんか、自分の使い方に合った奴がないような雰囲気だったので手動でインターフェースを書いた。

まあ、今回作るアプリで使う分だけなので大した量ではないしな…

typescript next recoil tailwind daisyui localforage

これまで使った事ある組み合わせ、過去に作ったコンポーネントを使いまわす。

recoilとlocalforageは作ってる途中で「やっぱいるな～」と思ったので追加。

display: noneでコンポーネントを消すの便利

display: noneでコンポーネントを消すの便利だなと気付いた。

コンポーネントのステートを維持させておきたかったので、便利。

コンポーネントを消して再生成だとステートもリセットされちゃうからな～。

interface Props {
  hidden?: boolean
}
const Component = ({ hidden }: Props) => {
  const [count, setCount] = useState(0)
  return (
    <>
      <div className="flex flex-col" style={hidden ? { display: "none" } : {}}>
       <div>{count}</div>
       <div onClick={()=>setCount(v=>v+1)}>click</div>
      </div>
    </>
  )
}

こんな感じ

完成

annict-ticket

screenshot

特にこれといった機能はなく、見てる一覧を表示して各エピソード視聴記録出来るだけです。

大体分かってきたら一気に作ったけど、大体だらだら作ってたので最初Annict試し始めてから公開まで3日ぐらい掛かった。

実は最初公開する事考えてなくて、途中から公開して他の人が使えるように作っていった。