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

ひとり部長のひとりごと

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

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

HTML/CSS Javascript

またかよ

またまたです。

すんません。

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

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

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

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

サンプル

選択で引用した場合


ざっくりと、どんな商品なの? 大口径望遠単焦点レンズフラッグシップモデル 防塵・防滴性能の強化 第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

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

以上。

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

【アプリ】スマホでWordpressを編集するのに「hpb pad」をオススメする5つの理由

神アプリ Android iPhone 番外編 永久保存版

どうも、ひとり部長です。

はてなブログ使っていてなんやねんこのタイトルはと思われると思いますが、

最近ガジェットのニュースブログがBANされましてwwww

そんなわけでガジェット速報サイトをワードプレスでこしらえたのです。

しかし、これが使いにくい。

PCからはサクサク編集できるんだけど、なんせiPhoneからの編集がうざい。

うざいったらありゃしない。

というわけで公式アプリをダウンロードしようと思ったら、「iOS9以上のバージョンでないとダウンロードできません」の表示。

脱獄したままの環境に依存しているとこうなります

直ぐにでもiOS10にしてもいいんだけど、初期化がめんどくさい。

というわけでオススメの投稿用アプリの紹介です。

※すべてひとりガジェット速報の画面で説明します

「hpb pad.app」

https://lh4.ggpht.com/-Z7sXSlLU_2PfwKaVCTXuQZjxqYanWRxDo0jE_1K70VYXY1oHh--eF5puudbA-EJjs0=w300

なにができるのか

メイン画面

f:id:hitoribucho:20161116094610p:plain

メイン画面です。

  • ページのスクリーンショット(クリックしたらページにアクセス)

  • メニュー(後述)

  • 投稿
  • 画像アップロード   

の構成です。ここからサクサクっと投稿画面に行きましょう。

理由その1:投稿画面

f:id:hitoribucho:20161116095113p:plain

投稿画面です。

見た感じの通り、タイトル、タグ、カテゴリーがサクサク入力できます

スマホからワードプレスの管理画面で編集すると、カーソル移動できなかったり、画面内のフレームがうまくスクロールできなかったり、イライラしっ放しでした。)

特に最高なのは、カテゴリーです。 感覚的にセレクトできるように作られています。

理由その2:投稿文の編集

f:id:hitoribucho:20161116095457p:plain

ここも単なるキーボードではありません。

よく使いそうな<b>タグや、<blockquote><li>といったタグもサクサク打ち込めるようになっています。

かゆいですね!!!

理由その3:投稿画面下部のメニューがすごい

f:id:hitoribucho:20161116095856p:plain

こいつがこのアプリをオススメする一番の理由です。

投稿設定

f:id:hitoribucho:20161116100741j:plain

ここの設定から、

  • 公開状態
  • 表示状態
  • 公開日時
  • アイキャッチ画像 の設定が直ぐに行えます。

プレビュー

f:id:hitoribucho:20161116101030j:plain

目の形をしたアイコンは、プレビューです。  

とにかく動きが早い!サクサク表示してくれます。  

SEO補助

f:id:hitoribucho:20161116101156j:plain

極め付けはこのメニュー、

なんと、SEO対策のサポートまでしてくれます。

具体的には、投稿文中のキーワード頻出度、タイトル文字数、本文の文字数をカウントして、ブログに適した内容になっているかアドバイスしてくれます。

これは非常に便利。

理由その4:設定メニュー

f:id:hitoribucho:20161116101411p:plain

サイドメニューでは、記事の投稿だけでなく、固定ページの作成、コメントの管理、JetPackと連携したアクセス状況の確認を行うことができます。

理由その5:複数アカウントに対応

f:id:hitoribucho:20161116101515p:plain

なんとまたこれもかゆい機能です。

一つのアカウントだけでなく、複数アカウントにも対応しています。

これで、いちいちログインし直さずとも別のブログが管理できますね!

また、アップロードする画像の自動リサイズ設定なども行うことができます。

めちゃくちゃ便利じゃねーのこれ。

というわけで、神アプリに認定しても良い「hpb pad」のしょうかいでした!

ダウンロード

最後に宣伝

最新ガジェットのみを、まとめたサイトがなかなか見当たらない(あっても更新頻度が低すぎてイライラしたり)ので、1日5件くらいのペースで紹介するブログを立ち上げました。

はてなに依存していないので、カスタマイズし放題で開放感に満ち溢れています。

はてなはてなでメリットもあるし、バランス取りながら更新していけたらいいな。

よろしくお願いします^^

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

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;}

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

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

【またかよ】最強の記事紹介ブックマークレットを作りました【読者+ボタン付】

Javascript HTML/CSS

追記

結局この形に落ち着きそうです

さらに追記

こうなりました


こんにちは

