Home > Flex3SDK

Flex3SDK Archive

Flexコンポーネント化したものを、FlashDevelopで使ってみる


カヤックさんとこのブログの『FlashのシンボルをFlexコンポーネントに』という記事を読んでいて、これってFlashDevelopで出来ないのかな? と思ったので、試してみました。

mxpをダウンロード&インストール→シンボルを作成→swc書き出しっていう一連の流れは、カヤックさんの記事に詳しく書かれているので、そちらを読んでくださいませ。

FlashDevelopで使ってみる

Flex3 Projectを作成し、書き出したswcをライブラリに追加しておきます。

swcをライブラリに追加しておく

こんなコードを書いてみます。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFFFFF" width="550" height="400">
	<local:Circle></local:Circle>
</mx:Application>

で、Build Projectを行うと…

C:\Documents and Settings\Administrator\デスクトップ\Circle\src\Main.mxml(3): col: 16 Error: The prefix “local” for element “local:Circle” is not bound.

^
Build halted with errors

こんな感じで怒られます。

FlashBuilderではコード補完も出るみたいですが、FlashDevelopでは駄目でした。

名前空間を追加する

localっていうのが認識されていないっぽいので、xmlの名前空間を追加してあげればいいんじゃない? と思ったんで、以下の様にコードを変更してみました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*" backgroundColor="0xFFFFFF" width="550" height="400">
	<local:Circle></local:Circle>
</mx:Application>

で、もう一回、Build Projectを行うと…

今度は、成功!

Buildは成功したんですが、残念ながら(FlashBuilderみたいに)コードヒントは出ませんでした…

どうにかすると、FlashDevelopでもコードヒントが出るのかなぁ…(要検討!)

こんな感じにしてあげると、FlashDevelopでも使えるっぽいです。

MetaTagGeneratorを1.2にバージョンアップ


MetaTagGeneratorを1.2にバージョンアップしました。

MetaTagGenerator1.2

前回からの変更点はこんなところです。

  1. バージョンの記述
  2. 字数制限
  3. faviconの設定

バージョンの記述

バージョンがいくつか分からなかったので、現バージョンを表示するように変更しました。

字数制限

(SEO対策も兼ねて)descriptionとkeywordsに字数制限をしました。

keywordは(多くて)10個くらいで、descriptionは100字くらいがいいんじゃないの? みたいな説がありますので、それを参考に。

それ以上設定したいという場合は、(フィールドに値を入力→ドラッグ&ドロップorファイルを読み込んだ後で)テキストエリアを直接修正してもらえれば、100字以上の設定は可能です。

faviconの設定

あとfaviconもよく設定する項目だと思いましたので、設定をパネルから行えるようにしてみました。

デフォルトのパスは、/favicon.icoとなっています。(絶対パスなどに)変更したい場合は、適宜修正してください。

faviconのタイプですが、二通り選択可能です。

image/x-iconと設定する場合が多いかと思いますが、image/vnd.microsoft.iconも選べるようにしてあります。このあたりのことは、wikipediaのfaviconのページを参考にさせていただきました。

ちなみにですが、パスをデフォルトで、タイプをimage/x-iconにすると、こんな感じになります。

<title>●●●●</title>
<link rel=”stylesheet” type=”text/css” href=”contents/styles/progression.css” />
<link rel=”shortcut icon” type=”image/x-icon” href=”/favicon.ico” />

こんな感じで、progressionのcssの設定の記述の下に、favicon(の記述)が挿入されます。

あとrobotの設定も出来るようにしようかなぁ…と思ったんですが、いろんなサイトのソースを見ていたら、(robotは)あまり設定されていないように思えたので、今回は見送りました。

robotの設定を可能にして! とか、他にもこの設定を出来たら便利なのに! などご意見がありましたら、コメントお願い致します。

Flex初心者の疑問


TextInputに入力した文字を、TextAreaに(連動させて)表示させたい場合

パターン1

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="250" backgroundColor="0xFFFFFF">
	<mx:TextInput id="txt_input"></mx:TextInput>
	<mx:TextArea text="{txt_input.text}"></mx:TextArea>
</mx:Application>

パターン2

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="250" backgroundColor="0xFFFFFF">
	<mx:TextInput id="txt_input" change="changeHandler()"></mx:TextInput>
	<mx:TextArea id="txt_area"></mx:TextArea>
	<mx:Script>
		<![CDATA[
		private function changeHandler():void{
			txt_area.text = txt_input.text;
		}
		]]>
	</mx:Script>
