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

tarのブログるっ by @tarVolcano

メガネ男子のtarが書くブログです。

はてなフォトライフ2HTMLブックマークレットの解説をするよ

JavaScript WEB

フラワーパーク
フラワーパーク Photo by i764gt

※2016/04/12 はてなフォトライフの仕様変更に対応して一部サンプルコードとブックマークレットソースを修正しました。

お待たせしましたっ(いや、誰も待ってない気が..w)

前回「はてなフォトライフの画像ページからHTMLを生成するブックマークレット - tarのブログるっ」 で紹介したブックマークレットですが、今回はその解説をします。

スポンサーリンク

まずはソースをどうぞ

参考になればということで晒します。

あっ!ソースだけあれば用はないとか言わないで..>_<

(function() {
  var re1 = /http(s)?:\/\/f.hatena.ne.jp\//; // はてなフォトライフのURLチェック用
  //var re2 = /:\/\//; // cdn-akサブドメイン付加用
  if (location.href.search(re1) != -1) { // はてなフォトライフサイト内かチェック
    // 画像ページからimgタグを取得
    var imgElem = document.getElementById('foto-body').getElementsByTagName('img')[0];
    if (imgElem != null) { // 画像ページで実行されたときだけHTMLを生成する
      // 元々のimgタグから使わない属性を削除する
      imgElem.removeAttribute('width');
      imgElem.removeAttribute('height');
      imgElem.removeAttribute('style');
      // ブログ用の属性(class、microdata)を追加する
      imgElem.setAttribute('class', 'hatena-fotolife');
      imgElem.setAttribute('itemprop', 'image');
      // HTMLを結合して生成
      var imgHtml = new String();
      imgHtml += '<p><span itemscope itemtype=\'http://schema.org/Photograph\'>';
      //imgHtml += imgElem.outerHTML.replace(re2, '://cdn-ak.'); // cdn-akサブドメインを付加
      imgHtml += imgElem.outerHTML; // 160412 cdn-akサブドメインを付加しない変更
      imgHtml += '</span></p>';
      prompt('はてなフォトライフからHTML生成', imgHtml);
    }
  }
})();

概要

解説にあたって、大きく分けて2つの括りで説明しますね。

  1. 画像ページのimgタグを取ってくる

  2. ブログ用のHTMLタグを付加して生成

1.画像ページのimgタグ

はてなフォトライフの画像ページのHTMLはこんな風になっています。

20140410234436

印をした箇所を抜き出すとこんな感じです。

<div id="foto-body" name="foto-body" class="foto-body" style="width:800px;">
  <img src="http://f.st-hatena.com/images/fotolife/t/tarVolcano/20140408/20140408003804.png" alt="20140408003804" title="20140408003804" width="800" height="596" class="foto" style="">
  <div id="foto-for-html-tag" style="display:none;">..</div>
  <div class="fotoinfo">..</div>
</div>

ちなみに、これはChromeの「要素を検証」から、簡単に調べる事ができます。

ブックマークレットのソースと照らし合わせるとvar imgElem = document.getElementById('foto-body').getElementsByTagName('img')[0]の箇所で、このimgタグを取得しているんですね。

また、このあとでelement型オブジェクトとして操作をしたいんで、オブジェクトのまま取ってきています。

2.ブログ用のHTMLタグを付加するためには

ブックマークレットでHTMLを生成するにあたって、「はてなブログの標準エディタを使って画像を埋め込むときのHTML」を参考にしました。

まずはそのサンプルを下に示します。

<p>
  <span itemscope itemtype="http://schema.org/Photograph">
    <img src="http://cdn-ak.f.st-hatena.com/images/fotolife/t/tarVolcano/20140408/20140408003804.png" alt="f:id:tarVolcano:20140408003804p:plain" title="f:id:tarVolcano:20140408003804p:plain" class="hatena-fotolife" itemprop="image">
  </span>
</p>

ブックマークレットソースのコメントにも示してある通り、上記1で取得したelementオブジェクト(はてなフォトライフで取得したimgタグ)を操作して、不要な属性(width,height,style)を削除し、標準エディタで使われるimgタグと同じ属性(class,itemprop)を付加します。

