ひとり部長のひとりごと

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

【超簡単】おしゃれなブログ記事引用ブックマークレットを作ったのでシェア

またかよ

またまたです。

すんません。

今回は、おしゃれな引用カードです。

引用したよ!ということがわかるし、なおかつおしゃれな感じで。

引用しなくても、リンクカードとして。ディスクリプションが表示されます。

そんな風に使えるものを作りました。

サンプル

選択で引用した場合


ざっくりと、どんな商品なの? 大口径望遠単焦点レンズフラッグシップモデル 防塵・防滴性能の強化 第6世代の超音波モーターHSM採用

   「ざっくりと、どんな商品なの? 大口径望遠単焦点レンズフラッグシップモデル 防塵・防滴性能の強化 第6世代の超音波モーターHSM採用」という部分を選択しているので、中に表示されています。

選択で引用しなかった場合


最新ガジェットのニュース、価格、情報をみるならここ。基本的に1〜2ヶ月以内に発売されたもしくは発売予定の家電、PC、スマホなどあらゆる最新電子機器の紹介をしています。

選択部分が見つからなかったので、ディスクリプションを表示しています。

もし、さらにディスクリプションがみつからない場合は、アドレスを表示するように設定しています。

ブックマークレット

なんか過去のブックマークレットは使い物にならないみたいな感じらしいのでちゃんと作りました。

CSSの設定も必要ありません。

どうぞ!

javascript: (function() {
    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 "";}
    var ogimg=productImg(),img="";
    if(ogimg.length > 0){var img='<img src="'+ogimg+'" style="float: left;width: 100px;margin: 5px;border: 1px solid #000;">';}
    var title=document.title,sourceurl=location.href,domain=location.host,bqBefore = "",bqAfter ="",selection = getSelection();if(selection.rangeCount==0){var selection=document.getElementsByName('description').item(0) ? document.getElementsByName('description').item(0).content : document.location.href;}
    var bqBefore='<div style="position: relative;border: 2px solid #DADADA;padding:5px;color: #000;margin: 15px 0;background: #fff;background: rgba(255,255,255,0.9);">',bqAfter="</div>";
    var card='<!--'+title+'-->\n<div style="background:url('+ogimg+') no-repeat center;background-size:cover;">'+bqBefore+''+img+'<div style="font-weight: bold;margin-top: 5px;"><a href="'+sourceurl+'">'+title+'</a></div><hr style="margin:3px"><span>'+selection+'</span><div style="text-align:right;color:#000;opacity:0.5;"><a href="//'+domain+'">'+domain+'</a></div>'+bqAfter+'</div>';
    prompt("コピーしてください",card);
})();

ブックマークレットの使い方

簡単です。

手順1

うえのコードをコピーして、適当にブックマークバーにあるリンクのアドレスを編集を行う f:id:hitoribucho:20161117101737p:plain

手順2

f:id:hitoribucho:20161117103036j:plain

貼り付けたら、終了です。

手順3

f:id:hitoribucho:20161117103151p:plain 引用したいページで、引用部分を選択もしくは選択せずにそのまま、先ほど編集したブックマークをクリックします。

手順4

f:id:hitoribucho:20161117103256j:plain

コードが現れるので、そのままコピーして、表示させたい記事に貼り付けるだけです!!!

以上。

もう完成形っぽいから、これからはここのパーツのフィードバック記事を書いていくと思います。