新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Flexを開発する上で、長方するのがFlexBuilder3.0

しかし有料で30000\ほどするため特に購入はせずにSDKのみで開発していました。

そこで何かフリーで使える開発環境はないものかと探したところ

見つけました。

「FlashDevelop」

flashdevelop1.jpg

開発統合環境(IDE)であるFlashDevelopは以下からインストールできます。

FlashDevelop.org

【FlashDevelopとあわせてインストールしておくもの】


FlashDevelopを動作させるために必要な「Java」と「.net Framawork」をインストールしておきます

環境設定 : FlexSDK + FlashDevelopで作る場合

MSVCR71.DLL - mynote




【Flex SDK3の導入】


Flash CS3やFlex Builder 3は有料ですが、Flex SDKを使えば無料でswfの開発ができます。
p>
flashdevelo_01-459x338.jpg


  • Download Flex 3 - Flex SDK - Confluence




  • 【Flash Playerの設定】



    flashdevelop_03.jpg

    そのままだとtrace文が表示できないので、Flash Playerのデバッグ版を入れてtraceが確認できるようにしておきます。

    Adobe Flash Player - Downloads

    からDebug版となるFlash Debug Playerをダウンロードします。



    通常Windowsの場合は

    IE向け(ActiveX版)
    その他ブラウザ向け(Plugin版)
    スタンドアロン版

    の三種類があります。
    ブラウザの前者2つは両方入れておきます。
    スタンドアロン版は.swfファイルを右クリックして「規定のプログラムの選択」でFlex SDK内のruntimes/player内のスタンドアロンを常に開くように設定しておくとよいでしょう。





    【FlashDevelopでコンパイルするためには】


    次に下記の設定をします





    【FlashDevelopで日本語編集するために】


    初期設定では残念ながら日本語は表示できません。

    下記リンクを参考にフォントを日本語にし、文字コードを2バイトのものに設定します。




    FlexDevelopにはインストールすればすでにMXML言語にまで対応しているようです。

    これを使用すればFlexBuilderがなくても十分対応できるのではないでしょうか?

    スポンサーサイト

    テーマ:Adobe Flex3 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。




遅くなってすみません

前回の↓
http://kanamehackday.blog17.fc2.com/blog-category-14.html


の今の状態のサンプルアプリケーション↓

http://www35.tok2.com/home/kanameboy/swf/youTube.swf



こんな感じのが現状ではできあがります。


再生できないんでそこんとこを後半はやらないとね。


mixiのAPIとかも利用したいな・・・って前から言ってて何もしてない。

そろそろいろいろ再開します。

テーマ:Adobe Flex3 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


今日はFlex3とYouTubeのAPIを使用して、YouTubeの画像検索RIAを開発したいと思います。


難しいんじゃないかなあ…と思いましたが意外と簡単にできるもんです。
さすがFlex!!



ちなみに仕様はこんな感じです。
・キーワードを入力できる
・検索するとサムネイル画像が表示される
・画像をダブルクリックすると、指定したYouTube動画をFlex上で再生できる



使用する主なコンポーネントは
・TextInput キーワード入力
・Button 検索ボタン
・TileList サムネイル画像表示
・player 動画再生



まず、だいたいの形を書いてみました

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:ApplicationControlBar width="100%">
<mx:TextInput/>
<mx:Button label="youtube search"/>
</mx:ApplicationControlBar>
<mx:HDividedBox width="100%" height="100%">
<mx:TileList width="100%" height="100%"></mx:TileList>
</mx:HDividedBox>
</mx:Application>



■ApplicationControlBar
グローバルナビゲーションやアプリケーションコマンドのコンポーネントを保持するコンテナ

■HDividedBox
HBox コンテナと同様に子を水平にレイアウトしますが、それぞれの子の間にはドラッグ可能な仕切りが挿入されます。仕切りをドラッグすると、各子に割り当てられる領域のサイズを変更できます



次にボタンクリック時の動作を設定します
・スクリプトの記述

<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function send_request():void {
Alert.show(keyword.text);
}
]]>
</mx:Script>


・TextInputに id="keyword"を設定
・Buttonに click="send_request()"を設定



これにより、TextInoutに入力されたデータがButtonクリックによって出力されていることがわかります。




次にYouTubeのAPIを利用して、画像のサムネイルを表示してみましょう。

Youtubeのキーワード検索をする場合は
http://gdata.youtube.com/feeds/api/videos?vq=[検索キーワード]

と設定する事により、XMLが取得できます。

