LessParserについて

• Less Parser

AIRで開発されている、クロスプラットフォームのLessコンパイラ。
AdobeAIRが入っているOSならどこでも動作するでしょう。

Mac版のLess.appの影響を強く受けているようで、
レイアウトも使い方もとても良く似ています。
作者同意のもと、Less.appのレイアウトをベースに開発したとの事。

It is possible that you’ve come across “Less.app for Mac OSX” developed by Bryan D K Jones. With his consent, I have based my application layout on the layout of his application..

使い方

プロジェクトの登録

1. Addをクリックして、プロジェクトの名前と監視するディレクトリを入力します。
2. 右カラムに、.lessファイルのリストが表示されます。
   
   左のチェックボックスはコンパイルするかどうか、右はMinify（圧縮）するかどうかをチェックします。
3. 左下の「Automaticaly parse files on save」にチェックが入ってれば、
   
   ファイルの更新を検知して自動的にコンパイルしてくれます。

ログ画面

上の「Log」ボタンをクリックするとコンパイルのログが表示されます。

Less.appとの比較

AIR版ということもあり、
本家Less.appと比べて出来ない事もいくつかあるようです。

• ドラッグドロップによる登録
• アウトプットパスの設定

個人的に残念なのは、AIRのディレクトリ選択ダイアログが使いづらい所でしょうか。
ドラッグドロップ使えればもっと素敵なのですが（AIRなら実装出来たようなおぼろげな記憶も…）

Lessniumと比較して

• フォルダ単位で登録ができ、ファイル毎でもコンパイルのon/offが選択できる。
• 圧縮のon/offが選択出来る

Less.app同様に、非常に使いやすいUIで細かい設定が出来、
言うまでもなくLessniumの完全上位互換ですね。
このプロジェクトが存続する限りは、Lessniumは開発されない事と思います。
作者もLessParser使いますし（！

まとめ

Lessniumが要らない子になるのはちょっとだけ寂しいですが、
元々Windowsで動くものが無かったから作っただけで、
開発する人が出てきたと言う事は、それだけLessが市民権を得てきたという事ですし、
非常に使いやすいアプリなので、素直に嬉しいです。

途中までは前記事と似たような処理なのでちょっと割愛してるところもあるのでご注意。

1. 画像の読み込み

private var bl:BulkLoader = new BulkLoader("imageloader");

/* 中略 */

bl.add( "images/button_normal.png" );
bl.add( "images/button_over.png" );
bl.add( "images/button_down.png" );
bl.addEventListener( BulkProgressEvent.COMPLETE, initialize );
bl.start();

2. SimpleButtonをつくる

var btn:SimpleButton = new SimpleButton(
    new Bitmap(bl.getBitmapData("images/button_normal.png")),
    new Bitmap(bl.getBitmapData("images/button_over.png")),
    new Bitmap(bl.getBitmapData("images/button_down.png")),
    new Bitmap(bl.getBitmapData("images/button_normal.png"))
);
addChild(btn);

SimpleButton – ActionScript 3.0

使い方は上記リンク参照。余計なもの（!?）をimportしなくていい分心地よいです。

ただし、このままではBitmapButtonにはあった「選択時」の状態が使用できません。
この点は今頭を悩ましているところですね。

2010/05/17

さすがに端折りすぎたのでコードを追記

2010/05/24

フォロー記事書きました。
AS3実験室: SimpleButtonクラスをトグル出来るように拡張した「SimpleToggleButton」

巷はCS5のリリースへの期待でいっぱいですが、
今あるPhotoshopでもこれだけの事が出来るぞ！
という事を教えてくれるチュートリアル。

The Ultimate Guide To Cloning In Photoshop – Smashing Magazine

Photoshop使いな人々には当たり前なのかもしれませんが、
修正テクニックを基本から説明してくれて大変為になります。

Fireworksばっかり使ってPhotoshopの腕が中々あがらない方、
CS5への期待ばかりふくらませて
今もっているPhotoshopの優秀な機能に埃をかぶせている方は、
一読してみてはいかがでしょう。

そうですね！私ですね！！

世界中のアーティストによる美麗な作品を展示する、
NikonによるWebギャラリーです。これは美しい！

ゆったりとしたBGMにのって、彩り豊かな作品が黒地に映えます。
とても良いムードのサイトで、スライドショーに見とれてしまいそう。

Nikon Next

Nikon映像テクノロジーのNext＝未来を発見するためのプロジェクト
世界の最先端フォトグラファー、映像作家が次々と作品提供

国別のほか、アーティスト別でも作品を選べます。

個人的にはMaleonnさんの作品の雰囲気が好き。

写真作品の他にも、映像作家によるムービーも掲載しています。

