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

JavaScriptで始めるQuartz Composer入門

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

文● 古籏一浩

JavaScriptで現在時刻を表示する

　サンプルコードでQuartz Composerの基本ルールを理解したところで、JavaScriptを使って「ASCII.jp」の文字を表示してみましょう。

　JavaScriptの部品をクリックし、Inspectorパレットから「Settings」を選択します。JavaScriptのソースコードが表示されたら、内容を以下のように書き換えます。


function (__string outputMessage) main ()
{
    var result = new Object();
    result.outputMessage = "ASCII.jp";
    return result;
}

　単純に文字を表示するだけなので、入力パラメータはありません。入力が何もない場合は、main()とだけ書きます。一方、出力側は「ASCII.jp」という文字列を出力するので、「__string outputMessage」として変数の型を文字列にします。処理がうまくいけば以下のように、ASCII.jpの文字が表示されるはずです^（*3）。


ViewerにASCII.jpの文字が表示されています

　文字列を表示できれば、今回のお題である「時刻」を表示するのは簡単です。以下のようにコードを書き換えれば、すぐに現在時刻が表示されます。


function (__string outputMessage) main ()
{
    var result = new Object();
    var dateObj = new Date();
    var H = dateObj.getHours();
    var M = dateObj.getMinutes();
    var S = dateObj.getSeconds();
    result.outputMessage = result.outputNumber = H + "時" + M + "分" + S + "秒";;
    return result;
}

表示時刻をリアルタイムで更新する

　先ほどのプログラムで現在時刻を表示できるようになりましたが、Viewerにはプログラムを実行した時点での現在時刻が表示されるだけで、いくら経っても時刻は更新されません。時刻の表示をリアルタイムで更新するにはどうしたらよいでしょうか？


リアルタイムで時刻が表示されない

　実は、Quartz Composerでは、何らかのトリガーがないとプログラムは一度しか実行されません。ViewerのStopボタンとRunボタンを交互にクリックすると、Runボタンを押したタイミングで時刻が更新されるのが確認できます（ちなみにQuickTime上でQuartz Composerのプログラムを実行する場合は、マウスを動かしたタイミングで時刻が更新されます^(*4)）。

　そこでトリガーとして、「System Time」という部品を使います。System Timeは、システムの時間を取得するもので、ミリ秒単位で数値が出力されます。これをJavaScriptの部品に入力します。System Timeからの入力値は単にトリガーとして使うだけですので、特にスクリプトで処理することはありません。ただし、入力のための受け口は用意しておく必要があります。以下のようにmain()のパラメータに数値型で適当な変数を用意すればできあがりです。


function (__string outputMessage) main (__number Time)

　最後に、System Timeの出力からJavaScriptの入力に線をつなげます。これで、現在時刻をリアルタイムで表示するプログラムが完成しました。


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

◆

　次回は、今回作成した時計のプログラムを改良し、秒数に応じて背景色を変化させます。最終的には、3種類のRSSフィードをWeb上から取得し、秒数に応じて表示を切り替えるRSSリーダーに仕上げる予定です。どうぞお楽しみに。

■Amazon.co.jpで購入

Quartz Composer Book —クォーツコンポーザーブック—

*3　スクリプトの内容を変更すると、部品同士をつないでいる線が切れてしまうことがあります。切れてしまった場合は、再度Image With Stringの「●String」につなげてください。

*4　Mac OS X Snow Leopardには「QuickTime X」が搭載されていますが、残念ながらQuickTime XではQuartz Composerで作成したファイルを再生できません（「QuickTime 7で再生しますか」と確認のダイアログが表示される）。このため、QuickTime 7を別途インストールしておく必要があります。

前へ 1 2 3 4 次へ

ツイートする

カテゴリートップへ