friendfeedのwidgetをこのはてなの日記に埋め込もうとすると、テキストが一部表示されない（応急処置の追記削除、多分決定版に近い対処の追記）

ハマり はてな

（検索でここに着いてしまった方へ）先人のまとめ記事もあります。
はてなダイアリーで「FriendFeed」の文字化け - Drole de sujet

（ほぼ完全な対応と思われる追記：

  • 貼り付けるwidgetのスクリプトにcharset="utf-8"の指定をする
  • それでもテキストの一部が表示されない場合は、はてダのデザインのCSSとFriendFeedのWidgetで重複しているmainというクラスについて、floatの指定をはずすために、はてダの管理ページでデザインのスタイルシートを設定するところで以下のようにする。
.friendfeed .main { float: none; }

CSSのコンフリクトなのだろうか？テーマを変えてみるか？
追記：テーマをNavyにしてみたら、期待通りに表示された。じゃ、ぶつかってるところを探すだなぁ。ちなみに現在のテーマはHatena-carving-greenだ。

問題が発生している環境

OS:Windows XP SP3
Browser

FirefoxとChromeはほぼ同じ症状。IE7では表示が崩れている（下図）

あ、はてなはEUC-JPだからかな？

上記のIE7の文字化けを見て思った。u003cってこれはUnicode(UTF-16)の'<'だな。そして、、、はてダのページは、EUC-JP、、、混ぜるな危険ということなのか。結構頭遺体。
参照：

それにしても、NavyのテーマもEUC-JPなのだから、この問題だけじゃないはずだ....

はてなアイデアでは2008/12/25に修正されているようなのだが

はてなアイデア - 対応ブログパーツの「FriendFeed」のフィード ウィジェットで、幅を指定すると貼れません。また、デフォルトの場合は、記事のタイトルが表示されないなど、表示内容に欠損があります。

先人の知恵を試す

このエントリの先頭でも紹介している記事を読んでみた。
はてなダイアリーで「FriendFeed」の文字化け - Drole de sujet
つまりは、scriptのエンコーディングが合ってないのは確かに問題らしく、それを解決するためにタグを指定しようとすると、今度ははてなのスクリプティング規約に抵触するらしい。
はてなのスクリプティング規約は、ウィジェットの幅指定もひっかけてしまっていたらしい。
で、現在(2009/2/4)だと、scriptのエンコーディングの指定は規約違反とはならないようだ。

記事に埋めてみよう

幅指定もいれてあるし、scriptのエンコーディングも指定してみた。

<script type="text/javascript" charset="utf-8" src="http://friendfeed.com/embed/widget/personakgbu?v=2&amp;width=250"></script>
<noscript>
<a href="http://friendfeed.com/rooms/personakgbu">
<img alt="View my FriendFeed" style="border:0;" src="http://friendfeed.com/embed/widget/personakgbu?v=2&amp;width=250&amp;format=png"/></a>
</noscript>


結果として、IE7でも文字化けは無くなったが、記事の詳細が表示されないのはFirefox3.0.5, Google Chrome, IE7ともに同じ症状となった。これはCSSの問題っぽい。

CSSをdocument writeしている部分を見てみる

document.write('\n\n\n\n\u003cstyle type=\u0022text/css\u0022\u003e\n.friendfeed.widget .feed .entry .comment .quote {\ndisplay: inline;\nfloat: left;\nmargin-left: 12px;\nheight: 13px;\nwidth: 14px;\n}\n\u003c/style\u003e\n\n\u003clink href=\u0022http://friendfeed.com/static/css/widget2.css?v=8163ba2e8e2b33a7692df7d8deb05be8\u0022 rel=\u0022stylesheet\u0022 type=\u0022text/css\u0022/\u003e\n');

これは読みづらいので、Text Escaping and Unescaping in JavaScriptにしたがって変換してみるとこうなる。

document.write('
<style type="text/css">
.friendfeed.widget .feed .entry .comment .quote {
display: inline;
float: left;
margin-left: 12px;
height: 13px;
width: 14px;
}
</style>

<link href="http://friendfeed.com/static/css/widget2.css?v=8163ba2e8e2b33a7692df7d8deb05be8" rel="stylesheet" type="text/css"/>
');

うがー、外部CSSを呼び出してる。しかも動的コンテンツ。中身はFirebugなどを使うと簡単に取り出せるけど、結構たくさんあるな。
どうしたら、、、Scrapbookでsaveしてから解析してみようか？

Scrapbookで保存したページをFirebugで解析した結果

これをにらんでちょっくら考えてみよう

要するにtitleのクラスのdivの文字列が読めないということなんだと思う。
確かに、titleのhightが０だった。。。orz...

応急処置：はてダの管理ページ＞デザイン＞デザイン編集のスタイルシートに直打ち

div.title { height: 52px; }

なんだかなぁ。これだとsidebarのウィジェットは、コンテンツが途中で切れているから、即値をhard cordするのはまずいんだろうな。

どうしてheightが0になるのかわかった

先人Thanksです

要するに、titleクラスのdivのheightが0になっちゃうのは、その唯一の中身であるAタグがfloat要素になっていたからなのでした。FriendFeed側のCSSにはそのような記述は無かったのですが、たまたま私が使っていたはてダのデザインでは .main という指定でfloat:left; が指定されていました。
これを回避するため、はてダの管理ページでデザインのスタイルシートを設定するところで以下のようにしたところ、現象は解消しました。

a.main { float: none; }

（追記：CSSのセレクタの記述方法）

(2009/2/7追記)もっとちゃんとしたhight 0対応

CSSのセレクタについてわかっていなかったので、a.main　（Aタグでmainというクラス）という指定をしていたが、FriendFeed - Customize CSSによれば、.friendfeedというセレクタの中に含まれるべきだから、次のような指定でいいはずだ。

.friendfeed .main { float: none; }