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

RSA鍵の作り方

var PassPhrase = "The Moon is a Harsh Mistress.";
var Bits = 1024;
var MattsRSAkey = cryptico.generateRSAKey(PassPhrase, Bits);

公開鍵の作り方

var MattsPublicKeyString = cryptico.publicKeyString(MattsRSAkey);       

すると、以下のような文字列が生成されます。

uXjrkGqe5WuS7zsTg6Z9DuS8cXLFz38ue+xrFzxrcQJCXtVccCoUFP2qH/AQ
4qMvxxvqkSYBpRm1R5a4/NdQ5ei8sE8gfZEq7dlcR+gOSv3nnS4/CX1n5Z5m
8bvFPF0lSZnYQ23xlyjXTaNacmV0IuZbqWd4j9LfdAKq5dvDaoE=

メッセージの暗号化

メッセージを暗号化してみます。

var PlainText = "Matt, I need you to help me with my Starcraft strategy.";
var EncryptionResult = cryptico.encrypt(PlainText, MattsPublicKeyString);

すると、以下のような暗号化された文字列が取得できます。

OOHoAlfm6Viyl7afkUVRoYQv24AfdLnxaay5GjcqpxvEK+dph5kUFZEZIFKo
vVoHoZbtUMekSbMqHQr3wNNpvcNWr4E3DgNLfMZQA1pCAUVmPjNM1ZQmrkKY
HPKvkhmVKaBiYAJGoO/YiFfKnaylLpKOYJZctkZc4wflZcEEqqg=?cJPt71I
HcU5c2LgqGXQKcx2BaAbm25Q2Ku94c933LX5MObL9qbTJEVEv29U0C3gIqcd
qwMV6nl33GtHjyRdHx5fZcon21glUKIbE9P71NwQ=

メッセージを復号化

では、暗号化されたメッセージを復号化してみましょう。

var CipherText = "OOHoAlfm6Viyl7afkUVRoYQv24AfdLnxaay5GjcqpxvEK+dph5kUFZEZIFKo \
                  vVoHoZbtUMekSbMqHQr3wNNpvcNWr4E3DgNLfMZQA1pCAUVmPjNM1ZQmrkKY \
                  HPKvkhmVKaBiYAJGoO/YiFfKnaylLpKOYJZctkZc4wflZcEEqqg=?cJPt71I \
                  HcU5c2LgqGXQKcx2BaAbm25Q2Ku94c933LX5MObL9qbTJEVEv29U0C3gIqcd \
                  qwMV6nl33GtHjyRdHx5fZcon21glUKIbE9P71NwQ=";

var DecryptionResult = cryptico.decrypt(CipherText, MattsRSAkey);

これでメッセージが復号化されました。

署名による暗号化

var PassPhrase = "There Ain't No Such Thing As A Free Lunch.";
var SamsRSAkey = cryptico.generateRSAKey(PassPhrase, 1024);

var PlainText = "Matt, I need you to help me with my Starcraft strategy.";

var EncryptionResult = cryptico.encrypt(PlainText, MattsPublicKeyString, SamsRSAkey);

公開鍵と秘密鍵の役割は通常の場合においては、公開鍵は暗号化に使われ、秘密鍵は復号に用いられますが、RSA暗号においては平文と暗号文の定義域が同じ（平文空間＝暗号文空間である）ため、任意の文書（メッセージ）を暗号文とみなして復号することができるようになります。

クライアントサイドでのセキュリティ対策に使えそうですね。
詳細&ダウンロードは下のリンクからどうぞ。

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

↑スクロールバーがiPhone風に表示されます。

↑ドラッグできない部分を作る事も可能です。

使い方

ドラッグしたい要素に以下の一文を追加するだけでドラッグが出来るようになるようです。

$("#overscroll").overscroll();

スマートフォンの普及によって、ブラウザの操作感も少し変わってきた気がします。
これからはタッチパネルが主流になり、PC向けサイトもこういったドラッグ対応は必須になるかもしれないですね。

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

画像にマウスオーバーするとビフォー・アフター が比較できる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)

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

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

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

↑再生してみた様子

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

使い方

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

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

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

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文字列が取得できるようになります。

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

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