前回、紹介リンク先のツイッターはてブのシェアボタンがついたブックマークレットを公開しましたが、

さらにこいつを昇華させたいと思い、はてなブログの記事に関しては「読者追加ボタン」がつくようにしました。

はてなユーザーがこのブックマークレットを使ってシェアしあえるようになれば、もっとお互いに読者を増やすことができそうです。

読者ボタンiframeを生成するブックマークレット

まずは、読者ボタンを生成するだけのブックマークレットを作ってみましょう。

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 "";}
  var author = author();
  var blog = blog();
  var card = '<iframe src="http://blog.hatena.ne.jp/'+author+'/'+blog+'/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>';
  prompt(card,card);
})();

これは、はてなブログのソースのうち、[html]内に含まれているdata-authordata-admin-blogを抽出して、読者ボタンコードを生成しているだけです。

試しに一個前の記事でやってみると、以下のコードが現れます

<iframe class="iframe" src="http://blog.hatena.ne.jp/hitoribucho/hitoribucho.hatenablog.com/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe>

ブログの管理画面でコピーできる「読者になるボタン」のやつですね。 こいつをブログに貼り付けると、当然ひとり部長の読者になるボタンが出てきます。

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

じゃーん。

ツイッターはてぶシェア機能および読者登録ボタン付きリンクカード生成ブックマークレット

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 "";
    }
    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 card = '<!--' + title + '-->\n<div class="entrylist"><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="tweetbtn"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\'' + title + '%20' + url + '\');"><img src="https://goo.gl/lFvqh6"></a></div><div class="hatebubtn"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/' + url + '\');"><img src="https://goo.gl/yYRxpB"></a></div><iframe class="iframe" src="http://blog.hatena.ne.jp/' + author + '/' + blog + '/subscribe/iframe" allowtransparency="true" frameborder="0" scrolling="no" width="150" height="28"></iframe></div>';
    window.prompt("コピー", card);
})();

これをブックマークレットで使いブログのhtmlで貼り付けると、上のような感じででてきます!

もう一度マスクドにしおかさんに登場していただきましょう。最新の記事をシェアしてみます。

・読者ボタンは、マスクドさんのブログ

ツイッターシェアは、記事のURLとタイトルの投稿

はてなブックマークは、記事のはてぶ

とこれぞ本当に最強ブックマークレットが完成しました。

クラスは付いていますが、スタイルを指定してあげないと、整いません。 一応、上であげているスタイルをのっけておきますので、使いたい人はどうぞ。

