リンク

  1. pne-admin : 管理画面
  2. pne-api : API開発プロジェクト
  3. pne-biz : PNEBIZプロジェクト
  4. pne-book : OpenPNE公式本
  5. pne-book-0 : はじめに1
  6. pne-book-0-note : はじめに2
  7. pne-book-1 : 一章OpenPNEとは
  8. pne-book-10 : 今後のOpenPNE
  9. pne-book-10-note : 技術的方向性
  10. pne-book-11 : 運営ノウハウ
  11. pne-book-11-note : 運営ノウハウ1
  12. pne-book-12 : 運営ノウハウ2
  13. pne-book-13 : 運営ノウハウ3
  14. pne-book-14 : 運営者ノウハウ
  15. pne-book-15 : はじめに9
  16. pne-book-2 : セットアップ
  17. pne-book-3 : OpenPNEインストール
  18. pne-book-3-note : セットアップ1
  19. pne-book-4 : ユーザーズガイド
  20. pne-book-5 : 携帯とBIZ
  21. pne-book-6 : オーナーズガイド
  22. pne-book-7 : 第7章外部連携
  23. pne-book-7-note : ノート1
  24. pne-book-8 : 運営者TIPS
  25. pne-book-8-note : 要件1
  26. pne-book-9 : ディベロッパーガイド
  27. pne-book-9-1 : ディレクトリツアー
  28. pne-book-9-2 : OpenPNE開発のSubversion活用法
  29. pne-book-9-2-note : 注意
  30. pne-book-9-3 : 小窓の作り方
  31. pne-book-9-3-note : ムービー
  32. pne-book-9-4 : OpenPNEのチーム開発
  33. pne-book-9-5
  34. pne-book-9-note : ディベロッパーガイドは分量が多いためページ分けしました
  35. pne-book-99 : 巻末
  36. pne-book-99-note : 要件2
  37. pne-book-furoku : 付録
  38. pne-book-furoku-note : OpenPNEスキン1
  39. pne-book-note : OpenPNE公式本ノート
  40. pne-cmd : 小窓CMD
  41. pne-cmd-howto : 小窓の作り方2
  42. pne-cmd/cmd-cast-caster : 小窓キャスト配信者向けドキュメント
  43. pne-cmd/cmd-cast-user : 小窓キャスト利用者向けドキュメント
  44. pne-correctio : Correctioテンプレート文法誤りを修正
  45. pne-customize : OpenPNEカスタマイズ
  46. pne-customize-note : OpenPNEカスタマイズノート
  47. pne-db : データベース関連Wiki
  48. pne-document : OpenPNEドキュメント
  49. pne-enhancement : OpenPNEへの要望
  50. pne-enquete : PNEアンケートプロジェクトWiki
  51. pne-enterprise : 企業向けOpenPNE
  52. pne-enterprise-note : ノート3
  53. pne-getinvolved : OpenPNE開発者になる
  54. pne-googleapps : GoogleAppsとの連携カスタマイズ
  55. pne-guidelines : OpenPNE開発のガイドライン
  56. pne-guidelines-note : OpenPNE開発のガイドラインノート
  57. pne-i18n : 国際化プロジェクト
  58. pne-i18n-note : ノート4
  59. pne-item : PNEアイテム
  60. pne-kansai : PNE関西
  61. pne-ktai : PNEKtaiプロジェクト
  62. pne-kurobako : 玄箱PNEプロジェクト
  63. pne-masterslave : MasterSlavePNE
  64. pne-masterslave-note : pne-masterslaveノート
  65. pne-member : OpenPNEメンバー向け情報
  66. pne-merge : ソースコードマージチーム
  67. pne-merge-license : ライセンスについて考えるWiki
  68. pne-merge-note : ノート8
  69. pne-openid : OpenID対応
  70. pne-openid-note : OpenIDノート
  71. pne-openpne3 : OpenPNE3インフォメーションページ
  72. pne-openpne3-develop : OpenPNE3開発用ページ
  73. pne-openpne3-develop/create_plugin
  74. pne-openpne3-develop/create_plugin/en
  75. pne-openpne3-develop/social-graph-layer-and-social-application-layer : SocialGraphLayer?SocialApplicationLayer?
  76. pne-openpne3-develop/specification : OpenPNE3機能仕様解説
  77. pne-openpne3-develop/specification/authentication : OpenPNE3機能仕様解説メンバー登録認証機能
  78. pne-openpne3-develop/specification/customize-template : OpenPNE3機能仕様解説テンプレートへの拡張機能
  79. pne-openpne3-develop/specification/definition : OpenPNE3用語の定義
  80. pne-openpne3-develop/suggestion : OpenPNE3提案一覧
  81. pne-openpne3-develop/tasks : OpenPNE3.0開発タスクリスト
  82. pne-openpne3-note : OpenPNE3ノート
  83. pne-openpne3/ChangeLog/ja : OpenPNE3改訂履歴
  84. pne-openpne3/features : OpenPNE3はこうなる
  85. pne-openpne3/i18n : OpenPNE3国際化プロジェクト
  86. pne-openpne3/i18n-note : OpenPNE3国際化ノート
  87. pne-openpne3/i18n/howTo : OpenPNE3国際化取り込み方法
  88. pne-openpne3/i18n/japanese : OpenPNE3i18nJapanese
  89. pne-openpne3/i18n/japanese-note : OpenPNE3i18njapanese-note
  90. pne-openpne3/i18n/spanish : OpenPNE3i18nSpanish
  91. pne-openpne3/i18n/template : OpenPNE3国際化翻訳用テンプレート
  92. pne-openpne3/roadmap : OpenPNE3ロードマップ
  93. pne-opensocial : OpenSocial対応1
  94. pne-opensocial-note : OpenSocial情報Wikiノート
  95. pne-postgresql
  96. pne-schedule : リリーススケジュール2
  97. pne-schedule-note : リリーススケジュール旧
  98. pne-spec : OpenPNE仕様メモ
  99. pne-spec-future : OpenPNE次期仕様
  100. pne-spec-note : ノート9
  101. pne-stable : OpenPNE安定版情報
  102. pne-sysadmin : OpenPNEサーバ管理者
  103. pne-sysadmin-note : 管理者様へ
  104. pne-tips : ユーザー作成のTips
  105. pne-tokyo : PNE東京
  106. pne-tokyo-note : コーディネータ3
  107. pne-ui : UI検討
  108. pne-unstable : OpenPNE開発版情報
  109. pne-unstable-note : クエリの改善
  110. pne-website : OpenPNEWEBサイト
  111. pne-website-note : OpenPNEWEBサイトノート
  112. pne-xhtmlcss : XHTMLCSS化プロジェクト
  113. pne-xhtmlcss-note : XHTMLCSS化ノート
  114. pne-xhtmlcss-t-markup : XHTMLCSS化プロジェクトマークアップ班
  115. pne-xhtmlcss-t-parts : XHTMLCSS化プロジェクトパーツ進捗管理班
  116. pne-xhtmlcss-t-pr : XHTMLCSS化プロジェクト広報班
  117. pne-xhtmlcss-t-template : XHTMLCSS化プロジェクトテンプレート班
  118. pne-xhtmlcss/parts : OpenPNE2.12XHTMLCSS化プロジェクトパーツリスト
  119. pne-xhtmlcss/parts/0 : a0.localNavh系f系c系ナビメニュー
  120. pne-xhtmlcss/parts/1 : a1.simpleBoxシンプルボックス
  121. pne-xhtmlcss/parts/10 : a10.eventDetailBoxイベント詳細ボックス
  122. pne-xhtmlcss/parts/11 : a11.homePhotoBoxホーム写真ボックス
  123. pne-xhtmlcss/parts/12 : a12.homeInfoBoxホームインフォメーションボックス
  124. pne-xhtmlcss/parts/13 : a13.photoUploadFormBoxプロフィール写真アップロードフォームボックス
  125. pne-xhtmlcss/parts/14 : a14.messageDetailBoxメッセージ詳細ボックス
  126. pne-xhtmlcss/parts/15 : a15.albumDetailBoxアルバム詳細ボックス
  127. pne-xhtmlcss/parts/16 : a16.albumImageBoxアルバム画像ボックス
  128. pne-xhtmlcss/parts/17 : a17.searchFormLine検索フォームライン
  129. pne-xhtmlcss/parts/18 : a18.linkLineリンクライン
  130. pne-xhtmlcss/parts/19 : a19.prevNextLinkLine前次リンクライン
  131. pne-xhtmlcss/parts/2 : a2.descriptionBox説明ボックス
  132. pne-xhtmlcss/parts/20 : a20.buttonLineボタンライン
  133. pne-xhtmlcss/parts/21 : a21.alertLineアラートライン
  134. pne-xhtmlcss/parts/22 : a22.commentListコメントリスト
  135. pne-xhtmlcss/parts/23 : a23.searchResultList検索結果リスト
  136. pne-xhtmlcss/parts/24 : a24.reviewListレビューリスト
  137. pne-xhtmlcss/parts/25 : a25.recentList最新書き込みリスト
  138. pne-xhtmlcss/parts/26 : a26.friendIntroListフレンド紹介文リスト
  139. pne-xhtmlcss/parts/27 : a27.manageList管理リスト
  140. pne-xhtmlcss/parts/28 : a28.searchCategoryList検索項目リスト
  141. pne-xhtmlcss/parts/29 : a29.messageListメッセージリスト
  142. pne-xhtmlcss/parts/3 : a3.alertBoxアラートボックス
  143. pne-xhtmlcss/parts/30 : a30.ashiatoListあしあとリスト
  144. pne-xhtmlcss/parts/31 : a31.rankingListランキングリスト
  145. pne-xhtmlcss/parts/32 : a32.bizSideTodoListBIZ用Todoリスト
  146. pne-xhtmlcss/parts/33 : a33.bizSideScheduleListBIZ用スケジュールリスト
  147. pne-xhtmlcss/parts/34 : a34.albumListアルバムリスト
  148. pne-xhtmlcss/parts/35 : a35.albumImageListアルバム画像リスト
  149. pne-xhtmlcss/parts/36 : a36.homeNineTableホーム9面テーブル
  150. pne-xhtmlcss/parts/37 : a37.photoTable写真テーブル
  151. pne-xhtmlcss/parts/38 : a38.homeMainTableホームメインテーブル
  152. pne-xhtmlcss/parts/39 : a39.formTable入力フォームテーブル
  153. pne-xhtmlcss/parts/4 : a4.infoBox案内ボックス
  154. pne-xhtmlcss/parts/40 : a40.weeklyCalendarTable週間カレンダーテーブル
  155. pne-xhtmlcss/parts/41 : a41.monthlyCalendarTable月間カレンダーテーブル
  156. pne-xhtmlcss/parts/42 : a42.bizWeeklyCalendarTableBIZ用週間カレンダーテーブル
  157. pne-xhtmlcss/parts/43 : a43.sideNavサイドナビ
  158. pne-xhtmlcss/parts/44 : a44.rankingSideNavランキングサイドナビ
  159. pne-xhtmlcss/parts/5 : a5.infoButtonBoxボタン付き案内ボックス
  160. pne-xhtmlcss/parts/6 : a6.yesNoButtonBoxはいいいえボタン付きボックス
  161. pne-xhtmlcss/parts/7 : a7.searchFormBox検索フォームボックス
  162. pne-xhtmlcss/parts/8 : a8.diaryDetailBox日記詳細ボックス
  163. pne-xhtmlcss/parts/9 : a9.topicDetailBoxトピック詳細ボックス
  164. pne-xhtmlcss/parts/capturelist : 全パーツリスト
  165. pne-xhtmlcss/tips : OpenPNE2.12でできる見栄えの変更
  166. pne-xhtmlcss/tips-note : HTMLとスタイル指定の関係
  167. pne-xhtmlcss/upgrade : XHTMLCSS化バージョンアップ時の注意
  168. pne-xhtmlcss/upgrade/colorcode : a2.12からのバージョンで2.10の配色を使用する方法
  169. pnemon : pnemon
  170. pnemon-note : ノート10
  171. pnetan : pnetan生態

