おーぷん２ちゃんねるのスレ情報やレス情報をオブジェクト形式で取得する

Op2obj.js

//////////////////////////////////////////////////////////////////////////
//
//@title 
//@description おーぷん２ちゃんねるのスレ情報をオブジェクト形式で取得する
//@include http://*.open2ch.net 
//@private
//
//作った人: Awn(@Awn_tw)
//
//改定履歴
//-20161030(ver 1.0.0): なんとなく作ってみた
//
//諸注意
//-ご利用は自己責任でお願いします。
//-スクリプトは予告なく修正または廃止されることがあります。
//-コンソールでしか動かない、と思います。
//-悪用は厳禁です。
//-改造改良改悪はご自由にどうぞ。
//
//////////////////////////////////////////////////////////////////////////


var Op2obj = {
	info : {},
	res : []
}
//最終的にこのオブジェクトにデータを突っ込む
/*
	infoはObject形式でスレタイやURLなど
	resは配列で、配列の要素はオブジェクト形式で
	レス番号1番から順に、
		レス番号
		名前
		タイムスタンプ
		ID
		レス本文
	が格納されている。
*/


/*
参考
	dl要素 : Description List Element
	dt要素 : Definition Term Element
	dd要素 : Description Element
	 ※詳しくはMDNを見よう -> https://developer.mozilla.org/ja/docs/Web/HTML/Element


なお、おーぷん2chのスレの中のレスは、だいたい以下のような構造となっている。

<!-- Content -->
	<div class="thread">
		<dl>
			<dt></dt>
			<dd></dd>
		</dl>
		<dl>
			<dt></dt>
			<dd></dd>
		</dl>
		<dl>
			<dt></dt>
			<dd></dd>
		</dl>
	</div>
<!-- /Content -->


構造は上記の通りであるが、以下のCaseごとにattributeが若干違うらしい。
[Case: スレを開いた直後またはブラウザの更新ボタン押下時]
	<dl>
		<dt res="レス番号"></dt>
		<dd class="idなんちゃら mesg"></dd>
	</dl>
[Case: 新着レス自動読み込み表示時]
	<dl class="hide" stype="display: block;">
		<dt class="idなんちゃら mesg"></dt>
		<dd class="idなんちゃら mesg"></dd>
		<br>
	</dl>

*/


//Op2obj.infoの中身
var _url      = document.querySelector("link[rel='canonical'").href;
var _hostname = location.hostname;
var _bbsname  = _url.split("/")[5];
var _surekey  = _url.split("/")[6];

Op2obj.info = {
	url      : _url,
	hostname : _hostname,
	bbsname  : _bbsname,
	surekey  : _surekey
}


//スレのレスを取得する
var _dthread  = document.querySelector(".thread");
var _dl = _dthread.getElementsByTagName("dl"); 
var _dl_len = _dl.length;

var _dt = [];
var _dd = [];
var _dti;

//Op2obj.resの中身は以下の情報が格納されている。
var _num;
var _name;
var _time;
var _id;
var _text;


//dlをdtとddに分解する
for(var ix = 0; ix < _dl_len; ix++){
	_dt.push( _dl[ix].getElementsByTagName("dt")[0] );
	_dd.push( _dl[ix].getElementsByTagName("dd")[0] );
}

//dtの中身を更に分解してOp2obj.resに格納する
//ddは要素毎にinnerTextしてOp2obj.resに格納する
for(var ix = 0; ix < _dl_len; ix++){
	_dti = _dt[ix].innerText;
	_dti = _dti.split("：");

	_num  = _dti[0].match(/[0-9]*/)[0];
	_name = _dti[1].substr(_dti.length-1) === " " ? _dti[1].substr(0,_dti.length-1) : _dti[1];
	_time = _dti[2].split(" ID:")[0];
	_id   = _dti[2].split(" ID:")[1].split(" ")[0];
	_text = _dd[ix].innerText;

	Op2obj.res.push( {
		num  : _num, 
		name : _name,
		time : _time,
		id   : _id,
		text : _text
	});
}

