JavaScript - インクレイブ株式会社[仙台・渋谷]

技術のご紹介

IT開発センターBlog

Node.js

DATE 2011.07.16

こんにちは仲沢です。
こちら仙台では、本日より六魂祭が始まるということで、街中も大変賑わっております。私も東北観光復興の呼び水となるよう、一仙台市民として期待しています。
さて、本日は最近注目の技術「Node.js」をご紹介いたします。
Webアプリケーションを作成する際に利用する、サーバサイドのプログミラング言語として代表的なのは、PHPやRuby、Perl、Java、ASP.NETなどの言語ですが、その一方でJavaScriptは、リッチなGUIを実装するためにクライアントサイドで使われる方が多いです。
このサーバサイドとクライアントサイド相互のプログラミング言語の特徴を理解し、使い分けを行うことでWEBアプリケーションを構築することができました。
しかし、今後はサーバサイドの開発でもJavaScriptが使うのが主流となると言われています。

「サーバサイドJavaScript」では、文字どおり、サーバサイドのアプリケーションの実装言語として、JavaScriptを使用します。
JavaScriptをサーバサイドで使うことにより、クライアントサイドと同じ言語で開発でき、開発効率が上がることが期待されます。

クライアントサイドで利用されてきたJavaScriptがサーバサイドでも利用できるようになった背景にはJavaScriptエンジンにJITが搭載されるようになり、処理速度が格段に向上したことにより、サーバサイドでよく使われている他の言語と遜色ないパフォーマンスが実現できるようになったことが挙げられます。

そんな今注目されているサーバサイドJavaScriptの中で取り分け高く評価されているのが「Node.js」となります。
通常のサーバサイドJavaScriptは1コネクションに対して1プロセス/スレッド消費するのに対して、Node.jsの場合は非同期I/Oを用いて一つのプロセスでいくつものHTTPコネクションを扱うことができます。
これはWebサービスに一時的にアクセスが殺到したとき、つながらなくなるといった、Webアプリケーション開発者であれば、誰でも一度は頭を悩ましたことのある問題に対しての耐性が高いということを示しています。

プラットフォームの部分ではクラウドが台頭してきており、高負荷にも耐えうる環境ができつつありますが、ソフトウェアにおいてもこのような技術が出てきていることは今後の動向に目が離せません。

【JavaScriptTips】アニメーションのタイミングを調整する

DATE 2011.01.31

CATEGORY 技術Tips

TAGS JavaScript, JavaScriptTips, jQuery, アニメーション

こんにちは。プロダクト事業本部の佐藤です。

今日はjQueryでアニメーションをさせる場合のタイミングの管理についてまとめてみたいと思います。

■アニメーションとキュー

jQueryでアニメーション処理を書く場合、同一の要素に対して複数のアニメーションを指定すると、ひとつひとつ順番に実行されます。メソッドチェーンのかたちで書いても書かなくても同じです。

$('#box').fadeOut(500).fadeIn(500);
// ↓も同じ
//$('#box').fadeOut(500);
//$('#box').fadeIn(500);

#box

ですが、複数の要素それぞれに対してアニメーションを指定した場合は、同時に実行されます。

$('#box1').fadeOut(500).fadeIn(500);
$('#box2').fadeOut(500).fadeIn(500);

#box1

#box2

上記のコードでは、box1もbox2も同時にアニメーションします。box1の処理が終わってからbox2が処理されるわけではありません。しかし、それぞれの要素に指定したfadeOutとfadeInは順番に実行されています。

jQueryのアニメーションは、要素ごとに、キューとして管理されます。要素ごとの管理なので、同じ要素に複数のアニメーションを指定した場合は、その要素のキューにどんどん追加され、順番に実行されていきます。別な要素にアニメーションを指定した場合は、別なキューに入るので、同時に実行されます。

■animateメソッド

fadeOutやfadeInのようなメソッドは、animateメソッドのショートカットです。そしてそのanimateメソッドを直接使えば、複数の動きをひとつのアニメーションとして実行させることもできます。

$('#box')
    .animate({
        opacity: 0,
        width: 0,
        height: 0
    }, 500)
    .animate({
        opacity: 1,
        width: 100,
        height: 100
    }, 500)
