メイン

「AIR」のアーカイブ

2008年1月 7日

EclipseでFlex

去年から触ってみようとしていたFlexにようやく着手。

Flex Builderを買ってみようかとも思ったけど、まずはフリーのツールで環境構築してみようかなと。

ということで慣れ親しんだEclipseちゃんでFlexの開発環境と整えてみることにしました。

 

0.Eclipseがない人はまずEclipseをダウンロード

http://www.eclipse.org/downloads/ とか http://www.bea.com/distros/eclipse.html とかから。

Eclipseは解凍するだけでOKなので、解凍後Cドライブ直下とかに配置。
(ちなみに僕はC:\programming\eclipse の下にeclipse320 とか eclipse330とか複数バージョンが入ってます。)

 

1.AdobeのサイトからFlex3 SDKをダウンロード

http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html から。

" I have read the Adobe Flex Beta and Early Build Access License, and by downloading the software listed below I agree to the terms of the agreement. " にチェックを入れて、"Download Flex 3 SDK 3 beta 3 for all platforms" からダウンロード。

 

2.ダウンロードしたファイルを解凍して、都合の良い場所に移動。

僕は C:\flex3sdk に配置したので、以下の説明はすべてそのディレクトリで行います。適宜読み替えてください。

 

3.Eclipseを起動して、普通のプロジェクトを作成

ナビゲーターパースペクティブ上で、右クリック→「新規」→「プロジェクト」

flexoneclipse_000.png

ポップアップで表示されたウィンドウで、「一般」→「プロジェクト」

flexoneclipse_001.png

ここで、今回はHelloWorldという名称のプロジェクトを作成します。

 

4.作成したプロジェクト内に、以下の図の用にフォルダとファイルを作成

flexoneclipse_002.png

各ファイルの中身はとりあえず空っぽで。

 

5.build.properties と build.xmlを以下のように記述

build.properties (Flex sdkのbinディレクトリの絶対パスを指定)

FLEX3_HOME=C:/flex3sdk/bin

build.xml

<?xml version="1.0" encoding="UTF-8"?>
<project name="HelloWorld" default="build.swf" basedir=".">
    <property file="build.properties" />
    <property name="dist.dir" value="dist" />
    <property name="src.dir" value="src" />
    <property name="height" value="100" />
    <property name="width" value="200" />
    <property name="framerate" value="30" />
    <property name="bgcolor" value="0xFFFFFF" />
   
    <!-- create swf-->
    <target name="build.swf" depends="clean">
        <exec executable="${FLEX3_HOME}/amxmlc.bat" failonerror="true">
            <arg line="-default-size ${width} ${height}" />
            <arg line="-default-frame-rate ${framerate}" />
            <arg line="-default-background-color ${bgcolor}" />
            <arg line="-output ${dist.dir}/HelloWorld.swf" />
            <arg line="${src.dir}/HelloWorld.as" />
        </exec>
    </target>

    <!-- clean dist directory -->
    <target name="clean">
        <delete>
            <fileset dir="${dist.dir}" includes="HelloWorld.swf" />
        </delete>
    </target>

</project>

 

6.HelloWorld.as と index.htmlを以下のように記述

HelloWorld.as

package {
    import flash.display.*; 
    import flash.text.*; 
    public class HelloWorld extends Sprite {
        public function HelloWorld() {
            var textField:TextField=new TextField();
            textField.text="Hello World!";
            textField.autoSize=TextFieldAutoSize.CENTER;
            addChild(textField);
        }
    }
}

index.html

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<object width="100%" height="100%">
<param name="movie" value="HelloWorld.swf"></param>
<embed src="HelloWorld.swf" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</body>
</html>

 

7.Eclipse で Ant ビューを開く

「ツール」→「ビューの表示」→「その他」(ここで「Ant」があったらそれをクリック)

flexoneclipse_003.png

「Ant」→「Ant」を選択

flexoneclipse_004.png

 

8.Antビューにbuild.xmlのファイルをドラッグ&ドロップ

すると↓こんな感じでターゲットが表示される。

flexoneclipse_005.png

9.Antビューの中のbuild.swf ターゲットをダブルクリック

amxmlc.batが実行されて、distディレクトリの下にHelloWorld.swfが生成されるので、index.htmlをブラウザで開いてチェック。

flexoneclipse_006.png

↓今回のファイル一式 HelloWorld.zip

 

これで、Eclipse上でソースを編集して、9の「Antビューの中のbuild.swf ターゲットをダブルクリック」を繰り返して開発してみようかな。

ActionScript3の良いEclipse pluginがないのが残念。地道にテキストエディタで書かないと・・・。

AIRアプリのコンパイルもbuild.xmlに書くんだけど、続きはまた今度。

HelloWorld以外のアプリを作るときは、

  1. HelloWorld.as のファイル名およびクラス名を修正
  2. build.xml 中の以下の項目を修正
  • <property name="height" value="100" /> : 生成されるswfファイルの高さ
  • <property name="width" value="200" /> : 生成されるswfファイルの幅
  • <property name="framerate" value="30" /> : 生成されるswfファイルのフレームレート
  • <property name="bgcolor" value="0xFFFFFF" /> : 生成されるswfファイルの背景色
  • <arg line="-output ${dist.dir}/HelloWorld.swf" /> : 出力されるswfファイル名
  • <arg line="${src.dir}/HelloWorld.as" /> : ソースのasファイル名
  • <fileset dir="${dist.dir}" includes="HelloWorld.swf" /> : buildの度にdistディレクトリから削除するファイル名

これでOKです。

