アプリはこちら。
アニメ視聴管理サービス「Annict」が提供している外部APIを使ったWEBサービス。
2016.11~
2019.11リニューアル
annictクライアント…は無理かもしれませんが。
ちょっと探したら「あにこれ」にはある機能なのですが、
アニメ視聴管理に使っているannictのデータを使って作りたいなーと思っています。
派生プロジェクトの音楽ランキングメーカーを昨日リリースして、早速IKENでフィードバックをいただきました。
検索時にPCだとエンター押下で検索できると便利
reactにはinputタグにonKeyDownイベントがあるんですね。
知らなかった。
keyCode 13はENTERキーです。inputタグにフォーカスしているときにENTERキーを押すと検索処理をするようにします。
onKeyDown={(e)=>{
if(e.keyCode === 13){
//検索処理
}
}}
参考:ReactでEnterキーのpushイベントを取得する方法
iPhoneだと、楽曲選択時に改行の位置に英文字が来ると数文字見切れてしまう
デバッグするとどうやらはみ出しているのは要素ではなく#text。
oh...怪奇現象!と思いつつググってみると。
改行にも種類があるようで、何も指定していなかったのでword-wrap: break-wordを適用します。
CSS in JS
wordWrap: 'break-word'
・アニメ選択は降順で今の季節まででもいいかなと思いました。つまり 2019秋、夏、春、2018冬、秋、夏、春、2017冬、・・・ の順に並ぶのもいいかなと。
・並び替えし終わった後にアニメ追加を行うと並び替えしたものが元に戻るので、戻らないようにしてもらえるとありがたいです…!
本日のユーザ数:115
引き続きIKEN募集しています。
これまで文字でのツイートや画像での保存のみのシェア機能でしたが、作ったランキングを再現する機能を実装しました。
画像のレンダリングが不完全ということと今回の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
}
}
}
}
}
上記クエリで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で機能要望・改善案などを引き続き募集しておりますのでそちらもよろしくお願いいたします。