IMDBタグが使えなくなった

目次

• 経緯
  • なんで動いてない？
  • ちょっと機能を変えてみる
  • 修正
• テスト

経緯

前回プラグインをカスタマイズした記事を書いたのだが
その中のimdb.jsが動いていなかったので動かすついでにちょっと機能を足してみる。

なんで動いてない？

理由はすぐ分かった。imdbのサイトデザインが変更されたから動かなくなっただけ。

ちょっと機能を変えてみる

直すついでに機能を追加してみる。
今は下記のように書くと

{% owl imdb 'Ace Ventura: Pet Detective' %&#x7d

こんな感じで展開される。(と言っても今はできてないのだが・・)

<div class="owl-media owl-image owl-imdb">
    <div class="img-wrap">
        <img src="https://m.media-amazon.com/images/M/MV5BYmVhNmFmOGYtZjgwNi00ZGQ0LThiMmQtOGZjMDUzNzJhMGIzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_QL75_UY281_CR1,0,190,281_.jpg" alt="エース・ベンチュラ">
    </div>
    <div class="imdb-staff">
        <ul>
            <li>Title: エース・ベンチュラ</li>
            <li>Release Date: 1994</li>
        </ul>
    </div>
</div>

で、下のような感じにすると

{% owl imdb 'Ace Ventura: Pet Detective' detail %&#x7d

下のように展開される。

<div class="owl-media owl-image owl-imdb owl-imdb-detail">
    <div class="img-wrap">
        <img src="https://m.media-amazon.com/images/M/MV5BYmVhNmFmOGYtZjgwNi00ZGQ0LThiMmQtOGZjMDUzNzJhMGIzXkEyXkFqcGdeQXVyMTMxODk2OTU@._V1_QL75_UY281_CR1,0,190,281_.jpg" alt="エース・ベンチュラ">
    </div>
    <div class="imdb-staff">
        <ul>
            <li>Title: エース・ベンチュラ</li>
            <li>Rating: 6.9</li>
            <li>Release Date: 1994</li>
            <li>Time: GG</li>
            <li>Director: Tom Shadyac</li>
        </ul>
    </div>
</div>

修正

imdb.js

'use strict';

const cheerio=require('cheerio-httpcli');

module.exports = (hexo, args) => {
    /* search */
    let q=args[0];
    let showtype=args[1];
    let title=((q)=>{
        let titleArray=[];
        if(q.indexOf(" ")>0)
            titleArray=q.split(" ");
        else
            titleArray.push(q);
        let searchTitle="";
        for(let i=0;i<titleArray.length;i++){
            (i!=titleArray.length-1)?searchTitle+=titleArray[i]+'+':searchTitle+=titleArray[i];
        }
        return searchTitle;
    })(q);
    let movies=[];
    let searchurl='https://www.imdb.com/find';
    let searchoptions={
        s: 'tt',
        ttype: 'ft',
        ref_: 'fn_ft',
        q: title,
    };
    const result=cheerio.fetchSync(searchurl, searchoptions);
    if(result.error)
        return '<div class="owl-media owl-image owl-imdb"><img src="/assets/no-media.png" alt="no media"></div>';
    let $=result.$;
    $('.findResult').each(async (i, element)=>{
        const $image = $(element).find('td a img');
        const $title = $(element).find('td.result_text a');
        const imdbID = $title.attr('href').match(/title\/(.*)\//)[1];
        const movie = {
            image: $image.attr('src'),
            title: $title.text(),
            imdbID : imdbID
        };
        movies.push(movie);
        return false;
    });

    /* details */
    let detailurl='https://www.imdb.com/title/'+movies[0].imdbID+'/';
    let detailoptions={
        ref_:'fn_al_tt_1',
    };
    const result2=cheerio.fetchSync(detailurl, detailoptions);
    if(result2.error)
        return '<div class="owl-media owl-image owl-imdb"><img src="/assets/no-media.png" alt="no media"></div>';
    $=result2.$;
    var movieDetails = {
        title : $('.ipc-page-section--baseAlt h1').text(),
        year: $('.ipc-page-section--baseAlt ul.ipc-inline-list li:first-child span').text(),
        rating : $('.ipc-page-section--baseAlt .ipc-button__text span:first-child').eq(0).text(),
        time: $('.ipc-page-section--baseAlt ul.ipc-inline-list li:nth-child(2)').eq(0).text(),
        poster : $('.ipc-page-section--baseAlt .ipc-media img').attr('src'),
        release : $('.ipc-page-section--baseAlt ul.ipc-inline-list li:first-child span').eq(0).text(),
        director : $('.ipc-page-section--baseAlt ul.ipc-metadata-list li:first-child ul li:first-child a').eq(0).text(),
    }

    if(showtype=='detail'){
        return '<div class="owl-media owl-image owl-imdb owl-imdb-detail"><img src="'+movieDetails.poster+'" alt="'+movieDetails.title+'"><div class="imdb-staff"><ul><li>Title: '+movieDetails.title+'</li><li>Rating: '+movieDetails.rating+'</li><li>Release Date: '+movieDetails.release+'</li><li>Time: '+movieDetails.time+'</li><li>Director: '+movieDetails.director+'</li></ul></div></div>';
    }else{
        return '<div class="owl-media owl-image owl-imdb"><img src="'+movieDetails.poster+'" alt="'+movieDetails.title+'"><div class="imdb-staff"><ul><li>Title: '+movieDetails.title+'</li><li>Release Date: '+movieDetails.release+'</li></ul></div></div>';
    }
}

テスト

これで以下のように実行してみる。

$ cd $HEXO_HOME
$ rm db.json
$ hexo g

上のタグはちゃんと見えているかな？