【メモ】WordPress, テーマ内のJavaScriptをwp_enqueue_scriptに追加

テーマ内に置いたJavaScriptファイルをwp_enqueue_scriptで呼び出せるように設定する。

functions.php

function js_enque_method() {
   wp_register_script('example_script',get_bloginfo('template_url').'/js/example.js','jQuery','1.0');
   wp_enqueue_script('example_script');
}
add_action('wp_enqueue_scripts', 'js_enque_method');

テーマ内に[js]フォルダを作り、そのフォルダ内に[example.js]があります。
example.jsのVersionは1.0です。
example.jsはjQueryを必要とします。

CodaでもjQueryのコード補完をして欲しい

Codapanic.com の editor Coda がすこぶる便利です。

WordPressのThemeやPluginはほぼCodaで書いています。

一つだけ不満だったのはjQueryのコード補完ができないことです。
Twitterでそのことを愚痴ったら、@kzxtremeさんから jquery syntax mode って便利なものが公開されていると教えてもらいました。

http://digitalsandbox.net/index.php/project/category/jquery_syntax_mode/jquery_syntax_mode

サイトに丁寧に解説されているのでインストールも簡単でした。

digitalsandbox.netからzipファイルをダウンロードし解凍します。
解凍フォルダの .mode ファイルは ~/Library/Application Support/Coda/Modes/ にコピーします。
.clips ファイルはCodaを起動し「クリップ」ウインドウを開きます。ウインドウ > クリップ (⌃⌘C)
「クリップ」ウインドウの左サイドバーで右クリックし「グループの読み込み…」を選択し .clips ファイルを選択します。

Codaで使用は構文モードを jQuey を選択です。

jQuery コード補完はしてくれて嬉しい限りです。
まぁ、最新1.7系が出てこないのはしょうがないですかね。

クリップは他のeditorだとsnippet機能みたいなものでしょうか。
インストールした .clips には以下のものが入っていました。

ready+tab:
$(function() {
/*place jQuery actions here*/
 
});
 
$+tab:
$(’‘)
 
this+tab:
$(this)
 
func+tab:
function() {
 
}

func+tab: は補完の方が強いようで function になってしまいます。
fc+tab に変えました。

変更方法は 「クリップ」ウインドウ Function の [i] ボタンをクリックすると編集モードになります。
好みのキーコンビネーションに変えて「保存」をクリックするだけです。

ますますCodaが便利になりました。

正規表現ツール

正規表現チェックツール via 「正規表現クックブック」

【オンライン】
Rubular
http://www.rubular.com/

regexpal
http://regexpal.com/

regex.larsolavtorvik.com
http://regex.larsolavtorvik.com/

Regular Expression Editor
http://myregexp.com/

Nregex
http://www.nregex.com/nregex/default.aspx

reAnimator
http://osteele.com/tools/reanimator/

【デスクトップ】

・Windows
RegexBuddy
http://www.regexbuddy.com/

・Mac
Reginald RegEx explorer
http://atastypixel.com/blog/reginald-regex-explorer/

jQuery 1.5 RC 1 だってさ

jQuery1.5開発は順調に進んでいるようです。
開発者ブログに、JQUERY 1.5 RC 1 RELEASED がポストされていました。

1.4系から何が変わるのかは、JQUERY 1.5 BETA 1 RELEASEDJQUERY 1.5 BETA 1 CHANGE LOGセクションに詳細が書かれています。

ajax系が書き直され高速化が図られるらしく、他にIEに対するバグフィックスとかてんこ盛りなようです。
stableリリースが楽しみです。

これってprototype.jsに差をつけちゃうってことですかね。
$で取得するDOMがjQueryだと独自仕様になってるのがどうも馴染めないけど、そんなこと言っちゃいけないんでしょうねぇ。

Prototype 1.6.1 RC2, IE8 対応版

prototype.js が IE8 に対応した Prototype 1.6.1 RC2 をリリースしています。
Prototype 1.6.1 RC2: IE8 compatibility, Element storage, and bug fixes

RC なので IE8 対応が必要にならないなら stable 版を使おうかと思います。
IE8 もリリース直後にそこそこインストールされたようですが、サイトブラウジングの問題からダウングレードされたのかシェアは斬減傾向らしいです。

IE8本格普及期には対応しなければいけないのかもしれませんが、それはいつになるのでしょう?

prototype.js, IEではEventインスタンスがFirefoxと違っている

クリックをオブザーブしたハンドラに送られる Event インスタンスの中身が IE だけ微妙に違ってた。

HTML

<div id="thumbnail">
	<a href="images/image1.jpg" class="gallery"><img src="images/image1-thumb.jpg" alt="画像1" /></a>
	<a href="images/image2.jpg" class="gallery"><img src="images/image2-thumb.jpg" alt="画像2" /></a>
	<a href="images/image3.jpg" class="gallery"><img src="images/image3-thumb.jpg" alt="画像3" /></a>