2007年12月24日

AIRについて最近知ったこと

ちょっと前に、会社にAdobeの人が来て、デモとか技術的な解説とかしてくれました。

で、そのとき知ったこと、思ったことのメモ。

・Flash と Flex の違い
→開発環境の違い。Flash はタイムラインにライブラリから表示するものを乗せていく作り方で、Flexは描画するものをmxmlで記述する(かなりざっくり言うとだけど)。できあがるものは両方とも.swfファイル。ただし、Flexでしか利用できない機能があるらしい。
※この辺を分かりにくくしているのは、Adobe / Macromedia のネーミングセンスが悪いからだと、個人的に思ってます。

・AIRアプリケーションには、AIR(実行環境)のインストールモジュールも含めることができる。
→なので、AIRがインストールされていない人がAIRアプリをインストールするときに、わざわざ別にAIRをインストールする必要がない。

・「ブラウザの制約を受けたくない」「ローカルのファイルにアクセスしたい」ってときだけ、FlashのAIR化を検討すれば良いかも。

・AIRのHTML エンジンはSafariで使われているものと同じ。

・AIR で使われるFlash Player のバージョンは、当面、通常のFlash Player のリリースの後追いになる(けど、いづれは同期をとる予定だとか)。

・AIR の売りの一つは、Web系のシステムを作ってきた人で、VBとかの知識がなくてもデスクトップアプリを作れる点。

2007年11月 5日

AIR MAX Japan 2007

僕的には AIR MAX って言ったらこういうやつなんですけどね。わざとかけてあるのかな。

AIRが変える日本のネットサービス--Adobe MAX Japan 2007:ニュース - CNET Japan

サイバーエージェントが現在AIRベースで開発を進めているのが、「voq photo AIR」。このツールは、デスクトップで写真を整理するためのアプリケーションで、デスク上に写真を広げ、実際に写真を並べたり重ねたりするように直感的に操作できるのが特徴だ。

AIR じゃなくて、こういうインタフェースの奴、前にいくつか紹介されてましたね。

デジタルになって、整然と一覧で見ることが出来るようになったのに、わざわざ「雑然」と「ざっくり」と整理できるようなアナログチックなインタフェースが流行だすってなんかおもしろ。


一方、ヤフーは現在、Flex 2による日本独自のウェブメールサービスを開発している。

WebメールがFlashになるのかー。

ヤフーメールがもはやスパムの温床にしかなってないからなぁ。Gmail 様々な今では、ヤフメがFlashになったところで乗り換える気は毛頭ないんだけど、どうなんだろ。やっぱり3ペインのデスクトップアプリ的なインタフェースを目指すところに限界を感じてしまうなぁ。


楽天は、開発中の楽天市場用デスクトップアプリケーションを披露した。AIRをベースにしたこのツールはデスクトップに常駐し、楽天市場で検索した商品の中からお気に入りのものをウィンドウ内にドラッグ&ドロップで登録することが可能となる。


こういうのは面白いんだけど、○○専用ブラウザって時点で、OSにインストールするデスクトップアプリとしてはちょっと限界がある気がする。

かっこよく整理されたインタフェースで、Amazon や楽天とかが見ることができるようになったら、いよいよAIR 、いやWebサービスの本領発揮なんじゃないかなぁ。

一応アプリのイメージは頭の中にあって、Amazonで検索していて、この商品に似たものが楽天市場でないかなと、ワンクリック(或いはマウスジェスチャー)すると、画面がシュイってなって、シュッと楽天の検索結果が出てきて、それでいてさっきのAmazonの画面は半透明になって背景にとけ込んでいる、みたいな。作ってみろよって話ですね、はい、すみません。

2007年10月 5日

AIR ベータ2 公開

そろそろ AIR アプリの開発に手を出してみようかなと思ってます。

先日、AIR のベータ2が公開されたので、どんなもんなのかと思ったら↓下記ページに変更点が詳しく紹介されていました。


Adobe AIRで作るデスクトップアプリケーション:第10回 Adobe AIR ベータ2公開|gihyo.jp

  • ByteArray.inflate()とByteArray.deflate()の両メソッドが無くなり,代わりにByteArray.compress()とByteArray.uncompress()メソッドで引数を指定する形式になりました。引数にはCompressionAlgorithm.DEFLATEまたはCompressionAlgorithm.ZLIBを渡します。
  • TransferableDataクラスとClipboardManagerクラスが無くなり,代わりにClipboardクラスを使うことになりました。クリップボードの読み書きを行う際は,ClipboardManager.accessClipboard()ではなくClipboard.generalClipboardというシングルトンオブジェクトを使います。
  • DragManager.isDraggingはメソッドからプロパティに変更になりました。
  • Doorクラスが無くなり,LoaderInfoクラスのDoor関連APIの名前が変更されました。
    • LoaderInfo.parentDoor → LoaderInfo.parentSandboxBridge
    • LoaderInfo.childDoor → LoaderInfo.childSandboxBridge
  • ・File APIのメソッド名がいくつか変更されました。
    • File.listDirectories() → File.getDirectoryListing()
    • File.listDirectoriesAsync() → File.getDirectoryListingAsync()
    • File.listRootDirectories() → File.getRootDirectories()
    • File.relativize() → File.getRelativePath()
    • File.resolve() → File.resolvePath()
  • NativeWindowコンストラクタのvisibleパラメータが無くなりました。NativeWindowオブジェクトを生成してからvisibleプロパティを設定することになります。
  • NativeWindowCapabiltiesクラスが無くなり,各プロパティはNativeWindowクラスに移動しました。
    • NativeWindowCapabilities.hasWindowIcon → NativeWindow.supportsIcon
    • NativeWindowCapabilities.hasMenu → NativeWindow.supportsMenu
    • NativeWindowCapabilities.windowMinSize → NativeWindow.systemMinSize
    • NativeWindowCapabilities.windowMaxSize → NativeWindow.systemMaxSize
  • Stage.windowプロパティはStage.nativeWindowプロパティに変更されました。
  • System.pause(),System.resume(),System.gc()の各メソッドは,デバッグモードでのみ有効になりました。ADLでの動作確認中はデバッグモードになります(-nodebugオプションを指定しない場合)。
  • System.exit()メソッドはAIRでは使えなくなりました。代わりにShell.exit()メソッドを使います。
  • Beta 1までは相対URLはapp-resource:/ディレクトリを基準としていましたが,Beta 2からはSWF/HTMLコンテンツが基準となります。

