2019-10-27に投稿

AnnictAccess3をリニューアルしました!

進捗的にはこの記事の続きなのですが、大幅にリニューアルを敢行しました。

サービスURL

https://annictaccessv3.netlify.com/

動作イメージ

今回の機能改善点

「アニメ選択」画面の実装

  • ランキングに追加中の番組の強調
  • 年を指定して番組一覧を表示

以前のバージョンでは全体から上位30位までを固定で抜き出してそれをソートする形でした。

視聴者数の表示

今回苦労したこと

画像取得に制限がある問題

  • 取得数を制限する
    →外部APIを探す
    →herokuにキャッシュさせる処理を書く
    if(isExistFile('./public/'+req.params.url +'.jpg')){
      res.sendfile('./public/'+req.params.url +'.jpg');
    }
    try {
    client.get('users/show',{screen_name: req.params.url},
        async(error, tweets, response)=>{
            if(error) return Promise.reject(error);
            console.log(response.statusCode)
            if(response.statusCode===200){
                  var json = JSON.parse(response.toJSON().body)
                  let imageRes = await fetch(json.profile_image_url);
                  downloadFile(json.profile_image_url,'./public/'+req.params.url+'.jpg')
                  res.redirect(json.profile_image_url);
              }
          })
  } catch (error) {
    console.error(error)
  }

未実装の機能

  • 映画版ランキングメーカー
    • the movie db APIからデータを取得する準備中です。
    • 日本語/英語両対応するかも?
  • twitterシェア機能

既知の不具合

  • 画像が読み込めなかった場合、クリックできる範囲が狭くなる
  • 画像取得の際にtwitterAPIの制限に引っ掛かる

今回使っている技術

ReactJS/Netlify

ReactJS...フロントエンドの画面や通信を司るjavascriptのフレームワーク
Netlify...Reactアプリなどを簡単にデプロイできるプラットフォームサービス

NodeJS/Heroku

NodeJS...サーバサイドjavascript。
Heroku...NodeJSやRailsなどサーバサイドアプリケーションをデプロイできるプラットフォームサービス

graphQL

サーバにデータを問い合わせるクエリ言語の一つ。
REST APIの後継と言われている。

 let query = gql`query {
          searchWorks(orderBy: {field: WATCHERS_COUNT, direction: DESC} seasons: ["${req.params.year}-spring","${req.params.year}-summer","${req.params.year}-autumn","${req.params.year}-winter"]) {
            edges {
              node {
                  title
                  seasonName
                  seasonYear
                  annictId
                  twitterUsername
                  watchersCount
              }
            }
          }
        }`
ツイッターでシェア
みんなに共有、忘れないようにメモ

ckoshien

個人開発5年目。普段はフロントエンドエンジニア。 ReactJS/NextJS/NodeJS/ReactNative/Java

Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

有料記事を販売できるようになりました!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?

コメント