;

#box

透明度(opacity)と幅(width)と高さ(height)に関する3つの動作がひとつのアニメーションとして扱われます。そして、ひとつの要素に対してanimateメソッドを複数回呼び出すとそれらはキューに登録されるので、ふたつのアニメーションが順番に実行されます。

■delayメソッド

delayメソッドを使うと、キューに待ち時間を指定することができます。

$('#box').fadeOut(500).delay(1000).fadeIn(500);

#box

フェードアウトして、少し待って、フェードインします。

$('#box1').fadeOut(500).fadeIn(500);
$('#box2').delay(1000).fadeOut(500).fadeIn(500);

#box1

#box2

通常ならbox1とbox2のアニメーションは同時に実行されますが、box1のアニメーションが終わってからbox2がアニメーションしているように見せることができます。実際には、box1がアニメーションしているあいだ、box2がdelayによって待っているだけです。

delayをうまく使うといろいろな効果が出せるようになります。

$('.box').each(function(i){
    $(this).delay(i * 200).fadeTo(500, 0).delay(1000).fadeTo(500, 1);
});

.box

このように、複数の要素に少しずつ時間をずらしたアニメーションをさせることでオシャレな効果を出すこともできます。

■まとめ

キューの考え方を理解し、animateメソッドで複数の動きをひとつにまとめたり、複数のキューの動きdelayで調整したりすることで、アニメーションの実行タイミングを自由に調整できます。自分でいろいろ試してみると、より感覚がわかってくると思います。

【コーディングTips】ブラウザ対応を効率的にする”IE*.js”

DATE 2010.12.24

CATEGORY 技術Tips

TAGS google, JavaScript, ブラウザ対応, ライブラリ

こんにちは、IT開発センターの小山です。
今日はクリスマス・イヴですね。
明日の準備がある方も無い方も少しの時間、技術Tipsにお付き合いください。

まずはこちらの画像をご覧下さい。レイアウトが崩れていますね。
Web制作をする者であれば誰もが初めに頭を悩ませる「カラム落ち」と呼ばれる現象です。
これは横幅の計算違いや回り込みの指定などによって起こるものなのですが、ブラウザの違いによっても起こります。

これによりWeb制作者は様々なブラウザでテストを繰り返して同じようにサイトが表示されるようにしなければなりません。

今ご覧になっている記事もきちんとブラウザチェックを経て公開されています。
このブラウザへの対応で一番頭を悩ませ、手間が掛かるのが5、6、7、8とバージョンの多いInternet explorer（以下IEと表記）への対応です。特にIE6への対応はとても頭を悩ませます。

そこで今回紹介するのがGoogleのjavascriptライブラリで提供されている「IE7～9.js」です。これを使えばこのようにずっと楽にIEへの対応ができるようになります。実装も簡単で下記のコードをHTMLの内に埋め込むだけで使えます。
（詳しくは参考URLをご覧下さい）

<head>
<!--[if lt IE 9]>
<script src=”http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js”></script>
<![endif]-->
</head>

特に最新版の「IE9.js」使った場合の恩恵として嬉しいのがボックスサイズの計算法の統一化です。IE6以下ではボックスの計算方法が違うので毎回その都度、計算し別のスタイルシートに記述したり最悪の場合ハックという方法を使わなければなりません。ですが「IE9.js」を使うことによりソースの複雑化や手間を省き効率化を図ることができます。この他にもこれらライブラリを使うことで透過PNGや未対応セレクタにも対応してくれます。至れり尽くせりですね。

ここで注意点があります。これらライブラリは擬似的に対応しているように見せかけているものなので全てのブラウザバージョンの問題を解決してくれるわけではありません。使用しても問題が修正ができない場合は個別に対応が必要になります。ですが使用しないよりもブラウザごとの表示に関する対応が大幅に軽減されるはずなので「IE7～9.js」それぞれをテストし、自分のコーディングスタイルに合ったものを使ってみていただければと思います。CSSコーディングに慣れない方にもオススメのライブラリです。

参考URL：http://code.google.com/p/ie7-js/