アニメランキング作成サービスの開発

2019-03-30に作成

image

アニメランキング作成サービスって?

アプリはこちら

アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。

開発・保守期間

2016.11~
2019.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ストア公開