<< September/2010
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
>>
冷静に考えれば、Flexは「クライアントサイド」で動作するわけなので、
すぐに気づきそうなものだったのですが・・・
Ajaxと同じことですからね・・・

結論から言うと、ロジックを担当しているJavaコンテナを、
外から隠蔽することは不可能でした
応急処置としてコンテナのポートを開けることになりました(´・ω・`)

まあ、これを仕事の本番テストでやっていたら、
とんでもない大騒ぎになるところなわけで、
自分で検証して、外部に使ってもらったのは正解でしたね

想定外にコンテナを外に公開することになったので、
ロジックレベルで、落ちた分のセキュリティを補完しないといけないわけですが・・・
そこは腕の見せどころか(`・ω・´)

[ Web技術::Flex ] comments (0) trackback (0)
今日はFlex/AIRの話ですが、例のシステムとは別件です

今日、仕事でちょっとした機能の調査をしていまして、
要件的にAIRを使ってどうにかならないものかと調べてました

で、詰まったのがAIRで画像を「書き出す」場合でして

書き込みのインターフェースは全てbyteの配列を受け取るのですが、
肝心の画像オブジェクトをbyte配列に変換する手段が不明(´・ω・`)

ここで1時間くらいWebを探し回ったのですが、
結論として「JPEGEncoder#encode」を使えばいけることがわかりました

(そもそもこのクラス、Flexのフォーラムに投稿されていたものだったのですが、
 本家に統合されたのでしょうか・・・
 その方がありがたいのですけどね)

ということで、以下にこれを使ったコードを

クリップボードから得たスクリーンショットを、
サーバで受け取るAIRのコードです


<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="200" layout="vertical">

 <mx:Script>
  <![CDATA[
   import mx.graphics.codec.JPEGEncoder;
   import mx.controls.Alert;
   
   private function clipWriter():void{
    // クリップボードからデータを取得
    var clipboard:Clipboard = Clipboard.generalClipboard;
    var bitmap:BitmapData = BitmapData(clipboard.getData(ClipboardFormats.BITMAP_FORMAT));
    
    if (bitmap == null){
     Alert.show("Clipboard is empty or not Bitmap.");
     return;
    }
    
    // BitmapDataをJPEGに変換
    var jpeg:JPEGEncoder = new JPEGEncoder(70);
    var bytes:ByteArray = jpeg.encode(bitmap);

    /* ファイルに保存する場合
    var output:File = File.desktopDirectory.resolvePath("test.jpg");
    var stream:FileStream = new FileStream();
    
    try{
     stream.open(output, FileMode.WRITE);
     stream.writeBytes(bytes);
    } catch(e:Error) {
     Alert.show(e.message);
    } finally {
     stream.close();
    }
    */

    var req:URLRequest = new URLRequest("http://localhost:8080/test/fileupload");
    req.method = URLRequestMethod.POST;
    req.data = bytes;

    var loader:URLLoader = new URLLoader();
    loader.addEventListener(Event.COMPLETE , comp);
    loader.addEventListener(IOErrorEvent.IO_ERROR, error);
    loader.load(req);
   }
   
   private function comp(event:Event):void{
    Alert.show("Upload Complete!");
   }
   
   private function error(event:IOErrorEvent):void{
    Alert.show("Upload error!");
   }
   
   private function end():void{
    NativeApplication.nativeApplication.exit();
   }
  ]]>
 </mx:Script>
 
 <mx:Button label="Upload" click="clipWriter()"/>
 <mx:Button label="End" click="end()"/> 
 
</mx:WindowedApplication>


受け取るサーバ側は何でもいいのですが、
byte配列を受け取るコードがさくっと書けるのが私にとってJavaだったので、
簡単なServletで受け取ってます

 InputStream is = request.getInputStream()

こんな感じで
InputStreamに持ち込めばあとはどうにでもなりますからね


そんなわけで今日はAIRをいじってみたわけですが、
Flexの仕組みの延長線上でデスクトップアプリが書けるのはいいですね

ちなみに、BitmapData#drawを使うと、
いろいろなコンポーネントを画像データ化できます
興味のある方は試してみては

[ Web技術::Flex ] comments (0) trackback (0)
以前、ActionScriptの「dynamic」なクラスについて書きましたが、
昨日ツボを突いたコメントをいただきまして、
なんとか目的のリクエストモジュールの作成ができそうです(`・ω・´) b

そして、まるで狙ったかのようですが、
今日、仕事でJavaScriptである機能を実装するため、
いろいろ調べているうち、「prototype.js」にたどり着きました

