はてなフォトライフ2HTMLの改良：拡大機能を停止

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

はてなフォトライフの画像にカーソルを合わせてクリックすると大きな画像が表示される機能があるのはご存知でしょうか。

私の場合、ブログで使う画像は出来るだけサイズを小さくしているので、フォトライフに保存された画像が拡大できてもあまり意味が無かったりします。

そこで今回は以前作成した「はてなフォトライフの画像ページからHTMLを生成するブックマークレット」を少し改良して、はてなフォトライフの画像にカーソルを合わせてクリックすると大きな画像が表示される機能を無効にした状態で画像のHTMLを生成出来るようにしてみたいと思います。

参考サイト

はてなフォトライフの画像を拡大表示する機能を無効化する方法は、こちらのはぴらき (id:hapilaki)さんのブログ記事がとても参考になりました。感謝！

はてなブログに挿入した画像のクリック拡大表示を簡単に解除する方法 - はぴらき合理化幻想

上の記事で紹介されているclass名の変更を、前回作成した「はてなフォトライフ2HTML」のブックマークレットソースへ適用すれば、簡単に修正出来ます。

こちらにソースも貼っておきますね。

(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-disable'); // 拡大機能を停止
      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);
    }
  }
})();