.entrylist {position:relative;width:100%;height:110px;border-radius:4px;border:2px solid #000;margin-bottom:5px;}
.entrylist a {display:block;width:100%;height:100%;text-decoration:none;color:#000;}
.entrylist:hover {margin-left: 3px;}
.entrylist div.image{width:65px;height:65px;float:left;margin:5px 5px;}
.image img {width: 100%;height: 100%;}
.caption {height:100px;margin:5px 35px 5px 5px;overflow:hidden;}
.pagetitle {font-size:90%;font-weight:bold;}
.pagetitle a{line-height:1.4rem;}
.description {font-size:80%;color:#444;}
.description a{line-height:1.2em;}
.hatebubtn img,.tweetbtn img{width:100%;height:100%;}
.tweetbtn{position:absolute;width:30px;height:30px;top:5px;right:5px;}
.hatebubtn{position:absolute;width:30px;height:30px;top:40px;right:5px;}
.entrylist iframe{position:absolute;bottom:5px;left:5px;}

こいつをざっとコピーしてカスタムCSSに貼り付けるだけです。 簡単なお仕事でしょ?

では!

せっかくなので、いつも記事を読んでくれている人のページをシェアしちゃおう。 どんどん読者登録しちゃいましょう!w

(需要あるといいな・・・・。

見ているページのシェアボタンを作成するブックマークレットを作成しました+おまけ

HTML/CSS Javascript

追記

この記事はしょぼくなりmした。

最強のブックマークレットはこちらです↓

リンク先に飛ぶ前に共有したい

今回は、「ブックマークレットを作成するブックマークレット」の紹介です。 ブックマークレットって「今見ているページ」に対して行うものなので、基本的にこんなもの需要がありません。

しかし。

1つだけあるのです。

他のブログ記事やサイトを紹介するときのリンクカード、こいつにツイッターでシェアボタンをつけられたらと考えたことはありませんか?

要は、見ているページのシェボタンではなく、紹介した先のサイトにアクセスする前にリンク先のツイッターはてなブックマークができちゃうようにすること。

これが今日の目的です。

みんな忙しい

全部の紹介記事を見ている暇なんてない。だけど、ブログを書いている人は紹介したページも見て欲しい。 だから、「後で見る」機能として、今見ているページでリンク先のシェアをしたい。 ですよねー。

さっさとブックマークレット出せやという感じすが、まぁ待ってください。

Twitterシェアのブックマークレット

まずは基本的なところから行きましょう。 そもそもブックマークレットを知らないという人は、ググってください。マジで便利なので、この時点で知らなかった人はぜひ知ってください。難しいものでもなんでもないです。ブックマークのアドレスをコピペで書き換えるだけでいろんな機能が作れちゃうすぐれものです。

とりあえずツイッターの共有ボタンを使ってみましょう。

Twitterが開いて、今見ているページのタイトルとリンクがすでに記載された状態で表示されたはずです。 まぁこれだけでも便利。ブックマークにドラッグ&ドロップしてくだされば、いつでもどこでも好きなサイトのタイトルとURLをシェアすることができます。 ブックマークレットの記述はこんな感じ。

javascript:(function(){
  var title = document.title; 
  var url = document.location.href; window.location='twitter://post?message='+encodeURIComponent(title+url);
})();

だがしかし、こいつは何度もいうが「今見ているページ」にしか適応できない

リンク先のシェアができるボタン

そこで、こんなものを作った。 いつも僕の映画感想を陰ながら応援してくださっているマスクドにしおかさんの記事に登場してもらいましょう。

「更新を期待しているブログを2つ応援してみる - 働けおっさんブロガー」

ツイートする▶︎
はてブする▶︎

リンク先に飛ぶ前にツイートやブクマができちゃいます。、 というのも、 直接urlとタイトルを指定しているからなんですけど。

このリンクコードを生成するブックマークレットはこちらです

javascript:(function(){
    var title = document.title;
    var url = window.location.href;
    var card = '<a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\''+title+'%20'+url+'\');">ツイートする▶︎</a><br><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/'+url+'\');" target="_blank">はてブする▶︎</a>';
    window.prompt("コピー", card);
})();

そしてこいつが最終形態!!!!

というわけで、だったらその直接指定を記事紹介時に自動でできやしないかと考えたのがこちらですね。

まさにおれがやりたかったのはこういうことなんだよ!!!!

こんな風にシェアすることができちゃいます。最強。 ここからマスクドさんの記事に飛ぶことができるし、ツイートすることもできるし、はてブすることもできます。 最強。 この最強の「SNSシェアブックマーク付きブログリンクカード生成ブックーマークレット」の記述はこうだ!!!!!!

javascript:(function(){
    function productImg(){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 "";}
    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 lc = "position:relative;width:100%;min-height:70px;max-height:100px;border:2px solid #000;border-radius:4px;";
    var lcA = "display:block;width:100%;height:100%;text-decoration:none;color:#000;";
    var lcDivImg = "width:60px;height:60px;float:left;margin:5px 5px;";
    var lcDivImgImg = "width:60px;height:60px;";
    var lcCap = "max-height:90px;margin:5px 5px;overflow:hidden;";
    var lcCapTitle = "font-weight:bold;";
    var lcCaptitleA = "line-height:1.3rem;";
    var lcCapDesc = "font-size:80%;color:#444;";
    var lcCapDescA = "line-height:1.2em;";
    var tweetbtn = "position:absolute;top:5px;right:5px;width:20px;height:20px;";
    var twImg = "width:100%;height:100%;";
    var hatebu = "position:absolute;top:30px;right:5px;width:20px;height:20px;";
    var hatebuImg = "width:100%;height:100%;";
    var card = '<!--' + title + '-->\n<div style="'+lc+'"><div style="'+lcDivImg+'"><a style="'+lcA+'" href="'+url+'"><img style="'+lcDivImgImg+'" src="'+ogimg+'"></a></div><div style="'+lcCap+'"><div style="'+lcCapTitle+'"><a style="'+lcA+' '+lcCaptitleA+'" href="'+url+'">'+title+'</a></div><div style="'+lcCapDesc+'"><a style="'+lcCapDescA+'%20'+lcA+'" href="'+url+'">'+desc+'</a></div></div><div style="'+tweetbtn+'"><a href="javascript:window.location=\'twitter://post?message=\'+encodeURIComponent(\''+title+'%20'+url+'\');"><img src="https://goo.gl/lFvqh6" style="'+twImg+'"></a></div><div style="'+hatebu+'"><a href="javascript:window.open(\'http://b.hatena.ne.jp/entry/'+url+'\');" target="_blank"><img src="https://goo.gl/yYRxpB" style="'+hatebuImg+'"></a></div></div>';
    window.prompt("コピー", card);
})();

めちゃくちゃ長いんだけど、これは結構試行錯誤の末のおまけ付きだ。

スタイルは自由に整えてくれたまえ。

では。

ああああああああああああああ疲れたあああああ!!!

絶対、需要ある!(確信