Correctio テンプレート文法誤りを修正

OpenPNEテンプレートの文法的な誤りを修正するプロジェクトです。

2.10に含める改善について

2.10では、時間があまり無いので、下記の項目を修正する

修正項目

  • 現在の全PCテンプレートを http://www.w3.org/TR/html401/ に適合するようにする
  • ブラウザ確認時にはHTMLValidatorを用いて文法エラーが出ないようにする
  • テンプレート編集時にはCrescent Eveを用いて文法エラーが出ないようにする
  • HTLMValidでない違反を修正する
    • タグの物理的ミス(閉じ忘れ、閉じすぎ、属性の重複指定)
  • 管理画面も現在のXHTMLもどきからhttp://www.w3.org/TR/html401/ レベルに落とす
  • nl2brを<br>でだすようにする。
  • correctioコミュニティの特設トピックで指摘されている点を修正する

2.10特設修正用SNSについて

↓↓↓↓以下は2.10開発系では、目標値とする。必須改善項目では無い。↓↓↓↓

Correctioコミュニティからの課題

Correctioコミュニティで上がったトピックを指針として掲載します。

スペーサー画像は廃止しCSSへ

<img src="./skin/dummy.gif" style="width:7px;height:7px;" class="dummy">

 tableレイアウトに付き物の、上記のような透明画像を用いた位置調節を多用していますが、img要素にはalt属性が付物です。視覚障害者向けの読み上げブラウザやテキストブラウザなどでは、alt属性の値を表示したり読み上げます。なので、必須属性となっています。
 このスペイサー用のタグも、肥大部分ですね。CSSでmarginやpaddingにpositionなどで何とかなるケースが多いので、検討してみる価値はあります。

