Follow @papepo100
    

FC2ブログのスマホサイトでユーザタグを使える様にする方法-続き

ブログパーツ
0 0 2016/12/17
sptag.png前回の記事ではスマホサイトのフリーエリアプラグインにユーザタグのリストを出力するところまで説明しました。
ところが実際にタグのリンクをクリックしたところ予期せぬページに遷移してしまいます。
どうもFC2ブログのスマホサイトではユーザタグの機能自体がサポートされていないようです。。
仕方がないので、また、XMLHttpRequestを利用して、PCサイトから"?tag=XXX"で出力された結果を取得することにしました。

まず、スマホ用のテンプレートを開いて~内に以下の関数を用意します。(赤字箇所はPCサイトで利用しているテンプレートによって異なりますので適宜変更が必要です)
<script>
$(function() {
    paramstr= document.location.search.substring(1);
    params = paramstr.split("&");
    if (params[0] == "mp=218359" && params[2] == "sp") {
        $(".page_title").replaceWith($("<h2 class=\"page_title\" style=\"text-align:left;\">タグ:" + decodeURI(params[1]) + "</h2>"));
        var doc = new Object();
        var dom_parser = new DOMParser();
        var http = new XMLHttpRequest();
        http.open('GET', location.href.substring(0, location.href.indexOf("/")) + "?pc&tag=" + params[1], false);
        http.send();
        if (http.status == 200) {
            doc = dom_parser.parseFromString(http.responseText,"text/html");
        }
        tags = doc.getElementsByClassName('entory_about');
        for (i in tags) {
            doc = dom_parser.parseFromString(tags[i].innerHTML,"text/html");
            item = doc.getElementsByClassName('topentry_title');
            if (item.length > 0) {
                href = item[0].getElementsByTagName('a')[0].href;
                $("#tagview").append($("<h2 class=\"entry_title\"><a href=\"" + href + "?sp\"><span class=\"topentry_title_inner\">" + item[0].innerText + "</span></a></h2>"));
            }
            item = doc.getElementsByClassName('taglist');
            taglist = "";
            if (item.length > 0) {
                atags = item[0].getElementsByTagName('a');
                taglist = taglist + "<div class=\"taglist\">";
                for (j=0;j<atags.length;j++) {
                    if (j==0) {
                        taglist = taglist + "<a>" + atags[0].innerText + "</a>";
                    }
                    if ( j > 0 ) {
                        taglist = taglist + "<a href=\"" + location.href.substring(0, location.href.indexOf("/")) + "?mp=218359&" + atags[j].innerText + "&sp\">" + atags[j].innerText + "</a>"
                    }
                }
                taglist = taglist + "</a>";
                $("#tagview").append($(taglist));
            }
            item = doc.getElementsByClassName('topentry_text');
            if (item.length > 0) {
                $("#tagview").append($(item[0].outerHTML));
            }
        }

    }
});
</script>

sptag5.png次にスマホ用のプラグインにフリーエリアを作成して、フリーエリアの設定」で以下の様に変更します。
<div id="tagview"></div>


最後に前回作成したgetTagCloud()を以下の様に変更します。(赤字箇所は上記で作成されたフリーエリアプラグインによって変更する必要があります)
<script>
function getTagCloud() {
    var doc = new Object();
    var dom_parser = new DOMParser();
    var http = new XMLHttpRequest();
    http.open('GET', "<%url>?pc", false);
    http.send();
    if (http.status == 200) {
        doc = dom_parser.parseFromString(http.responseText,"text/html");
    }
    tags = doc.getElementsByClassName('plugin-tag');
    if (tags.length > 0) {
        document.write("<div class=\"tagcloud\">");
        tagsplit = tags[0].innerText.split(/\s/);
        for (i in tagsplit) {
            if (tagsplit[i]) {
                document.write("<a href=\"<%url>?mp=218359&" + tagsplit[i] + "&sp\">" + tagsplit[i] + "</a>    ");
            }
        }
        document.write("</div>");
    }
}
</script>

スタイルは必要に応じて以下をスマホ用スタイルシートのテンプレートを追加します。
.tagcloud {
    font-size:16px;
    width:95%;
}

.tagcloud a {
    display: inline-block;
}

sptag6.png 左図の様にユーザタグ毎に出力できました。
(出力件数は環境設定→ブログの設定→記事設定で記事(タグ検索結果)の表示件数をMAX(50件)にしています)
スポンサーサイト
このエントリーをはてなブックマークに追加

コメント

非公開コメント