そしてそのimgタグに、pタグとspanタグを追加し、最終的なHTMLをプロンプトで書き出すようにしています。

けど、気になることが..

ここで気になったのが、spanタグのitemscope itemtype と imgタグのsrc="http://cdn-ak...itemprop のところです。

当初これが何をしているのか解らなかったので、後学のために調べてみました。

cdn-akって何よ?

はてなのサブドメインcdn-akというキーワードから、「そういえばCDNってのは聞いた事あるぞ」と当たりをつけて、この「CDN」を調べてみました。

CDNとは大量のトランザクションの一極集中の緩和と、トラフィック転送をスムーズにする事で「より多くのユーザへ」「安定した品質で」「快適に」といった、ユーザがよりコンテンツを楽しんで貰えるよう、コンテンツ配信を最適化します。

via ASSIOMA(アショーマ) » Hyper Giants - 世界を支える巨人 akamai -

なるほど、すると「cdn-ak」サブドメインが付くと転送がスムーズになるんじゃない?ということで実際に試してみました。
※速度は環境によって異なりますので、参考値とお考えください。

サブドメイン「cdn-ak」有り無しで転送速度をチェック

まず、cdn-akなしの場合はこんな感じです。

20140411004540

次に、ありだとこのくらい。確かに速いですね。

20140411004541

また、先ほど引用した記事中にでてくる「akamai」が、「cdn-ak」のakじゃない?という事で、今度はnslookupを使って、はてなフォトライフのホスト名を調べてみました。

$ nslookup cdn-ak.f.st-hatena.com
Server:     XXX.XXX.XXX.XXX
Address:    XXX.XXX.XXX.XXX#53

Non-authoritative answer:
cdn-ak.f.st-hatena.com  canonical name = cdn.f.st-hatena.com.edgesuite.net.
cdn.f.st-hatena.com.edgesuite.net   canonical name = a1982.g.akamai.net.
Name:   a1982.g.akamai.net
Address: 42.127.234.89
Name:   a1982.g.akamai.net
Address: 42.127.234.80

あー、CNAMEで出ましたね、やはり「akamai」のサービスが使われているようです。

参考記事: Geekなぺーじ:みんなが知らずに使ってるAkamai

itemscope と itemtype はHTML5 の microdataのことだった

もう一つ気になっていたitemscope itemtypeも調べたら、HTML5 の microdataというものだそうです。

人間であれば、ウェブサイト上の情報を読み理解することができます。しかし、検索エンジンはウェブ上で提示されている情報のうち限られた量しか理解できません。HTMLにタグを追加することによって、例えば、この情報はこの映画の、この場所の、この人の、このビデオのことを説明しているんだよと検索エンジンに伝えることによって、検索エンジンや他のアプリケーションが内容を理解し、関連のある情報を提示できるようになります。HTML5と共に登場したmicrodataを使えば、こういったことが可能になるのです。

via schema.org 日本語訳 - 始めましょう!

こういったセマンティックWebの技術はSEOにも影響があると言われていますので、しっかり定義しておいた方が良いのでしょうね。

今後の課題

今回のブックマークレットでは、imgタグのtitle属性とalt属性を、はてなフォトライフの属性と同様にしています。

SEOに拘るなら、ここを調整する、もしくは調整できるようにしたいところですが、今はそのままになっています。この辺りは今後の課題と認識しています。

あとがき

はてなブログは、メジャーなブログサービスなだけに、SEO対策してるんだな、と今回の調査でわかった気がします。

ただ、私自身がSEOにそんなに拘ってなかったので「無知であったが故の目からうろこ」なのかもしれません。

なので、この本を読んでもう少し勉強します。

※関連記事「はてなフォトライフ2HTMLの改良:拡大機能を停止 - tarのブログるっ by @tarVolcanoはてなブックマーク - はてなフォトライフ2HTMLの改良:拡大機能を停止 - tarのブログるっ by @tarVolcano

  • このエントリーをはてなブックマークに追加