最新blogを選択すると最新日記が表示される

[kiwa]

■現象

マイフレンド最新Blogでもっとみるをクリックすると、マイフレンド最新日記一覧が表示される

■原因

■修正内容

■関連情報

[kiwa]

高井さんが検証してくれました。

▼前提

• マイページからのリンクされている4つのページに関して、
  • 【マイフレンド最新日記】【マイフレンド最新Blog】は、h_diary_list_friend
  • 【お気に入り最新日記】【お気に入り最新Blog】は、h_bookmark_diary_blog_list
• と、それぞれが同一のページに、『最新日記』と『最新Blog』を表示している
• 『最新Blog』は、ラベルリンク(#blog)を用いて参照される設計になっている

▼概要

• #blogのラベルリンクが機能せず、最新Blogを参照しても『最新Blog』が現れない

▼ラベルリンクについて

• ラベルリンクとは、ページ(a.html)内の任意の要素のid属性値(val)に対してa.html#valを参照することで、その部位を最上とした位置までスクロールがされた状態でページを表示することのできる機能のこと
• その部位からページ最下の高さよりもウィンドウ表示領域の高さの方が大きい場合は、その部位が最上とならないため、ラベルリンクの機能を確認する際は注意が必要（その部位よりも下に適当な高さの領域を確保する）

▼原因(仮説)

• レンダリングが間に合わずラベル(id)に辿り着けないため、他のページからのラベルリンクに失敗する
• Windows IE6, IE7 で問題の発生を確認
• Firefox, Opera ではこの問題は生じない（確認UA(ブラウザ)は示したもののみ）
• 以上は、物理的検証（実際の挙動）で確認したため断定はできない

▼対応方法

• 短期的対応は、今のところ見つけていません
  • current.html（そのページ自身）からのラベルリンクは成功します
• レンダリングの高速化が有効であると思われます

▼検証方法

1. current.htmlに実際のページ(h_diary_list_friend)のソースをコピー
   • ローカル上のcurrent.htmlに<base href="​http://sns.openpne.jp/">を記述してページを再現
2. 同一ディレクトリにother.htmlを置き、current.html#blogへのリンクを記述
3. current.htmlの上部に高さ400px程度のp要素を羅列し、その一部にid="label"を記述

1. current.htmlから、#labelへのラベルリンクは成功
2. current.htmlから、#blogへのラベルリンクは成功
3. other.htmlから、#labelへのラベルリンクは成功
4. other.htmlから、#blogへのラベルリンクは失敗
5. id="blog"が与えられた要素はtable内にあったため、そのtableの下に逃がして検証
   • table内だからレンダリングが間に合わずラベルが辿り着けないのかを確認する
6. other.htmlから、#blogへのラベルリンクは失敗（table内であることが原因ではない）
7. id="blog"が与えられた要素の上部を削除
   • ラベルに辿り着けないのは、それより上部のレンダリングが間に合わないためなのかを確認する
8. other.htmlから、#blogへのラベルリンクは成功（上部のレンダリングが原因）

• 以上より、id="blog"より上部の要素(table)のレンダリングに時間がかかることが原因と仮定
• 繰り返しになるが、この問題はIEでのみ発生する

▼備考

• 検索しても、この問題に関する直接的な資料は見つけられませんでした
• 『（擬似）フレームを用いたラベルリンクの問題』がヒットしますがこれとは異なります
• 検索ワード：「ラベルリンク」「ページ内リンク」「IE」「効かない」

[kiwa]

高井さんの検証その２です

▼短期的対応

• 前述の部位より上部のレンダリング等が原因かと思っていたが、ラベルをa要素に適用したらIEでも成功した
• 現在は次のようになっている
  • <span class="b_b c_00" id="blog">マイフレンド最新Blog</span>
• これを、次のように変えることが短期的対応として有効かもしれない
  • <a class="b_b c_00" id="blog" name="blog">マイフレンド最新Blog</a>
• name属性の付加については、以下を参照
  • ​http://openlab.ring.gr.jp/k16/htmllint/explain.html#need-id-name

[ebihara]

対応方法が明確なのでプライオリティをあげます。

[nakasone]

修正します。

[nakasone]

修正終わりました。

• trunk - r6028
• 2.10.x - r6025
• 2.8.x - r6024

[ogawa]

テストお願いします。

[kiwa]

trunk環境のみ、h_homeのお気に入り最新ブログの「もっと読む」から「お気に入り最新ブログ（pc_page_h_bookmark_diary_list#blog）に遷移したときに#blogにアクセスされません。

[kiwa]

Replying to kiwa:

trunk環境のみ、h_homeのお気に入り最新ブログの「もっと読む」から「お気に入り最新ブログ（pc_page_h_bookmark_diary_list#blog）に遷移したときに#blogにアクセスされません。

確認ブラウザは

• FireFox2
• IE6
• Opera9

です

[ogawa]

r6060 で対応しました。

[kiwa]

テスト完了しました。問題なさそうです。