結構大幅に変わってますね。

特に、File クラス周りとNativeWindow クラス周り。

デスクトップアプリケーションとして、これまでFlash でなかった辺りの仕様がまだ固まっていない感じなのかなぁ。

まあ、勉強の意味でサンプルアプリでも作ってみようかな。

でぃべろっぱーず・さいど http://dev.chrisryu.com/ 鹿児島出身子持ちSEのディベロッパーとしての一面 ja Copyright 2013 Mon, 07 Jan 2008 21:58:43 +0900 http://www.sixapart.com/movabletype/ http://blogs.law.harvard.edu/tech/rss EclipseでFlex 去年から触ってみようとしていたFlexにようやく着手。

Flex Builderを買ってみようかとも思ったけど、まずはフリーのツールで環境構築してみようかなと。

ということで慣れ親しんだEclipseちゃんでFlexの開発環境と整えてみることにしました。

 

0.Eclipseがない人はまずEclipseをダウンロード

http://www.eclipse.org/downloads/ とか http://www.bea.com/distros/eclipse.html とかから。

Eclipseは解凍するだけでOKなので、解凍後Cドライブ直下とかに配置。
(ちなみに僕はC:\programming\eclipse の下にeclipse320 とか eclipse330とか複数バージョンが入ってます。)

 

1.AdobeのサイトからFlex3 SDKをダウンロード

http://labs.adobe.com/technologies/flex/sdk/flex3sdk.html から。

" I have read the Adobe Flex Beta and Early Build Access License, and by downloading the software listed below I agree to the terms of the agreement. " にチェックを入れて、"Download Flex 3 SDK 3 beta 3 for all platforms" からダウンロード。

 

2.ダウンロードしたファイルを解凍して、都合の良い場所に移動。

僕は C:\flex3sdk に配置したので、以下の説明はすべてそのディレクトリで行います。適宜読み替えてください。

 

3.Eclipseを起動して、普通のプロジェクトを作成

ナビゲーターパースペクティブ上で、右クリック→「新規」→「プロジェクト」

flexoneclipse_000.png

ポップアップで表示されたウィンドウで、「一般」→「プロジェクト」

flexoneclipse_001.png

ここで、今回はHelloWorldという名称のプロジェクトを作成します。

 

4.作成したプロジェクト内に、以下の図の用にフォルダとファイルを作成

flexoneclipse_002.png

各ファイルの中身はとりあえず空っぽで。

 

5.build.properties と build.xmlを以下のように記述

build.properties (Flex sdkのbinディレクトリの絶対パスを指定)

FLEX3_HOME=C:/flex3sdk/bin

build.xml

<?xml version="1.0" encoding="UTF-8"?>
<project name="HelloWorld" default="build.swf" basedir=".">
    <property file="build.properties" />
    <property name="dist.dir" value="dist" />
    <property name="src.dir" value="src" />
    <property name="height" value="100" />
    <property name="width" value="200" />
    <property name="framerate" value="30" />
    <property name="bgcolor" value="0xFFFFFF" />
   
    <!-- create swf-->
    <target name="build.swf" depends="clean">
        <exec executable="${FLEX3_HOME}/amxmlc.bat" failonerror="true">
            <arg line="-default-size ${width} ${height}" />
            <arg line="-default-frame-rate ${framerate}" />
            <arg line="-default-background-color ${bgcolor}" />
            <arg line="-output ${dist.dir}/HelloWorld.swf" />
            <arg line="${src.dir}/HelloWorld.as" />
        </exec>
    </target>

    <!-- clean dist directory -->
    <target name="clean">
        <delete>
            <fileset dir="${dist.dir}" includes="HelloWorld.swf" />
        </delete>
    </target>

</project>

 

6.HelloWorld.as と index.htmlを以下のように記述

HelloWorld.as

package {
    import flash.display.*; 
    import flash.text.*; 
    public class HelloWorld extends Sprite {
        public function HelloWorld() {
            var textField:TextField=new TextField();
            textField.text="Hello World!";
            textField.autoSize=TextFieldAutoSize.CENTER;
            addChild(textField);
        }
    }
}

index.html

<html>
<head>
<title>Sample Page</title>
</head>
<body>
<object width="100%" height="100%">
<param name="movie" value="HelloWorld.swf"></param>
<embed src="HelloWorld.swf" type="application/x-shockwave-flash" width="100%" height="100%"></embed>
</object>
</body>
</html>

 

7.Eclipse で Ant ビューを開く

「ツール」→「ビューの表示」→「その他」(ここで「Ant」があったらそれをクリック)

flexoneclipse_003.png

「Ant」→「Ant」を選択