実際にブラウザでアクセスしてみるとXML画取得できる事がわかります。

Flex上でYouTubeのAPIにアクセスするには以下のクラスを使用します



■HTTPService
HTTPService オブジェクトの send() メソッドを呼び出すと、指定した URL に対して HTTP 要求が実行され、HTTP 応答が返されます。
指定する URL にパラメータを渡すこともできます。
サーバーベースのプロキシサービスを経由しない場合は、HTTP GET メソッドまたは POST メソッドだけを使用できます。


次のように取得してみました

<mx:HTTPService
id="youtubeapi"
url="http://gdata.youtube.com/feeds/api/videos"
method="GET"
result="youtubeapi_result(event)" />




次に先ほど作成したスクリプトのsend_request()メソッドにAPIへリクエストをする処理を加えます。
※Alert()は削除しましょー

import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
public function send_request():void {
  var uv:URLVariables = new URLVariables;
  uv.vq = keyword.text;
  youtubeapi.request = uv;
  youtubeapi.send();
}





■youtubeapi.result
URL に渡すパラメータとして使用される、名前と値のペアのオブジェクトです。

■youtubeapi.send()
HTTPService 要求を実行します。

■URLVariables
Flashアプリケーションとサーバーの間で転送するための変数を設定できます




これにより入力されたキーワードをAPIへ送信できます。





また、FlexからYouTubeAPIにリクエストを受け取るために以下のメソッドを加えます

public function youtubeapi_result(event:ResultEvent):void {
  Alert.show("get youtube result");
}





次回へつづくー

テーマ:Adobe Flex3 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。



Flexの開発中に問題発生

本日実装していたアプリケーションは
http;//weather.livedoor.com/forecast/rss/13/63.xml
のRSSをロードして
Flexアプリケーション上に表示する

このRSSはlivedoorの天気予報のRSSである。
これを実装すればちょっと便利なもんできちゃうんじゃないの?
って思って開発してみた。


ソースはこんな感じ


⁢?xml version="1.0" encoding="utf-8"?>
⁢mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="a_service.send()">
  ⁢mx:DataGrid width="100%" height="100%" dataProvider="{a_service.lastResult.channel.item}">
    ⁢mx:columns>
      ⁢mx:DataGridColumn headerText="天気" dataField="Title"/>
    ⁢/mx:columns>
  ⁢/mx:DataGrid>
  
  ⁢mx:HTTPService id="a_service"
     url="http;//weather.livedoor.com/forecast/rss/13/63.xml"
   useProxy="false"
   resultFormat="e4x" />
⁢/mx:Application>


そしてコンパイル実行


mxmlc ****.mxml

swfファイル生成

swfファイル実行

・・・



・・・






[RPC Fault faultString="Error #2148: SWF ファイル file:///C|/Apache/Apache2/htdocs/flex/src/Weather.swf はローカルリソース file:///C|/Apache/Apache2/htdocs/flex/src/http;//weather.livedoor.com/forecast/rss/13/63.xml にアクセスできません。ローカルファイルシステムの SWF および信頼されているローカル SWF ファイルのみがローカルリソースにアクセスできます。" faultCode="InvokeFailed" faultDetail="null"]
  at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::invoke()
  at mx.rpc.http.mxml::HTTPService/http://www.adobe.com/2006/flex/mx/internal::invoke()
  at mx.rpc.http::HTTPService/send()
  at mx.rpc.http.mxml::HTTPService/send()
  at Weather/___Weather_Application1_creationComplete()
  at flash.events::EventDispatcher/dispatchEventFunction()
  at flash.events::EventDispatcher/dispatchEvent()
  at mx.core::UIComponent/dispatchEvent()
  at mx.core::UIComponent/set initialized()
  at mx.managers::LayoutManager/doPhasedInstantiation()
  at Function/http://adobe.com/AS3/2006/builtin::apply()
  at mx.core::UIComponent/callLaterDispatcher2()
  at mx.core::UIComponent/callLaterDispatcher()



とエラー。。。


対処法を調べました!!


■対処法

1.Windows XP では C:\WINDOWS\system32\Macromed\FlashにFlashPlayerTrust ディレクトリを作成する

2.作成したディレクトリにsecuritl.cfgファイルを作成する(ファイル名は何でもいーです)

3.cfgファイルにswfファイルのパスを記述する
(例.C:\Apache\Apache2\htdocs\flex)




これで上記エラーの問題は解決。




しかし。