</div>

Javascript

document.observe("dom:loaded",
	function (){$$('. gallery').each(
		function (element) {
			element.observe("click",clickHandler)
		})
	}
);
function clickHandler (event) {
	....
}

prototype.jsを使ってハンドラに送られた Event インスタンスを調べてみた。

Object.keys(event);
Object.values(event);

IE には Event インスタンスに currentTarget が存在しない。
また、 target は [objcect] になっておりその中身も [object HTMLImageElement] な Firefox などとは若干違っている。

希望は
currentTarget : a タグ
target : img タグ

IE は currentTarget が無いので a タグの DOM を取得するのにどうすんだろうが調べてみるきっかけ。
今回の script では a タグの href が必要だっただけなので無理矢理ごまかした。

IE, target.href プロパティ。
target(img)に本来は存在しない href プロパティがあった。
中身は img タグ src の値。

な〜んかへんなの。
多分、IEがやっちまってるのだろうと納得しておく。

update 2009-09-09
イベントを発生させた要素を取得するメソッドがありました。

event.element();

github, Git Client をインストール

ダウンロードは github.com からなライブラリとのつきあい方。

Google Code は subversion だけど github は違うらしい。
専用のクライアントをインストールしておくと subversion のように差分ダウンロード管理できる?

YUI Library :: Git FAQ に詳しく書かれている。
Git FAQ & Resources

OS X

Leopard

Tiger

.pkg がダウンロードできるのでインストールは GUI 。

他にも、Fink, Mac ports からでもインストールできるらしい。

Windows

使うのはターミナル、コマンドで。

YUI 2

cd "your directory"
sudo git clone git://github.com/yui/yui2.git

YUI 3 も開発が着々と進んでいるらしいです。

update
github では subversion もサポートを開始し Mac subversion クライアント Versions の使用が可能になっています。
inazumatv.com : こりゃ便利!githubでもVersionsが使えるョ

YUI version 2.7.0, jQuery 1.3.2

Yahoo YUI version 2.7.0が登場。
The Yahoo! User Interface Library (YUI)

jQuery 1.3.2
fixed bugs
jQueryはアップデートが頻繁なのでSVNで管理するが◯。
http://jqueryjs.googlecode.com/svn/trunk

update
Google AJAX API の YUI, jQuery もアップデートされた。
jQuery, YUI updates
GOOGLE AJAX API ALERTS

prototype.js, フォーム checkbox & radio がチェック済みかをチェック

prototype.js を使ってフォーム入力検証。
checkbox と radio のチェック。
Field.present('ID') が IE で使えないみたい。
で関数を作ってみた。

function checkFormChecked (type, name, count)
{
	var bool = false;
	var find = 0;
	if (!count) count = 1;
	var elements = $('form ID').getInputs(type, name);
	elements.each(
		function (obj) {
			if ($F(obj)) find++;
			if (find >= count) {
				bool = true;
				return;
			}
		}
	);
	return bool;
}

フォーム

<!--radio-->
<input type="radio" id="q1-0" name="q1" value="ある" /><label for="q1-0">ある</label>
<input type="radio" id="q1-1" name="q1" value="ない" /><label for="q1-1">ない</label>
 
<!--checkbox-->
<input type="checkbox" id="q2-1" name="q2[]" value="1.りんご" /><label for="q2-1">1.りんご</label>
<input type="checkbox" id="q2-2" name="q2[]" value="2.みかん" /><label for="q2-2">2.みかん</label>
<input type="checkbox" id="q2-3" name="q2[]" value="3.いちご" /><label for="q2-3">3.いちご</label>
<input type="checkbox" id="q2-4" name="q2[]" value="4.すいか" /><label for="q2-4">4.すいか</label>>

使い方は

checkFormChecked("radio","q1"); // true or false
 
checkFormChecked("checkbox","q2[]"); // true or false

prototype.js の $('form ID').getInputs(type, name) を使って対象データを取出して eachを使って処理をする。
Ver. 1.6 からは break, continuereturn にしてネらしい。

prototype.js, フォーム selectタグが選択済みかをチェック

prototype.js でフォームの入力チェックをする時に、Field.present('ID') で「入力済み」「選択済み」がチェック可能なのは助かる。
input type が text に使え、textarea, select タグにも使える。

IE のためにselectタグにvalue属性を忘れずに

ただ select タグをチェックするとき IE は value 属性が無いと選択していても false しか返さないので注意が必要。

<select name="fruits" id="fruits">
	<option value="">選択してください</option>
	<option value="みかん"> みかん </option>
	<option value="リンゴ"> リンゴ </option>
</select>
if ($("fruits") && Field.present('fruits')) {
	// 選択済み
}

面倒くさがらないでちゃんと value 属性を書くと吉。