@tarVolcanoメガネ男子のtarが書くブログです。はてなフォトライフの仕様変更に対応して一部サンプルコードとブックマークレットソースを修正しました。紹介したブックマークレットですが、今回はその解説をします。スポンサーリンクまずはソースをどうぞ参考になればということで晒します。解説にあたって、大きく分けて2つの括りで説明しますね。画像ページのimgタグを取ってくるブログ用のHTMLタグを付加して生成1.画像ページのimgタグはてなフォトライフの画像ページのHTMLはこんな風になっています。印をした箇所を抜き出すとこんな感じです。class="fotoinfo">..</div></div>ちなみに、これはChromeの「要素を検証」から、簡単に調べる事ができます。document.getElementById('foto-body').getElementsByTagName('img')[0]の箇所で、このimgタグを取得しているんですね。このあとでelement型オブジェクトとして操作をしたいんで、オブジェクトのまま取ってきています。2.ブログ用のHTMLタグを付加するためにはブックマークレットでHTMLを生成するにあたって、「はてなブログの標準エディタを使って画像を埋め込むときのHTML」を参考にしました。そのサンプルを下に示します。</span></p>ブックマークレットソースのコメントにも示してある通り、上記1で取得したelementオブジェクト(はてなフォトライフで取得したimgタグ)を操作して、不要な属性(width,height,style)を削除し、標準エディタで使われるimgタグと同じ属性(class,itemprop)を付加します。そのimgタグに、pタグとspanタグを追加し、最終的なHTMLをプロンプトで書き出すようにしています。当初これが何をしているのか解らなかったので、後学のために調べてみました。cdn-akって何よ?はてなのサブドメインcdn-akというキーワードから、「そういえばCDNってのは聞いた事あるぞ」と当たりをつけて、この「CDN」を調べてみました。CDNとは大量のトランザクションの一極集中の緩和と、トラフィック転送をスムーズにする事で「より多くのユーザへ」「安定した品質で」「快適に」といった、ユーザがよりコンテンツを楽しんで貰えるよう、コンテンツ配信を最適化します。-なるほど、すると「cdn-ak」サブドメインが付くと転送がスムーズになるんじゃない?ということで実際に試してみました。※速度は環境によって異なりますので、参考値とお考えください。サブドメイン「cdn-ak」有り無しで転送速度をチェックまず、cdn-akなしの場合はこんな感じです。次に、ありだとこのくらい。先ほど引用した記事中にでてくる「akamai」が、「cdn-ak」のakじゃない?という事で、今度はnslookupを使って、はてなフォトライフのホスト名を調べてみました。42.127.234.80あー、CNAMEで出ましたね、やはり「akamai」のサービスが使われているようです。microdataというものだそうです。人間であれば、ウェブサイト上の情報を読み理解することができます。検索エンジンはウェブ上で提示されている情報のうち限られた量しか理解できません。HTMLにタグを追加することによって、例えば、この情報はこの映画の、この場所の、この人の、このビデオのことを説明しているんだよと検索エンジンに伝えることによって、検索エンジンや他のアプリケーションが内容を理解し、関連のある情報を提示できるようになります。HTML5と共に登場したmicrodataを使えば、こういったことが可能になるのです。始めましょう!こういったセマンティックWebの技術はSEOにも影響があると言われていますので、しっかり定義しておいた方が良いのでしょうね。今回のブックマークレットでは、imgタグのtitle属性とalt属性を、はてなフォトライフの属性と同様にしています。SEOに拘るなら、ここを調整する、もしくは調整できるようにしたいところですが、今はそのままになっています。この辺りは今後の課題と認識しています。あとがきはてなブログは、メジャーなブログサービスなだけに、SEO対策してるんだな、と今回の調査でわかった気がします。私自身がSEOにそんなに拘ってなかったので「無知であったが故の目からうろこ」なのかもしれません。この本を読んでもう少し勉強します。02:32はてなフォトライフ2HTMLブックマークレットの解説をするよTweet書き人:tar@メガネ男子の自己紹介スポンサーリンク訪問いただきありがとうございます。気に入った記事をシェアしてくださると、とても励みになります。(3)ツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。