水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > はてなのブックマークボタンが使いやすく……?

はてなのブックマークボタンが使いやすく……?

2011年1月7日(金曜日)

はてなのブックマークボタンが使いやすく……?

公開: 2011年1月10日16時35分頃

お仕事で、とあるサイトに「はてなブックマーク」の「B!」ボタンをつけたいというお話があり。普通に実装しようと思ったら、いつの間にかボタンが新しくなっていたのですね。

で、コードを生成して貼って終了……と思いきや、問題が発生。生成されたコードをよく見ると、こんな感じになっています。

<a href="http://b.hatena.ne.jp/entry/http://" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

a要素に data-hatena-bookmark-layout という属性がついています。これはHTML5で検討されているカスタムデータ属性です。

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

以上、3.2.3.8 Embedding custom non-visible data with the data-* attributes より

script要素のasync属性もHTML5ですね。

The async and defer attributes are boolean attributes that indicate how the script should be executed. The defer and async attributes must not be specified if the src attribute is not present.

There are three possible modes that can be selected using these attributes. If the async attribute is present, then the script will be executed asynchronously, as soon as it is available.

以上、4.3.1 The script element より

XHTML1.0などを使っている場合、これらの属性はありませんので、validになりません。asyncは消しても問題ありませんが、data-hatena-bookmark-layoutは消すと動作が変わってしまいます。

個人サイトならHTML5にしてしまうとか、invalidでも気にしないとかいう選択肢もあるのでしょうが、業務で作っている場合は困ります。はてなの提供するコードを無視して実装し直す、という選択がいちばん現実的なのかも……。

関連する話題: Web / HTML

人気のページ

最近の日記

関わった本など

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)友井町バスターズ (富士見ファンタジア文庫)

その他サイト