ブログパーツなんかも配布しているようなので、
自分のブログに彩りを添えてみても良いですね。
なかなか見ごたえがあるので一度立ち寄ってみては如何でしょうか！

私はというと、アクセス過多の為ローディング画面をしばらく眺める事となりましたが、
そこで感じた違和感についてログっておきます。

IS series

こちらがISシリーズ公式ティザーサイトのローディング画面。
様々なサイトで採用されているデザインのローディングアイコンですね。
こうしてみると別におかしなところはありませんが、
気になるのはそのローディングアイコンのアニメーションです。

ちょっと再現してみました。
これを見て特に違和感を感じない人もいると思います。
そういった方は、恐らく私とは違う認識で捉えているのでしょう。

私の中では、このデザインのアニメーションは概して
円形に並べられた8つのランプが、ゆるやかな点滅を繰り返している（認識：A）
のだと認識していました。ところが上の例では
円形に並べられた8つの正円がグループになって回転（認識：B）しています。

認識：Aの場合、このような動きになります。

要するに、各々の小円の位置を動かさずに見せる角度、
つまり45度（360/8）ずつrotationを弄っているわけですね。
こんな感じに。

loadingIcon.addEventListener(Event.ENTER_FRAME, function(e):void{
    loadingIcon.rotation += 45;
});

勿論、こんなのは誰がガイドラインを定めたわけでもなく、
このデザインだからこの動きだ、と正解が決まってるわけでもなく、
ましてや私の認識がマジョリティだという保証もないです。

同じ物を見ているのに、他者から見ると違う物に見えてしまう
というのが身近な事象としてあらわれると、面白いですね。

メインに使われるのはURLLoaderクラス。
flash.net.URLLoader (ActionScript 3.0)

URLLoader クラスは、指定した URL からテキスト、バイナリデータ、または URL エンコード形式の変数をダウンロードする際に使用します。動的なデータ駆動アプリケーションで使用するテキストファイル、XML、その他の情報をダウンロードする場合に便利です。

XMLやテキストファイルはもちろん、画像などのバイナリデータのロードにも活用します。
画像等の場合はLoaderを使ったりもできますが、Loaderはロード完了時にイベント等を拾えないので
ローディングインジケータなんかを付けたい場合はやはりURLLoaderを使うことになります。

基本はこうですね。

var ul:URLLoader = new URLLoader;
ul.addEventListener(Event.COMPLETE, xmlOnComplete);
var req:URLRequest = new URLRequest("content.xml");
ul.load(req);

loadメソッドの引数にはURLObjectを使用します。
※私はよく勢いでURLをそのままぶち込んでしまってエラー吐かせます（!!）
xmlOnLoadedにはロード完了時のイベントハンドラを登録します。
イベントハンドラの引数にはEventオブジェクトが渡されるので、きちんと受け取りましょう。

public function xmlOnComplete(e:Event):void{
    trace("---XML successfully loaded---");
    var xml:XML = new XML(e.target.data);
    // do something
}

e.targetにはイベント配布元のURLLoaderさんが格納されているので、
e.target.dataからXMLの内容を受け取る事ができます。
XML関数でXMLオブジェクトにしたら、あとは煮るなり焼くなり好きにしてください。
XMLオブジェクトの美味しい煮方焼き方は下記を参考にしてください。

• XML – ActionScript 3.0 コンポーネントリファレンスガイド
• 第18回　ActionScript3.0でXMLデータを扱うための基礎 – Flash CS3入門　基本からActionScriptまで：ITpro

URLLoaderオブジェクトは、完了時のcompleteの他にも様々なイベントを配信します。
エラー処理等をする場合にはこれらを活用しましょう。

httpStatus

URLLoader.load() を呼び出して HTTP 経由でデータへのアクセスを試みたときに Flash Player がその要求のステータスコードを検出して返すことが可能な環境にある場合に送出されます。（flash.events.HTTPStatusEvent）

ioError

URLLoader.load() の呼び出し時に致命的なエラーが発生してダウンロードが終了した場合に送出されます。（flash.events.IOErrorEvent）

open

URLLoader.load() メソッドの呼び出しによりダウンロード処理が開始されると送出されます。

progress

ダウンロード処理を実行中にデータを受信したときに送出されます。（flash.events.ProgressEvent）

スクリプトをまとめるとこんな感じです。

ActionScript

package{
    import flash.events.<em>;
    import flash.display.</em>;
    import flash.net.*;
    public class main extends Sprite{
        public function main():void{
            var ul:URLLoader = new URLLoader;
            ul.addEventListener(Event.COMPLETE, xmlOnComplete);
            var req:URLRequest = new URLRequest("content.xml");
            ul.load(req);
        }
        public function xmlOnComplete(e:Event):void{
            trace("--load complete--");
            var xml:XML = new XML(e.target.data);
            trace("appls's price : " + xml.items.item.(name=="apple").price);
        }
    }
}

