このページの本文へ

JavaScriptでRSSからPhotoshop画像を生成! (3/4)

2010年02月03日 11時00分更新

文●古籏一浩

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

記事のタイトルをレイヤーに表示する

 続いて、前回処理したRSSファイル(ASCII.jpのサーバーからダウンロードしてテキストとして保存しておいたファイル)のデータをPhotoshopに渡して、記事のタイトルを描画してみましょう。描画した文字は最終的にJPEG画像として保存します。手順は少し長くなりますので、このページではPhotoshopのテキストレイヤーに記事のタイトルを表示する方法までを説明します。

 はじめに、Photoshopで作成するドキュメントの単位を指定します。単位を指定しないとcmになったりmmになったりと結果が一定しません。そこで、preferences.rulerUnitsプロパティに専用のプロパティを設定して、単位をピクセルにします。


references.rulerUnits = Units.PIXELS;


 単位がmmであればUnits.MMとなります。詳しくはPhotoshopに付属しているJavaScriptリファレンスを参照してください。

 次に、RSSファイルを読み込みます。前回の記事で、RSSファイルをWebサーバーから読み込み、タイトル部分だけを抽出してテキストファイルとして保存する処理を作りました。今回はこのテキストファイル「rss_title.txt」が、ホームフォルダに あるものとして話を進めます。

 new File("~/rss_title.txt")としてファイルオブジェクトを指定します。open()により読み込み専用としてファイルを開きます。すべての行を読み込むと処理に非常に時間がかかる場合があるので、ここではファイルオブジェクトのreadln()メソッドを使って先頭の1行だけを読み込ませます。その後、app.documents.add()で520×30ピクセルの新規ドキュメントを作成します。

 続いて記事の文字を表示します。Photoshopでは新規にレイヤーを作成し、作成したレイヤーの種類をテキストにする、という手順を踏んだ後に、文字のサイズなどの書式を指定します。この一連の処理を抜き出すと以下のようになります。


    var lay = activeDocument.artLayers.add(); // レイヤーを追加
    lay.kind = LayerKind.TEXT;
    lay.textItem.font = "Osaka";
    lay.textItem.size = 11;
    lay.textItem.contents = text;
    lay.translate(0, 18);


 activeDocument.artLayers.add()によりレイヤーを追加したら、レイヤーオブジェクトのkindプロパティにLayerKind.TEXTを指定します。これでテキストレイヤーとして認識されます。

 あとはテキストレイヤーの各プロパティにフォント名(font)やサイズ(size)、内容(contents)を指定します。設定が終わったらレイヤーの位置を調整します。レイヤーの位置はtranslate()で調整しますが、特定の座標には直接移動できず、相対的な移動量だけを指定できます。今回の場合は文字のサイズや書体も決まっているので、横に0ピクセル、下に18ピクセル移動させます。

 これで記事のタイトルをPhotoshop上に表示できました。次ページではJPEG形式で保存する方法について説明します。

この連載の記事

一覧へ

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