アニメ視聴遅れ管理サービスの開発

2019-03-30に作成

image

アニメ視聴遅れ管理サービスって?

アプリはこちら(要annictアカウント)

アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。視聴状況の遅れなどを可視化したもの。

開発・保守期間

2016.11~

ゴールは?

React Nativeでアプリ化したい

annictクライアント…は無理かもしれませんが。

好きなアニメ10選をシェアしたい

ちょっと探したら「あにこれ」にはある機能なのですが、
アニメ視聴管理に使っているannictのデータを使って作りたいなーと思っています。

使っている技術など

  • サーバサイド:Java → NodeJS
    • フロントエンド:AngularJS → ReactJS
  • Heroku
  • Netlify
  • OAuth(twitter/annict API)
  • DBなし
  • GraphQL
所有者限定モードのためこのボードには投稿できません

ランキング作成機能

image

ライブラリ変更・実装変更

annictから最近見たアニメをGraphQLで取得してドラッグ&ドロップで並び替える機能を作成しました。まだUIは整っていません(汗)

先日、ReactでGraphQLへアクセスする方法を書きました。

昨日作ったランキング作成機能ですが、コンポーネントがスマホのtouchイベントに対応していないことに気づきまして、急遽ライブラリの入れ替えと実装の変更を行いました。

使用しているライブラリ

学習コストは多少ありますが、react-dndほど難解ではない印象です。割とスムーズにドラッグ&ドロップを楽しめるライブラリかと。

動作イメージ

annictアカウントをお持ちの方は是非遊んでみてください!
https://annict-access.herokuapp.com/

3/30進捗

タブ分離

既存の「未視聴一覧」と「グラフ」をタブ化しました。

通信メソッド分離

いわゆるリファクタリングです。
Reactを始めたばかりのころに作ったので色々ソースコードがひどいことになっていましたw

navバーの追加

画像とサブタイトルの表示をflex-boxに

best10作成機能作り始めました