このライブラリを使うとオブジェクト指向らしく書けるということで、
ソースを眺めてみたのですが、いまいち中身が理解できません(´・ω・`)

で、JavaScriptにおけるオブジェクト指向について調べていくうち、
こんなところにたどり着きました

@IT:第4回 JavaScriptでオブジェクト指向プログラミング

これを読んでようやく理解したと同時に、
ActionScriptの「dynamic」クラスについてもわかったのです(`・ω・´)



実は、「オブジェクト指向」の実装には2種類あることをご存知でしょうか?

私のようなJava屋さんが普段触れているのは「クラスベース」で、
設計図である「クラス」から、値を内包した「オブジェクト」を生成して使います

一方、JavaScript・・・というか、ActionScriptも含む「ECMAScript」は、
「プロトタイプベース」のオブジェクト指向を実装しています

何が違うのかというと、「クラスベース」の場合、
クラスの定義が絶対であり、
クラスにないプロパティやメソッドにはアクセスできません

つまり、なんらかの事情で一時的にプロパティを追加、というようなことができず、
あらかじめクラス定義に汎用性を持たせるか、
継承したクラスを再定義する必要があります

これでは厳しすぎるという考え方から、
動的にプロパティやメソッドを追加できるように考えられたのが、
「プロトタイプベース」なのです

これだけ読むと難しそうですが、
要するに「プロトタイプベースのオブジェクト」とは、
連想配列オブジェクトのことでしかありませんΣ(・ω・ノ)ノ

まあ、詳しい解説はさっきのサイトを見ていただくとして、
今重要なのはJavaScriptで以下のようなことができることです

var obj = new Object();
obj.x = 1;
obj.y = 2;

・・・これと・・・

var obj = {x:1, y:2};

・・・これは、実は同じことをしています

つまり、JavaScriptにおけるプロパティは、
「連想配列」と同じということです

ということは・・・

obj.x = 1;
obj.y = 2;

obj["x"] = 1;
obj["y"] = 2;

・・・こう書いてもいいってことです

さて、話をActionScriptに戻しますが、
今でこそActionScriptは「クラスベース」ですが、
元々はJavaScriptと同じく「プロトタイプベース」でした

ただ、クラスベースに移行する時に、
下位互換性を残す必要があったため、
「dynamic」としてプロトタイプベースの仕組みを残したのです

で、JavaScriptもActionScriptも、
標準化された「ECMAScript」をベースにしているので、
同じ記法でプロパティにアクセスできたわけです


ということで、今回の結論

 ・「dynamic」クラスのオブジェクトとは、
  値として「参照」も持てる、連想配列オブジェクトのことである

これですっきりしました(`・ω・´) b

[ Web技術::Flex ] comments (0) trackback (0)
昨日に引き続きのバージョンUPです

今回は管理者機能の追加がメインですが、
細かいバグの除去や、入力チェック機構の追加など、ほぼUIの完成形になってます
例によってポータルからどうぞ

ここまでの開発で、Flexの扱いにもだいぶ慣れまして、
短時間で1画面作れるようになりました(`・ω・´) b

ちなみに、今はデザインビューを使うより、タグを手書きで書いてたりします
こっちの方が慣れると早いもので・・・

このあたりがVisualStudioと違うところですかね
あちらは極力UIのコードを隠そうとしますし

他にもFlexには便利な機能があって、
入力値のエラーチェックが簡単にできるんですよね
このあたり、機会があれば書いてみます


さて・・・明日からついにサーバ側の改修か・・・

[ Web技術::Flex ] comments (0) trackback (0)
・・・そういえば、α1の時はここで告知しませんでしたね

というわけで、α2公開です
α1と比べてかなり「本物」っぽくなってます
マスター権限での管理機能も動くようになってます

今回は簡易マニュアルも用意しましたので、
ポータル経由で見にいっていただければと

次のα3では、管理者機能の実装になります
これでUI部分はほぼ完成になりますので、
この次はサーバとの連携になります

今週中にα3にいけるかな・・・?

[ Web技術::Flex ] comments (0) trackback (0)
NEW ENTRIES
RECENT COMMENTS
CATEGORIES
ARCHIVES
LINK
PROFILE
POWERED BY
 Script by ⇒ BLOGN+(ぶろぐん+)
 Skin by ⇒ vivid*face
OTHER
SEARCH
LOGIN
現在のモード: ゲストモード
ID:
PASS:
AdSense

  PAGETOP  BACK>