テーブルレイアウトを段階的にCSSへ

配置に関してtableと組み合わせて多重構造にしているケースも多いのですが、これも要検討です。クロスブラウザ的な問題から tableレイアウトにしていると思いますが、レガシーブラウザのどの当りまでをフォローしないといけないのか、メリットとデメリットを秤にかけ直してもよいかと。

  • → Forma Mutatio, XHTML+CSS

開発時のテンプレート作成・編集指針

UIの新規追加時や変更を行う際に、意識しておくべき項目です。

レイアウト崩れを防ぐための課題

入力値の上限を設け、レイアウト崩れを防ぐ

→ これは HTML+CSS で扱う問題ではないのでは?

スタイルはCSSファイルに

HTMLインラインでスタイルを定義するのはやめる。残っているとしたらCSS側にはき出す。

※style=xxxxなどのインライン表現は使わない。

妥当 (valid) であること

テンプレートを修正してコミットする際には、常にHTML Validにしておく

編集時ターゲットのHTMLバージョンは【※バージョン決定待ち】

  • 現行バージョンは HTML 4.01 Transitional
  • テンプレート新規開発時には XHTML 1.0 Transitional で可能な限り Strict の範囲で (未確定)

閉じタグは省略しない

必須要素はブラウザが文句言わなくても省略しない

