コードの構文
CSS FilterLabを使用すると、高度なビジュアルエフェクトを作成できます。これがプレーンなCSS（最先端のCSSではありますが）によって実現されていることを理解しておく必要があります。
アドビでは、パートナー様とも協力しながら、このテクノロジーをオープンなWebの世界にもたらすことができるように取り組んできました。テクノロジーをツールで覆い隠そうとしているわけではありません。
CSS FilterLabでは、アニメーションのエフェクトを実現するために使用されているコードをそのまま表示します。タイムラインのすぐ上にある、CSS SyntaxパネルとCSS Animation Syntaxパネルには、開発者が期待しているものが表示されます。このコードを独自のプロジェクトにコピーすることによって、エフェクトを利用できます。CSS Filtersはブラウザーで利用できるようになったばかりであることを忘れないでください。
新しいカスタムフィルターの作成
ここまでくると対応が難しくなってきます。しかしながら、複雑な数学演算とシェーダーの作成に特に関心を持っている場合、CSS FilterLabに本格的なシェーダーエディターが含まれているので安心です（図4を参照）。
新しいカスタムフィルターを作成するには、最初にAdd Filterメニューに表示されるカスタムフィルターから既存のカスタムフィルターをフォークします。フォークしたフィルターは、メニューの「Forked」タブに表示されます。カスタマイズアイコンをクリックすると、カスタムフィルターのコアが表示されます。
これで、使用するパラメーター、パラメーターの型およびフラグメントシェーダーや頂点シェーダーのソースを細かく制御できます。変更内容は、ブラウザー内で自動的に保存され、ローカルに格納されます。
シェーダーはOpenGLシェーディング言語（GLSL）で記述されています。シェーダーの作成に関するトピックはこの概要では触れませんが、詳しくはGLSLのドキュメントを参照してください。シェーダーを最大限に活用するには、この言語の型、メソッドおよび機能に目を通しておいてください。
エラーパネルでは、シェーダーコードに関する問題点がリアルタイムにハイライト表示されます。開発とプレビューを同じコンテキストで行うことができるので、これは非常に便利です。また、シェーダーコードの結果はリアルタイムに表示されます。
カスタムフィルターの共有と読み込み
作成したカスタムフィルターを共有するには、CSS FilterLabからGitHubにgistとしてパブリッシュします。この操作を行うためのコントロールは、シェーダーエディターパネルにあります。
パブリッシュすると、リンクを他のユーザーと共有できます。他のユーザーは共有されたカスタムフィルターをCSS FilterLabで読み込んで、独自のコンテンツで使用できます。カスタムフィルターを読み込むには、Add Filter（フィルターを追加）メニューで「Import（読み込み）」を選択し、gistのURLを指定します。
オープンソース
CSS FilterLabのコードはすべて、Apache License v2の下で、自由にGitHubで入手できます。アドビでは、このプロジェクトに対する皆様からのご意見、ご感想、ご提案をお待ちしております。
CSS FilterLabで配布したいシェーダーを作成する場合は、ぜひこのプロジェクトに投稿してください。コードをチェックインする前に、GitHubで説明されている投稿のガイドラインをよくお読みください。
次のステップ
CSSフィルターおよびカスタムフィルターは、Webコンテンツに充実した創造的なエフェクトをもたらします。CSS FilterLabは、できるようになることのヒントを示しているに過ぎません。実際の価値は開発者の手と、このテクノロジーを使って作成するものにあります。
フィルター、ジオメトリの操作、映画のようなエフェクトが作品にもたらすインタラクションや表現力の新しい可能性を考えてください。このことが、大画面、モバイルデバイス、その他の多くの新しいコンテキストにおいて、コンテンツにどのような意味を持つかを考えてみてください。
CSS FilterLabを使用して最新のグラフィカルなWebの機能について学習し、ご意見やご感想をお寄せください。CSS FilterLabを使って作成したものについても、ぜひお知らせください。
アドビのAlan Greenblatt氏が、短いCSS FilterLabでの手順のビデオを作成しました。詳しく学習したい場合は、その第一歩としてこのビデオが役立ちます。
Web環境の向上に対するアドビの取り組みについて詳しくは、html.adobe.comを参照してください。
