ブラウザの互換性を気にせずDOM操作やアニメーション、クッキーを操作したい際に使えるJavaScript「flow.js」をご紹介。

最近ではjQueryオンリーのような気もしますが、いろいろと機能を追加しようとして複数のプラグインを導入すると、だんだん動作が重くなってきます。

なるべく軽量のものが使いたい際の選択肢の一つとして覚えておくために自分用メモです。
まだ試してはいないのですがIE6やSafari2などのモダンブラウザでも動くようなので、なかなか良さそうです。

以下のような機能があるとの事。

• DOM Level 3の API操作
• アニメーション処理
• クッキー管理
• フォーム管理の簡素化
• XMLHttpRequestのクロスブラウザ対応

ブラウザにはそれぞれ癖があるので、こういったライブラリを使用して間違いや非サポートの処理をしないようにしたいですね。

サンプル

class属性にcheckedがあるulにliを追加する方法

var uls = document.getElementsByClassName("checked").filter(function(e) {
    return e.nodeName.toLowerCase() == "ul";
});

var lis = [];
uls.forEach(function(ul) {
    ul.getElementsByTagName("li").forEach(function(li) {
        lis.push(li);
    });
});

class属性にcheckedがあるulのliを取得する方法

var lis = document.getByClass("checked").filter(function(e) {
    return e.elementName() == "ul";
}).getByTag("li");

同上。class属性にcheckedがあるulのliを取得する方法

var lis = document.querySelectorAll("ul.checked li");

ライセンスはCCライセンスのようです。
詳細&ダウンロードは下のリンクからどうぞ。

ドラッグできるスクリプトは知ってる方も多いかもしれませんが、これは知らなかったのでメモ。

「Dragdealer JS」はIE6からiPhoneやAndroidでも軽快にドラッグできるJavaScriptですよ。
クロスブラウザ対応するスクリプトは覚えておいてもよいですよね。

スライダー

↑横スライダーの位置によってフォントサイズを変更するサンプル

スクロールバー

↑赤い部分をドラッグする事でコンテンツをスクロールさせてます。

画像スクロール

↑画像をドラッグするサンプル。
範囲外にドラッグすると反発するように戻るようになります。

これらが全てクロスブラウザで動作するので、ドラッグするインターフェースを作る際に良さそうです。
デモ&ダウンロードは下のリンクから確認ください。

Canvasでストライプ画像を手軽に作れる「cicadaJS」

サイトの背景や、ちょっとしたアクセントに使えそうだったのでご紹介。

要素をストライプで装飾してくれるようになります。
カラフルな見た目で華やかになりますね。

色や帯の幅は調整可能ですよ。

使い方

まずは、Canvasを描画するオブジェクトを指定します。

var cancan = document.getElementById('stripes');

次に、ストライプのカラーと帯の幅を指定します。

cancan.cicada([
	{
		width:53,
		color: [ 'rgba(239, 234, 211, 0.5)', 'rgba(191, 169, 124, 0.5)' ],
		alignment: 'middle'
	}, {
		width: 37,
		color: 'rgba(145, 0, 42, 0.5)',
		alignment: 'left'
	}, {
		width: 29,
		color: [ 'rgba(125, 167, 180, 0.5)', 'rgba(75, 119, 130, 0.5)' ],
		alignment: 'left'
	}
])

• width；数値、タイル領域の幅を指定します
• color:rgbで指定します。Arrayで複数指定も可
• alignment:’left’,’middle’,’right’のどれかを指定します。

デモ

http://matthewlein.com/cicadajs/demos/bg-random.html

↑ランダムにストライプを作成してくれますよ。

手軽にオシャレにしたい場合に良さそうです。
興味のある方は下のリンクからどうぞ。

画像やテキストにグレーフィルタをかけるjavascript「GRAYSCALE.JS」をご紹介。

IE系ではフィルターを適用し、
それ以外のブラウザではCanvasを使用してエフェクトを実装しているようです。

画像、背景画像、テキストカラーがグレースケールで表示されるので、
色がわからなくても情報が伝える事が出来る、ウェブアクセシビリティテストに使えそうですね。

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

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

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

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

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

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

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

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

デモ

現在何%が読み込み中なのか数値とバーで表示されるので、遅いページに設置すると親切かもしれませんね。

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

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

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

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

domReady

DOM構築後のタイミングで処理を実行場合に使えます。0.2KB。

domReady(function () {
  // dom is loaded!
});

Base64.js

Base64処理ができます。0.9KB。

Bowser

ブラウザ判別したい時に。0.2KB。

if (bowser().msie && bowser().version <= 6) {
  alert('hello China');
}

Micro-Templating

JSで使えるテンプレートエンジン。0.2KB。

<script type="text/html" id="user_tmpl">
  <% for ( var i = 0; i < users.length; i++ ) { %>
    <li><a href="<%=users[i].url%>"><%=users[i].name%></a></li>
  <% } %>
</script>

jQuery や Prototype のような フルスタック なフレームワークは必要ないという場合良さそうですね。

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

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+との事。

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

ウインドウサイズによって横幅やカラム数を変更したい。
そんな時につかえるのが「Adapt.js」。
ブラウザの横幅をチェックして、読み込むCSSを切り替えてくれるJavaScriptライブラリだ。

使い方

ウインドウサイズと、読み込むCSSを指定するだけでOKです。

例えば、760px以下と、980px以下、1280以下でCSSを切り替える場合には、
以下のように指定します。

・・・
range: [
    '760px            = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px           = fluid.css'
  ]
・・・

最近はウインドウサイズに合わせて幅や高さをフレキシブルに広げる手法がたくさん使われているので、こういったライブラリを覚えておくと良さそうだ。

JavaScriptでログを表示するのに使えるライブラリ「Blackbird」のご紹介。

出力したいメッセージを指定するだけできれいに整形して表示してくれます。

例えば、以下のようなJavaScriptを実行してみます。

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );

↑すると、こんな感じで素敵に表示してくれちゃいます。
アイコンと色で視覚的にメッセージを区別することができるので、後から見分けるのも簡単です。

使い方

使い方は簡単で、ファイルをダウンロードした後、headタグ内でJSとCSSを読み込むだけでOKです。

<html>
  <head>
    <script type="text/javascript" src="blackbird.js"></script>
    <link type="text/css" rel="Stylesheet" href="blackbird.css" />
  </head>

ほとんどのメジャーなブラウザで動作するようになっています。
IE6にも対応していますので、あのブラウザだけ動かないんだけど、、、
と言った時にも使えそうです。

便利なキーボードショートカット

ライブラリにはショートカットも含まれており、F2で表示非表示の切り替え、
Shift + F2でボックスの位置を変更、 Alt + Shift + F2でログメッセージをクリアしてくれます。

サイトには各ショートカットを実行するブックマークレットも有りますので、いちいち覚える必要もありません。

名前空間の変更も！

とは言っても既存のサイトでlogという名前をすでに使っているよ！という場合もあるかと思いますが、心配いりません。

簡単に名前空間を変更できるようになっています。

blackbird.jsを開いて11行目を変更すればOKです。

var NAMESPACE = 'log';

↑変更前

var NAMESPACE = 'myCustomLog';

↑これでmyCustomLog.debug(‘hoge’);が実行できるようになります。

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