明日になったら本気出せる

底辺Web系エンジニアの日記

「あわせて読みたい」を魔改造してみた その1

ブログに「あわせて読みたい」を実装した - exfreeterのブログ
http://exfreeter.hatenablog.com/entry/2013/12/27/004713

このエントリーをみてなんとなく暇つぶしにはてなブログで遊んでみた。(無断引用すみません)


左側にある何かが奴です。
おそろしいことにこいつは付いてきます。
f:id:gyouza_daisuki:20140105164703j:plain
こいつ・・・動くぞ・・・

スマホはテストしてません。多分うざいです。
気が向いたらスワイプとかやってみようかな。
ちなみに僕のブログには合わせて読みたい記事なんてないので使うことはなさそう。

コードはjquery使ってますがほぼコピペ。
少し怪しい動きをする時がありますがご愛嬌ということで。

<style>
#new_entries {
	display: none;
	position: fixed;
	top: 50px;
	left: -320px;
	z-index: 10000;
}

#new-entries-title {
	background: #4444EE;
	padding: 5px 5px 5px 5px;
	margin: 0px 0 10px 0;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	float: left;
}

#new-entries-articles.intro-article-wrapper a {
	text-decoration: none;
	color: #0085cd;
	font-weight: bold;
	font-size: 14px;
	font-color: white;
}

#new-entries-articles {
	width: 300px;
	float: left;
	background: #F0F0FF;
	border: 2px solid #DDDDFF;
	padding: 10px;
	height: 700px;
	overflow: auto;
}
</style>

<div id="new_entries"><div id="new-entries-articles"></div><div id="new-entries-title"><br /><br /><br /><br /><br /><br /><br /></div></div>

<script src="https://www.google.com/jsapi"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    var $ = window.$ || function(cb) {
        setTimeout(function() {
            $(cb)
        }, 100)
    };

    /* 自分のブログに合わせて変更 */
    var blogURL = "http://gyouza-daisuki.hatenablog.com/";
    var blogTITLE = "明日になったら本気出せる";
    var maxNUM = 5;
    var popularNUM = 2;

    google.load("feeds", "1");

    $(function() {
        arrayShuffle = function(arr) {
            var i = arr.length;
            while (i) {
                var j = Math.floor(Math.random() * i);
                var t = arr[--i];
                arr[i] = arr[j];
                arr[j] = t;
            }
            return arr;
        }

        var initialize = function() {
            var entry_list = new Array();
            var feeds = new Array();
            feeds.push(new google.feeds.Feed("http://b.hatena.ne.jp/entrylist?sort=count&mode=rss&url=" + blogURL));
            feeds.push(new google.feeds.Feed(blogURL + "/rss"));

            var c = 0;
            $.each(feeds, function(k, feed) {
                feed.setNumEntries(10);
                feed.load(function(result) {
                    if (result.error || result.feed.entries.length == 0) {
                        return;
                    }

                    entry_list = entry_list.concat(result.feed.entries);

                    if (++c == feeds.length) {
                        createHtml(entry_list);
                    }
                });
            });
        };

        var createHtml = function(entry_list)
        {
            if (!entry_list.length) {
                return '';
            }

            var resultEntries = new Array();
            for ( var x = 0; x < popularNUM; x++) {
                if (document.location.href.lastIndexOf(entry_list[0].link, 0) != 0) {
                    resultEntries.push(entry_list[0]);
                }
                entry_list.splice(0, 1);
            }

            /* シャッフル */
            entry_list = arrayShuffle(entry_list);

            for ( var x = 0; x < entry_list.length && resultEntries.length < maxNUM; x++) {
                /* ブラウザで対象エントリを表示している場合はスキップ */
                if (document.location.href.lastIndexOf(entry_list[x].link, 0) === 0) {
                    continue;
                }

                /* 既に結果リストに含まれていたらスキップ */
                var flg = false;
                for ( var y = 0; y < resultEntries.length; y++) {
                    if (resultEntries[y].link.lastIndexOf(entry_list[x].link, 0) === 0) {
                        flg = true;
                    }
                }
                if (!flg) {
                    resultEntries.push(entry_list[x]);
                }
            }

            /* 指定数のHTMLを生成 */
            var resultHtml = "";
            for ( var x = 0; x < resultEntries.length; x++) {
                var entry = resultEntries[x];
                var entryTitle = entry.title.replace('- ' + blogTITLE, '')

                /* HTML生成 */
                var html = '<div class="intro-article-wrapper" style="width: 100%; overflow:auto; margin-bottom:10px;">'
                    + '<a class="intro-article-img" href="' + entry.link + '" style="float:left;" rel="nofollow">'
                    + '<img src="http://capture.heartrails.com/150x130/shadow?' + entry.link + '" align="left" width="150" height="130" alt="' + entryTitle + '">'
                    + '<a class="intro-article-title" href="' + entry.link + '" rel="nofollow">' + entryTitle + '</a> <img src="http://b.hatena.ne.jp/entry/image/' + entry.link + '">'
                    + '<a href="http://tweetbuzz.jp/redirect?url=' + entry.link + '"><img src="http://tools.tweetbuzz.jp/imgcount?url=' + entry.link + '"/></a></div>';
                resultHtml += html;
            }
            $("#new-entries-articles").html(resultHtml);

            // 表示のイベントをバインド
            $('#new-entries-title').on('mouseenter', function() {
                $('#new_entries').animate({
                    'left' : 0
                }, "fast");
            });

            $('#new_entries').on('mouseleave', function() {
                $('#new_entries').animate({
                    'left' : '-320px'
                }, "fast");
            });

            $('#new_entries').show();
        };

        google.setOnLoadCallback(initialize);
    });
