35度を超える暑さにカッとなって、Tracのインタフェース部分（ヘッダー・ナビゲーション部分）をCSSでデザインするために強引にHTMLを書き換えるJavaScriptを公開してみます。
→Tracのカスタマイズの関係ファイル(zip形式：84KB)をダウンロード
スクリーンショット
カスタマイズ前
カスタマイズ後
実際に動いている、カスタマイズしたTracはこちら
チケット一覧等でアイコンを表示してるのはこちら
(2008/08/16 サーバー移転のため公開Tracは閉鎖しました)
社内ではサイト制作や開発でTrac+svnを使っているのですが、デフォルトのデザインのままだと慣れるまで使いづらいんですよね（特に英語だから）
インタアクト株式会社さんからTracの日本語化のパッケージも公開されていますが、これは表記が日本語になるだけで、デザイン面がカスタマイズされる訳ではないんですよねー。
ディレクター（♀）から「可愛くないから使いたくない！」という声まで出ちゃったので、じゃいっそデザインを変えちゃえと。
（2007年1月ぐらいには作ってた）
デザインはCGFMのデザイナーMutsukiがやってます。
でもTracはPythonって言語で動いてるんですよねー。筆者には全く知識が無い言語。
どっかのテンプレート化されてるのかな？と見るとこれがまたハードコーディングに近い感じ。
下手に触るわけにもいかない。
一度、それでも頑張って書き直したのだけど、うちのプログラマーにパッチ当てもらったらテンプレート関係が上書きされちゃった経緯があったので、極力関係ファイルは触らないようにJSメインで実装しました。
このJSには以下の特徴があります。
メイン機能
- ヘッダー、メニュー部分を日本語化
- CSSでデザインしやすいようにメニュー関係に個別にclass名を設定
- ログインユーザーが誰なのかわかりやすくアイコンで表示
オマケ機能
- ページ内でユーザー名(ログインユーザー)の文字列を検索して、アイコンを表示するclass名を設定
※ヘッダーのロゴ画像は変更しません！
Tracの設定ファイルで変更してください！
Trac のインタフェースをカスタマイズする – Snippetsさんの記事が参考になります。
実際にこんな風にHTMLを書き換えてます
○変換前
- logged in as garyu
- Logout
- Settings
- Help/Guide
- About Trac
~
○変換後
~
li内のaタグに対して個別にidを振る事で、CSSでデザインのカスタマイズを行いやすくしています。
設置方法
1. Tracのカスタマイズの関係ファイル(zip形式：84KB)ををダウンロードして解凍
- ファイル構成
- [htdocs]
├[css/trac_design.css] :ナビゲーション部分、アイコンの定義したCSS
├[js/trac_design.js] :メインのjavascript
└[img] ：アイコンのサンプル関係
2. 一カ所だけテンプレートファイルを修正
必要ファイルを読み込むように[templates/header.cs] 内 の</head>タグの前に以下の２行を追加して保存します。
</head>
↓
<script type=”text/javascript” src=”/trac/chrome/site/js/trac_design.js”></script>
<link rel=”stylesheet” href=”/trac/chrome/site/css/trac_design.css” type=”text/css” />
</head>
（この書き方はかなり怪しいです、、、）
TracのCSSを残しつつ、定義を再度上書きする形なので面倒かも。
/chrome/common/css/trac.css をいじった方が早いかも。
3. ユーザー名のアイコン表示のため、[js/trac_design.js]でユーザー名を設定
var OwnerList = new Array("cota","garyu","fujiko","mutsuki","all","somebody");
アイコン機能を使う人は、 [htdocs/img]内のアイコン画像を適時変更してください。
アイコン表示機能を使わない場合は以下のように書いてください。
var OwnerList = false;
※全文検索がDOMで行うため、表示が遅くなる時はOFFにしてください。
4. 各ファイルのアップロード
2,3のファイルをTrac内の[htdocs],[template]内にそれぞれアップします。
あとはサーバーのTracにアクセスして実際にHTMLが書き変わるか確認してください。
長くなったので、別の記事でデザインをカスタマイズするポイントを書きます。
（追記）
TracのインタフェースでのデザインをカスタマイズするポイントでJavaScriptが変換して与えるCSSのid,classの詳細をまとめました。
コメント