リストアイコンの２・３が表示されない

[m.ishida]

■現象

h_homeで、リストアイコンの２，３が表示されない。

■原因

h_homeのhomeMainTable内のリストアイコン２，３に当たる部分を区別せずに2.12でマークアップしたこと。

■修正内容

h_home、f_home、c_homeのリストアイコン２，３が表示されるようにする。 リストアイコンの対応は以下の通り。

• 日記・Blog　アイコン１
• 書き込み関係　アイコン２
• それ以外のもの　アイコン３

■関連情報

v2.10.5 から v2.12.0 へアップグレードして使用しております。

管理ページではなく通常のSNS閲覧で、小物画像 [1]の中にある　リストアイコン１・２・３　のうち、１のみが表示されて、２・３は現れていません。
アップグレード前には、見やすさを考慮してカスタマイズした画像を使用していましたが、リストアイコン１が２・３の部分にも表示されてしまっています。

差し迫って困っているわけではありませんが、色分けして使っていたところなので、ちょっと気になっています。
バグなのでしょうか。

[nakasone]

やります。

[nakasone]

以下のような確認を行ったところ再現できました。

■確認ブラウザ

• IE6
• !FireFox2
• Sleipnir2.7

■確認バージョン

• 2.12.x
• trunk

■手順

1. 2.10.xでの各リストアイコンの表示箇所を確認
2. 2.12.x以降での各リストアイコンの表示箇所を確認
3. 一部でリストアイコンの使い分けがなくなっている

[takai]

本件の問題は、homeMainTable内のリストアイコン２，３に当たる部分を区別せずに2.12でマークアップしたことが原因です。

• リストアイコン１，２，３が区別されているパーツは sideNav のみです。
• homeMainTable, sideNav 以外にリストアイコンを利用しているパーツはありません。

対応

1. homeMainTableの行に対するリストアイコンの対応表を作る
2. 行ごとにクラス名を振る
3. クラス名に対して、CSSでbackground-imageを変更する

行とは、次の項目です。

• （最新情報）
  • マイフレンド最新日記
  • マイフレンド最新Blog
  • 日記コメント記入履歴
  • コミュニティ最新書き込み
  • マイフレンド最新レビュー
  • マイフレンド最新アルバム
• （全体の最新情報）
  • 最新日記
  • コミュニティ最新書き込み
• （お気に入りの最新情報）
  • お気に入り最新日記
  • お気に入り最新Blog
• （OpenPNE君さんの最新情報）
  • 最新日記
  • 最新Blog
  • 最新レビュー

これら13個（他にもあるかもしれません）全てにクラス名を用意し、tr要素にclass属性として与えます。

[takai]

comment:5 の方針について確認お願いします。

[nakasone]

comment:5 の対応１について、2.12.xでのリストアイコンの対応をどのようにすれば良いか確認お願いします。

■2.10.xの項目とそのアイコン

• （最新情報）
  • マイフレンド最新日記　アイコン１
  • マイフレンド最新Blog　アイコン１
  • 日記コメント記入履歴　アイコン３
  • コミュニティ最新書き込み　アイコン２
  • マイフレンド最新レビュー　アイコン１
  • お気に入り最新日記　アイコン１
  • お気に入り最新Blog　アイコン１
• （最新日記・レビュー）
  • 最新日記　アイコン１
  • 最新Blog　アイコン２
  • 最新レビュー　アイコン３

■2.12.xの項目

• （最新情報）
  • マイフレンド最新日記
  • マイフレンド最新Blog
  • 日記コメント記入履歴
  • コミュニティ最新書き込み
  • マイフレンド最新レビュー
  • マイフレンド最新アルバム
• （全体の最新情報）
  • 最新日記
  • コミュニティ最新書き込み
• （お気に入りの最新情報）
  • お気に入り最新日記
  • お気に入り最新Blog
• （自分の最新情報）
  • 最新日記
  • 最新Blog
  • 最新レビュー
  • 最新アルバム

[nakasone]

2.12.xでのリストアイコンの対応についての私の案を挙げておきますのでご確認ください。

■2.12.xの項目と対応アイコンの案

• （最新情報）
  • マイフレンド最新日記　アイコン１
  • マイフレンド最新Blog　アイコン１
  • 日記コメント記入履歴　アイコン２
  • コミュニティ最新書き込み　アイコン２
  • マイフレンド最新レビュー　アイコン３
  • マイフレンド最新アルバム　アイコン３
• （全体の最新情報）
  • 最新日記　アイコン１
  • コミュニティ最新書き込み　アイコン２
