UIを作成するのは非常に時間がかかりますよね。時間を節約しながらクオリティを保ちたいときに使える素材がまとめられていたのでエントリーです。

PhotoShopで使えるUIデータが70点まとめられた「70 Free PSD Web UI Elements For Designers」をご紹介。

いつか使いそうなのでエントリー。jQueryを使ってタグを入力するためのプラグインです。
オートコンプリート機能もあるし、カンマで次のタグをどんどん入力できるようになっていてかなり便利そうでした。

使ってみた様子

↑オートコンプリートの様子

↑ダブルクリックで編集モードになり、保存とキャンセルボタンが表示されます。

使い方

使い方もシンプルで、オートコンプリートのデータを取得するURLを指定するだけでOKです。

$( "#tagform-full" ).find('input.tag').tagedit({
	autocompleteURL: 'server/autocomplete.php',
});

使い勝手が良さそうですね。
詳細＆ダウンロードは以下からどうぞ。

リッチなテキストエディタを使いたい場合にWYSIWYGエディタを導入するサイトが増えてきている。

WordPressなどで使われているTinyMCEは高機能な分、かなり大きなファイル構成になっているため、どうしても容量が大きくなりがちだ。

しかし、本日紹介する「NicEdit」をすれば、わずか30KBの1つのファイルで
WYSIWYGの実装が可能だ。

使い方

実装するには、以下の２行を追加するだけでOKだ。

<script src="nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>

これで、ページ内にあるテキストエリアが自動的にWYSIWYGエディタに様変わりする。

↑実装した様子

必要最低限の機能で良い場合に十分使えるシステムだ。
公式サイトにはデモがあるので、一度触れてみることをお勧めする。

オープンソースのCMSと言えばもはやWordpressがスタンダートですが、本日紹介する「Calipso」はWordPressとDrupalにインスパイアされたCMSだ。

コンテンツのメンテナンスをするのにCMSを使うのは良くあるが、
最近話題のnode.jsを使ってみたいという場合にどうだろうか。

サーバーサイドにnode.jsとMongoDBで動くように作られており、ちょっとしたサイトを構築するのに更新が簡単だろう。

↑プロフィールの編集画面

日本語も問題なく入力することができるようになっているので、サイト内の一部の更新をする。そんな場合にマッチする便利なCMSではないだろうか。

jQueryの使い方を基礎から学びたい人向けの「jQuery Fundamentals」が良さそうだったのでご紹介。

JavaScriptの使い方から、セレクターの使い方、プラグインの作り方などが詳細に説明されていますよ。

これから勉強する人からバリバリ使っている人まで、ひと通り読んでおくと良さそうです。

var foo = 'hello';

var sayHello = function() {
    console.log(foo);
};

sayHello();         // logs 'hello'
console.log(foo);   // also logs 'hello'

↑スコープの使い方

$('p').click(function() {
    console.log('click');
});

↑イベントの使い方

(function($){
    $.fn.showLinkLocation = function() {
        return this.filter('a').each(function(){
            $(this).append(
                ' (' + $(this).attr('href') + ')'
            );
        });
    };
}(jQuery));

// Usage example:
$('a').showLinkLocation();

↑プラグインの作り方

内容の変更をGithubで受け付けているので、変更したい人はそちらからコンテンツの追加もできるようになっています。

英語なのでちょっと、、という人でも、ソースコードを読むだけでもためになると思うので
ひとつ上のレベルを目指したい人は読んで置くと良さそうです。

キーボードで動かす全画面スライドショーが作れるjQueryプラグイン「Jquery.ascensor.js」が良さそうだったのでご紹介。

マップを作成して、次のページの座標を指定する作りになっています。
プレゼンを作る際に、便利そう。

ブラウザ上でスムーズにとスワイプされるのは見ていて気持ちいいです。

自分用メモ。

WordPress3.2からIE6がサポートされなくなるようですね。

beta版をダウンロードしてみる

WordPress News

↑WordPressの公式サイトから、beta版がダウンロードできるようになっています。

容量が大きいページを開く際にプリローダーを表示するJavaScript「QueryLoader」をご紹介。

大きな画像ファイルがたくさんある場合や、プログラムから動的に画像出力する際など、表示に時間がかかる際に使えるスクリプトになっています。

最近知ったHTML5で作られたWordPressテーマをを備忘録的にまとめておきます。

デザイン済みテーマ、カスタマイズ用のシンプルテーマ、IE6でもデザインが崩れないテーマなど色々ありました。

薄汚れた感じを表現できるグランジ系のPhotoShopブラシが60+ Must-Have Photoshop Brush Sets For Excellent Grunge Effectsにてまとめられていたのでご紹介。

ブラシを使って、しわ、ひっかき傷、かすれ、コーヒーがこぼれた感じなどを表現できるようになります。