「annict」の記事 - Crieit

アニメのレコメンドサービスを作りました。

2020-05-08T19:25:38+09:00

サービスURL

https://annict-suggest.netlify.app/

アニメの類似性をどう計算するか

コサイン類似度

人工知能を使わずにアニメのレコメンドサービスを作ろうと思ったのがきっかけです。
ユークリッド距離は触ったことがあるので、他の指標としてコサイン類似度が面白そうだと思いました。
ユークリッド距離は2点間の距離、コサイン類似度は2点のベクトル同士の角度です。

使った指標

約3300の作品に対して「見た」「見てない」のベクトルを作ってコサイン類似度を算出しようとしました。
「あにこれ」のように成分分析されているタグの類似度を計算するのもありだと思いました。

挫折

導入は比較的楽なように思えたのですが、計算量が尋常ではありませんでした。事前にフィルタリングを何もかけていなかったため、3300レコードx3300レコードの計算をしようとしていて、あまりに時間がかかるので諦めました。

アイテムの類似性について考察してみる

結局SQL

例:ID4342の作品を見たユーザを抽出して、
それらのユーザが他に見た作品のうち共通している人数が多い順に30件を取得する。

select 
    sum(st2.watch_status) as count,
    st2.work_id,
    w.title
from status st2
-- ID:4342の作品を見たユーザを取得
inner join (
    select 
        st.user_id 
    from status st
    where st.work_id = 4342
 )st3
on st2.user_id = st3.user_id
inner join works w
on w.annict_id = st2.work_id
-- 作品自身を除く
where st2.work_id != 4342
group by st2.work_id
order by count desc
limit 30

今回使った技術

GraphQL(Annict API)
ReactJS
NodeJS(TypeScript)
twitterAPI
netlify

データの棲み分け

最新のデータが欲しい場合はAnnictAPI(GraphQL)、分析データが欲しい場合はDBから読み込み、というようにデータの棲み分けを行っています。

GraphQLでエイリアスを使う

Annict API
ユーザが見たアニメと見ているアニメ両方が欲しい場合、
エイリアスを使うと複数条件が記述できる。

query {
      user(username:"${username}"){
       annictId,
       works(state:WATCHED){
         nodes{
           annictId
           title
         }
       }
      ing:works(state:WATCHING){
         nodes{
           annictId
           title
         }
       }
      }
    }

CSP(コンテンツセキュリティポリシー)

アニメのOGPがない場合は公式twitterアカウントの画像を使用しているが、CSPなどで同じサイトでないコンテンツは表示できなくなったので、
URLに「twitter」が含まれる場合はサーバにプロキシさせて画像を読み込むようにした。

ご意見

こちらから使ってみた感想・ご意見をお寄せください。

ReactNativeアプリを作り始めました。

2019-05-18T21:52:15+09:00

背景

アニメ視聴遅れ管理サービスを作っているのですが、ReactNativeアプリで好きなアニメランキングを作りはじめました。
これがランキングを作る際の番組選択画面にあたります。
(warningが出てるのは許してください....。)

GraphQLでサーバからデータを取得する

以前、ReactでGraphQL APIにアクセスするという記事を書いたので今回は割愛します。

今回作成したクエリはこちら。
${year} で取得したい年を渡しています。
クエリの内容としては、${year}で指定した番組のタイトル、画像URL、annict上の番組ID、シーズンを視聴者数順にソートして返します。

let query = gql`{
        searchWorks(
          seasons:["${year}-spring","${year}-summer","${year}-autumn","${year}-winter"],
          orderBy: { field: WATCHERS_COUNT, direction: DESC }
          ){
          edges{
            node{
              title
              image{recommendedImageUrl}
              annictId
              seasonName
              seasonYear
            }
          }
        }
      }`

長すぎるタイトルを省略する

TextコンポーネントにこんなPropsがあるらしい。
【React Native】三点リーダーでテキストを省略

今回使ったProps。

numberOfLines={3}
ellipsizeMode="tail"

番組データを3カラムで表示する

deprecatedになっているListViewを使っているところは気になりますが、FlatListに読み替えてしまえばかなりの良記事だと思います。
React Native の ListView で２カラムの表示を簡単に

番組画像に作品タイトルをオーバーレイさせる

元々UIに疎かった私。
画像に半透明のレイヤーを被せてその上に文字を表示するのを何というかということも知らなかったので、「画像　文字　のせる」というところからググりはじめて「オーバーレイ」と呼ぶことを知ったので、「react native overlay text」でググると...。
How to place a text over image in react native?

Imageコンポーネントはchildrenを持てないようなので、
ImageBackGroundコンポーネントを使います。

実装まとめ

今回行った実装の一部です。
Imageコンポーネントに画像URLを渡していますが、
空文字やnullなどは怒られてしまうので条件分岐をさせて回避します。
これで作品画像にタイトルがオーバーレイしたリストを3カラムで表示させることができます。

return (
        {{ flex: 1, paddingTop: 20, backgroundColor: '#dddddd' }}
          contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
          data={store.getState().data}
          renderItem={(rowData)=>{
            let image
            if(rowData.item.node.image !== null){
              image = (
                
                  }}>
                    {{
                      fontWeight:'bold',
                      backgroundColor: 'rgba(255, 255, 255, 0.8)',
                      width:(Dimensions.get('window').width - 20) / 3 - 20

                    }}
                    numberOfLines={3}
                    ellipsizeMode="tail"
                  >{rowData.item.node.title}
                  
                  
              )
            }else{
              image = null
            }
            return (
              
                {image}
              
            )
          }}
          />
      )

ReactでGraphQL APIにアクセスする

2019-03-31T23:50:35+09:00

背景

AnnictのGraphQL APIからデータを取得したい！
参照：アニメ視聴遅れ管理サービスの開発

reactではどう実装するか

Apollo Clientが便利なようです。

Apollo Client + React 入門

必要なパッケージのインストール

npm install apollo-boost react-apollo graphql-tag graphql --save

ApolloClientの作成

エンドポイントを設定します。
アクセストークンをヘッダに設定します。

//APIエンドポイント
let url = let url = 'https://api.annict.com/graphql'

const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })

graphqlを記述する

このクエリは、ログインしているユーザ (viewer) の
見た作品 (state:WATCHED) をシーズン別降順 (orderBy: {field: SEASON, direction: DESC) でフィルタリングして返すという内容です。

let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`

当初はタイトル画像のようなクエリのアプローチをしていたのですが、annictのdiscordコミュニティでannict作者のshimbacoさんに「こう書くといいですよ」と教えていただきました。

最後に

とりあえずコンソールにログを出力するところまで。
これをstoreに入れて表示してreact dndでソートするところまでが目標。

export const fetchWatchedTitles=(code)=>{
    (async()=>{
        let url = 'https://api.annict.com/graphql'
        let query = gql`{
            viewer {
              works(state: WATCHED, orderBy: {field: SEASON, direction: DESC}) {
                nodes {
                  title
                  seasonName
                  seasonYear
                }
              }
            }
          }`
        const client = new ApolloClient({
            uri: url,
            request: operation => {
                operation.setContext({
                    headers: {
                        authorization: 'Bearer ' + code
                    }
                })
            }
        })
        let response = await client.query({
            query
        })
        if(response !== null){
            console.log(response.data.viewer.works.nodes)
        }
    })().catch(
        error=>{
          console.log(error);
        }
    )
}

参考リンク

AnnictのGraphQL APIを使ってアニメデータを取得しよう