首页 > Wordpress > Bangumi Api制作看番进度页面

Bangumi Api制作看番进度页面

2013年12月21日 发表评论 阅读评论

Bangumilogo最近看到有不少宅友博客里面有个页面显示的是自己的追番进度,然后看了一下,发现每个番的链接都是连到Bangumi番组计划上面去的,然后再谷歌搜了一下,发现原来有民间的大神自制研究了Bangumi的API,其github链接点这里;作为一个没什么php基础的人【嗯,寒假必须把这玩意搞熟!!握拳】,上网各种查资料捣鼓了半天,加上各种山寨,总算捣鼓出来了。。。可以查看补番页面


下面详细讲一下这个的过程:

首先就是github上面的API.txt文档,我们需要用到的是这里面的这部分东西:

3.获取目前追番信息:
!(需要认证信息
[GET] /user/{$UID/USERNAME}/collection?cat=watching
        获取时需要提供cat字段,目前理解为追番信息的分类,
        这个字段现在填写任何非空字符串都会给出同样的结果
        默认客户端采用 "watching" 暂时是API断头。
        此处使用{$USERNAME}也能正确返回信息
        [返回信息]
        格式:JSON
        [
                {
                        name: 番剧名称
                        ep_status: 追番集数
                        lasttouch: 上次更新时间
                        subject: {
                                id: 番剧ID (本文档中以 {$ID} 表示)
                                url: 链接到番剧的URL
                                type: 番剧类型(2=二次元番?)
                                name: 番剧名称(日文たぶん)
                                name_chn: 番剧汉化名(可能与name同)
                                summary: 番剧介绍
                                eps: 集数
                                air_date: 放映开始日期
                                air_weekday: 放映日(周)
                                        1 周一
                                        2 周二
                                        3 周三
                                        4 周四
                                        5 周五
                                        6 周六
                                        7 周日
                                images: {
                                        (不同大小的缩略图URL)
                                        large,common,medium,small,grid 
                                }
                                collection: {
                                        wish: 想要看的人数
                                        collect: 看过的人数
                                        doing: 正在看的人数
                                        on_hold: 搁置人数
                                        dropped: 弃番人数
                                }
                        }
                }
        ]
5.获取番组信息
[GET] /subject/{$ID}
        {$ID} = 番组ID,见上面

        [返回信息]
        格式: JSON
        {
                id: 番组ID {$ID}
                url: 番组URL
                type: 番组类型(2为二次元番?期刊?未研究)
                name: 名称(原)
                name_cn: 名称(中)
                summary: 番剧介绍
                eps:集数
                air_date: 首映日期
                air_weekday: 放映日(见上 1-7为周一-周日)
                images:
                   { large,common,medium,small,grid : 缩略图URI }
                collection:
                   { wish,collect,doing,on_hold,dropped : 收集信息(见上3)}
        }

说明一下,这个api文档最后更新是在三个月前,也就是9月的样子,但是经我测试,发现有些东西已经变了,获取目前追番信息里面划横线的是经我测试发现不能用的东西,然后获取番组信息里面更加是大量的信息不能用,所以我就改成现在可以用的版本了;

但是现在可以用,将来不一定还能适用;特此声明!!

也就是说,我们要获取追番的资料,就需要先向http://api.bgm.tv/user/XXXXX/collection?cat=watching发送请求,其中把XXX改成你的Bangumi账号;用的语句是:

$data = 
file_get_contents("http://api.bgm.tv/user/XXX/collection?cat=watch");

请注意:前面是api.bmg.tv,请别忘了api,我昨晚就是因为没写这个,然后半天拿不到数据。。。orz。。

你拿到的数据应该是这个样子的:【博文长度原因,下面的例子里面只有两部剧】

[
{"name":"\u751f\u5f92\u4f1a\u5f79\u54e1\u5171",
"ep_status":2,
"lasttouch":1387566514,
"subject":{"id":5649,
"url":"http:\/\/bgm.tv\/subject\/5649",
"type":2,
"name":"\u751f\u5f92\u4f1a\u5f79\u54e1\u5171",
"name_cn":"\u5984\u60f3\u5b66\u751f\u4f1a",
"summary":"",
"eps":13,
"air_date":"2010-07-03",
"air_weekday":6,
"images":{"large":"http:\/\/lain.bgm.tv\/pic\/cover\/l\/33\/7c\/5649_Xu6y3.jpg",
"common":"http:\/\/lain.bgm.tv\/pic\/cover\/c\/33\/7c\/5649_Xu6y3.jpg",
"medium":"http:\/\/lain.bgm.tv\/pic\/cover\/m\/33\/7c\/5649_Xu6y3.jpg",
"small":"http:\/\/lain.bgm.tv\/pic\/cover\/s\/33\/7c\/5649_Xu6y3.jpg",
"grid":"http:\/\/lain.bgm.tv\/pic\/cover\/g\/33\/7c\/5649_Xu6y3.jpg"},
"collection":{"wish":0,
"collect":0,
"doing":121,
"on_hold":0,
"dropped":0}}},

{"name":"\u306e\u3093\u306e\u3093\u3073\u3088\u308a",
"ep_status":0,
"lasttouch":1387547571,
"subject":{"id":78405,
"url":"http:\/\/bgm.tv\/subject\/78405",
"type":2,
"name":"\u306e\u3093\u306e\u3093\u3073\u3088\u308a",
"name_cn":"\u60a0\u54c9\u65e5\u5e38\u5927\u738b",
"summary":"",
"eps":12,
"air_date":"2013-10-07",
"air_weekday":1,
"images":{"large":"http:\/\/lain.bgm.tv\/pic\/cover\/l\/47\/fa\/78405_jQz4x.jpg",
"common":"http:\/\/lain.bgm.tv\/pic\/cover\/c\/47\/fa\/78405_jQz4x.jpg",
"medium":"http:\/\/lain.bgm.tv\/pic\/cover\/m\/47\/fa\/78405_jQz4x.jpg",
"small":"http:\/\/lain.bgm.tv\/pic\/cover\/s\/47\/fa\/78405_jQz4x.jpg",
"grid":"http:\/\/lain.bgm.tv\/pic\/cover\/g\/47\/fa\/78405_jQz4x.jpg"},
"collection":{"wish":0,
"collect":0,
"doing":980,
"on_hold":0,
"dropped":0}}}]

拿到数据后,解析,然后得到有多少个条目:

$data = json_decode($data, true);
$numb = count($data);

然后就是一个for语句逐个输出;

你要获得每个番剧的某个特定信息,比如说第i部剧的首播日期的话,根据上面的文档,那么就是:

$data[$i]['subject']['air_date']

其他信息也是以此类推~

我的页面里面还添加了番剧简介,所以需要再用番组信息去获取简介,其实也就是向http://api.bgm.tv/subject/{$ID}去获取信息,返回来的结果如下所示:

{"id":78405
"url":"http:\/\/bgm.tv\/subject\/78405"
"type":2
"name":"\u306e\u3093\u306e\u3093\u3073\u3088\u308a"
"name_cn":"\u60a0\u54c9\u65e5\u5e38\u5927\u738b"
"summary":"\u4f5c\u54c1\u821e\u53f0\u662f\u4e00\u4e2a\u6302\u8457\u201c\u725b\u7ecf\u8fc7
\u6ce8\u610f\u201d\u7684\u770b\u677f\uff0c\u516c\u8f66\u4e0d\u7b49\u4e0a5\u4e2a\u5c0f
\u65f6\u4e0d\u4f1a\u6765\u7684\u4e61\u4e0b\u519c\u6751\uff0c\u800c\u4e3b\u89d2\u4e00
\u6761\u8424\u56e0\u7236\u4eb2\u5de5\u4f5c\u8c03\u804c\u7684\u5173\u7cfb\u4ece\u4e1c
\u4eac\u8fc1\u5c45\u6b64\u5730\uff0c\u6545\u4e8b\u5373\u662f\u63cf\u5199\u8424\u4e0e
\u8d8a\u8c37\u59d0\u59b9\u53ca\u5bab\u5185\u59d0\u59b9\u6e21\u8fc7\u7684\u65e5\u5e38
\u5149\u666f\u3002"
"eps":12
"air_date":"2013-10-07"
"air_weekday":1
"images":{"large":"http:\/\/lain.bgm.tv\/pic\/cover\/l\/47\/fa\/78405_jQz4x.jpg"
"common":"http:\/\/lain.bgm.tv\/pic\/cover\/c\/47\/fa\/78405_jQz4x.jpg"
"medium":"http:\/\/lain.bgm.tv\/pic\/cover\/m\/47\/fa\/78405_jQz4x.jpg"
"small":"http:\/\/lain.bgm.tv\/pic\/cover\/s\/47\/fa\/78405_jQz4x.jpg"
"grid":"http:\/\/lain.bgm.tv\/pic\/cover\/g\/47\/fa\/78405_jQz4x.jpg"}
"collection":{"wish":132
"collect":17
"doing":980
"on_hold":26
"dropped":33}}

模仿上面的获取信息方式,很容易就得到简介:

$id = $data[$i]['subject']['id'];
$bangumiurl = 'http://api.bgm.tv/subject/'.$id;
$summary = file_get_contents($bangumiurl);
$summary = json_decode($summary, true); 
$summary = $summary['summary'];

然后讲一下怎么制作页面,其实自定义Wordpress页面网上资料很多,随便一找就一大堆。。。

首先我们先把主题的页面文件拿出来,page.php,然后将其复制到一个新文件里面,这个新文件命名为page-bangumi.php;为了让Wordpress认识这个页面模板,需要在最上面添加:

<?php
/*
Template Name: Bangumi Page
*/
?>

这样你就可以在新建页面的时候,在页面模板里面看到Bangumi Page了;

然后找到正文部分:

<div class="content">
<?php the_content(); ?>
<div class="fixed"></div>

你要删掉也行,留下也行【删掉的话,你建立页面后,不管你再写什么,实际页面中都不会显示出来】;

在这附近添加上以下示例代码即可:

<?php
$data = 
file_get_contents("http://api.bgm.tv/user/XX/collection?cat=watch");
$data = json_decode($data, true); 
$numb = count($data);
for ($i=0; $i<$numb; $i++) {
  $id = $data[$i]['subject']['id'];
  $bangumiurl = 'http://api.bgm.tv/subject/'.$id;
  $summary = file_get_contents($bangumiurl);
  $summary = json_decode($summary, true); 
  $summary = $summary['summary'];
  
  $weekday = $data[$i]['subject']['air_weekday'];
  $weekday = 
     str_replace(array("1","2","3","4","5","6","7"),
     array("周一","周二","周三","周四","周五","周六","周日",),
     $weekday);
  
  $bankumitype = $data[$i]['subject']['type'];
  $bankumitype = 
  str_replace(array("2","6"),array("二次元","三次元",),$bankumitype);
  
  
  if ($data[$i]['subject']['eps']=="0") {
          $eps = "??";
  } else {
          $eps = $data[$i]['subject']['eps'];
  }
  
  
  echo '
  <a target="_blank" rel="nofollow" 
      href="'.$data[$i]['subject']['url'].'" 
      class="list-group-item">
  <p class="pull-left">
      <img src="'.$data[$i]['subject']['images']['medium'].'" 
           alt="'.$data[$i]['subject']['name_cn'].'">
  </p>
  <p class="list-group-item-text">
      <strong>'.$data[$i]['name'].'</strong>
      <small class="text-muted">
          '.$data[$i]['subject']['name_cn'].'
      </small><br>
  <p class="text-muted">
      <span class="glyphicon glyphicon-type"></span>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型: '.$bankumitype.'.</p>
   <p class="text-muted">
       <span class="glyphicon glyphicon-calendar"></span>
        首播时间:'.$data[$i]['subject']['air_date'].'
   </p>
   <p class="text-muted">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;放送日:'.$weekday.'
   </p>
   <p class="text-muted">
        <span class="glyphicon glyphicon-expand"></span>
        观看进度:'.$data[$i]['ep_status'].'/'.$eps.'
   </p>
   <p class="text-muted">
        <span class="glyphicon glyphicon-user"></span>
    有'.$data[$i]['subject']['collection']['doing'].'人也正在看
   </p>
   <p class="text-muted">
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp最后更新:
       '.date('Y-m-d',$data[$i]['lasttouch']).'
   </p>
   <p class="text-muted">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp简介:  '.$summary.'
   </p>
  </p>
</a>';
}
?>

上面用了一些CSS里面自定义的标签,其实我是从别人那里扒下来的,下面贡献上这部分CSS:

.list-group-item-text strong{
  color:#555;
  font-weight:bold;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 17px;
}

.text-muted{
color:#999;
  font-size:16px;
}

.text-muted span{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
}

.pull-left{
float:left!important
}

.glyphicon{
position:relative;
top:1px;
display:inline-block;
font-family:'Glyphicons Halflings';
-webkit-font-smoothing:antialiased;
font-style:normal;
font-weight:normal;
line-height:1
}

a.list-group-item{
color:#555
}
a.list-group-item .list-group-item-heading{
color:#333
}
a.list-group-item:hover,a.list-group-item:focus{
text-decoration:none;
background-color:#f5f5f5
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus{
z-index:2;
color:#fff;
background-color:#428bca;
border-color:#428bca
}

.list-group-item
{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
line-height: 1.428571429;
height: 145px;
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
color: #555;
}

后话:我发现获取简介的时间需要超久。。。所以我就把这部分给删掉了。。

4月
07

发现一个问题,获取回来的列表最大长度是50。。。。摸索其他API中。。。


【完】

本文内容遵从CC版权协议,转载请注明出自http://www.kylen314.com

分类: Wordpress 标签: , , ,
  • 好教程,我得学习学习!

    • 你的博客主题不是自带这个的么。。

      • 那是Thiece提供的

        • 嗯,我知道我才这么说的。。

  • 感觉你的博客主题对宽屏的支持不够理想

    • 其实我暂时还对这部分不是很了解。。。。我不久前才开始接触前端这方面的说。。。

      • 其实我也对代码不会,然后只是因为自己以前从事的有关于设计然后就留下了一些奇怪的视觉癖好

        • 你指的宽屏的支持是中间这部分要随着屏幕宽度改变而改变是么?

          • 额,也不是,你的版是很久以前的那种标准的980px的版型了,当时是因为显示器分辨率的问题才这样设计的,现在也是经过1002px、1200px的过渡,有些已经适应了1600px了。自适应的也不少了,我想说的是由于我的显示器是1080P的,只有中间那么一小点点感觉真的不太好

            • 额。。。我这个站刚搬过来一个月,还没有人跟我提及过这个问题。。。过阵子研究一下。。。【其实我建站都现在一直都是看别人的主题代码来学习,完全还么系统学习过这方面的东西。。】我可以想象到1080P显示的中间只有一半都不到的奇怪感觉。。

  • 有了这个,在也不怕丢番了。

    • 我觉得这个主要是告诉别人自己在追啥番,至于丢番这事,我觉得作用不大。。

  • 我也去申请个

    • 我做了这个页面,但是发现最近看了番其实都完全不会去bgm那里更新。。

      • 到bgm那里看番可以吗

        • 好像不行的吧。。它就是一个类似二次元向豆瓣性质的平台吧。。【其实我逛得不多。。】。。

          • 额额我留意到了,要自己更新进度,这个就麻烦了点,谢谢

            • 如果有哪位大神做了chrome里面的bilibili助手可以更新BGM的进度的话,那就太好了。。

  • 我想问下 这个是如何更新进度的? 我是记录看番进度是用这个:a.geass.org 类似一个记事本的感觉 刚刚请人加了点功能 感觉还不错。像我看动漫从来都是去极影等网站下载720P以上的放在液晶电视上看,所以一般不会去bgm这类型的网站上看。

    • 我目前更新进度是去bgm更新【虽然都是过好长一段时间一口气去更】还有一种方法就是上面github里面有设置进度的API,不过我没试验,也不知道过时了没,你可以研究一下~我是一般都是在B站看,然后喜欢的再去下下来收藏。。你那个也很不错的说~不过wordpress可以用么?你用的是EMLOG?

      • 是单独一个php小程序,和博客没关系。是emlog来的

        • 哦?有空去拿来研究一下。。。

  • 为什么 这么喜欢用 for....

    • PHP里面用for不好么?那应该怎么弄?

      • 我一般用foreach的/w

        • 哦~其实我php水平现在还处于看过几天书的那种。。对foreach这个有印象,但是还没有主动去用的自觉。。而且当时研究这篇的时候我还是第一次接触PHP。。

          • foreach ($array as $k => $v) 如果要写的话 窝都是这样写乃那种的。

          • 不愧是菊苣。

            • 才不是菊苣呢。。没有要用php的需求,所以就没动力去好好学。。。写主题什么的好像也好麻烦的样子【就是懒。。

              • /w 窝页很懒的说。

  • 其实我很想知道怎么获取认证……不知道怎么发送,尝试每次都是400

    • 认证那部分没测过,嘛,不过API那部分一直在变,失效了也正常。。或者你把代码放出来看看?

      • 表示基本不知道该怎么送信息

        • 用PHP的file_get_contents,设置要填的信息,然后发一个POST请求?应该是这个吧

          • 应该吧,但我貌似发送的数据格式不对还不知道是啥,果断放弃不挣扎了……其实我php基本上还只停留在if、for的水平……

            • 发送的参数有可能已经改了。。如果是函数使用问题的话,可以参考http://stackoverflow.com/questions/5647461/how-do-i-send-a-post-request-with-php

              • 嗯,我就是按这个方法送的,估计是我哪里弄错了吧……stackoverflow以前我在自己学校一直没加载出来过,今天竟然秒开……

                • 也可能是官方改了。。过两天搬完砖我用python测一下。。

  • 过来踩踩