2008-11

Wubi(Windows-based Ubuntu Installer)
Windows上で動作するUbuntu公式のフリーソフトウェアインストーラーです。
簡単にWindowsとUbuntuのデュアル・ブート環境を構築できるとのこと。

ホストがVista(SP1)だと失敗したとの報告もあるので、今回は使い古したXPマシンにインストール。
Ubuntuのアースカラー(笑)にもだんだん慣れてきました。

カメラを使いたかったので、UVC対応のWebカメラを繋げてみるとあっさり認識。
Linuxカーネルが2.6.26以降だと最初からUVCドライバが入ってるんですね。
xawtvやluvcviewも問題なく動作しました。

肝心の速度の方なんですが、今のところ遅くてイライラすることはありません。
(Pentium M 1.6GHz、1GB RAMのThinkPadで動かしています)
ネット環境はVistaマシンをGW-US54GXSでソフトウェアAPにしてUbuntuから繋げています。
こちらも特に問題ありませんでした。

環境設定は大体終わったので、これからいろいろ遊んでみようと思います。

adobe.comにFlash Text Layout Frameworkチームのブログができたみたいです。
Text Layout Framework Team - Adobe Blogs
リファレンスだけだと分かりづらいので、実用的なサンプルをたくさん載せていって欲しいですね。
それはそうとspecial thanksにRest Termが載ってる！びっくり。

今回はflashx.textLayout.formatsについて(Adobe Flex Gumbo Language Reference 参照)。
たくさんありますが、まずはわかりやすいところから。

CharacterFormat: 文字レベルでサイズや色、フォントなど
ParagraphFormat: 段落レベルでマージンやインデントサイズ、整列など
ContainerFormat: コンテナレベル(TextFlow,DivElement)で縦書き/横書き、カラムなど

<flow:TextFlow blockProgression="rl" verticalAlign="middle" xmlns:flow="http://ns.adobe.com/textLayout/2008">
　<flow:p textIndent="14">
　　<flow:span color="0xff6600" fontFamily="小塚明朝 Pro R" fontSize="14">私（わたくし）はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚（はば）かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執（と）っても心持は同じ事である。よそよそしい頭文字（かしらもじ）などはとても使う気にならない。</flow:span>
　</flow:p>
</flow:TextFlow>

このTextFlow(XML)の内容を表示させると以下のようになります。

TextFlowのblockProgressionプロパティで縦書き、verticalAlignプロパティでコンテナに対しての整列方法を、pのtextIndentプロパティでインデントサイズを、spanのそれぞれのプロパティで色やフォントを指定しています。

また、選択領域内のテキストカラーはデフォルトではspanで設定したカラーの補色になるようです。

自由度が上がりすぎてひとつひとつクラスを調べるのが大変です；
Flash CS4のコンポーネントならGUIでぽちぽち簡単に設定できるようなのでそちらを使った方が楽ですね。

・関連記事
Flash Text Layout Framework
Flash Text Layout Framework 2

引き続きFlash テキストレイアウトフレームワークの使い方を調べています。
前回はCore ComponentとConversion Componentを扱いました。
今回は3つめのEdit Componentを使っていきたいと思います。

・The Text Layout Edit Component (textLayout_edit.swc)

Edit ComponentにはSelectionManager、EditManager、UndoManagerという3つの管理クラスがあります。
使い方は簡単なので、この3つのクラスをまとめて使った例を載せます。

・テキストの選択・変更・アンドゥ/リドゥを可能にする

import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.conversion.TextFilter;
import flashx.textLayout.edit.EditManager;
import flashx.textLayout.edit.SelectionManager;
import flashx.textLayout.edit.UndoManager;
import flashx.textLayout.elements.*;

