jQueryベースで開発している際に画像のロールオーバー機能を取り入れたいことが時々あるのですが、良いプラグインがなく他の優れたライブラリ（MJL）を利用していました。

jQueryを少し触れた経験があれば、画像のロールオーバー機能は.hover()を利用して簡単に書けるものですが、.hover()はマウスイベントのためキーボード操作でフォーカスした際に動作しません（現状、多くのプラグインがそういう仕様です）。

そこで今回、MJL.Rolloverのコードリーディングをしてロジックを学ばせていただきつつ、キーボード操作にも対応した画像ロールオーバープラグインを書いてみました。（GNU GPLに基づく自由ソフトウェアということで問題ないという認識でいますが...、問題がありましたらお知らせください。単にjQuery Pluginに移植したのではなく、派生プログラムといったところですが...。）

サンプル

• サンプルHTMLを見る

HTML側はロールオーバーを実現したい要素（もしくは親要素）に、任意のclass属性値（roll等）を付けます。

<ul class="nav-global">
<li><a href="#"><img src="images/gnav_shimalog.gif" width="90" height="37" alt="Shimalog" class="roll" /></a></li>
</ul>

JavaScript側は、次のようにHTML側で付与したclass属性値に対し、プラグインを動作させるメソッドを書くだけでOKです。

"jQuery" in window && (function($) {
    $(function() {
        $(".roll").rollover();
    })
}(jQuery));

• 続きを読む

ある案件の制作作業で、お客さまがアップしている多数のYouTube動画を1つのエリアで切り替えて再生する方法がないか探ったところ、YouTube JavaScript Player APIを利用すると簡単に実現することが分かったので紹介します。

YouTube JavaScript Player APIを利用すると、Object要素の属性を操作したり（Firefoxでしか動作しませんでした）、動画毎にObject要素用意してを切り替えたりする（動画が多数になると重いです...。）必要がなく、非常にシンプルに実現できました。また、動画を切り替えた時もプレーヤーそのものは表示されたままで、動画の再生エリアがダイレクトに切り替わるので、見た目も美しいです。

• 続きを読む

XAMPP for Mac OS Xを導入したのですが足りないPerlモジュールが多数あったため、先人の皆さんのブログを参考にし、MacPortsを利用してPerl環境を整えそちらのPerlを利用するようにしました（sudo ln -s /opt/local/bin/perl /usr/bin/perlでシンボリックリンクを設定しました）。

しかしながら、この環境でMovable Typeをはじめ、Perlを利用したプログラムでMySQL接続が発生した際、下記のようなmysqld.sockが見つからないというエラーが発生します。
Connection error: Can't connect to local MySQL server through socket '/opt/local/var/run/mysql5/mysqld.sock'

この問題を解決するには、次の通りソケットファイルを指定します。これにより、PerlからXAMPPのMySQLに上手く接続ができるようになります。

• 続きを読む

ToI企画さまのWebサイトで公開されている「CKEditor for Movable Type 1.073」は、Movable Typeのリッチテキストエディタを拡張し、HTMLに不慣れな方でもWord感覚で編集が出来るようになる素晴らしいツールです。カスタムフィールドにもリッチテキストエディタを適用できるあたり、本当にすごいですよね。

ただ、マークアップになれている人は「開始タグの後ろになぜ改行が入るのか」「ソースコードのタブインデントを無しにしたい（or スペースにしたい）」など、出力されるソースコードの整形方法を変更したいという希望を持っていることと思います。

そこで、あまり情報がないCKEditor for Movable Typeの出力ソースをカスタマイズする方法を少しご紹介したいと思います。このカスタマイズ方法であれば、プラグインの元になっているCKEditorの仕様に大きな変更がない限り、バージョンアップしてもそのまま引き続き利用できると思います。さらに詳しい情報は、「CKEditor 3.x Developer's Guide」をご覧になるとよいと思います。

カスタマイズ結果の例

入力内容

カスタマイズ前のソースコード

カスタマイズ後のソースコード

• 続きを読む

（ずっと昔から使っている方法なのですが、書籍などで紹介されているのを見たことがないので記事にしてみました。）

ディレクトリを作成し、Hostsファイルを設定するだけで新しいバーチャルホストとしてアクセスできるようにする方法です。下記設定方法の通りに設定した場合、http://foo.localhost/はD:\Sites\foo\htdocsの内容を、http://bar.localhost/はD:\Sites\bar\htdocsの内容を表示するようになります。

これにより、バーチャルホストが増えるごとにhttpd-vhosts.confを設定したり、XAMPPのhtdocs内のファイルを入れ替えたりする手間が省け、案件ごとにファイルを管理するのも非常に楽になると思います（foo、barには案件名を英数字で設定します）。XAMPP for Mac OS Xなどをはじめ、Apacheであれば同様の設定が可能です。

• 続きを読む