ぬるぶろ

ブログ一覧の表示って結構やばいよね

成り立ちの第二弾です。

そうは言ってもソースが全公開されているので

「ソース読んでくれれば良いよ」

と言ってしまえばそれまでなんですが・・・

前の記事で生成したhtmlのコードをクローリングして

中のmetaタグ等からjsonデータを生成します

その生成したjsonデータをajaxで取得して

htmlとして書き出す

みたいなのがざっくりした流れです

まずはhtmlの解析ですが

ざっくりと以下のような感じですね

/**
 * ブログの読み込み
 * @param string $dirName
 * @param string $fileName
 * @return array
 */
function readBlog($dirName, $fileName) {
	$result = array();
	// fileを取得してくる
	$html = file_get_contents($dirName . DIRECTORY_SEPARATOR . $fileName);

	// DOMDocumentとして取得する
	$domDocument = new DOMDocument();

	// 読み込みを行う
	// @はエラー抑制の演算子
	@$domDocument->loadHTML($html);

	// xmlデータとして取得
	$xmlString = $domDocument->saveXML();
	$xmlObject = simplexml_load_string($xmlString);

	// 配列に変換
	$array = json_decode(json_encode($xmlObject), true);

	// 欲しいデータを取得
	$result['href'] = str_replace('..', '', $dirName . DIRECTORY_SEPARATOR . $fileName);
	$result['title'] = isset($array['head']['title']) ? $array['head']['title'] : '';
	$result['blogtype'] = preg_replace('/^\.\.\/blog/', '', $dirName);

	// metaデータを回してほしい情報を取ってくる
	if($array['head']['meta']) {
		foreach($array['head']['meta'] as $meta) {
			if(isset($meta['@attributes']) && isset($meta['@attributes']['name']) && $meta['@attributes']['name'] == 'createdate') {
				$result['date'] = $meta['@attributes']['content'];
				break;
			}
		}
	}
	return $result;
}

超簡単ですね！ｗ

後はjson_decodeで書き出せばおしまいです

/**
 * 書き出し
 */
function write() {
	// 順番の入れ替え
	usort(
		$this->result,
		function($a, $b){
			$a_time = strtotime($a['date']);
			$b_time = strtotime($b['date']);
			if($a_time === $b_time) {
				return 0;
			}
			return ($a_time < $b_time)? 1: -1;
		});
	file_put_contents(self::BLOG_PATH . DIRECTORY_SEPARATOR . 'index.json', json_encode($this->result));
}

fileの取得順で配列データが作られてしまうので

書き出しの直前に日付順でsortをしています

あとはblogを取得して生成する側ですね

これはmakelist.jsというのを作って対応しています。

jQueryとvue.jsを使って対応しています

jQueryにしてもvueにしても

ググったらいくらでも使い方が出てくるので

まあここには書かなくても良いかなと・・・

サンプルプログラムとしてお使い下さいな