※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); } } })();
概要
解説にあたって、大きく分けて２つの括りで説明しますね。
画像ページのimgタグを取ってくる
ブログ用のHTMLタグを付加して生成
1.画像ページのimgタグ
はてなフォトライフの画像ページのHTMLはこんな風になっています。
印をした箇所を抜き出すとこんな感じです。
<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>
ブックマークレットソースのコメントにも示してある通り、上記１で取得した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とは大量のトランザクションの一極集中の緩和と、トラフィック転送をスムーズにする事で「より多くのユーザへ」「安定した品質で」「快適に」といった、ユーザがよりコンテンツを楽しんで貰えるよう、コンテンツ配信を最適化します。
なるほど、すると「cdn-ak」サブドメインが付くと転送がスムーズになるんじゃない？ということで実際に試してみました。
※速度は環境によって異なりますので、参考値とお考えください。
サブドメイン「cdn-ak」有り無しで転送速度をチェック
まず、cdn-akなしの場合はこんな感じです。
次に、ありだとこのくらい。確かに速いですね。
また、先ほど引用した記事中にでてくる「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を使えば、こういったことが可能になるのです。
こういったセマンティックWebの技術はSEOにも影響があると言われていますので、しっかり定義しておいた方が良いのでしょうね。
今後の課題
今回のブックマークレットでは、imgタグのtitle属性とalt属性を、はてなフォトライフの属性と同様にしています。
SEOに拘るなら、ここを調整する、もしくは調整できるようにしたいところですが、今はそのままになっています。この辺りは今後の課題と認識しています。
あとがき
はてなブログは、メジャーなブログサービスなだけに、SEO対策してるんだな、と今回の調査でわかった気がします。
ただ、私自身がSEOにそんなに拘ってなかったので「無知であったが故の目からうろこ」なのかもしれません。
なので、この本を読んでもう少し勉強します。