flexoneclipse_004.png

 

8.Antビューにbuild.xmlのファイルをドラッグ&ドロップ

すると↓こんな感じでターゲットが表示される。

flexoneclipse_005.png

9.Antビューの中のbuild.swf ターゲットをダブルクリック

amxmlc.batが実行されて、distディレクトリの下にHelloWorld.swfが生成されるので、index.htmlをブラウザで開いてチェック。

flexoneclipse_006.png

↓今回のファイル一式 HelloWorld.zip

 

これで、Eclipse上でソースを編集して、9の「Antビューの中のbuild.swf ターゲットをダブルクリック」を繰り返して開発してみようかな。

ActionScript3の良いEclipse pluginがないのが残念。地道にテキストエディタで書かないと・・・。

AIRアプリのコンパイルもbuild.xmlに書くんだけど、続きはまた今度。

HelloWorld以外のアプリを作るときは、

  1. HelloWorld.as のファイル名およびクラス名を修正
  2. build.xml 中の以下の項目を修正
  • <property name="height" value="100" /> : 生成されるswfファイルの高さ
  • <property name="width" value="200" /> : 生成されるswfファイルの幅
  • <property name="framerate" value="30" /> : 生成されるswfファイルのフレームレート
  • <property name="bgcolor" value="0xFFFFFF" /> : 生成されるswfファイルの背景色
  • <arg line="-output ${dist.dir}/HelloWorld.swf" /> : 出力されるswfファイル名
  • <arg line="${src.dir}/HelloWorld.as" /> : ソースのasファイル名
  • <fileset dir="${dist.dir}" includes="HelloWorld.swf" /> : buildの度にdistディレクトリから削除するファイル名

これでOKです。

]]>
http://dev.chrisryu.com/2008/01/flex_on_eclipse.html http://dev.chrisryu.com/2008/01/flex_on_eclipse.html AIR Mon, 07 Jan 2008 21:58:43 +0900
AIRについて最近知ったこと ちょっと前に、会社にAdobeの人が来て、デモとか技術的な解説とかしてくれました。

で、そのとき知ったこと、思ったことのメモ。

・Flash と Flex の違い
→開発環境の違い。Flash はタイムラインにライブラリから表示するものを乗せていく作り方で、Flexは描画するものをmxmlで記述する(かなりざっくり言うとだけど)。できあがるものは両方とも.swfファイル。ただし、Flexでしか利用できない機能があるらしい。
※この辺を分かりにくくしているのは、Adobe / Macromedia のネーミングセンスが悪いからだと、個人的に思ってます。

・AIRアプリケーションには、AIR(実行環境)のインストールモジュールも含めることができる。
→なので、AIRがインストールされていない人がAIRアプリをインストールするときに、わざわざ別にAIRをインストールする必要がない。

・「ブラウザの制約を受けたくない」「ローカルのファイルにアクセスしたい」ってときだけ、FlashのAIR化を検討すれば良いかも。

・AIRのHTML エンジンはSafariで使われているものと同じ。

・AIR で使われるFlash Player のバージョンは、当面、通常のFlash Player のリリースの後追いになる(けど、いづれは同期をとる予定だとか)。

・AIR の売りの一つは、Web系のシステムを作ってきた人で、VBとかの知識がなくてもデスクトップアプリを作れる点。

]]>
http://dev.chrisryu.com/2007/12/about_air.html http://dev.chrisryu.com/2007/12/about_air.html AIR Mon, 24 Dec 2007 23:05:38 +0900
AIR MAX Japan 2007 僕的には AIR MAX って言ったらこういうやつなんですけどね。わざとかけてあるのかな。

AIRが変える日本のネットサービス--Adobe MAX Japan 2007:ニュース - CNET Japan

サイバーエージェントが現在AIRベースで開発を進めているのが、「voq photo AIR」。このツールは、デスクトップで写真を整理するためのアプリケーションで、デスク上に写真を広げ、実際に写真を並べたり重ねたりするように直感的に操作できるのが特徴だ。

AIR じゃなくて、こういうインタフェースの奴、前にいくつか紹介されてましたね。

デジタルになって、整然と一覧で見ることが出来るようになったのに、わざわざ「雑然」と「ざっくり」と整理できるようなアナログチックなインタフェースが流行だすってなんかおもしろ。


一方、ヤフーは現在、Flex 2による日本独自のウェブメールサービスを開発している。

WebメールがFlashになるのかー。

ヤフーメールがもはやスパムの温床にしかなってないからなぁ。Gmail 様々な今では、ヤフメがFlashになったところで乗り換える気は毛頭ないんだけど、どうなんだろ。やっぱり3ペインのデスクトップアプリ的なインタフェースを目指すところに限界を感じてしまうなぁ。


楽天は、開発中の楽天市場用デスクトップアプリケーションを披露した。AIRをベースにしたこのツールはデスクトップに常駐し、楽天市場で検索した商品の中からお気に入りのものをウィンドウ内にドラッグ&ドロップで登録することが可能となる。


こういうのは面白いんだけど、○○専用ブラウザって時点で、OSにインストールするデスクトップアプリとしてはちょっと限界がある気がする。

かっこよく整理されたインタフェースで、Amazon や楽天とかが見ることができるようになったら、いよいよAIR 、いやWebサービスの本領発揮なんじゃないかなぁ。