var text:String = "<TextFlow xmlns='http://ns.adobe.com/textLayout/2008' fontFamily='Helvetica' fontSize='25' color='#666666' textIndent='15' marginBottom='15' paddingTop='4' paddingLeft='4'><p><span>There are many </span><span fontStyle='italic'>such</span><span> lime-kilns in that tract of country, for the purpose of burning the white marble which composes a large part of the substance of the hills. Some of them, built years ago, and long deserted, with weeds growing in the vacant round of the interior, which is open to the sky, and grass and wild-flowers rooting themselves into the chinks of the stones, look already like relics of antiquity, and may yet be overspread with the lichens of centuries to come. Others, where the lime-burner still feeds his daily and nightlong fire, afford points of interest to the wanderer among the hills, who seats himself on a log of wood or a fragment of marble, to hold a chat with the solitary man. It is a lonesome, and, when the character is inclined to thought, may be an intensely thoughtful occupation; as it proved in the case of Ethan Brand, who had mused to such strange purpose, in days gone by, while the fire in this very kiln was burning.</span></p><p><span>The man who now watched the fire was of a different order, and troubled himself with no thoughts save the very few that were requisite to his business. At frequent intervals, he flung back the clashing weight of the iron door, and, turning his face from the insufferable glare, thrust in huge logs of oak, or stirred the immense brands with a long pole. Within the furnace were seen the curling and riotous flames, and the burning marble, almost molten with the intensity of heat; while without, the reflection of the fire quivered on the dark intricacy of the surrounding forest, and showed in the foreground a bright and ruddy little picture of the hut, the spring beside its door, the athletic and coal-begrimed figure of the lime-burner, and the half-frightened child, shrinking into the protection of his father's shadow. And when again the iron door was closed, then reappeared the tender light of the half-full moon, which vainly strove to trace out the indistinct shapes of the neighboring mountains; and, in the upper sky, there was a flitting congregation of clouds, still faintly tinged with the rosy sunset, though thus far down into the valley the sunshine had vanished long and long ago.</span></p></TextFlow>";
var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);
var undoMgr:UndoManager = new UndoManager();
flow.interactionManager = new SelectionManager();
flow.interactionManager = new EditManager(undoMgr);

var textSprite:Sprite = new Sprite();
flow.flowComposer.addController(new DisplayObjectContainerController(textSprite, 400, 200));
flow.flowComposer.updateAllContainers();

(Flashが表示されない場合はこちら→ EditMgr.swf)
これでアンドゥ/リドゥ機能が付いたテキストエリアが作成されました。
テキスト入力してからCtrl + Z、Ctrl + Y等で動作を確認してみてください。
また、テキストを選択して下にドラッグするとエリアがスクロールします(カーソルキー↓でもOK)。

基本的にはTextFlow.interactionManagerプロパティにインスタンスを関連付けるだけです。
入力履歴のスタックサイズはUndoManager.undoAndRedoItemLimitプロパティで変更可能です。
ちなみにこのプロパティの初期値を調べてみると25になっていました。
もしテキストエリアをスクロールさせたくなければ、DisplayObjectContainerController.verticalScrollPolicy (横方向ならhorizontalScrollPolicy)プロパティを ScrollPolicy.OFFと指定します。

EditManagerについては資料にもっといろいろ書いてあったんですが、まだよく読めていません。
今後、もっと高度な処理が必要になった時に改めて；

あとは、テキストのフォーマット(カラーやフォントスタイル等)やレイアウト周り(マージンやインデント等)の設定方法などを追って調べていきたいと思います。

・関連記事
Flash Text Layout Framework

Flash テキストレイアウトフレームワークのベータ版をすこし触ってみました。
とりあえずActionScriptだけで制御するシンプルなものから。
Text Layout Framework Overview(pdf)を読みながら手探りで少しずつ試していきます。

まず、Text Layout Framework - Adobe LabsのDownload the Text Layout Frameworkからダウンロード。
フォルダのlibsに入っている、textLayout_~.swc(3つある)をFlex SDKの/frameworks/libsに入れます。

・The Text Layout Core Component (textLayout_core.swc)

このフレームワークのコンポーネントは階層構造になっているようです (下図参照)。
ルートにTextFlowという要素があって、その下にHTMLでも馴染みのあるdivやpなどがあります。
GraphicはHTMLで言うところのimg要素、Linkはa要素なのはわかりますが、TCYというよくわからないものが、。
これはTate-Chu-Yokoの略で、縦書きの TextFlow 内で横に表示されるテキストのことらしいです。
justifier for East Asian typographyとあるのを見ると、この国の文章は特殊なんだなぁとしみじみ。

まずはHello, Worldから。

import flash.geom.Rectangle;
import flash.text.engine.TextLine;
import flashx.textLayout.elements.*;
import flashx.textLayout.factory.TextLineFactory;

var textFlow:TextFlow = new TextFlow();
var p:ParagraphElement = new ParagraphElement();
textFlow.addChild(p);

var span:SpanElement = new SpanElement();
span.text = "Hello, World";
p.addChild(span);

TextLineFactory.createTextLinesFromTextFlow(callback, textFlow, new Rectangle(0,0,300,100));

function callback(txLine:TextLine):void{ addChild(txLine); }

上の図表を見ていればコードも理解しやすいかと思います。
ここで、TextFlowの内容(テキスト)を表示させるには2種類の方法があります。
・TextLineFactory
・FlowComposer
上のHello, Worldのコードでは前者を使って表示しています。
コールバック関数を作ってTextLineFactory.createTextLinesFromTextFlow()を呼び出すという手順です。
(createTextLinesFromTextFlow()はTextLineFactoryクラスのstaticメソッド)
flash.text.engine.TextLineインスタンスにはTextFlowインスタンスの内容(テキスト)が入っています。
また、flash.geom.Rectangleでテキストの表示領域の位置と大きさを決めています。
こちらは静的テキストの表示に適していて、FlowComposerより省メモリとのこと。

