2017/08/24

リンクの見栄えを良くすべくブログカードリンク的なものを作ってみた

はてなブログでよく見るタイトルやらサムネイルやらが一緒になったリンクのことをブログカードと呼ぶらしい.

我がブログでもそれっぽいものを作ってみたいなあ,と思って調べたのだが,あれははてなが提供しているサービスらしく,そのままBloggerでは使えない.外部から利用する方法も無いわけではないが,やや裏技的になるので仕様変更等で使えなくなる可能性があるとのこと.

どうにかならんものか,と調べてみるとブックマークレットを使えばオリジナルのブログカードリンクを作成することができるようなので,作ってみることにした.

出来上がったのはこんな感じ.

今回の旅行は“反省会”的に書きたいことが少しだけあるので,最後に別記事にまとめてみることにした. 旅の費用 今まで費用を公開したことはないが,今回はLCCセールを使って貧乏旅しようというのが主旨のひとつでもあるので,ここで費用を整理して発表してみる. 総額は...

サムネイルが無い場合には↓みたいな感じになるようにした.

リンク先のOGPを読み込むようにしているので,OGPの設定がないサイトでは当然うまくいかない.他のmetaタグやらtitleタグを読めばどうにかならんこともないような気がするが,それは今後の課題ということで.

ちなみに本家のブログカードリンクはiframeを使っているのだが,iframeの使い方は知らないのでdivタグを使いまくっていい感じの配置にするHTMLを吐き出すようにした.

こんなもの使いたい人がいるとは到底思えないが,HTMLやCSSに詳しい人に突っ込んでもらう余地を残すためにソースを書いておくことにする.

まずはCSS.これをブログのCSSに書き加える.

/*ブログカード*/
.Rblogcard {
  border: 1px solid gray;
  display:inline-block;
  padding: 5px;
  margin: 10px;
  box-shadow:1px 1px 6px 3px #c9c9c9;
  -moz-box-shadow:1px 1px 6px 3px #c9c9c9;
  -webkit-box-shadow:1px 1px 6px 3px #c9c9c9;
}
.lhs {
  float:left;
  max-width:300px;
}
.rhs {
  float:right;
  padding-top: 10px;
}
.down_url{
  clear:both;
}

.Rblogcard_title{
  font-weight: bold;
}

.Rblogcard_des{
  font-size:70%;
}

.Rblogcard_img{
  max-width:250px;
  min-width:200px;
}
/*ブログカード*/

そして↓がjavascript.これをブックマークレットとして使う.Chromeの場合はブックマークバー上で右クリック→ページを追加→URLのところに↓のコードをコピペすると使える.

javascript:(
function(){  
  var metas = document.getElementsByTagName("meta");  
  function searchTitle(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:title"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:url"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchDescription(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:description"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  function searchImgURL(ms){
      for(i=0; i<ms.length; i++){
          if(ms[i].getAttribute("property")=="og:image"){
              return ms[i].getAttribute("content");
          }
      }
      return "";
  }
  var title = searchTitle(metas);
  var URL = searchURL(metas);  
  var des = searchDescription(metas);
  var img = searchImgURL(metas);
  var s = '<div><div class="Rblogcard"><div class="lhs"><div><span class="Rblogcard_title"><a href="'+URL+'" target="_blank">'+title+'</a></span></div><div><span class="Rblogcard_des">'+des+'</span></div></div><div class="rhs"><img class="Rblogcard_img" src="'+img+'"></div><div class="down_url"><a class="Rblogcard_url" href="'+URL+'" target="_blank">'+URL+'</a></div></div></div>';
  if(img==''){
      var s = '<div><div class="Rblogcard"><div class="lhs"><div><span class="Rblogcard_title"><a href="'+URL+'" target="_blank">'+title+'</a></span></div><div><span class="Rblogcard_des">'+des+'</span></div></div><div class="rhs"></div><div class="down_url"><a class="Rblogcard_url" href="'+URL+'" target="_blank">'+URL+'</a></div></div></div>';
  }
  var d = window.open().document;
  d.writeln('<textarea rows=15 cols=80>'+s+'</textarea>');
  d.close();
})();

以上.作る上で参考にさせて頂いたのは,絶版あかみる:javaScriptでmeta内のproperty属性から画像を取得する方法

ちなみにこれ,画像はOGP設定されているURLから引っ張っている(直リンク)だけで当然キャッシュとかはしてないので,他所様のブログ相手に使うのは微妙かも…?OGPのサムネイル画像を直リンクして良いのかとか,その辺のお作法も調べる必要があるなあ,と.

しかし,久しぶりのjavascriptだったので大変だった.やっぱりPythonがNo.1!

0 件のコメント:

コメントを投稿