このページの本文へ

JavaScriptで始めるQuartz Composer入門 (2/4)

2009年09月24日 10時00分更新

文●古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

入力と出力をつなげて文字を表示する

 必要な部品をEditor上に配置したら、今度は各部品の出力側と入力側を線(パス)でつないでいきます。

 JavaScriptの部品の右側にある「outputNumber●」の●上にマウスカーソルを移動し、ボタン(2ボタンマウスの場合は左ボタン)を押したままの状態でImage With Stringの「●String」の●上までカーソルを移動させます。2つの部品の間に線が表示されたところで左ボタンを離すと、2つの部品が線で結ばれます。

部品が線で結ばれる

部品が線で結ばれる

 同様にImage With Stringの右側にある「Image●」とBillboardの「●Image」をつなぎます。これですべての部品が接続できました。Viewerに大きく「0」の文字が表示されれば成功です。

すべての部品が結ばれ、Viewerに結果が表示されます

すべての部品が結ばれ、Viewerに結果が表示されます

Viewerには0が表示されます

Viewerには0が表示されます


 Viewerに表示されている文字は、デフォルトでは小さなサイズの文字を画像に変換して拡大しているためガタガタしています。そこで、文字サイズを大きくします。Image With Stringの部品を選択し、Editorウィンドウ右上にあるParametersのアイコンをクリックするとFont Sizeの項目があります。デフォルトの0.1から1に変更してみてください。Viewerの「0」の文字が綺麗になるはずです。

Font Sizeが0.1になっているので、1にします

Font Sizeが0.1になっているので、1にします

Viewerに表示されている0が綺麗に表示されます

Viewerに表示されている0が綺麗に表示されます


 これでJavaScriptを使って画面に文字を表示する仕組みが用意できました。


JavaScriptの部品のソースコードをのぞいてみる

 ところで、そもそもなぜ、Viewerには「0」の文字が表示されているのでしょうか? 実はJavaScriptの部品には、デフォルトでサンプルのコードがセットされています。配置したJavaScriptの部品のソースコードを開いて中を確認してみましょう。JavaScriptの部品を選択してInspector(インスペクタ)パレット上にあるポップアップメニューから「Setting」を選択するとソースコードが表示されます。

JavaScriptの内容が表示されます。編集もこの画面上でできます

JavaScriptの内容が表示されます。編集もこの画面上でできます



/*
A simple script that takes two input values, sums them and returns the result.
Special keywords for defining input and output key types:
__boolean, __index, __number, __string, __image, __structure, __virtual
Note that the function input arguments are read-only.
*/
function (__number outputNumber) main (__number inputNumber[2])
{
    var result = new Object();
    result.outputNumber = inputNumber[0] + inputNumber[1];
    return result;
}


 かなり短いソースコードですが、functionの行に注目すると、普段見慣れたJavaScriptのコードとは違った記述に気が付きます。

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く