一方、文字の選択や変更をさせたい(動的テキスト)場合はFlowComposerを使います (下図参照)。
図を見るとわかりますが、テキストの内容は最終的にTextLineインスタンスに変換されます。

import flashx.textLayout.container.DisplayObjectContainerController;
import flashx.textLayout.elements.*;

var textFlow:TextFlow = new TextFlow();
・・・　//省略
p.addChild(span);

var textSprite:Sprite = new Sprite();
textFlow.flowComposer.addController(new DisplayObjectContainerController(textSprite, 300, 100));
textFlow.flowComposer.updateAllContainers();

テキスト(TextFlow)とコンテナを関連付けてから、そのコンテナ内にテキストを表示させます。
DisplayObjectContainerControllerというのはDisplayObjectContainer(SpriteクラスはDisplayObjectContainerクラスのサブクラス)を制御するオブジェクトで、FlowComposerによって直接管理されます。
また、updateAllContainers()はFlash Playerの表示リストを更新するメソッドです。

・The Text Layout Conversion Component (textLayout_conversion.swc)

TextFilterクラスのメソッドを利用することによってテキストのインポート・エクスポートが可能です。
テキストをインポートするにはTextFilter.importToFlow()を使います。
plain text(String)でもText Layout Markup(XML)でもどちらでもOKなようです。

import flashx.textLayout.conversion.TextFilter;

// String
var text:String = "Hello, World";
var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.PLAIN_TEXT_FORMAT);

// XML
var text:XML = <TextFlow><p><span>Hello, World</span></p></TextFlow>;
var flow:TextFlow = TextFilter.importToFlow(text, TextFilter.TEXT_LAYOUT_FORMAT);

XMLでのインポートは便利ですね。ParagraphElement等のインスタンスを一つ一つ作らなくて済みます。

エクスポートの方も簡単です。こちらはTextFilter.export()を使います。
出力フォーマットはplain text、Text Layout Markup、FXGの3つの中から選びます。

var ptext:String = "Hello, World";
var flow:TextFlow = TextFilter.importToFlow(markup, TextFilter.PLAIN_TEXT_FORMAT);
// XMLで出力
var out:XML = TextFilter.export(flow, TextFilter.TEXT_LAYOUT_FORMAT, ConversionType.XML_TYPE);

上のコードはTextLayout Framework Overviewのコードそのままですが、これだとエラーが出ました；
TextFilter.export()の返り値がObjectだったので、outの型もObjectにすると上手くいきましたが、、
ちなみにこれをtraceしてみると、TextFlow階層構造のXMLが表示されます。

<flow:TextFlow whiteSpaceCollapse="preserve" xmlns:flow="http://ns.adobe.com/textLayout/2008">
  <flow:p>
    <flow:span>Hello, World</flow:span>
  </flow:p>
</flow:TextFlow>

新しい名前空間が出てきました。
また、fontSizeやcolorなどはXML文書の属性として割り当てることができます。

<flow:TextFlow xmlns:flow="http://ns.adobe.com/textLayout/2008" fontSize="14">
　<flow:p>This is an example of Text Layout Framework Markup.</flow:p>
　<flow:p color="#0000ff">
　　<flow:span>This is the first span of the second paragraph.</flow:span>
　　<flow:span color="#ff0000">This is the second span of the second paragraph.</flow:span>
　</flow:p>
</flow:TextFlow>

Conversion Componentの基本的な使い方はこれくらいです。

今回はテキストを表示する部分を主に紹介しました。
動的テキストを扱う際に利用するEdit Componentについてもこれから調べていきたいと思います。
各要素それぞれ細かい部分についても追々。

続く…

誤差拡散法。
前回紹介したディザ法と同じく疑似階調表現アルゴリズムのひとつです。
こちらはディザ法よりも一般的に品質が良いとされています。

誤差拡散法の基本的な考え方は、減色処理によって生じた誤差を近傍の画素に拡散させ、画像全体としての誤差を最小にしようとする手法になります。
フルカラー画像を限定されたカラーパレットで表現された画像への変換を行う場合、元の色に最も近い色をパレット内から選び出し、その色に変換していくことで減色処理を行います。この変換を行う時に、元の色がパレット内に存在しない限り誤差が発生するので、これを周囲の画素に拡散させることで全体としての誤差を小さくします。
一般に誤差拡散法ではFloyd&Steinberg型が有名で、デジタルカメラやイメージスキャナ、プリンタなどで広く使われています。
この手法は右、左下、下、右下の4画素に比率を変えて誤差を拡散させます。

