アメブロ「いいね！」機能を使うためのChrome拡張を作ってみた

JavaScript

先月末あたりに、スマートフォン版アメーバブログに新機能として「いいね！」というのが加わったらしい。

どうやらスマートフォン専用の機能となっているようで、スマフォで記事にアクセスした際にのみ「いいね！」ボタンが現れ、PCブラウザからは通常は利用出来ないようになっているようだ。

多くのアイドルちゃんが利用しているアメーバブログ、巡回ついでに「いいね！」つけて回りたいのだけど、わざわざそれだけのために手元のiPhoneからアクセスし直すのも面倒。PCからもアイドルちゃんたちのブログ記事に「いいね！」したい。

調べてみたところ、この「いいね！」ボタンはスマフォ版の"s.ameblo.jp"でのみ表示されるが、これはiframeで"iine.blog.ameba.jp"ドメイン下にあるボタン専用ページを開いているようだ。このページはリファラを見ているようで直にアクセスしてもはじかれる。ちゃんとtokenも含められていて、単純なリクエスト送るだけではダメそうだ。しかもスマフォ専用で作られているのでそもそもtouchイベントでしか動作しなくてマウスclickでは反応してくれない。

ということで、「別ドメインのiframe表示」「touchイベントでの作動」の壁があり単純なブックマークレットのようなものでは「いいね！」操作までもっていくのは厳しそう。
ということでChrome拡張で解決することにした。

https://chrome.google.com/webstore/detail/ameblo-iine/ibkpojlidegdenhnachgoegalbbkiljm

manifest.jsonはこんなカンジで、

{
    "manifest_version": 2,
    "name": "ameblo-iine",
    "description": "This extension enables 'iine!' on ameba blog",
    "version": "1.0.1",
    "content_scripts": [
        {
            "matches": ["http://ameblo.jp/*"],
            "js": ["zepto.min.js", "iine.js"]
        },
        {
            "matches": ["http://iine.blog.ameba.jp/*"],
            "js": ["mouse2touch.js"],
            "all_frames": true
        }
    ]
}

ブログ記事("ameblo.jp"ドメイン)を開いたときに記事タイトルとなる要素を見つけ、対応する「いいね！」ボタンページのiframeを差し込むようにする。

$('h3.title a, a.skinArticleTitle').each(function (i, a) {
    var url = $(a).attr('href');
    var m = url.match('/([^/]+?)/entry-([0-9]+)\.html');
    if (m) {
        $(a).after(
            $('<iframe>').attr({
                src: 'http://iine.blog.ameba.jp/web/display_iine.html?receiveAmebaId=' + m[1] + '&entryId=' + m[2] + '&from=entry&device=sp&skinCode=',
                width: '100%',
                height: '65',
                style: 'border: 0;'
            })
        );
    }
});

iframeの中身となる"iine.blog.ameba.jp"ドメインではマウスクリックをtouchイベントに変換するJSだけ読み込ませておく。

document.addEventListener("mouseup", function (e) {
    var event = document.createEvent("Event");
    event.initEvent("touchend", true, true);
    e.target.dispatchEvent(event);
}, false);

みたいなかんじで大丈夫なようだ。これはiframe上でも動作してもらわないと困るので、manifest.jsonで"all_frames": trueと指定するのが大事。


とりあえずこれだけで一通りのアメブロ記事のページでタイトル下に「いいね！」ボタンが表示され、クリックするだけで「いいね！」できるようになった。


ブログテーマによっては記事タイトルの要素が見つけられずに失敗することがあるかもしれない。あとブログ主の設定によって「いいね！」を許可していない場合もあるので、その場合は無駄な空白ができてしまうようだ。まぁ気にしなくていいかな…。