</mx:Application>

書き方としては、こっちがオススメなんてあるんでしょうか?

単にコード量の差だけなのかなぁ…

ちょっと疑問に思ったので、エントリしてみました。

AirAutoUpdaterを実装してみた


AirAutoUpdaterのテスト

AIRにオートアップデートの機能をつけてみたので、ちゃんと実装出来ているのかテストしてみました。

バージョンを0.5とかにして、パッケージをし直して、マシンにインストール。

するとこんな画面が現れます。

オートアップデートのテスト

アップデートしたいので、Yesを押す。

アップデート中

こんな画面になって、アップデートが無事終了。

一応、ちゃんと実装出来ているみたいです。

AirAutoUpdater

オートアップデートの実装には、Spark Projectにある『AirAutoUpdater』を使わせて頂きました。

★参考にさせて頂いた記事

RontanBlogさんの記事&Sparkさんにあるwikiを読めば、問題なく実装出来ました。

開発しているAIR側のXML(僕はFlashDevelopなので、application.xml)の記述を、今回はApplication Descriptor Manager(以下ADM)を使って行いました。

なので、このアプリを使う上での注意点なんかを書こうかと思ってます。

ADMについての詳細は、僕の以前のエントリをご覧ください。

実装方法

(RontanBlogさんの記事に)MXMLに一行追加するとありますので、こんな感じにしました。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:jx="net.jirox.*">
<jx:AirAutoUpdater url="http://URLのパス/version.xml"/>

あとはapplication.xmlに最新のバージョンとオートアップデート機能を使いますよ~! と書いてあげればいいだけです。

ADMを起動して、Browse for a Fileのボタンを押して、変更したいapplication.xmlを指定します。

あとはRequiredタブ内のVersionの箇所を、最新のもの(1.0→1.1)に変更

Versionを変更

Optionalタブ内のCustom UI Updateに(忘れずに)チェックを入れます。

アップデート機能を有効にします

で、File Previewのタブをクリックして、ソースを確認します。

<id>flabaka.MetaTagGenerator</id>

<version>1.1</version>

(略)

<customUpdateUI>true</customUpdateUI>

これでOKなので、保存しておきます。

あとはFlashDevelopを使って、AIRのパッケージングを行えばOKです。

注意点

ADMを使うときに注意することは、application.xmlをUTF-8のBOMありで保存したら駄目っぽいということでしょうか。

僕、誤ってBOMありで保存をしてしまい、ファイルをADMで編集しようとしたら、ファイルを認識してくれませんでした。

BOMなしに保存し直してからADMで読み込んでみると、問題なく開くことが出来ました。

注意点としたら、こんなとこです。

更新の際には

更新の際には、version.xml(最新バージョンがいくつと書かれたもの)と、パッケージング化した(最新バージョンの)AIRをサーバーにアップすればOK。

あとはAirAutoUpdaterにお任せっ!

次回は最初からアップデート機能をきちんと実装したいと思います。

ドラッグ&ドロップの機能を追加しました!


ちょっと前に作成したProgression用の『MetaTagGenerator』。

ファイルをアップロードしたり、metaタグを記述したファイルをダウンロードする際、(毎回)ボタンを押して、ファイル場所や保存先などを選択するのは面倒だなぁ…と思ったので、(勉強がてら)ドラッグ&ドロップで出来るようにしてみました。

★使い方はこんな感じです。

4つのフィールドに、それぞれ値を記入。

次に、progressionのdeployフォルダ内にあるindex.htmlをテキストエリア(ここにファイルをドロップしてくださいと書いてある箇所に)ドラッグ&ドロップ。

metaタグを記述

すると、4つのフィールドに記述した値がmetaタグに挿入されます。

metaタグが挿入された

修正等が終わったら、(今度は逆に)テキストエリアにカーソルを立て、deployフォルダにドラッグ&ドロップします。

deployフォルダにドロップ

すると上書きしますかと聞かれるので、OKを押す。

上書き保存

ちょっとは手間が省けるかと…

ダウンロード

先のバージョンをダウンロードされた方は、お手数ですが、もう一度下記よりダウンロード&インストールをお願い致します。

今回作成したものから自動アップデート機能を付けてみました。(果たして上手くいくのかワカラナイけど…)

AIRファイルをダウンロードする

ホーム > Flex3SDK

Search
Feeds
Meta

flashDevelopスポンサー

Return to page top