ちょっといけてないので書き換えます

書き換えというか

抜粋です。
ref: https://github.com/awn-git/Abrowzer/blob/develop/js/sure.js

このスクリプトはどこでなにがどうなる？

• おーぷん２ちゃんねるのスレ(read.cgi) 配下で
• コンソールなどで実行すると
• 関数の戻り値でスレタイやURL、名前欄・メール欄・ID・レス本文などを格納したオブジェクトを返す

注意点？

http://hayabusa.open2ch.net/test/read.cgi/news4vip/1480144511/ を例にとると

• http://hayabusa.open2ch.net/test/read.cgi/news4vip/1480144511/ の場合、実行時時点の全レスを取得する
• http://hayabusa.open2ch.net/test/read.cgi/news4vip/1480144511/l50 の場合、>>1および最終50レス + (自動更新時に追加されたレス) を取得する
• とりあえず見ているページの表示されているレスに関しては全レス取得する
• 関数自体に再読み込み機能はないので、新着レス更新時は再度関数を実行すると、新着レスも含めて全レス取得します
• bbsname -> 例) news4vipという文字列(//note: 一般的にはboardnameっぽい。:confused: でもおーぷんのスレ(read.cgi)のscriptタグにはbbsと書いてある。:confused: )
• bbsnameJ -> 例) ニュー速VIPという文字列

(function(d) {
    //member
    var _obj = {
        info: {},
        res: []
    };


    //init
    _init();


    //method
    function _init() {
        _obj.info = _getPageInfo();
        _obj.res = _getResObj();
    }

    function _getPageInfo() {
        var url = d.querySelector("link[rel='canonical'").href;
        var bbsname = url.match(/^.*open2ch.net\/test\/read.cgi\/(.*)\/[0-9]{10}\//)[1];
        var bbsnameJ = d.getElementsByClassName("thread-box-links")[0].children[0].innerText;
        var suretai = d.title;

        return {
            bbsname: bbsname,
            bbsnameJ: bbsnameJ,
            url: url,
            suretai: suretai
        }
    }

    function _getResObj() {
        var obj = {
            dt: d.querySelectorAll("div.thread  dt"),
            dd: d.querySelectorAll("div.thread  dd"),
            res: []
        };
        obj.res = _parseThread(obj.dt, obj.dd);
        return obj;
    }

    function _parseThread(dt, dd) {
        var arr = [];
        var parse_dt = _parseDT(dt);
        var parse_dd = _parseDD(dd);

        for (var ix = 0, len = parse_dt.length; ix < len; ix++) {
            arr.push({
                name: parse_dt[ix].name,
                mail: parse_dt[ix].mail,
                id: parse_dt[ix].id,
                text: parse_dd[ix]
            });
        }
        return arr;
    }

    function _parseDT(dt) {
        var arr = [];
        var temp1;
        var temp2;
        var dt_regexp1 = new RegExp(/^[0-9]{1,4} ：(.*?) ?：.* ID:(.*$)/);
        var dt_regexp2 = new RegExp(/<a href="mailto:(.*?)">/);
        for (var ix = 0, len = dt.length; ix < len; ix++) {
            temp1 = dt[ix].innerText.match(dt_regexp1);
            temp2 = dt[ix].outerHTML.match(dt_regexp2);
            arr.push({
                name: temp1[1],
                id: temp1[2].replace("(主)", "").replace(" ", "").replace("×", ""),
                mail: temp2 === null ? null : temp2[1]
            });
        }
        return arr;
    }

    function _parseDD(dd) {
        var arr = [];
        var str;
        for (var ix = 0, len = dd.length; ix < len; ix++) {
        	//note: 一番楽なのはinnerTextだがしっかり処理をするならばinnerHTMLを使うべき
            str = dd[ix].innerText;
            arr.push(str);
        }
        return arr;
    }


    //api
    return _obj;
})(document);