ひとり部長のひとりごと

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

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

追記

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

さらに追記

こうなりました


こんにちは

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

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

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

読者ボタン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

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

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

追記

この記事はしょぼくなり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);
})();

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

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

では。

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

絶対、需要ある!(確信

最新ガジェットに特化したニュースサイトを立ち上げました

最近Javascriptの勉強も捗ってきたので、ここら辺で

サイトを立ち上げました。

 

ガジェット系の大手サイトって、最近ガジェット以外のネタばっかで情報収集に向かないんだよね・・・・。

本当に「最新のガジェット」に特化したサイトを見ることが少なくなったので、自分でまとめようと思ったのがきっかけです。

 

サイトでこだわっているのは

  • 最新のガジェット情報だけに特化している
  • ページに行かずともTwitter,はてブが行える

の二つです。

ぜひ遊びに来て下しあ。

結構、本気で更新していこうと思うのでよろしくお願いします。

オリジナルのブログリンクを簡単に作るブックマークレットを公開

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 titlebf = document.title;
var titlename = titlebf.substr(0, 70);
var ogimg = productImg();
var url = window.location.href;
var description = window.getSelection();
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 v =
(u == '') ? 'http://' + location.host + '/favicon.ico' :
(u.substring(0, 7) != 'http://') ? 'http://' + location.host + u : u;
var card = ' <!--'+ titlename +'-->\n<div class="article">\n<div class="articleimg"><a href="'+ url +'"><img src="'+ ogimg +'"></a></div>\n<div class="title"><a href="'+ url +'">'+ titlename +'</a></div>\n<div class="description"><a href="'+ url +'">'+ description +'</a></div>\n</div>\n
';
window.prompt("ピックアップ記事", card);
})();

 

 これをコピペしてブックマークレットに使うだけで、

  • ページのキャプション画像(OG)
  • タイトル
  • 選択範囲を詳細文として引用
  • ファビコンの取得

が可能になります。

設定すべきclassは、

.article(外枠)

.articleimg(画像)

.title(ページタイトル)

.description(選択した文章)

の部分になります。簡単でしょ?ファビコンはここにないですが、わかる人は「'+ v +'」で好きなところにはれます。

【8行で終わるjQuery】スマホでボタンをhover表示させたい時にやること

スマホって:hoverが効かないんだよね・・・・もしかしたらiPhoneだけなのかもしれませんが、とにかくhoverが効かない!

きくんだども、タッチした後に効くもんだからリンクボタンなんかに設定しているとせっかくのhoverがわからずにそのまま飛んで行ってしまう・・・。

 

これをなんとかできないか。今日はそんなお話。

とりあえずこいつを触ってください。

スマホで見ている人は、タッチするとhoverが効いたまま変化がないと思います。ここにリンクが貼ってあると、この変化後を見ることもなくリンク先に行ってしまいます。

PCで見ている方は、カーソルを当てれば綺麗にボコボコと動いてくれるはずです。

 

結論

こいつの対策にちょっとだけjQueryを追加してあげて、PC用とスマホ用に変化を2つにわけて用意しますと、こうなります。分けることが大事です。

PCでは外観を変えずにボコボコさせるだけ、スマホでは外観が変わるはずです。

jQuery
$(function() {
/* buttonタグを変化させる */ $('button')
/* 触ったらhoverクラスを適用 */ .bind('touchstart', function() {
$(this).addClass('hover');
/* 離したらhoverクラスを外す */ }).bind('touchend', function() { $(this).removeClass('hover'); }); });
CSS
button {
    /* ここはご自由に */
    width: 40%;
    height: 3em;
    border: 1px solid #E49197;
    border-radius: 4px;
    background-color: #E49197;
    color: #FFF;
    /* iPhone長押し時のポップアップ防止 */
    -webkit-touch-callout: none;
    cursor: pointer;
}

/* スマホ用のhoverクラス */ .hover { border: 2px solid #E49197; border-radius: 4px; background-color: #fff; color: #E49197; } /* PC用のhover要素 */ button:hover { margin-top: 3px; margin-left: 3px; }
HTML
<button>兼用ボタン</button>

以上です。 こんなに簡単にできちゃうんですね! 多分次回も同じようなネタやると思います。