読者です 読者をやめる 読者になる 読者になる

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

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

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

あわせて読みたい」を魔改造してみた その1
http://gyouza-daisuki.hatenablog.com/entry/2014/01/05/164204

前回の記事をノートPCで見てた時に気がついたんだけど、解像度が小さいと縦幅の関係上、下の項目が見れなかったりで残念なことが分かった。というわけで別に自分で使うつもりはないんだけどまたちょっと手を加えた。

  • 一定のウィンドウサイズが縦幅以下だと非表示。
  • いい感じに自動で高さを調節。
  • ウィンドウをリサイズ時も高さを調節する。

例のごとくスマホなんて知らない。


display:none;だと高さが取れないので、無理矢理left:-1000pxで画面外に追いやって高さ取得してたり。
アンチパターンな気がしないでもない。

しっかしjavascriptフリーだと色々遊べて楽しいなぁ。

<style>
#new_entries {
	position: fixed;
	top: 50px;
	left: -1000px;
	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 10px 0 10px;
	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);
            var baseArticlesHeight = $("#new-entries-articles").innerHeight();

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

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

            // 画面の高さにあわせて調節
            var adjustScreenHeight = function() {
                $('#new_entries').show();
                $('#new_entries').css('left', '-1000px');
                var titleHeight = $('#new-entries-title').innerHeight();
                var screenHeight = $(window).innerHeight() - 100;
                if (titleHeight > screenHeight) {
                    // スクリーンサイズが一定以下の場合非表示
                    $('#new_entries').hide();
                    return;
                }

                // 記事の配置調節
                if (screenHeight > baseArticlesHeight) {
                    $('#new-entries-articles').css('height', baseArticlesHeight);
                    $('#new_entries').css('height', baseArticlesHeight);
                    $('#new_entries').css('top', (screenHeight - baseArticlesHeight) / 2 + 50);
                } else {
                    $('#new-entries-articles').css('height', screenHeight);
                    $('#new_entries').css('height', screenHeight);
                    $('#new_entries').css('top', 50);
                }
                $('#new_entries').css('left', '-320px');
            };
            adjustScreenHeight();
            $(window).on('resize', adjustScreenHeight);
        };

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