css,javascript,trac.そして...本日もJava日和



tracにjQuery入れてみる(FlexJSPlugin)

FlexJSPluginとは?

FlexJSPluginとは、tracで簡単に外部JavaScriptファイルを読み込むプラグインです。
私にとってはpythonを理解してプラグインを作るより、jQueryを利用してJSで動作させたほうが敷居が低い気がするのでこれを利用しています。 tracのheaderやfooterを編集すれば同じようなことができますが、FlexJSPluginだと trac.iniで定義するだけでパス構造等が理解し易いうえに、出力されるソースがきれいです。
個人的にjQueryが好きなのでjQueryを呼び出すことにしていますが、prototype.js等のライブラリも問題なく動作します。
jQuery:jQueryとは
trac:tracの紹介(一部)

参照元

trac HACKSを参考にしています。 より多くの情報を必要とする場合は、こちらをご覧ください。

Flexible JavaScript inclusions for Trac

バグ&リクエスト

trac HACKSにnew ticketを登録すれば、後日対応していただけると思います。

バグレポート・リクエストを送る

ソースファイルのコンパイル

windowsの場合、コマンドプロンプト上で行い、pythonにパスが通っている必要があります。
ez_setupのインストールをしていない場合、先に行ってください。

ez_setup.pyのインストール

ダウンロードしたいところに移動
# cd /ダウンロード希望パス/
ソースのダウンロード
# svn co http://trac-hacks.org/svn/flexjsplugin
エラーが起きたら、zipからのコンパイルで対応
移動
# cd flexjsplugin
# cd /tracのバージョン/
コンパイル
# python setup.py bdist_egg
# cd dist
以上の作業で、/ダウンロード希望パス/flexjsplugin/distにFlexJSPluginのeggファイルが作られます。 これをpythonのサイトパッケージ等に移動させます。(windowsではエクスプローラで移動で良い)

ZIPファイルからのコンパイル

webに自由にアクセスできない環境で導入する場合、ソースファイルがzipで配布されいるので、以下のサイトからダウンロードしてください。

Flexible JavaScript inclusions for Trac

Downloadの項目でリンクが張られていますので、zipファイルをダウンロードしてください。 インストール方法は、ソースからのダウンロードと同様で、zipファイルを解等したフォルダに移動してから行ってください。

trac.iniの編集

1:プラグインの有効化
[components]
flexjs.flexjs = enabled
2:配置ファイルの設定
[flexjs]
global = foo.js,bar.js
local = blah.js
ext = http://example.com/test1.js,http://example.com/test2.js
global:tracのプロジェクトディレクトリに配置してあるjsファイルを指定
local:各プロジェクトディレクトリに配置してあるjsファイルを指定
ext:URLでjsファイルを指定
出力サンプル
上記のようなtrac.iniだと、このようにheadタグ内に記述されます。
<script type="text/javascript" src="/chrome/common/js/flex/foo.js"></script>
<script type="text/javascript" src="/chrome/common/js/flex/bar.js"></script>
<script type="text/javascript" src="http://example.com/test1.js"></script>
<script type="text/javascript" src="http://example.com/test2.js"></script>
<script type="text/javascript" src="/chrome/site/js/blah.js"></script>

JSファイル配置

trac.iniにファイルを指定したら、該当パラメータの位置にJSファイルを配置するが必要となります。
globalで指定したファイル
  {TRAC_HOME}/common/js/flex/
localで指定したファイル-
  {TRAC_HOME}/{PROJECT_HOME}/chrome/site/js/
extで指定したファイル-
  任意

jQuery用の設定サンプル

jQueryをgoogleのリポジトリで指定する場合
[flexjs]
global =
local = jquery.loader.js
ext = http://jqueryjs.googlecode.com/files/jquery-1.2.1.pack.js
jQueryをローカルに配置して指定する場合
[flexjs]
global =
local = jquery.js,jquery.loader.js
ext =
trac.iniに書いてて雑然としてきたら、上記のようなjquery.loader.jsで良いと思います。 むしろこれをやるなら、headerやfooterで定義しても同じような…(^^A;

タグ:trac,jQuery
jQuery css trac develop JavaScript JavaApp Other All サイト内検索