派生プロジェクトの音楽ランキングメーカーを昨日リリースして、早速IKENでフィードバックをいただきました。

keydownイベントに対応

検索時にPCだとエンター押下で検索できると便利

reactにはinputタグにonKeyDownイベントがあるんですね。
知らなかった。
keyCode 13はENTERキーです。inputタグにフォーカスしているときにENTERキーを押すと検索処理をするようにします。

onKeyDown={(e)=>{
                        if(e.keyCode === 13){
                           //検索処理
                        }
                    }}

参考:ReactでEnterキーのpushイベントを取得する方法

改行のスタイルを修正

iPhoneだと、楽曲選択時に改行の位置に英文字が来ると数文字見切れてしまう

デバッグするとどうやらはみ出しているのは要素ではなく#text。
oh...怪奇現象!と思いつつググってみると。

参考:css – ブロックレベルから文字がはみ出してしまう

改行にも種類があるようで、何も指定していなかったのでword-wrap: break-wordを適用します。

CSS in JS

        wordWrap: 'break-word'

OGP設定

ちゃちゃっとcanvaで作りました。

放送時期バッジ追加

フィードバック対応

option要素並び順修正

・アニメ選択は降順で今の季節まででもいいかなと思いました。つまり 2019秋、夏、春、2018冬、秋、夏、春、2017冬、・・・ の順に並ぶのもいいかなと。

追加・削除を行うとソートが初期化されるバグ修正

・並び替えし終わった後にアニメ追加を行うと並び替えしたものが元に戻るので、戻らないようにしてもらえるとありがたいです…！

未実装のiken

• アニメ番組の探しやすさ改善
  • キーワード検索
  • フィルタリング
• おすすめアニメのサジェスト
  • 現状DBに保存していないので難しい

本日のユーザ数：115

引き続きIKEN募集しています。

URLシェア機能をリリース

これまで文字でのツイートや画像での保存のみのシェア機能でしたが、作ったランキングを再現する機能を実装しました。

例：シェア機能で作ったランキング

「画像で保存」機能は廃止

画像のレンダリングが不完全ということと今回のURLシェアで役目を終えたと判断して廃止しました。

使い方

https://annictaccessv3.netlify.com/
これまでどおり、ランキングを作りたいアニメを選択し、ソート画面で並び替えてtwitterシェアボタンを押すとURLが生成されます。(※URLは結構長いです)

技術的なこと

アニメはそれぞれannictIdを持っているのでidを記述した配列をクエリパラメータに渡せばいいんじゃないかと思いつきました。
今回はクエリパラメータをbase64化してSPAに渡すようにしています。
アニメのデータはannictIdを基にannict GraphQL APIから取得してきています。

GraphQLクエリ

query {
        searchWorks(annictIds:[]}) {
          edges {
            node {
                title
                seasonName
                seasonYear
                annictId
                twitterUsername
                watchersCount
                malAnimeId
                image {
                  recommendedImageUrl
                }
            }
          }
        }
      }

API、それは罠

上記クエリでIDに一致するデータを取得していたのですが、どういうわけか、並び順がannictIdsで指定した順番と異なるということに気づきました。
配列なので当然並び順にデータを返してくると思っていたのですが、annictIdでソートされて返ってきていたので、プログラム側で並び替える処理を書くことに。

//API側でソートされてしまう問題に対処する
            let sortedArray = []
            for(let j = 0; j < ids.length ; j++){
                for(let i = 0; i < response.data.searchWorks.edges.length; i++){
                    if(response.data.searchWorks.edges[i].node.annictId === ids[j]){
                        sortedArray.push(response.data.searchWorks.edges[i]);
                    }
                }
            }

先送りした問題

順位とコメントを保持しようと思っていたのですが、日本語はエスケープ処理が必要で、実装に時間がかかるため、今回は見送りました。

意見(iken)を募集しています

ikenで機能要望・改善案などを引き続き募集しておりますのでそちらもよろしくお願いいたします。

IKENにご意見いただきありがとうございました。下記対応しました。

選択解除・コメント入力対応

ランキングに入れたアニメは外せないですかね？あと、コメントも書けるといいと思いました

一言コメントを各作品に入力できるようにしました。
また、「アニメ選択」の画面で選択中の番組をもう一度押すと選択が解除されるよう実装しました。

twitterシェア・画像保存に対応

ランキング作成後に何すればいいのかがちょっとわからなかったです。URLに保存してツイート機能とかほしいです。

画像保存も実装しました。レンダリングの精度はいまいちか...。

react-share

react-share
各種SNSへのシェアボタンを手軽に作れるコンポーネント。

html2canvas

言わずと知れた有名ライブラリ。reactでも問題なく使えます。

アニメ一覧の表示をシーズンごとにしました

年毎に全部比較するのは難しいため期ごとの選択もいいと思いました。

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

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時間ぐらい奮闘。
ふと違うスマホでビルドしてみると成功したので、スマホ側のアプリキャッシュを削除するとあっけなく通ったのでした。ぐったり。

仕様策定

使う技術

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

ランキング集計機能

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

twitterシェア機能

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

一旦のゴール

playストア公開

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

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

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

• ReactでGraphQL APIにアクセスする

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

使用しているライブラリ

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

• react-beautiful-dnd

動作イメージ

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

タブ分離

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

通信メソッド分離

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

navバーの追加

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

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