一応アプリのイメージは頭の中にあって、Amazonで検索していて、この商品に似たものが楽天市場でないかなと、ワンクリック(或いはマウスジェスチャー)すると、画面がシュイってなって、シュッと楽天の検索結果が出てきて、それでいてさっきのAmazonの画面は半透明になって背景にとけ込んでいる、みたいな。作ってみろよって話ですね、はい、すみません。

]]>
http://dev.chrisryu.com/2007/11/air_max_japan_2007.html http://dev.chrisryu.com/2007/11/air_max_japan_2007.html AIR Mon, 05 Nov 2007 23:14:49 +0900
AIR ベータ2 公開 そろそろ AIR アプリの開発に手を出してみようかなと思ってます。

先日、AIR のベータ2が公開されたので、どんなもんなのかと思ったら↓下記ページに変更点が詳しく紹介されていました。


Adobe AIRで作るデスクトップアプリケーション:第10回 Adobe AIR ベータ2公開|gihyo.jp

  • ByteArray.inflate()とByteArray.deflate()の両メソッドが無くなり,代わりにByteArray.compress()とByteArray.uncompress()メソッドで引数を指定する形式になりました。引数にはCompressionAlgorithm.DEFLATEまたはCompressionAlgorithm.ZLIBを渡します。
  • TransferableDataクラスとClipboardManagerクラスが無くなり,代わりにClipboardクラスを使うことになりました。クリップボードの読み書きを行う際は,ClipboardManager.accessClipboard()ではなくClipboard.generalClipboardというシングルトンオブジェクトを使います。
  • DragManager.isDraggingはメソッドからプロパティに変更になりました。
  • Doorクラスが無くなり,LoaderInfoクラスのDoor関連APIの名前が変更されました。
    • LoaderInfo.parentDoor → LoaderInfo.parentSandboxBridge
    • LoaderInfo.childDoor → LoaderInfo.childSandboxBridge
  • ・File APIのメソッド名がいくつか変更されました。
    • File.listDirectories() → File.getDirectoryListing()
    • File.listDirectoriesAsync() → File.getDirectoryListingAsync()
    • File.listRootDirectories() → File.getRootDirectories()
    • File.relativize() → File.getRelativePath()
    • File.resolve() → File.resolvePath()
  • NativeWindowコンストラクタのvisibleパラメータが無くなりました。NativeWindowオブジェクトを生成してからvisibleプロパティを設定することになります。
  • NativeWindowCapabiltiesクラスが無くなり,各プロパティはNativeWindowクラスに移動しました。
    • NativeWindowCapabilities.hasWindowIcon → NativeWindow.supportsIcon
    • NativeWindowCapabilities.hasMenu → NativeWindow.supportsMenu
    • NativeWindowCapabilities.windowMinSize → NativeWindow.systemMinSize
    • NativeWindowCapabilities.windowMaxSize → NativeWindow.systemMaxSize
  • Stage.windowプロパティはStage.nativeWindowプロパティに変更されました。
  • System.pause(),System.resume(),System.gc()の各メソッドは,デバッグモードでのみ有効になりました。ADLでの動作確認中はデバッグモードになります(-nodebugオプションを指定しない場合)。
  • System.exit()メソッドはAIRでは使えなくなりました。代わりにShell.exit()メソッドを使います。
  • Beta 1までは相対URLはapp-resource:/ディレクトリを基準としていましたが,Beta 2からはSWF/HTMLコンテンツが基準となります。

結構大幅に変わってますね。

特に、File クラス周りとNativeWindow クラス周り。

デスクトップアプリケーションとして、これまでFlash でなかった辺りの仕様がまだ固まっていない感じなのかなぁ。

まあ、勉強の意味でサンプルアプリでも作ってみようかな。

]]>
http://dev.chrisryu.com/2007/10/air_beta_2.html http://dev.chrisryu.com/2007/10/air_beta_2.html AIR Fri, 05 Oct 2007 23:11:21 +0900
でぃべろっぱーず・さいど: アーカイブ

アーカイブ