　○ 　　●　　7/16
1/16　3/16　5/16
(●：注目画素)

ActionScriptでの例は以下のようになります。
・RGB256階調を16階調に減色

// Floyd&Steinberg型 誤差拡散法

private function errorDiffusion(img:IplImage):void{
  //カラーパレット(RGB各16色)
  var paletteR:Vector.<int> = Vector.<int>([0,0,255,255,0 0,255,255,128,0,128,128,0,0,128,64]);
  var paletteG:Vector.<int> = Vector.<int>([0,0,0,0,255,255,255,255,128,0,0,0,128,128,128,64]);
  var paletteB:Vector.<int> = Vector.<int>([0,255,0,255,0,255,0,255,128,128,0,128,0,128,0,64]);
  //2行分のバッファ確保 (+2は両端2画素分)
  var mx:int = img.width + 2;
  var errorR:Vector.<int> = new Vector.<int>(mx*2, true);
  var errorG:Vector.<int> = new Vector.<int>(mx*2, true);
  var errorB:Vector.<int> = new Vector.<int>(mx*2, true);
  var r:int = 0, g:int = 0, b:int = 0;
  var re:int = 0, ge:int = 0, be:int = 0;
  var ee:int = 0, est:int = 999999, bst:int = 0;
  var adr:int = 0;
  for(var y:int=0;y<img.height;y++){
    for(var x:int=0;x<img.width;x++){
      adr = x+1;
      //誤差加算
      r = img.imageData[img.widthStep*y + x*4 + 1] + (errorR[adr]/16);
      g = img.imageData[img.widthStep*y + x*4 + 2] + (errorG[adr]/16);
      b = img.imageData[img.widthStep*y + x*4 + 3] + (errorB[adr]/16);
      // 減色 (パレットから一番近い色を選ぶ)
      bst = 0;
      est = 999999; //十分大きな値
      for(var i:int=0;i<16;i++){
        ee = Math.pow(r - paletteR[i], 2) + Math.pow(g - paletteG[i], 2) + Math.pow(b - paletteB[i], 2);
        if(est>ee){
          bst = i;
          est = ee;
        }
      }
      //誤差算出
      re = r - paletteR[bst];
      ge = g - paletteG[bst];
      be = b - paletteB[bst];
      //誤差拡散
      //右へ
      errorR[adr+1] += re*7;
      errorG[adr+1] += ge*7;
      errorB[adr+1] += be*7;
      //左下へ
      errorR[adr+mx-1] += re*3;
      errorG[adr+mx-1] += ge*3;
      errorB[adr+mx-1] += be*3;
      //下へ
      errorR[adr+mx] += re*5;
      errorG[adr+mx] += ge*5;
      errorB[adr+mx] += be*5;
      //右下へ
      errorR[adr+mx+1] += re*1;
      errorG[adr+mx+1] += ge*1;
      errorB[adr+mx+1] += be*1;

      img.imageData[img.widthStep*y + x*4 + 1] = paletteR[bst];
      img.imageData[img.widthStep*y + x*4 + 2] = paletteG[bst];
      img.imageData[img.widthStep*y + x*4 + 3] = paletteB[bst];
    }
    //バッファずらし
    for(var j:int=0;j<mx;j++){
      errorR[j] = errorR[j+mx];
      errorG[j] = errorG[j+mx];
      errorB[j] = errorB[j+mx];
      errorR[j+mx] = 0;
      errorG[j+mx] = 0;
      errorB[j+mx] = 0;
    }
  }
}

・出力結果

Flashが表示されない人はこちら→ErrorDiffusion.swf

やや冗長ですが、わかりやすさを意識して書きました。

下部に拡散させた誤差は下部行の処理が終わるまで保持しておかなければなりません。そのため誤差を格納するバッファを用意して記録していきます。処理の終わった画素に対する誤差は保持する必要はないので、バッファは2行分だけ用意します。

また今回は、あらかじめ用意したカラーパレットを利用していますが、適応的にカラーパレットを生成するアルゴリズム(メディアンカット法等)がいくつか提案されています。誤差拡散法はそれらの減色アルゴリズムと併用して利用するのが一般的です。以前、電子透かし関連の研究で減色アルゴリズムを基礎として学びましたが、画像処理入門レベルをちょっと越えている気がしたのでここでは説明を省きます。

誤差拡散法はディザ法と比べると処理速度は遅いですが、品質では良好な結果が得られる場合が多いです。
ただ前回も言いましたが、FlashのBitmapDataは各チャンネル8ビット固定なのでデータ量は削減できません。
これも画像効果の一つということで。。

関連記事：
ディザ法 - AS3.0
VTR調変換 - AS3.0
ByteArrayで画像処理入門