</script>










動作の実験するのに一々記事編集して公開するってやるのがめんどくさかったので、すごくやっつけで似非はてなブログphpで作った。

  • index.php作ってmod_rewriteで全部index.phpにぶっ飛とばす。
  • 同じディレクトリにあるtplファイルがあれば読み込んで表示する。http:~~~/test の場合test.tplを読み込む。
  • tplファイルがない、読み込めない場合は404を出力。

.htaccess

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]
RewriteRule ^.*$ index.php [NC,L]


index.php
読み込むcssは自分のブログに合わせて変更してください。

<?php
$css_globalheader = 'http://hatenablog.com/.shared.css:de41de6dec1a8b612c3ef150b5fd8ef6:/css/theme/base.css,/css/prettify.css,/css/globalheader.css';
$css_blog_style = 'http://hatenablog.com/-/blog_style/12921228815715228018/5a338ff9af14d7b2c56463889d9cb09ddf923b3f';

error_reporting(E_ALL);
ini_set('display_errors', 1);

function show_error404()
{
    header("HTTP/1.1 404 Not Found");
    exit('404 Not Found');
}

$request = preg_replace('#^.*/([^/]*)$#', '$1', $_SERVER['REQUEST_URI']);

if (!strlen($request))
{
    show_error404();
}

$file = __DIR__ . '/' . $request . '.tpl';

if (!is_readable($file))
{
    show_error404();
}

$data = file_get_contents($file);
?><!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="<?php echo $css_globalheader; ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo $css_blog_style; ?>" />

</head>
<body>
	<div id="container">
		<div id="container-inner">
			<header id="blog-title" data-brand="hatenablog">
				<div id="blog-title-inner">
					<h1 id="title">明日になったら本気出す</h1>

					<h2 id="blog-description">ローカルテスト用</h2>

				</div>
			</header>

			<div id="content" class="hfeed">
				<div id="content-inner">
					<div id="wrapper">
						<div id="main">
							<div id="main-inner">

								<article class="hentry entry js-entry-article date-first autopagerize_page_element chars-1600 words-200 hatena entry-odd">
										<header class="entry-header">
											<div class="date first">
											日付
											</div>
											<h1 class="entry-title entry-title-empty">
												タイトル
											</h1>

											<div class="categories no-categories"></div>
										</header>
										<div class="entry-content">
											<p>
												<?php echo $data; ?>
											</p>

										</div>
										<footer class="entry-footer">
											<p class="entry-footer-section">
												<span class="author vcard"><span class="fn">gyouza_daisuki</span></span>
												<span class="entry-footer-time">日付</span>
											</p>
											<div class="hatena-star-container"></div>

											<div class="customized-footer"></div>

										</footer>
									</div>
								</article>

							</div>
						</div>

						<aside id="box1">
							<div id="box1-inner"></div>
						</aside>

					</div>
					<!-- #wrapper -->
				</div>
			</div>
		</div>
	</div>
</body>
</html>