古籏一浩のJavaScriptラボ ― 第13回

Quartz Composer×JavaScriptでRSSリーダーを作ろう

2009年09月29日 15時01分更新

文● 古籏一浩

※この記事は「古籏一浩のJavaScriptラボ」の第13回です。過去の記事も合わせてご覧ください。

　Mac OS Xに付属するビジュアルプログラミングツール「Quartz Composer」には数多くのプログラムの部品が用意されており、適当にマウスで部品をつなぐだけで、豪華なモーショングラフィックスが作れます。前回の記事（関連記事）で紹介したように、Quartz Composer上でのJavaScriptは補助的な役割を果たすだけの地味な存在です。

　しかし、Quartz Composerで条件に応じて処理を細かく制御するプログラムを作るには、JavaScriptを使う必要があります。今回はそんなJavaScriptの特徴を生かして、時間の秒数に合わせて処理を変えるスクリプトを2つ作成します。1つは、前回作成したリアルタイムで時刻を表示するサンプルを改造し、背景色を刻々と変更するプログラムです。もう1つは、連載第11回で作成したRSSリーダーに、JavaScriptで表示するフィードを時間経過で自動変更する機能を追加します。

背景が変わるリアルタイムクロックを作ろう

　はじめに、前回作った「リアルタイムクロック」の背景色を変更するプログラムを作成しましょう。

　リアルタイムクロックの実行画面（Viewer）を確認すると、時刻を示す文字の背景にはグレーと白の市松模様が敷き詰められています。この市松模様の部分は、Photoshopなどの画面と同じく、実際には透明であることを表しています。


前回作成した時計。時刻が表示されている部分は白と黒色に、それ以外は透明になっています

　まずはこの透明部分の背景色を好みの色に変更しましょう。背景色を指定するには、指定した背景色で画面を塗りつぶす部品「Clear」を新たに追加します。Clearをドラッグ＆ドロップでEditor画面上に配置してください。


Clearを選択しEditor画面にドラッグドロップします

　すると、Viewer画面が真っ黒に塗りつぶされ、表示されていた時刻の文字が見えなくなりました。


Viewerが真っ黒になってしまう

　Quartz Composerには、Photoshopなどと同様に「レイヤー」の概念があり、配置した部品はそれぞれ別々のレイヤー上に描画されます。Viewerが真っ黒になって時刻が見えなくなったのは、「時刻表示」のレイヤー上に「背景色で全面表示」の部品が重なったためです。レイヤーは描画部品の右上にある番号が大きい順に上から重なっています。

　先ほどの画面を確認すると、「Billboard」部品が「1」、「Clear」部品が「2」になっているので、この順序を逆にすれば時刻が見えるようになるはずです。レイヤーの重ね順は、レイヤー番号の右側にある▲をクリックして表示されるメニューで変更します。たとえばClear部品のレイヤー番号を「レイヤー1」にすると、Clearが1、Billboardが2に変わります。


重なり順序を指定します

　Viewerで確認すると今度は期待通り、背景色の上に時刻が表示されました。


今度は背景色の上に時刻がリアルタイムで表示されます

　背景色が黒色だと地味なので、次は好みの色を付けてみましょう。最終的にはJavaScriptで色を指定しますが、その前に手動で設定する方法を紹介します。Clearの部品に表示されている「●Clear Color」の●をダブルクリックしてください。すると、次のようなカラーピッカーが表示されます。


カラーピッカーが表示されます

　カラーピッカーで色を選択し、不透明度（Opacity）をスライダーで調整したら「Done」ボタンをクリックします。


不透明度（Opacity）も忘れずに指定しないと色が反映されません

　Viewerで実行結果を確認すると、カラーピッカーで指定した背景色の上に、時刻が表示されるはずです。


背景色の上に時刻が表示されます

　ただ、この状態だと文字のまわりだけが黒いマットになっていて、あまり綺麗ではありません。黒い部分を消して背景と合成するには、Billboard部品の「●Blending」の●をダブルクリックし、ポップアップメニューから「Over」を選択します。このOverは透明情報であるαチャンネルも考慮して描画します。