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

ひとり部長のひとりごと

社会人1年目で社内起業を始めたひとり部長がその経験を語ります。Mac関連もつぶやきます。映画のレビューはサブブログに移行しました。世の中の明るいニュースだけをまとめたエントリーも始めました。

【永久保存版】さらに最強のリンクシェア用ブックマークレットを作った【まだ進化するかも】

HTML/CSS Javascript

こんにちはw

つい2日前に最強のブックマークレットと冠して投稿しましたが、さらに便利なものを作ったので紹介します。

今回は、

ページ内で選択したら、そのblockquoteも合わせて表示してくれるものです。

御託はいらないのでちゃちゃっといきましょう。

一つ前のエントリーで例を出します。

表示例

以下のように表示してくれます。

こいつと、前回のツイッターはてぶシェア機能付きリンクカード生成ブックマークレットと合わせれば、「ツイッターはてぶシェア機能および読者登録ボタン付きリンクカード生成ブックマークレット」が完成します。もちろん、はてなサービスではないページに適用しても、読者ボタンは出てきません。

便利でしょ?^^

超便利でしょ?

アドレスに貼り付けるJSブックマークレット

あとでコピペでおkにしますが、ここでちょっとだけ解説

javascript: (function() {
 //はてなブログの情報を取得して、読者ボタンにする。
    function author() {
        var pi = document.getElementsByTagName('html');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {
                return pi[i].getAttribute("data-author");
            }
        }
        return "";
    }
    function blog() {
        var pi = document.getElementsByTagName('html');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {
                return pi[i].getAttribute("data-blog");
            }
        }
        return "";
    }
 //Facebook用のサムネイルを取得。何もなかった場合、ファビコンを取得、それもなかった場合、空で表示
    function productImg() {
        var f = document.evaluate('//link[(@rel=\'icon\') or (@rel=\'shortcut icon\') or (@rel=\'ICON\') or (@rel=\'SHORTCUT ICON\')][1]/@href', document, null, XPathResult.STRING_TYPE, null);
        var u = f.stringValue; 
        var favicon = (u == '') ? 'http://' + location.host + '/favicon.ico' : (u.substring(0, 7) != 'http://') ? 'http://' + location.host + '/' + u : u;
        var pi = document.getElementsByTagName('meta');
        for (i = 0; i < pi.length; i++) {
            if (pi[i].getAttribute("property") == "og:image") {
                return pi[i].getAttribute("content");
            }
        }
        return favicon;
        return ""; //←ここの""の中に好きな画像をいれれば何もなかった場合の表示ができます。Noimageの画像とか。
    }
    var author = author();
    var blog = blog();
    var ogimg = productImg();
 //ページのタイトルを取得します
    var title = document.title;
 //ページの説明を取得します何もなかった場合、urlを記載します
    var desc = document.getElementsByName('description').item(0) ? document.getElementsByName('description').item(0).content : document.location.href;
   //URLを取得します 
 var url = window.location.href;
 //引用部分の取得です。何も選択されない状態だと、表示されないようにしています。
    var bqBefore = "";
    var bqAfter ="";
    var selection = getSelection();
      if(selection.rangeCount > 0){
        var bqBefore = "<blockquote>";
        var bqAfter ="</blockquote>"+'\n\n';
      }
    var blockquote = bqBefore+selection+'\n\n';
 //ブックマークレットを押した時に抽出するhtmlコードを設定しています。
    var card = '\n'+blockquote+'<!--' + title + '--><div class="article"><div class="image"><a href="' + url + '"><img src="' + ogimg + '"></a></div><div class="caption"><div class="pagetitle"><a href="' + url + '">' + title + '</a></div><div class="description"><a href="' + url + '">' + desc + '</a></div></div><div class="tweet"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\'' + title + '%20' + url + '\');"><img src="https://goo.gl/Y4BWro"></a></div><div class="hatena"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/' + url + '\');"><img src="https://goo.gl/5zeLZG"></a></div><div class="line"><a href="javascript:window.location=\'line://msg/text/\'+encodeURIComponent(\''+title+'\')%20+encodeURIComponent(\''+url+'\');"><img src="https://goo.gl/1u9vcm"></a></div><div class="iframe"><iframe src="http://blog.hatena.ne.jp/' + author + '/' + blog + '/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe></div></div>'+bqAfter+'\n';
   //ブックマークレットを押した時にポップアップでコピーできるように表示します 
 window.prompt("コピー", card);
})();

