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]);
                    }
                }
            }