XML

<?xml version="1.0" charset="utf-8" ?>
<data>
    <items>
        <item id="1">
        <name>apple</name>
        <price>1000</price>
    </item>
    <item id="2">
        <name>orange</name>
        <price>1500</price>
    </item>
    <item id="3">
        <name>grape</name>
        <price>2000</price>
    </item>
    </items>
</data>

ただのゴミ取り作業かと思いきや、途中からどんどんすごくなっていきます。
選択範囲の周辺画像を解析して、補完できる機能のようですね。
高解像度で見てみないと精度の程はわかりませんが、
樹木や道路がきれいさっぱりなくなったり、雲や森の続きが描かれたりと驚かされます。
中の人はかなりの腕前です。

いつの日か、おおまかな注文を音声でインプットすると
勝手に写真をジェネレートしたりしてくれる日が来たりして…。

そろそろ他のアプリケーションの新機能の情報も欲しいですね！

Desktop Reporting for Google Analytics – Polaris

Polarisは、Google Analyticsの解析をデスクトップでスマートに閲覧できるAIRアプリです。
上記サイトにアクセスし、リンクをたどって簡単にインストール出来ます。
この導入の容易さはAIRアプリの最大の特徴ですね。

こちらが起動したPolarisです。
見た目がかわいクール（!?）で、
アニメーションなどがいちいち小気味よく、いじってて楽しくなりますね。

機能の方は、見ての通りシンプルすぎるぐらいシンプルで、
必要以上の情報は一切載せていません。
閲覧出来るのは、せいぜいこれぐらい。

• ダッシュボード
• ビジター数
• 地図上の表示
• トラフィックソース ( トータル訪問数 / ページビュー / サイト滞在時間 )
• 参照サイト
• 上位のコンテンツ
• キーワード
• コンバージョン

Google Analyticsは非常に優秀なアクセス解析ツールですが、良くも悪くも多機能で、
欲しい情報にたどり着くまでがもどかしい時があります。
その点、ここまで単純化されていれば、ちょっとした情報ならばスマートに、クールに
そしてキュートに（!!）手に入れる事が出来ます。

残念なのは、フルイングリッシュでキーワードの日本語が表示されない点。
地図の使い勝手がWebアプリに比べて大変悪い点。
ここらへんが改善されると個人的にはとても幸せです。

ちょっと話はかわりまして、かなり昔、AIRがまだリリースされたばかりの頃、
「Google Analytics Reporting Suite」なるAIRアプリが話題を呼びましたが、
あれはいつのまにか存在を消していましたね。
なかなか素敵なアプリだっただけに残念です。

ともあれ、ちょっと忘れかけていたAIRアプリという存在を改めて追いかけてみたいと思います。
Adobe Marketplace – Welcome to the Adobe Marketplace.

私の記憶が確かならば、
Adobe製品のリリース頻度は1年半～2年ぐらいだったので
だいたいオンスケジュールといったところでしょうか。
周囲の期待を溜めて溜めてようやく公開にこぎつけたようです。

私はCS4をスルーしてCS3を使い続けていますが、
CS5はなかなか期待できそうな内容なのでアップデートを予定しています。

現状まだそこまで詳細な情報は出てきていませんが、
このプロモーションムービーは業界を驚かせましたね。
PhotoshopCS5は、なかに人が入っているらしい、と。

cf) 動画：Adobe Photoshop CS5の新機能はもはやえげつないレベル…

あと目玉といえばiPhoneアプリを書き出せる機能。
Web技術者なら手に馴染んでいるFlashでiPhoneアプリが作れてしまう！素敵！
ライセンス違反では？との噂もあるので気になるところではありますが、
これは続報を期待したい。
cf) 【レポート】Flash CS5のiPhoneアプリ書き出し機能はライセンス違反!? – 元Adobe技術者が指摘

個人的には結構使用頻度の高いFireworksがどうなるかが気になりますが、
今までそんな大した追加機能もなかったので、今回もあまり弄られずに終わると予想しています。
が、バージョンアップのたびにモッサリ重くなっていくのはなんとかしてほしいところ。
機能追加も結構ですが、それ以上に安定性と速度に目を向けた方が
多くのユーザーは喜ぶのではないでしょうか。

ちなみにプロダクトマネージャーのTwitterアカウントがあったのでフォローしてみました。

#Fireworks CS5 may be coming, but we’re still doing a bug fix release for Fireworks CS4. http://bit.ly/9tI5Yc

「FireworksCS5も出てくると思うけどまだ僕たちはCS4のバグフィックスリリースの最中なんだ」
だそうです。

他の製品のプロダクトマネージャーのアカウントも
Adobe Creative Suite 5 Launchで公開されているので、
興味がある製品はフォローしておいてはいかが？