ターゲット環境

IE6 IE7 FireFox?2をターゲット環境としてリリース前チェックを行う

【決定待ち】ボーダー

tdで書くのかそれともboder_01などのClass指定にするのか?

ブラウザ依存タグは使わない

※詳細情報希望

※参考: XHTML 1.1 で定義されている要素一覧 (XHTML 1.0 Strict を微修正したもの)

今後の方針

決定項目

取り掛かっていきましょう

必須attributeの属性値の追加

>警告を修正していく。 >多くはalt=""。dummy.gifのimgタグがそのほとんど。見つけ次第、適正な値を入れていく。
>発見するために、Html Validator、Crescent Eveなどを使う。
alt="" => alt="dummy"を全テンプレートに適用
置換処理で行えるので、テンプレートを上から(アルファベット)順に置換していく

htmlの文法エラーの訂正

>見つけ次第直していく。
>エラーを修正していく
閉じタグの閉じる位置の間違い修正(警告)
<form ><td>~</form></td>のようなものはCrescent Eveでエラーを示すので、エラーを示す部分を修正

↑までは2.10で達成させる

>タグの閉じミスを探して修正
>発見するために、Html Validatorを使っていく。
</form>のようなタグの閉じ忘れをhtmlvalidatorでチェックして修正(エラー)
ブラウザチェックを行い、エラーがある部分を判断して修正
htmlとしての出力は分岐があるものがあるので、考慮する必要がある

