RSA鍵の生成と公開鍵による暗号化、復号化が出来るJavaScript「cryptico.js」をご紹介。

スマートフォンのようにコンテンツをドラッグできるjQueryプラグイン「overscroll」

ドラッグ操作でコンテンツをスクロール出来るようになります。

画像にマウスオーバーするとビフォー・アフター が比較できるjQueryプラグイン「uCompare」

使用前、使用後みたいな感じに2枚の画像を比較できるjQueryプラグインです。
ショッピングサイトなんかに使えそうですね。

デモでは東日本大震災の前後での
GoogleMapの画像を比較したりしています。
画像を見ると心苦しくなってしまうのですが、使い方次第では有用な使い方ができそうでした。

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

HTMLベースのプレゼンツールは当サイトでも何度かご紹介しているのですが、アニメーションがカッコ良かったのとデザインが素敵だったのでご紹介。

deck.jsを使うとモダンなHTMLでプレゼンテーションが出来るようになります。

サイト自体がこのライブラリで実装されており、キーボードの矢印キーやマウスクリックに対応しておりサクサク動くようになっています。

触ってみると、エフェクトがいい感じに気持ちよくてちょっと次のプレゼンで使ってみたくなりました。

ドキュメントも豊富に揃っているので、カスタマイズも割と簡単にできそうです。

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

AJAXで外部通信する際にロード中の表示をするのは一般に多いですが、
Apple製品などで良く使われているクルクルするローディングを手軽にカスタマイズできるライブラリを見つけたのでご紹介します。

「Spin.js」を使うと、ローディングアイコンの
ラインの数、太さ、長さ、回転スピードなどを簡単にカスタマイズする事が可能になります。

CSSとJSのみで実装されているので、画像が必要ない構成になっています。

使い方

オプションの引数を設定して、表示させたい位置のidを指定すだけのようです。

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

対応ブラウザもIE6からiPhoneまで幅広く対応していました。

Chrome
Safari 4+
Firefox 3.5+
IE 6,7,8,9+
Opera 10.6+
Mobile Safari (iOS 4)

こういったライブラリは何度もお世話になるので、自分的に覚えておきたいです。
詳細&ダウンロードは下のリンクからどうぞ。

米Yahoo! が埋め込み式のメディアプレイヤー Yahoo! WebPlayerを公開しました。かっこ良いのと使い勝手が良さそうだったのとで、いつか使うかもしれないメモ的エントリーです。

このライブラリを使用する事で、mp3へのリンクやYoutube、動画へのリンクがページ内でかっこ良く再生してくれます。

さらにページ内のリンクを自動で拾ってプライリストにしてくれたりもします。

↑再生してみた様子

対応ブラウザにはIE6も含まれているようですね。

使い方

使い方は簡単で、以下のスクリプトタグを</body>の直前に挿入すればOKです。

<script type="text/javascript" 
src="http://webplayer.yahooapis.com/player-beta.js"></script>

お手軽ですね:)
興味のある方は下のリンクからどうぞ〜。

Canvasを使ってスタイリッシュなテキストが描画できる「CanvasText」

HTML5のCanvasはFlashの変わりのダイナミックな処理のイメージがありますが、
テキストをリッチに表示したりするなどの細かな使い方もできたりします。

CanvasTextというJavaScriptライブラリを使うと、
HTMLとCSSを使った構文でインパクトのある文字を魅せる事が出来るようになります。

使い方

//インスタンスを作成
var CanvasText = new CanvasText;

//共通の処理を記述
CanvasText.config({
    canvasId: "canvas",
    fontFamily: "Verdana",
    fontSize: "14px",
    fontWeight: "normal",
    fontColor: "#000",
    lineHeight: "12"
});

//blueクラスを作成して、属性を指定
CanvasText.defineClass("blue",{
    fontSize: "24px",
    fontColor: "#29a1f1",
    fontFamily: "Impact",
    fontWeight: "normal"
});

//pinkクラスを作成して、属性を指定
CanvasText.defineClass("pink",{
    fontSize: "24px",
    fontColor: "#ff5e99",
    fontFamily: "Times new roman",
    fontWeight: "bold"
});

//Canvasに描画するテキストを指定。ここでblueクラスとpinkクラスを使用します。
var text = 'I like <class="blue">blue</class> color but I also like <class="pink">pink</class> color!';
text += '<br />Nevermind, I prefer <class="blue">blue</class> to <class="pink">pink</class>... !'; 

//ここで描画します。
CanvasText.drawText({
    text:text,
    x: 20,
    y: 30
});

吹出し型ツールチップを設置できるjQuery「grumble.js」が面白そうだったのでご紹介します。

これを使うと、漫画風の吹き出しを自由に表示する事が出来るようになります。

吹出しには背景画像が指定されているので、
CSSを変更してオリジナルの吹出しにする事も簡単そうでした。

使い方

以下のようなスクリプトを追加する事で表示する事ができました。

$('h1').grumble({
	text: 'ここにメッセージを入れます!',
	angle: 85,
	distance: 100,
	showAfter: 500
});

オプションの説明

• text:表示する文章
• angle:角度
• distance:距離
• showAfter:指定した秒数後に表示（ミリ秒）

オプショには他にもコールバック処理なんかもありました。
詳細&ダウンロードは下のリンクからどうぞ！

クレジットカードの入力フォーマットをチェック出来るjQueryプラグイン「Smart Validate」

以下のようなコードで簡単にチェックが出来るようになりました。

$('.cc-container').ccvalidate({ onvalidate: function(isValid) {
    if (!isValid) {
        alert('クレジットカードのフォーマットを正しく入力してください。');
        return false;
    }
}

ドロップダウンもいい感じにカスタマイズされています。
実際にカードが有効かどうかのチェックはできませんが、商品を購入する前にこういったチェックがあれば親切ですよね。

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

ajaxを使用してデータベースの情報を表示する仕組みは一般的になってきたと言ってもいいと思いますが、
そこまで手をかけたくない小規模の案件も多いですよね。

そんな時に使えそうなのが、CSVをJSONに変換してくれるJavaScriptライブラリ「csonv.js」です。

CSVデータさえアップロードしてもらえば、常に最新の情報を表示する事ができるようになりますよ。

CSVの形式

CSVの作り方には制約があり、最初の行はキー名にする必要があるようです。
データは2行目以降でなければいけないようですね。

文字列の中に,(カンマ)を使いたい場合には、;（セミコロン）区切りでもOKなようです。

使い方

使い方はいたって簡単でCSVのパスを指定するだけです。

var members = Csonv.fetch("path/to/csv/family.csv");
var result    = JSON.stringify(members, null, 2);
alert(result);

↑これでJSON文字列が取得できるようになります。

プログラムの知識も殆ど必要なくできるので、ちょっとしたときに活躍してくれそうですね。

詳細&ダウンロードは下のリンクからどうぞ。