• （お気に入りの最新情報）
  • お気に入り最新日記　アイコン１
  • お気に入り最新Blog　アイコン１
• （自分の最新情報）
  • 最新日記　アイコン１
  • 最新Blog　アイコン１
  • 最新レビュー　アイコン３
  • 最新アルバム　アイコン３

以下のように使い分けを考えてみましたがどうでしょうか。

• 日記・Blog　アイコン１
• 書き込み関係　アイコン２
• それ以外のもの　アイコン３

[nakasone]

やります。

[nakasone]

comment:9のリストアイコン対応表を用いました。

以下のリビジョンで修正しました。ご確認ください。

• 2.12.x - r7953
• trunk - r7954

[kiwa]

• f_home, c_homeはアイコンの使い分けを行わないでいいのでしょうか？
• BIZモード用のテンプレートも修正してください

[ogawa]

• f_home, c_homeはアイコンの使い分けを行わないでいいのでしょうか？
  • ⇒やってください
• BIZモード用のテンプレートも修正してください
  • ⇒お願いします

[nakasone]

以下のリビジョンで修正しなおしました。ご確認ください。

• 2.12.x - r7990
• trunk - r7991

■f_homeのアイコン対応表

• 最新日記　アイコン１
• 最新Blog　アイコン１
• 最新レビュー　アイコン３
• 最新アルバム　アイコン３

■c_homeのアイコン対応表

• コミュニティ掲示板　アイコン２
• 新着のイベント書き込み　アイコン２
• 新着のおすすめレビュー　アイコン３

[takai]

HTML側にアイコンの対応を書き込んでしまう（クラス名をicon1などとする）方法も考えられますが、その方法ではユーザ（オーナー）がアイコンの対応を変えたくなったときに柔軟に対応できません。

• （最新情報）
  • マイフレンド最新日記 : myFriendRecentDiary
  • マイフレンド最新Blog : myFriendRecentBlog
  • 日記コメント記入履歴 : diaryCommentHistory

のようにh_homeに関しては14行に対するクラス名をtr要素に振っておき、CSSの方で

.homeMainTable tr.myFriendRecentDiary ul.articleList li,
.homeMainTable tr.myFriendRecentBlog ul.articleList li { 
    background: url(<?php echo getSkin('icon_1'); ?>) 3px 0.4em no-repeat scroll;
}
.homeMainTable tr.diaryCommentHistory ul.articleList li { 
    background: url(<?php echo getSkin('icon_2'); ?>) 3px 0.4em no-repeat scroll;
}

のようにアイコンを対応させる形にすれば、ユーザはCSSを変更するだけでアイコンを変更できます。

【アイコンの対応を固定的にしてしまってよいか】がどうマークアップするかの判断材料になると思いますが、この点は問題ないのでしょうか。（各行の項目に対するクラス名を振る場合、そのクラス名を考える必要が生じます。）

また、固定的でよいと考えた場合でも、tr要素でなくli要素にクラス名を振ることはHTMLの記述に関して冗長です。

• icon1 といったクラス名をHTMLに埋め込んでしまってよいか？
• tr要素でなくli要素にクラス名を指定してしまってよいか？

この2点に関して一考して頂ければと思います。

[ebihara]

comment:9 に記載されている分類に従って、 tr 要素に用途別のクラス名を指定することで対処します。

icon_1, icon_2, icon_3 は homeMainTable 以外にも使われており、そちらも分類に従った表示に修正するのが望ましいとは思いますが、既に運営している SNS への影響を考慮し、 homeMainTable のリストのみを修正対応とします。

[ebihara]

以下のリビジョンで修正をおこないました。

• 2.12.x - r8024
• trunk - r8025

comment:9 の分類に従い、tr 要素に以下の用途別のクラス名を指定するよう変更しました。

• 日記・Blog(アイコン１) : diaryList
• 書き込み関係(アイコン２) : commentList
• それ以外のもの(アイコン３) : (クラス名なし)

「それ以外のもの」については、今後分類が増えていくことを考慮し、クラス名を指定しませんでした。

[ebihara]

以下のリビジョンで、homeMainTable 各 articleList を包含する tr 要素に、それぞれクラス名を与えるように修正しました。

• 2.12.x - r8040
• trunk - r8041

[kiwa]

2.12系のみ、bizモードのpc_page_h_homeにある「Todo投稿履歴」のリストアイコンが表示されません。確認お願いします。

[kiwa]

すいません、テスト環境の自動更新が切れていたのが原因のようです。環境を更新したところ、2.12系にもTodo投稿履歴のリストアイコンが表示されるようになりました。

[kiwa]

確認しました。問題ありません。