Gmail風にドラッグ&ドロップでファイルアップロードが出来るjQueryプラグイン「jQuery HTML5 Uploader」が良さそうだったのでご紹介。

HTML5対応ブラウザであれば、ローカルにあるファイルをドラッグするだけでアップロード出来るようになります。

料金表や一覧を表示する際に欠かせないテーブルコーディングで、検索や並び替え、ページング、グラフ表示など色々なものがあったので、探しやすいようにjQueryプラグインをまとめてみました！

JavaScriptライブラリは外部にホスティングされているものを使うという場合に使えそうなので、メモ的にエントリー。

「cdnjs.com」にはCDNでホストしているJavaScriptライブラリをまとめたサイトです。

jQueryなどのいつも使うものはGoogle AJAX Libraries API を利用させてもらってますが、他のライブラリはホストされているのかな？と探す時に使えそうです。

Googleでホストされているものより多い

Googleでホストされているライブラリの一覧はこちらにあるのですが、それよりも多くのライブラリがありました。

raphael、ackbone.js、sammy.js、underscore.jsなどの日本ではあまり有名でないものも使用できるようになっています。

自分でライブラリを投稿できるようにもなっているので、
ホストして欲しいものは投稿してみると良いかもしれません。

ネタ的なプラグインですが、面白そうだったのでご紹介。

「Morse.js」はモールス信号を再生できるjQueryプラグインです。

HTML5対応のプラウザであればテキストをクリックするだけで、モースル信号を再生してくれます。

デモ

使い方

使い方は簡単で親要素名を指定してプラグインを有効化するだけです。

$("p").morseCode({bpm:12});

オプションのbpmで再生の早さを指定できます。

設置すると、テキストの上に<ruby>でモールス符号が表示され、クリックで音声を再生してくれるようになります。

英語のみの対応ですが、アイデア次第で使えるかもしれませんね。

使ってみたい方は下のリンクからどうぞ。

テキストにマウスオーバーした際に、エフェクトで遊べる「Lettering.js」面白かったのでご紹介。
jQueryプラグインとして実装されており、テキストをカラフルにしたり、文字をなめらかにスライドさせたりする演出をしてくれます。

わずか8KBで直感的にCanvasを使えるjQueryプラグイン「jCanvas」が良さそうだったのでご紹介。

特定の用途だけに特化したフレームワークが必要な場合、シンプルなもので良いのではないだろうか。

「microjs」では、DOM構築後のタイミングで処理を実行したいだけのフレームワークやBase64処理をするだけの物、ブラウザ判別するだけの物など、
ちょっとした時に使えるフレームワークが50以上揃っています。

以下にいくつか気になった物をご紹介。

JavaScriptだけで画像にレトロ調のエフェクトがかけれるライブラリを見つけたのでご紹介。

一瞬で画像をinstagr.am風にする事が可能です。

サイトを訪れるとデモがあり、自由に画像アップロードして試す事ができます。

使ってみた様子

↑元写真

↑エフェクト後。これがJSだけで処理できるのがすごい。

使い方

githubからファイルをダウンロードして、JSとCSSを読み込みます。

<script src="src/jquery.js"></script>
<script src="src/vintage.js"></script>
<link rel="stylesheet" type="text/css" 
href="css/vintagejs.css" media="all" />

その後、エフェクトを適用したい画像を指定するだけです。

$(function () {
    $('img.vintage').click(function () {
        $(this).vintage();
    });
});

動作するブラウザはFF3+、Chrome9+、Safari5+、Opera11+、IE9+との事。

興味のある方は下のリンクからどうぞ。

RSSをサイトに表示する際に使えるプラグインを見つけたのでご紹介。

「PaRSS」はRSSフィードを取得して動的に表示してくれるプラグインです。

Webサイトとは別にブログを持っている方に良さそうですね。

使い方

HTML

JavaScript

$("#feed").PaRSS(
  "http://www.your-blog.com/feed",  // feed url
  5,  // 取得するアイテムの数 (optional)
  "M jS g:i a",  // 日付のフォーマット (optional)
  true  // descriptions (optional)
);

日付のフォーマットはPHPで使える形式であればほぼ使用できるようです。

見た目の変更方法

RSSは<li>タグで出力されるようですが、項目毎にclassが割り振られているようで、CSSをカスタマイズするだけで見た目の変更が可能です。

出力されるHTML

・タイトルが囲まれるタグ

・日付が囲まれるタグ

・画像が囲まれるタグ

・descriptionが囲まれるタグ

追加するCSS

以下のようなCSSを作成します。

span.parss-title {
  /* title style definitions here */
}
span.parss-date {
  /* date style definitions here */
}
span.parss-image {
  /* image wrapper style definitions here */
}
span.parss-image img {
  /* styles for the actual image element */
}
div.parss-description {
  /* description style definitions here */
}

これで見た目の変更が可能です。

シンプルなスクリプトですね。
興味のある方は下のリンクからどうぞ。

ヨーロッパの地図をCSSとjQueryでクリッカブルマップにしてしまったすごいデモをご紹介。
Europe, CSS & jQuery clickable map by Winston Wolf

地図にマウスオーバーすると、ポップアップで地名を表示してくれるようになります。クリックすると、地名を選択可能に。

これ、すごいですね。

HTMLは単純な<li>タグで国名を一覧にしているだけなのですが、
以下のような画像を使って、うまくCSSで表現しています。

IE6以外のほとんどのブラウザで表示できるようになっています。
興味のある方は下のリンクからどうぞ。