JavaScriptのAPI

現状は、フレームワークにjQuery＋jQueryUIを使用しています。UI部分のデザインは、jQueryUI Theme Rollerでカスタマイズ可能です。なお、テーマ側で読み込むフレームワークを変更することも可能です。

原則的にネームスペースは、pukiwikiとなります。

使用しているライブラリ

jQuery + jQueryUI
最もポピュラーなJavaScriptのフレームワーク
Modernizr
次世代規格であるCSS3の各種プロパティが有効かを検出するためのライブラリ（実際は他にもIEのHTML5対応処理、localStrageなどのモダンな機能をサポートしているかの判定にも使える。CSSを追記するだけのスクリプト思いきや意外と高機能）
ExplorerCanvas
IEでCanvasタグが使えるようにする。
json2.js
JSON.stringify, JSON.parseのサポート
activity-indicator.js
ローディング画像
jquery.a-tools.js
テキスト選択領域操作
jquery.beautyOfCode.js
SyntaxHilighterのjQueryラッパー
jquery.cookie.js
Cookie操作（※）
jquery.dataTables.js
テーブルソート
jquery.i18n.js
多言語化
jquery.jplayer.min.js v2.1.0
ミュージックプレイヤー
jquery.lazyload.js
画像遅延ロード
jquery.query.js
QueryStrings操作
jquery.superfish.js
ポップアップメニュー（※）
jquery.textarea.js
テキストエリアでタブ入力
jquery.ui.rlightbox.js
画像インラインウィンドウ
iepngfix
IE6、IE5.5で透過PNGをサポート
ie-css3
IEでCSS3のborder-radius、text-shadow、box-shadowをサポート

（※）は、今後jQueryUIに取り込まれる可能性が高いものです。

自動的に有効になる機能

  • ボタンのデザインがjQueryUI準拠に。
  • 画像の遅延ロード（ただし、IE6未満ではPNGの場合有効にならない）
  • IE6の透過PNGサポート（画像のみ。背景は別途指定する必要あり。）
  • スムーズスクロール＆ハイライト
  • リンク先の拡張子が画像ファイルだった場合、インラインウィンドウで画像を表示
  • リンク先の拡張子が音楽ファイルだった場合、インラインウィンドウで音楽再生
  • 以下のようにテーブルを組んだ場合、テーブルソート機能が有効になる（もちろん、Trackerも） 
    |~タイトル1|~タイトル2|~タイトル3|h
|項目1|項目2|項目3|
    また、10行以上の場合、ページャーが表示されます。
  • フォーム送信時にフォームをロック
  • 添付フォームをswfuploadに切り替える（class名がattach_formになっている部分を書き換えます）
  • ポップアップToc
  • 編集内容の自動バックアップ（ウィンドウを間違って閉じてもそれまでの編集内容がクライアントに保存されます。）r12

スクリプトで指定する必要がある機能

  • 背景画像の透過PNGサポート
  • インラインダイアログ

オーバーライド関数

pukiwiki関数には、skinオブジェクトと、registerオブジェクトがあります。ここに任意の処理を入れることで、skin.jsの処理をオーバーライドさせることが可能です。

pukiwiki.register.before_init(function(){...});pukiwiki.init()が実行される前に実行
pukiwiki.register.init(function(){...});pukiwiki.init()が実行されたあとで実行
pukiwiki.register.before_unload(function(){...});pukiwiki.unload()が実行される前に実行
pukiwiki.register.unload(function(){...});pukiwiki.unload()が実行されたあとで実行
pukiwiki.skin.suckerfish = {};suckerfishのオーバーライド
pukiwiki.skin.tablesorter = {};tablesorterのオーバーライド
pukiwiki.skin.swfupload = {};swfuploadのオーバーライド

これらは、スキンスクリプトの実行直後に実行されます。

使用例

例えば、スタイルシートが以下のようになっていているとします。（blueboxより）

.bar {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

これを、IEでも有効にしたい場合は、スキン側でbefore_init関数に入れましょう。border-radiusをサポートしているかの判定はModernizr.borderradiusで行ないます。

pukiwiki.register.before_init(function(){
	if (Modernizr.borderradius !== true){
		$('.bar').css({
			'behavior': 'url('+SKIN_DIR+'js/ie-css3.htc)'
		});
	}
});

というように指定します。もちろん、CSSにie-css3.htcで指定してもいいですが、そうすると画面内にDOMが存在していなくてもie-css3.htcが読み込まれてその都度処理が入るため、どうしても重くなります。しかも、htcは中身がJavaScriptなので、CSSで指定していてもJavaScript無効時は当然動作しません。このため、上のスクリプトで動的に読み込むようにすることを強く推奨します。

また、スクリプトで動的にDOMを追加する場合は、init()関数内に入れましょう。 以下は、xxxlogueの例です。

pukiwiki.register.init(function(){
 	/* Shelf */
 	$('#content-top').html('<a id="shelf_link" style="cursor:pointer;">Open/Close</a>'); // シェルフのDOM生成
 	$('a#shelf_link').click(function(){
 		$('#toggle').animate({height: 'toggle'}); // シェルフのイベント割り当て
 	});
});

$(document).ready(function(){...});との違いは、スキンの自動処理が完了したあとに実行されるという点です。

sukerfishのアニメーションを変更したい場合は、pukiwiki.skin.suckerfishオブジェクトを使います。（※関数ではありません！）

使えるオプションはhttp://users.tpg.com.au/j_birch/plugins/superfish/#optionsを参考にしてください。以下はxxxlogueの例です。

pukiwiki.skin.suckerfish = {
 		autoArrows:		false,
 		dropShadows:	false,
 		speed:			'fast',
 		animation:		{height:'show'}
 	}
}

非同期通信でインラインダイアログを使いたい場合： 

pukiwiki_skin.ajax_dialog(params,prefix,callback,parse)
params
querystringの配列を入れます。パース関数は、jquery.query.jsを使ってください。
prefix
非同期通信で読み込んだHTMLのルート部分のclassあるいはidを入れます。指定方法はCSSセレクタです。例えば、id属性がnewwinの場合、#newwinと入れます。
callback
非同期通信完了後実行したい関数をいれます。
parse
送られてきたjsonデーターをパースするのに使います。なお、jsonデータには、最終的にtitleとbodyを出力する必要があります。bodyはダイアログの中身、titleはダイアログのタイトルです。これらはハードコーディングされています。

なお、テーブルソート機能とボタンのデザイン書き換えは自動的に行われます。

イベント割り当てもparse関数を使ってください。

便利な変数

$('link[rel=canonical]')[0].href
これで、ページのアドレスを取得することができます。ハッシュタグを用いたXSSが発生するおそれがあるため、window.nameや、document.URL、document.referrer、location.hrefなどは使わないでください。

タブ

タブは、以下の様なマークアップで自動的にタブ式になります。このタブをクリックすると、そのリンク先のHTML部分のみが非同期で呼び出され、表示されます。JavaScript無効時は、単純なリンクとして機能します。

<div class="tabs" role="application">
	<ul role="tablist">
		<li role="tab"><a href="タブ１のリンク">タブ１</a></li>
		<li role="tab"><a href="タブ２のリンク">タブ２</a></li>
	</ul>
</div>

referer.inc.phpや、logview.inc.php、attach.inc.phpなどのソースを参考にするといいでしょう。