The multimedia for the future
Webコンテンツをもっとインタラクティブにできるツール
テーマ内に置いた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を必要とします。
panic.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 には以下のものが入っていました。
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/
jQuery1.5開発は順調に進んでいるようです。
開発者ブログに、JQUERY 1.5 RC 1 RELEASED がポストされていました。
1.4系から何が変わるのかは、JQUERY 1.5 BETA 1 RELEASED の JQUERY 1.5 BETA 1 CHANGE LOGセクションに詳細が書かれています。
ajax系が書き直され高速化が図られるらしく、他にIEに対するバグフィックスとかてんこ盛りなようです。
stableリリースが楽しみです。
これってprototype.jsに差をつけちゃうってことですかね。
$で取得するDOMがjQueryだと独自仕様になってるのがどうも馴染めないけど、そんなこと言っちゃいけないんでしょうねぇ。
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本格普及期には対応しなければいけないのかもしれませんが、それはいつになるのでしょう？
クリックをオブザーブしたハンドラに送られる 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.com からなライブラリとのつきあい方。
Google Code は subversion だけど github は違うらしい。
専用のクライアントをインストールしておくと subversion のように差分ダウンロード管理できる？
YUI Library :: Git FAQ に詳しく書かれている。
Git FAQ & Resources
.pkg がダウンロードできるのでインストールは GUI 。
他にも、Fink, Mac ports からでもインストールできるらしい。
使うのはターミナル、コマンドで。
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が使えるョ
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 のチェック。
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, continue は return にしてネらしい。
prototype.js でフォームの入力チェックをする時に、Field.present('ID') で「入力済み」「選択済み」がチェック可能なのは助かる。
input type が text に使え、textarea, select タグにも使える。
ただ 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 属性を書くと吉。