Smartyのコメント({*********})を削除すること

>ブラウザでのレンダリングが崩れてしまう可能性があるので、
>検討をしてからインデントを適用してから削除する。
テンプレートの<table>~</table>内のSmartyのコメントである({*********})を削除する
インデント作成+({*********})の削除

↑はbranchを作るなりして検証作業をしていく

検討中項目

どのようなツールを使うのか

Crescent Eveでの構文解析について

>Smartyのif文や演算子が誤認されてしまう。
>EclipseやemacsなどのエディタにSmartyの構文解析ができないものだろうか。

Html Validatorでの構文解析

>生成されたHTMLの結果しか表示されないので、
>ページの状態によって分岐パターンを網羅するようにしなければならなくなってしまう。

却下項目

こちらは、現段階では延期で

thタグ等の適切なマークアップについて

>先ずHtmlの文法として違反しているものから対応していく。
>個人的にはやるべきだと思っていのるので、Html文法の違反を修正してから取り掛かる項目としたい

tableタグのsummarry

>Html Validatorでは警告が出される。
>Htmlの文法の違反を修正してから、どういったsummaryを入れるべきか検討していこうと思う。

Htmlのコメントタグ廃止

>コメントタグはエンドユーザには不要との指摘。
>こちらもthタグ同様にHtml文法の違反を修正してから検討。

プロジェクトチケット

component=pne-correctio

#631
【HTML】webapp/modules/pc/templates/h_config.tpl
#632
【HTML】webapp/modules/pc/templates/o_login.tpl
#633
【HTML】webapp/modules/pc/templates/c_join_err_age.tpl
#634
【HTML】webapp/modules/pc/templates/c_event_edit.tpl
#635
【HTML】webapp/modules/pc/templates/c_event_add.tpl
#637
【HTML】webapp/modules/pc/templates/c_event_add_confirm.tpl
#638
【HTML】webapp/modules/pc/templates/c_edit.tpl
#639
【HTML】webapp/modules/pc/templates/h_config_prof.tpl
#640
【HTML】webapp/modules/pc/templates/h_config_prof.tpl
#641
【HTML】webapp/modules/pc/templates/h_schedule_edit_confirm.tpl
#642
【HTML】webapp/modules/pc/templates/h_schedule_edit.tpl
#643
【HTML】webapp/modules/pc/templates/h_schedule_add.tpl
#644
【HTML】webapp/modules/pc/templates/h_com_add.tpl
#645
【HTML】webapp/modules/pc/templates/f_message_send.tpl
#646
【HTML】webapp/modules/pc/templates/c_join_request.tpl
#647
【HTML】webapp/modules/pc/templates/h_diary_edit.tpl
#648
【HTML】webapp/modules/pc/templates/h_regist_prof_confirm.tpl
#649
【HTML】webapp/modules/pc/templates/h_regist_prof.tpl
#900
ブラウザ毎のレンダリングがおかしい
#1180
テストチケット
#1200
過度に多用されている罫線用 dummy.gif の style 属性の削減
#1221
style属性をsyyleとタイプミスしている箇所がある
#1336
dummy画像のalt=""をalt="dummy"に変更する
#1337
閉じタグの位置の適正化
#1377
span要素にname属性が指定されているのを削除