と、こんな感じで必要な要素が諸々盛り込まれています。 本当はもっと記述内容をへらすことはできるんだけど ・・・・疲れた。

というわけで、コピペーで簡単にできるように一行に直したのが次です。どうぞ。

javascript: (function(){function author() {var pi = document.getElementsByTagName('html');for (i = 0; i < pi.length; i++) {if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {return pi[i].getAttribute("data-author");}}return "";}function blog() {var pi = document.getElementsByTagName('html');for (i = 0; i < pi.length; i++) {if (pi[i].getAttribute("data-admin-domain") == "http://blog.hatena.ne.jp") {return pi[i].getAttribute("data-blog");}}return "";} function productImg(){var f = document.evaluate('//link[(@rel=\'icon\') or (@rel=\'shortcut icon\') or (@rel=\'ICON\') or (@rel=\'SHORTCUT ICON\')][1]/@href', document, null, XPathResult.STRING_TYPE, null);var u = f.stringValue;var favicon = (u == '') ? 'http://' + location.host + '/favicon.ico' : (u.substring(0, 7) != 'http://') ? 'http://' + location.host + '/' + u : u;var pi = document.getElementsByTagName('meta');for (i = 0; i < pi.length; i++) {if (pi[i].getAttribute("property") == "og:image"){return pi[i].getAttribute("content");}} return favicon; return "https://goo.gl/p73TWY"; } var author = author(); var blog = blog();var ogimg = productImg();var title = document.title;var desc = document.getElementsByName('description').item(0) ? document.getElementsByName('description').item(0).content : document.location.href; var url = window.location.href; var bqBefore = ""; var bqAfter =""; var selection = getSelection(); if(selection.rangeCount > 0){ var bqBefore = "<blockquote>"; var bqAfter ="</blockquote>"+'\n\n';} var blockquote = bqBefore+selection+'\n\n';var card = '\n'+blockquote+'<!--' + title + '--><div class="article"><div class="image"><a href="' + url + '"><img src="' + ogimg + '"></a></div><div class="caption"><div class="pagetitle"><a href="' + url + '">' + title + '</a></div><div class="description"><a href="' + url + '">' + desc + '</a></div></div><div class="tweet"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\'' + title + '%20' + url + '\');"><img src="https://goo.gl/Y4BWro"></a></div><div class="hatena"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/' + url + '\');"><img src="https://goo.gl/5zeLZG"></a></div><div class="line"><a href="javascript:window.location=\'line://msg/text/\'+encodeURIComponent(\''+title+'\')%20+encodeURIComponent(\''+url+'\');"><img src="https://goo.gl/1u9vcm"></a></div><div class="iframe"><iframe src="http://blog.hatena.ne.jp/' + author + '/' + blog + '/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe></div></div>'+bqAfter+'\n';window.prompt("コピー", card);})();
CSSの設定

登場するCSSの設定はこちらです

.article {position:relative;width:100%;height:115px;border-radius:4px;border:2px solid #000;margin-bottom:5px;background:#fff;}
.article a {display:block;width:100%;height:100%;text-decoration:none;color:#000;}
.article:hover {margin-left: 3px;}
.article div.image{width:70px;height:70px;float:left;margin:5px 5px;}
.image img {width: 100%;height: 100%;}
.caption {height:80px;margin:5px 5px;overflow:hidden;}
.pagetitle {font-size:80%;font-weight:bold;}
.pagetitle a{line-height:1.2rem;}
.description {font-size:70%;color:#444;}
.description a{line-height:1.1em;}
.tweet{position:absolute;width:24%;height:25px;bottom:5px;left:1%;background:#2AA4F0;border-radius:2px;text-align:center;border-bottom:2px solid #1F7EBE;}
.hatena{position:absolute;width:24%;height:25px;bottom:5px;left:26%;background:#1EB9DC;border-radius:2px;text-align:center;border-bottom:2px solid #2AA4F0;}
.line{position:absolute;width:24%;height:25px;bottom:5px;left:51%;background:#54CB24;border-radius:2px;text-align:center;border-bottom:2px solid #26B700;}
.tweet:hover,.hatena:hover,.line:hover{margin-top:3px;border:none;}
.hatena img,.tweet img,.line img{width:25px;height:25px;}
.article div.iframe{position:absolute;width:24%;height:25px;bottom:5px;right:0;padding-left:3px;padding-bottom:2px;}

是非、使ってください^^

ブックマークレットに関する過去記事