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

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

11/17 フィードバック対応

派生プロジェクトの音楽ランキングメーカーを昨日リリースして、早速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'

11/3フィードバック対応など

OGP設定

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

放送時期バッジ追加

フィードバック対応

option要素並び順修正

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

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

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

未実装のiken

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

本日のユーザ数:115

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

URLシェア機能を実装しました

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で機能要望・改善案などを引き続き募集しておりますのでそちらもよろしくお願いいたします。