気まぐれお。

気まぐれに何か書きます。

【ブログカスタマイズ】はてなブログ仕様変更に伴う「デッキレシピ閲覧ボタン」の運用方法変更

以前当ブログでご紹介した「デッキレシピ閲覧ボタン」について、はてなブログの仕様変更により、残念ながらそのままでは使用できなくなってしまいました。

reoasxdtmgt.hatenablog.com

本記事では、運用方法の変更についてお知らせします。謂わば修正パッチ配布記事です。
また、以降の修正は必要なくなるはずです。その辺りの考察についても併せて行います。

変更点

前回の記事に沿って、変更点をお伝えしていきます。

事前準備

こちらに変更は一切ありません。そのまま使用していただけます。

毎記事行うこと (本文中に HTML を挿入する)

こちらが今回の本題になります。ここだけ変更できれば以前と同じように使用できます。

<!-- はてな記法・Markdown モードをご利用の場合 -->
<ul class="footer-nav">
  <li><a href="javascript:void(0);" onclick="smoothScroll(); return false;"><i class="blogicon-chevron-up"></i></a></li>
  <li><a href="javascript:void(0);" onclick="showDeckList(); return false;"><i class="blogicon-photo"></i></a></li>
</ul>

<script>
var showDeckList = function(){
  $('img[src*="/* ファイル名 (の一部) を挿入 */"]').click();
}
</script>

<!-- 見たままモードをご利用の場合 -->
<ul class="footer-nav">
  <li><a href="javascript:void(0);" onclick="smoothScroll(); return false;"><em class="blogicon-chevron-up"><span class="dummy">「トップに戻る」ボタン</span></em></a></li>
  <li><a href="javascript:void(0);" onclick="showDeckList(); return false;"><em class="blogicon-photo"><span class="dummy">「画像閲覧」ボタン</span></em></a></li>
</ul>

<script>
var showDeckList = function(){
  $('img[src*="/* ファイル名 (の一部) を挿入 */"]').click();
}
</script>

/* ファイル名 (の一部) を挿入 */ には、実際に本文中に掲載した画像の情報 f:id:(はてなID):(ファイル名)(拡張子の頭文字):plain のうち、ファイル名の部分のみを入力します。
したがって、最終的には $('img[src*="XXXXXXXXXXXXXX"]').click(); のようになる (X は任意の数字) はずです。

技術解説

今回修正が必要になった原因や、以降修正が必要でなくなるであろう理由について、技術解説を交えながら説明していきます。

スクリプトの変更

<!-- 修正前 -->
<script>
var showDeckList = function(){
  $('img[alt="hogehoge"]').click();  // 説明のため "hogehoge" へ変更
}
</script>

<!-- 修正後 -->
<script>
var showDeckList = function(){
  $('img[src*="hogehoge"]').click();  // 説明のため "hogehoge" へ変更
}
</script>

詳しい解説は前回の記事を参考にしてほしいのですが、 img 要素のうち、修正前では alt 属性の値で同一判定を行っていましたが、修正後は src 属性で同一判定を行うようにしました。

指定する属性の変更

alt 属性は代替テキスト (alternative text) と呼ばれ、下記の用途で使用されるものです。

  • 画像を表示できない場合に代わりに文字を表示する
  • 音声読み上げの際に使用する
  • 各種検索サイト (GoogleYahoo!等) から画像の意味・種類等を理解させやすくする (所謂SEO対策の一環)

以前のはてなブログでは、ここにファイルIDのようなものを入れていました。
しかし、上記3つ目の理由を考慮した結果、上記仕様を変更したものと考えられます*1

一方で、src 属性はソース (source) と呼ばれ、この属性を持つ要素がどこに存在するかを示しています。
基本的には場所を示す URI (URL とほぼ同義です) が記されます。

img 要素には src 属性が必須となっていますので、変更されることはあっても、なくなることはありません。
指定する情報については後程説明します。

比較方法の変更

修正前は = で、修正後は *= で比較されています。

前者は完全一致であり、=の後ろの値が全く同じであれば正解であると判定してくれます。一方で後者は部分一致であり、*=の後ろの値を含んでいれば正解であると判定してくれます。

src 要素では、ファイル名は絶対参照 (本題から逸れるため詳解はしません。ご自身でお調べください。) で書かれることが多いので、単にファイル名だけを指定する場合は部分一致で検索した方が都合が良く、上記の記法となっています。

指定する情報の変更

// 修正前
$('img[alt="f:id:XXXXXXXXXXXXXXp:plain"]').click();

// 修正後
$('img[src*="XXXXXXXXXXXXXX"]').click();

上の項目でほとんど説明してしまいましたが、今回はファイル名を指定しなければなりません。 はてなブログでは、指定する (ファイル名) の部分については、画像をアップロードした日時によって設定されているようです。

上記画像の src 属性と alt 属性を見てほしい (以前の仕様のもの) のですが、モザイクで隠している部分が共通して画像アップロード日時となっています。
ここを修正するということは、はてなブログの画像管理仕様を大幅に変更するということになるので、余程のことがない限りは、今回の変更以降は再変更の必要はないものと考えられます*2

おわりに

以上、変更点と変更理由の考察でした。
ここまでお読みいただきありがとうございました。

久し振りにデッキ紹介記事を書くにあたって、仕様が変わっていて筆者自身もビックリしました。
無事に解決できて良かったです。
せっかくなので最近認めたデッキ紹介記事をダイマしておきます(笑)

reoasxdtmgt.hatenablog.com

reoasxdtmgt.hatenablog.com

以前このボタンを採用してくださった方々にどこまで届くかは分かりませんが、お知り合いの方の中で、使用されているけどリンクが切れている・使用できなくて困っている……という方がいらっしゃれば、この記事を共有してあげてください。 また、この記事をきっかけに便利なボタンがあると知ったという方は、ぜひとも使ってみてください。

それでは、またね。

*1:詳しくは調査していません。叩かないでください……

*2:保証はしません。悪しからず。