[RPC Fault faultString="HTTP request error" faultCode="Server.Error.Request" faultDetail="Error: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2032: ストリームエラー。 URL: file:///C|/Apache/Apache2/htdocs/flex/src/http;//weather.livedoor.com/forecast/rss/13/63.xml"]. URL: http;//weather.livedoor.com/forecast/rss/13/63.xml"]
  at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::faultHandler()
  at mx.rpc::Responder/fault()
  at mx.rpc::AsyncRequest/fault()
  at DirectHTTPMessageResponder/errorHandler()
  at flash.events::EventDispatcher/dispatchEventFunction()
  at flash.events::EventDispatcher/dispatchEvent()
  at flash.net::URLLoader/redirectEvent()



再度エラー



てか思ったんです。
今回はcfgファイルを作成すればいいんですが
管理人が自分でないwebサーバを使用している場合、cfgファイルやクロスドメインポリシーファイル(crossdomain.xml)などを配置できません。
場合によっては管理人が配置してくれるような場所もあるかもしれませんが。

ってことは自分の場合、RSSを使用したサービスが利用できないってコトになりますよね?


わー><

APIも無理そうな気がしてきましたよ。

とりあえず勉強はがんばろう。


上記エラーの原因わかる人募集中~♪

テーマ:Adobe Flex3 - ジャンル:コンピュータ

新しくブログを開設しました。

Webエンジニアがデザイナーになってみる。


Flexのコントロールコンポーネントの説明です

■ボタン (Button)
ボタンをクリックするとメッセージが表示されます
clickプロパティでクリック字の関数を指定します


<mx:Button x="26" y="26" label="ボタン" click="onClick()"/>


クリック時の関数を記述します
Aleart.show()を使用して、メッセージを表示しています


<mx:Script>
  <![CDATA[
    import mx.controls.*;

    //buttonクリック用
    private function onClick():void{
      Alert.show("Hello kaname's hackday!!");
    }    
  ]]>
</mx:Script>


■Text
入力不可のテキスト


<mx:Text x="26" y="92" text="Text 複数行可能" width="172" color="#E41E85" height="29"/>




■TextArea
複数行で入力可能なテキストエリアです


<mx:TextArea x="26" y="129" text="TextArea 複数行で入力可能" width="172"/>



■TextInput
単一行で入力可能なテキストボックス


<mx:TextInput x="26" y="190" text="TextInput 単一行で入力可能" width="172"/>



■ラベル (Label)
ラベルです


<mx:Label x="26" y="66" text="Label" width="172" color="#3B18A0"/>



■コンボボックス (comboBox)
コンボボックスです
changeプロパティで、選択しているItemが変更された時に実行される関数を設定できます


<mx:ComboBox id="combo" x="26" y="230" change="comboChange()" width="172">
  <mx:ArrayCollection>
    <mx:String>ComboBox</mx:String>
    <mx:String>kaname</mx:String>
    <mx:String>hackday</mx:String>
  </mx:ArrayCollection>
</mx:ComboBox>




ComboBoxのidを使用し、現在選択しているItemを
combo.selectedItemで取得し、String形式で取得しています。
取得したデータをAleart.show()で表示します


<mx:Script>
  <![CDATA[
    import mx.controls.*;

    //comboBox選択時
    private function comboChange():void{
      var selectStr:String = String(combo.selectedItem);
      Alert.show(selectStr + "です");
    }    
  ]]>
</mx:Script>



■リスト (List)
リストの表示です
dataproviderプロパティを使用して、ArrayCollectionタグ内のデータを取得しています。
この時、データをバインドするため {id} という形式で取得します。

選択したItemが変更された時、listChange()が実行されます


<mx:List id="list" dataProvider="{list_data}" change="listChange()" x="26" y="271" height="100" width="172"/>
<mx:ArrayCollection id="list_data">
  <mx:String>ComboBox</mx:String>
  <mx:String>web@Youtility</mx:String>
  <mx:String>kaname's hackday</mx:String>
</mx:ArrayCollection>



選択されたItem変更時に実行される関数の設定です
list.selectedItemで選択されたItemを取得し、表示しています


<mx:Script>
  <![CDATA[
    import mx.controls.*;

    //List選択時
    private function listChange():void{
      var selectStr:String = String(list.selectedItem);
      Alert.show(selectStr + "です");
    }    
  ]]>
</mx:Script>





最後に上記のコンポーネントを簡単に実装させた例です
http://smileboys.fc2web.com/WebUtility/flex/swf/compornent01.html

テーマ:Adobe Flex3 - ジャンル:コンピュータ

次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。