2018-01-30

リンクカード(ブログカード)を作るブックマークレット

リンクの見栄えを良くしたくて、以下のようなリンクカード(ブログカード)を探していました。

  1. 外部サービスに依存しない。(サービスの継続性の問題とパフォーマンスの点から)
  2. OGP (Open Graph Protocol) に対応していないサイトへのリンクはimagedescriptionを無理に表示しない。(関係のない画像やコンテンツが表示されることがあるので)
  3. 仕様が開示されている。(カスタマイズ可能)
  4. StackEdit の Markdownで利用可能。(シンプルなHTMLであること)

なかなか良いものが見つからず、<blockquote> で代用したりしていたのですが、以下のサイトを見つけました。

はてな風のブログカードをブックマークレットから作ってみよう! | 株式会社グランフェアズ

こんにちは、めぐたんです。 ブログを書いていると、参考記事や過去に書いた記事など別ページへのリンクを貼る機会が何かと多くあります。…

 (これはリンク先のブックマークレットで作ったリンクカードです。)

詳しくはリンク先を見ていただければ分かるのですが、外部サービスへの依存がほとんどなく(favicon 表示のみ)、そのため表示も高速です。

画像も og:img のみの表示です。画像がない場合も違和感のないデザインです。

ブックマークレット(JavaScript)ですので使いやすくカスタマイズも可能です。

また、使用しているタグも <div> のみですので、ブックマークレットから出力された HTML をそのまま StackEdit に貼り付けて使うことができます。

カスタマイズ

そのままでも充分使えるのですが、ブックマークレットの JavaScript を少しカスタマイズしてみます。

タイトル

obj.title = $('title').text();

でタイトルを取得しているのですが、document.title 以外に title 要素を使ったものが引っかかることがある(Qiitaなど)ので、

obj.title = document.title;

にしておきます。

テキスト部分

'<p>' + obj.desc + '</p>'

<meta name ="description" content=""> の内容を表示しているのですが、description がないサイトへのリンクだと、undefinedと表示されてしまいます。undefined の場合、自分で説明を上書きすれば良いのですが、以下のようにしてundefined を一旦消すことにします。

'<p>' + (obj.desc || '') + '</p>'

リンク

私の場合、内部リンクは別ウィンドウで開きたくないので、target="_blank" は消しておきます。(テキスト部分と画像部分の2箇所。)

URL

URL とホスト名は canonical 属性の設定があれば、そちらを使うようにします。

obj.url = document.URL;
obj.domain = location.host;

obj.url = $('link[rel=canonical]').attr('href') || document.URL;
var m = obj.url.match(/^https?:\/\/([^/]+)/);
obj.domain = m[1];

に変更します。

favicon

favicon は Google の API を使って取得しているのですが、Google は http / https 間の接続を認めていないので、"http://www.google.com/""//www.google.com/"に変更しておきます。

CSS

CSSも少しだけいじりました。faviconpadding が継承されていたので 0 をセットしたのと、favicon 右のドメインが下付きになっていたので、vertical-align: middle; を追加しました。

.blogCardFooter a img {
  margin-right: 5px;
  padding: 0;
  vertical-align: middle;
}

修正後のブックマークレット

ブログカード


株式会社グランフェアズ様、とても役立つ情報ありがとうございました。

No comments:

Post a Comment