Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8835

MyAnimListのアニメランキングをグラフ入りMDにする

$
0
0

使用例

個人的に、はてなブログで使っています。投稿する部分は割愛。

レポジトリ

https://github.com/and0ry0/myanimelist-email

前提

package.json
"dependencies":{"json2md":"^1.9.2","node-fetch":"^2.6.1",}

アニメオブジェクト

index.js
constfetch=require('node-fetch')functionconvertAnime(anime){constjaTitle=anime.title.replace('Shingeki no Kyojin','進撃の巨人')// 日本語翻訳適当ですいませんreturn{rank:anime.rank,url:anime.url,title:jaTitle,score:anime.score,start:anime.start_date,image_url:anime.image_url,members:anime.members}}

MDに変換

index.js
constconvertToMd=(anime)=>{return[{h2:anime.rank+'. '+anime.title+' ('+anime.members.toLocaleString('ja-JP')+'人視聴)'},{link:{title:'MyAnimeListで詳細を見る',source:anime.url}},{addImage:{title:'MyAnimeListのサムネ',source:anime.image_url}}{ul:['視聴者数: **'+anime.members.toLocaleString('ja-JP')+'人**','スコア: **'+anime.score,'放送開始時期: '+anime.start,]},{p:''/* 改行です */}]}

Jikan APIでランキング取得

詳しくはJikanのDocsを参照。

index.js
// Get anime rankingasyncfunctionMalRank(){// Jikan API https://jikan.docs.apiary.io/constres=awaitfetch('https://api.jikan.moe/v3/top/anime/1/bypopularity')constdata=awaitres.json()// アニメの配列を作るconsttopAnimes=data.top.map((anime)=>convertAnime(anime))constfirstAnime={title:topAnimes[0].title,members:topAnimes[0].members}constjson2md=require('json2md')// 画像とグラフを用意するjson2md.converters.addImage=function({title,source}){return'<img width="150px" title="'+title+'" src="'+source+'" />'}json2md.converters.animeGraph=function({rank,title,members}){// 相対的に長さを作るconstrelativeWidth=(members-topAnimes[10].members)/(firstAnime.members-topAnimes[10].members)return'<div class="graphBox"><div style="width: '+relativeWidth*100+'%;" class="title">'+rank+'. '+title+'</div><div class="members">'+members.toLocaleString('ja-JP')+'</div></div>'}// はてなブログ対策のspan https://blog.uchiten.info/entry/2017/01/30/174500conststyle=`<span></span><style>.graphBox{width:100%;display:flex;padding:.3em;margin:0 0 .2em;position:relative}.graphBox>.title{overflow:visible;white-space:nowrap;background:#add8e6;font-weight:700;padding:.3em}.graphBox>.members{color:gray;position:absolute;right:.3em;padding:.3em}</style></span>\n\n`constgraphMd=`## Top10はこんな感じ \n\n`+json2md(graphJson)+`\n\n11位のアニメの視聴者数を引いて、相対的にグラフを作っています。\n\n`constdataJson=topAnimes.map((anime)=>convertToMd(anime))constmainMd=json2md(dataJson)console.log(style+graphMd+mainMd)}MalRank();

Viewing all articles
Browse latest Browse all 8835

Trending Articles