/* Base Weblog (base-weblog.css) */ /* basic elements */ html { margin: 0; /* setting border: 0 hoses ie6 win window inner well border */ padding: 0; } body { margin: 0; /* setting border: 0 hoses ie5 win window inner well border */ padding: 0; font-family: verdana, 'trebuchet ms', sans-serif; font-size: 12px; } form { margin: 0; padding: 0; } a { text-decoration: underline; } a img { border: 0; } h1, h2, h3, h4, h5, h6 { font-weight: normal; } h1, h2, h3, h4, h5, h6, p, ol, ul, pre, blockquote { margin-top: 10px; margin-bottom: 10px; } /* standard helper classes */ .clr { clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg { display: block; } /* */ /* page layout */ body { text-align: center; } /* center on ie */ #container { position: relative; margin: 0 auto; /* center on everything else */ width: 720px; text-align: left; } #container-inner { position: static; width: auto; } #banner { position: relative; } #banner-inner { position: static; } #pagebody { position: relative; width: 100%; } #pagebody-inner { position: static; width: 100%; } #alpha, #beta, #gamma, #delta { display: inline; /* ie win bugfix */ position: relative; float: left; min-height: 1px; } #delta { float: right; } #alpha-inner, #beta-inner, #gamma-inner, #delta-inner { position: static; } /* banner user/photo */ .banner-user { float: left; overflow: hidden; width: 64px; margin: 0 15px 0 0; border: 0; padding: 0; text-align: center; } .banner-user-photo { display: block; margin: 0 0 2px 0; border: 0; padding: 0; background-position: center center; background-repeat: no-repeat; text-decoration: none !important; } .banner-user-photo img { width: 64px; height: auto; margin: 0; border: 0; padding: 0; } /* content */ .content-nav { margin: 10px; text-align: center; } .date-header, .entry-content { position: static; clear: both; } .entry, .trackbacks, .comments, .archive { position: static; overflow: hidden; clear: both; width: 100%; margin-bottom: 20px; } .entry-content, .trackbacks-info, .trackback-content, .comment-content, .comments-open-content, .comments-closed { clear: both; } .entry-excerpt, .entry-body, .entry-more-link, .entry-more { clear: both; } .entry-footer, .trackback-footer, .comment-footer, .comments-open-footer, .archive-content { clear: both; margin: 5px 10px 20px 10px; } .comments-open label { display: block; } #comment-author, #comment-email, #comment-url, #comment-text { width: 240px; } #comment-bake-cookie { margin-left: 0; vertical-align: middle; } .comments-open-header { clear: both; } #comment-post { font-weight: bold; } img.image-full { width: 100%; } .image-thumbnail { float: left; width: 115px; margin: 0 10px 10px 0; } .image-thumbnail img { width: 115px; height: 115px; margin: 0 0 2px 0; } /* modules */ .module { position: relative; overflow: hidden; width: 100%; } .module-content { position: relative; margin: 5px 10px 20px 10px; } .module-list, .archive-list { margin: 0; padding: 0; list-style: none; } .module-list-item { margin-top: 5px; margin-bottom: 5px; } .module-presence img { vertical-align: middle; } .module-powered .module-content { margin-bottom: 10px; } .module-photo .module-content { text-align: center; } .module-wishlist .module-content { text-align: center; } .module-calendar .module-content table { border-collapse: collapse; } .module-calendar .module-content th, .module-calendar .module-content td { width: 14%; text-align: center; } .typelist-thumbnailed { margin: 0 0 20px 0; } .typelist-thumbnailed .module-list-item { display: block; clear: both; margin: 0; } /* positioniseverything.net/easyclearing.html */ .typelist-thumbnailed .module-list-item:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .typelist-thumbnailed .module-list-item { display: inline-block; } /* no ie mac \*/ * html .typelist-thumbnailed .module-list-item { height: 1%; } .typelist-thumbnailed .module-list-item { display: block; } /* */ .typelist-thumbnail { float: left; min-width: 60px; width: 60px; /* no ie mac \*/width: auto;/* */ margin: 0 5px 0 0; text-align: center; vertical-align: middle; } .typelist-thumbnail img { margin: 5px; } .module-galleries .typelist-thumbnail img { width: 50px; } .typelist-description { margin: 0; padding: 5px; } .module-featured-photo .module-content, .module-photo .module-content { margin: 0; } .module-featured-photo img { width: 100%; } .module-recent-photos { margin: 0 0 15px 0; } .module-recent-photos .module-content { margin: 0; } .module-recent-photos .module-list { display: block; height: 1%; margin: 0; border: 0; padding: 0; list-style: none; } /* positioniseverything.net/easyclearing.html */ .module-recent-photos .module-list:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } * html .module-recent-photos .module-list { display: inline-block; } /* no ie mac \*/ * html .module-recent-photos .module-list { height: 1%; } .module-recent-photos .module-list { display: block; } /* */ .module-recent-photos .module-list-item { display: block; float: left; /* ie win fix \*/ height: 1%; /**/ margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item a { display: block; margin: 0; border: 0; padding: 0; } .module-recent-photos .module-list-item img { width: 60px; height: 60px; margin: 0; padding: 0; } /* mmt calendar */ .module-mmt-calendar { margin-bottom: 15px; } .module-mmt-calendar .module-content { margin: 0; } .module-mmt-calendar .module-header { margin: 0; } .module-mmt-calendar .module-header a { text-decoration: none; } .module-mmt-calendar table { width: 100%; } .module-mmt-calendar th { text-align: left; } .module-mmt-calendar td { width: 14%; height: 75px; text-align: left; vertical-align: top; } .day-photo { width: 54px; height: 54px; } .day-photo a { display: block; } .day-photo a img { width: 50px; height: 50px; } /* Vicksburg II (theme-vicksburg.css) */ /* basic page elements */ body { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; font-size: 12px; } a { color: #666666; text-decoration: underline; } a:hover { color: #66cc33; } #banner a { color: #fff; text-decoration: none; } #banner a:hover { color: #fff; } .module-content a { color: #666666; } .module-content a:hover { color: #66cc33; } h1, h2, h3, h4, h5, h6 { font-family: 'trebuchet ms', verdana, helvetica, arial, sans-serif; } .module-header, .trackbacks-header, .comments-header, .comments-open-header, .archive-header { color: #000000; font-family: 'Trebuchet MS', Verdana, sans-serif; font-size: x-small; border-bottom: 1px dashed #999999; text-align: left; font-weight: bold; text-transform: uppercase; padding: 3px; letter-spacing: .3em; } .module-header a, .module-header a:hover, .trackbacks-header a, .trackbacks-header a:hover, .comments-header a, .comments-header a:hover, .comments-open-header a, .comments-open-header a:hover .archive-header a, .archive-header a:hover { color: #fff; } .entry-more-link, .entry-footer, .comment-footer, .trackback-footer, .typelist-thumbnailed { font-size: 11px; } .commenter-profile img { vertical-align: middle; } /* page layout */ body { min-width: 720px; color: #333; background: #FFFFFF; } #container { width: 720px; margin-bottom: 20px; background: #fff; } #container-inner { border-width: 0 5px 5px 5px; border-style: solid; border-color: #FFFFFF; } #banner { width: 710px; /* necessary for ie win */ background: #66cc33; } #banner-inner { padding: 15px 13px; border-width: 0px 0px 0 0px; border-style: solid; border-color: #fff; } .banner-user { width: 70px; margin-top: 5px; font-size: 10px; } .banner-user-photo { border: 1px solid #fff; } #banner-header { margin: 0; color: #fff; font-size: 30px; font-weight: bold; line-height: 1; text-shadow: #666666 0 2px 3px; } #banner-description { margin-top: 5px; margin-bottom: 0; color: #fff; background: none; font-size: 12px; line-height: 1.125; text-shadow: #666666 0 1px 2px; } #alpha { margin: 15px 15px 0 15px; width: 480px; } #beta { width: 200px; background: #e6ecf2; } #gamma, #delta { width: 180px; background: #dddddd; } #beta-inner, #gamma-inner, #delta-inner { padding: 10px 10px 0 10px; border-width: 0px 0px 0px 0; border-style: solid; border-color: #fff; } .date-header { margin-top: 0; font-size: 11px; font-weight: bold; text-transform: uppercase; } .entry-header { margin-top: 0; border-left: 5px solid #66CC33; padding: 0 0 0 10px; color: #000000; font-size: 18px; font-weight: bold; } .entry-content, .comment-content, .trackback-content { margin: 0; line-height: 1.5; } .entry-tags { margin: 0 0 10px 10px; } .entry-tags-header, .entry-tags-list, .entry-tag { display: inline; } .entry-tags-list { list-style:none; padding: 0px; } .entry-footer, .comment-footer, .trackback-footer { margin: 0 0 20px 0; border-top: 1px solid #DDDDDD; padding-top: 3px; color: #666; font-size: 10px; text-align: right; } .comment-content, .trackback-content, .comment-footer, .trackback-footer { margin-left: 10px; } .content-nav { margin-top: 0; } #trackbacks-info { margin: 10px 0; border: 1px dashed #66cc33; padding: 0 10px; color: #292e33; font-size: 11px; text-align: center; background: #dddddd; } .comments-open-footer { margin: 10px 0; } /* modules */ .module { margin: 0 0 10px 0; border-bottom: 1px solid #f3f6f9; background: #DDDDDD; } .module-content { margin: 0 0 10px 0; padding: 10px 10px 0 10px; font-size: 10px; line-height: 1.2; } .module-search input { font-size: 10px; } .module-search #search { width: 100px; } .module-mmt-calendar .module-content table, .module-calendar .module-content table { font-size: 10px; } .module-powered { border-width: 0; } .module-powered .module-content { margin-bottom: 0; border: 1px dashed #66cc33; padding-bottom: 10px; color: #292e33; background: #fff; } .module-photo { background: none; } .module-photo img { border: solid 1px #fff; } .module-list { margin: 0 15px 10px 15px; list-style: disc; } .module-list .module-list { margin: 5px 0 0 0; padding-left: 15px; list-style: circle; } .module-list-item { margin-top: 0; color: #666; line-height: 1.2; } .typelist-thumbnailed .module-list { margin: 0 0 10px 0; list-style: none; } .typelist-thumbnailed .module-list-item { margin: 1px 0; padding: 0; background: #f3f6f9; } .typelist-thumbnail { background: #fff; } .module-photo img { border: 1px solid #fff; } .module-featured-photo { width: 398px; } .module-featured-photo .module-content { margin: 0; border-width: 0; padding: 0; } .module-featured-photo img { width: 398px; } .module-recent-photos .module-content { padding: 10px 0 0 19px; } .module-recent-photos .module-list { margin: 0; } .module-recent-photos .module-list-item { width: 64px; /* mac ie fix */ margin: 0 10px 10px 0; padding: 0; background: none; } .module-recent-photos .module-list-item a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .module-recent-photos .module-list-item a:hover { border-color: #666666; background: #fff; } .module-tagcloud .module-list {text-align: center; } .module-tagcloud .module-list { list-style: none; } .module-tagcloud .module-list-item { display: inline; } .module-tagcloud li.taglevel1 { font-size: 19px; } .module-tagcloud li.taglevel2 { font-size: 17px; } .module-tagcloud li.taglevel3 { font-size: 15px; } .module-tagcloud li.taglevel4 { font-size: 13px; } .module-tagcloud li.taglevel5 { font-size: 11px; } .module-tagcloud li.taglevel6 { font-size: 9px; } /* calendar tweaks */ .layout-calendar #alpha { width: 260px; } .layout-calendar #beta { width: 420px; } .layout-calendar #gamma, .layout-calendar #delta { width: 190px; } .layout-calendar #gamma-inner, .layout-calendar #delta-inner { border: 0; padding: 0; } .module-mmt-calendar { width: 398px; } .module-mmt-calendar .module-content { margin: 0; border-width: 0; padding: 10px; } .module-mmt-calendar table { width: 378px; background: #66cc33; } .module-mmt-calendar th { color: #fff; border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: bold; } .module-mmt-calendar td { border-top: 1px solid #fff; border-right: 1px solid #f3f6f9; border-bottom: 1px solid #cfd4d9; padding: 2px; text-align: right; font-weight: normal; background: #dddddd; } th.weekday-7, td.day-7, td.day-14, td.day-21, td.day-28, td.day-35, td.day-42 { border-right: none; } .module-mmt-calendar td { height: 70px; } .day-photo { width: 49px; height: 49px; } .day-photo a { border: #cfd4d9 1px solid; padding: 1px; background: #fff; } .day-photo a:hover { border-color: #666666; background: #fff; } .day-photo a img { width: 45px; height: 45px; } /* artistic tweaks */ .layout-artistic #alpha { width: 260px; } .layout-artistic #beta { width: 420px; } .layout-artistic #gamma, .layout-artistic #delta { width: 190px; } .layout-artistic #gamma-inner, .layout-artistic #delta-inner { border: 0; padding: 0; } /* moblog1 tweaks */ .layout-moblog1 #alpha { margin: 0; width: 180px; background: #dddddd; } .layout-moblog1 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog1 #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-moblog1 #beta-inner { padding: 0; border-width: 0; } .layout-moblog1 .module-recent-photos .module-content { padding: 10px 0 0 10px; } /* moblog2 tweaks */ .layout-moblog2 #alpha { margin: 0; width: 86px; background: #dddddd; } .layout-moblog2 #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-moblog2 #beta { margin: 15px 15px 0 15px; width: 260px; background: none; } .layout-moblog2 #beta-inner { padding: 0; border-width: 0; } .layout-moblog2 #delta { width: 154px; } .layout-moblog2 .module-recent-photos { border: 0; background: none; } .layout-moblog2 .module-recent-photos .module-content { padding: 0; border: 0; } .layout-moblog2 .module-recent-photos .module-list-item { margin: 0 0 10px 0; } /* timeline tweaks */ .layout-timeline #alpha { width: 260px; } .layout-timeline #beta { width: 420px; } .layout-timeline #gamma, .layout-timeline #delta { width: 190px; } .layout-timeline #gamma-inner, .layout-timeline #delta-inner { border: 0; padding: 0; } /* one-column tweaks */ .layout-one-column body { min-width: 520px; } .layout-one-column #container { width: 520px; } .layout-one-column #banner { width: 510px; } /* necessary for ie win */ /* two-column-left tweaks */ .layout-two-column-left #alpha { margin: 0; width: 200px; background: #dddddd; } .layout-two-column-left #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-two-column-left #beta { margin: 15px 15px 0 15px; width: 480px; background: none; } .layout-two-column-left #beta-inner { padding: 0; border-width: 0; } /* three-column tweaks */ .layout-three-column #alpha { margin: 0; width: 180px; background: #DDDDDD; } .layout-three-column #alpha-inner { padding: 10px 10px 0 10px; border-width: 0px 0 0px 0px; border-style: solid; border-color: #fff; } .layout-three-column #beta { margin: 15px 15px 0 15px; width: 320px; background: none; } .layout-three-column #beta-inner { padding: 0; border-width: 0; } /* * Preliminary styles added by Jay for Vicksburg II * for review by Luke/Walt and rest of team */ /* All or multiple templates Suppress underlines on linked entry titles */ .entry-header a { text-decoration: none; } /* Suppress the prev/next nav */ .content-nav { margin: 0px; display: none; } /* Search results templates */ .mt-search-results .search-results-header { border: 2px solid #669; background-color: #666666; color: #eee; padding: 5px; } .mt-search-results .search-results-container { margin-left:10px; } .mt-search-results form#search-form { width: 400px; margin: 0px auto 20px auto; } .mt-search-results form#search-form input#search { width: 80%; } .mt-search-results form#search-form p#search-options { text-align:center; } /* Entry tag display */ div.entry-tags { margin:0 0 10px 10px; } ul.entry-tags-list { list-style:none; padding: 0px; } h4.entry-tags-header, ul.entry-tags-list, li.entry-tag { display: inline; } /* Main index styles Suppress date header on main index */ .main-index .date-header { display: none; } /* Comment preview and individual entry Widen the comment form */ form textarea#comment-text { width:400px; } /* All archive templates Informational "where am I?" module at top of sidebar */ .module-welcome p { font-size: 12px; } .module-content p.first { margin-top:0px; } /* Date-based and category archives Archive title banner at top of page, below blog banner */ .master-archive-index #archive-title, .individual-entry-archive #archive-title, .date-based-archive #archive-title, .category-archive #archive-title { /* ie win (5, 5.5, 6) bugfix */ p\osition: relative; width: 100%; w\idth: auto; margin: 0; border-left: 10px solid #66cc33; padding: 5px; color: #fff; background: #666666; } /* Experimental comment styles Not currently in use anywhere in default templates For testing only... */ #comments-experimental .comment, #comments-experimental .comment .comment-inner { width:36em; } #comments-experimental .comment { padding: 0px; margin: 10px 15px; background-color:#eef; border:2px solid #bbb; } #comments-experimental .comment .comment-inner { position:relative; margin:-5px 0 0 -3px; background:#f3f3ff; border:1px solid #003; } #comments-experimental .comment:hover .comment-inner { border:1px solid #000; background-color: #fff; } #comments-experimental .comment a { text-decoration: none; border-bottom: 1px dotted #666666; } #comments-experimental .comment:hover a { color: #333; border-bottom: 1px solid #666; } #comments-experimental .comment .comment-footer, #comments-experimental .comment .comment-content { margin-right: 25px; margin-left: 25px; margin-bottom: 15px; } #comments-experimental .comment .comment-header { font-size: 16px; margin: 5px auto 5px 10px; text-shadow: #99A 2px 2px 1px #66F; color: #666; } #comments .comment-header { display: none; } #comments .comment-footer-experimental { display: none; } #comments-experimental .comment-footer { display: none; } でぃべろっぱーず・さいど: コメントの保留

コメントを受け付けました。

コメントを受け付けました。受け付けたコメントは、ブログの管理者の承認のため保留されています。

エントリーのページに戻る