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

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
所有者限定モードのためこのボードには投稿できません ボードとは?

5/19 ReactNativeアプリ進捗

進捗的には昨日の続きです。
image

react-navigationを使ってページ遷移を実装する

const Stack = createBottomTabNavigator(
  {
    Main: { 
      screen: Main,
      navigationOptions: ({ navigation }) => ({
        title: 'メイン',
      }),
    },
    ranking: { 
      screen: Ranking,
      navigationOptions: ({ navigation }) => ({
        title: 'ランキング作成',
      }),
    },
    select: { 
      screen: CtrlSelectPrograms,
      navigationOptions: ({ navigation }) => ({
        title: '番組選択',
      }),
    }
  },
  {
    tabBarOptions:{
      activeBackgroundColor: '#f85b73',
      activeTintColor: 'white',
      style:{}
    }
  }

);

下にタブを作ってタブで画面遷移を切り替える形にしました。
screenプロパティで実際に表示するコンポーネントを指定し、
navigationOptionsではタブに表示するラベルをtitleプロパティで指定します。
できる限りannictのテーマカラーを採用していきます。

react-native-elementsを使ってヘッダを実装する

import React from 'react'
import { Header } from 'react-native-elements'

export default class NavBar extends React.Component{
    constructor(){
        super();
    }
    render(){
        return(
            <Header
                //leftComponent={{ icon: 'menu', color: '#fff' }}
                centerComponent={
                    { 
                        text: this.props.title, 
                        style: {
                            color: '#f85b73',
                            fontSize: 16,
                            fontWeight: 'bold'

                        }
                    }}
                //rightComponent={{ icon: 'home', color: '#fff' }}
                //backgroundColor={'#fff'}
                containerStyle={{
                    color:'#f85b73',
                    backgroundColor: '#fff'
            }}

            />
        )
    }
}

画面遷移ではヘッダコンポーネントを共通化するのが難しいようだったので、propsでタイトルを渡して切り替えられるように実装しました。
leftComponentやrightComponentは使わないので一旦オミットします。

原因不明のビルドエラー !?

Invariant Violation: View config not found for name RTCViewというエラーメッセージが出て実行エラーが出る状態に。
【ReactNative】これ。Invariant Violation: View config not found for name input

エラーメッセージの内容が明確でない場合は基本的にパッケージャーの再起動とキャッシュの削除を試します。
キャッシュを削除する方法

しかしいくらやってもエラーが出てこれだけで2時間ぐらい奮闘。
ふと違うスマホでビルドしてみると成功したので、スマホ側のアプリキャッシュを削除するとあっけなく通ったのでした。ぐったり。

RNアプリ化始動。

仕様策定

使う技術

  • React Native
  • GraphQL(annictサーバ問い合わせ)

ランキング集計機能

  • 1-50位まで設定し、50位は1pt、1位50pt。
  • 10位までしか設定しなかった場合は10位1pt、1位10pt。
  • 多く設定すれば高pt。
  • 「高ポイントをつけてお気に入りのアニメを応援しよう!」とかどうだろう。
  • ユーザ登録しない場合、UUIDで集計する?
  • アプリ削除時にUUIDリセット
  • ユーザがアプリ削除したときにサーバ側では検知できない

twitterシェア機能

1-10位ぐらいまでのシェア機能つけたい

一旦のゴール

playストア公開

ランキング作成機能

image

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

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

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

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

使用しているライブラリ

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

動作イメージ

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

3/30進捗

タブ分離

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

通信メソッド分離

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

navバーの追加

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

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