2008-06-29

AIRのSQLiteで画像を格納したり表示する方法

AIR SQLite ActionScript3.0

SQLiteでも画像を格納したり取り出して表示とかしてみたい。
ってことでやってみました。

動作ムービーはこちら

結局のところ画像データをテキストでデータベースへ保存するしかないっぽくてBase64ってメールでも使われているものを使用します。
ロードデータをBase64へエンコード

var enc:Base64Encoder = new Base64Encoder();
enc.encodeBytes(ByteArray(URLLoader(e.target).data));

Base64なテキストデータをデコード

var dec:Base64Decoder = new Base64Decoder();
dec.decode(myData[0].image_txt);
ldr.loadBytes(ByteArray(dec.flush()));

＃将来的にPNGdecodeやJPGdecodeがでてくれるといいなぁ。
＃しかもBase64形式をサポートして。
ソースコードはこちら

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" width="817" height="502" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.utils.Base64Decoder;
import mx.utils.Base64Encoder;
private var conn:SQLConnection;
private var stmt:SQLStatement;
//初期化関数
private function init():void{
    //データベースの設定
    setDB();
    //データベースから既存データの表示
    getData();
}
/*******************************
    ＤＢ初期設定
********************************/
//データベースコネクト
private function setDB():void{
    //データベースファイルを作成
    var dbfile:File = File.desktopDirectory;
    dbfile = dbfile.resolvePath("sqliteImage.db");
    conn = new SQLConnection();
    conn.open(dbfile);
    //DBテーブル初期作成
    createDB();
}
//データベース作成
private function createDB():void{
    //データベースを作成
    stmt = new SQLStatement();
    stmt.sqlConnection = conn;
    stmt.text = " CREATE TABLE IF NOT EXISTS sqliteImage ( " +
            " id        INTEGER PRIMARY KEY , " +
            " image_txt TEXT , " +
            " print     INTEGER ) ; ";
    stmt.addEventListener(SQLEvent.RESULT , function():void{});
    stmt.execute();
}
/*******************************
    本データ表示・追加・削除
********************************/
//データ表示
private function getData():void{
    //データベースから表示
    stmt = new SQLStatement();
    stmt.sqlConnection = conn;
    stmt.text =    " SELECT * FROM sqliteImage ORDER BY id DESC ";
    //SQL完了イベント
    stmt.addEventListener(SQLEvent.RESULT , function():void{
        //結果セットをオブジェクトに入れる
        var myData:Object = new Object();
        myData = stmt.getResult().data;
        if( myData != null){
            //データをロードしてBase64へデコード
            var ldr:Loader = new Loader();
            var dec:Base64Decoder = new Base64Decoder();
            dec.decode(myData[0].image_txt);
               ldr.loadBytes(ByteArray(dec.flush()));
               //ステージにaddChild
               myImageOut.addChild(ldr);
               myLog3.text = myData[0].image_txt;
               dg.dataProvider = myData;
        }
    });
    try{
        stmt.execute();
    }catch(e:SQLError){
        myLog2.text = "error1";
    }
}
//データーの追加
private function addData():void{
    //バイナリデータとしてロード
    var urlldr:URLLoader = new URLLoader();
    urlldr.dataFormat = URLLoaderDataFormat.BINARY;
    //ロード完了イベント
    urlldr.addEventListener(Event.COMPLETE, function(e:Event):void{
        //ロードデータをBase64へエンコード
        var enc:Base64Encoder = new Base64Encoder();
        enc.encodeBytes(ByteArray(URLLoader(e.target).data));
        //データベースへ挿入
        stmt = new SQLStatement();
        stmt.sqlConnection = conn;
        stmt.text = " INSERT INTO sqliteImage( image_txt )VALUES( '" + enc.flush() + "' )";
        myLog.text += stmt.text;
        stmt.addEventListener(SQLEvent.RESULT , function():void{
            getData();
        } );
        try{
            stmt.execute();
        }catch(e:SQLError){
            myLog2.text = "error2";
        }
    });
    //ロード開始
    urlldr.load(new URLRequest("19.jpg"));
}
]]>
</mx:Script>
    <mx:Button x="132" y="51" label="データベースに画像を追加" click="addData()" height="59"/>
    <mx:Image x="10" y="51" width="105" height="121" id="myImage" source="19.jpg"/>
    <mx:Image x="10" y="206" width="105" height="121" id="myImageOut"/>
    <mx:TextArea x="294" y="51" width="248" height="203" id="myLog"/>
    <mx:TextArea x="294" y="288" width="248" height="53" id="myLog2"/>
    <mx:TextArea x="550" y="51" width="255" height="203" id="myLog3"/>
    <mx:Label x="294" y="25" text="INSERT"/>
    <mx:Label x="550" y="25" text="SELECT"/>
    <mx:Label x="294" y="262" text="ERROR"/>
    <mx:Label x="10" y="25" text="入力画像"/>
    <mx:Label x="10" y="180" text="出力画像"/>
    <mx:DataGrid x="550" y="262" width="255" height="202" id="dg" rowHeight="30">
        <mx:columns>
            <mx:DataGridColumn headerText="列 1" dataField="id"/>
            <mx:DataGridColumn headerText="列 2" dataField="image_txt"/>
            <mx:DataGridColumn headerText="列 3" dataField="print"/>
        </mx:columns>
    </mx:DataGrid>
</mx:WindowedApplication>

2008-06-29

今日気になったページ

メモ

7月20日(日) 海の日に、ごはんとFlash 2杯目開催決定！
プログラマーも遊ばNight!そろそろ募集開始！
BlazeDSとAMFでWebとデスクトップのアプリケーションを構築する
 BlazeDSの概念とかAMFの便利さとか。
データベース(MySQL)と接続する
 Red5でJavaからMySQLに接続。実用的
AIR サンプル英和辞書サイト検索
ちょっと気になった単語をサクッと検索。自分も作ってみたい。

2008-06-29

とりあえずダウンロードして入れておくと便利なライブラリ

Library Flex

エクスプローラ系

ライブラリ名	簡易説明	デモ	ソース
Component Explorer	コンポーネントリスト	○
Style Explorer	スタイルを簡単に設定	○	○
Filter Explorer	フィルターを簡単に設定		○	○
Primitive Explorer	プリミティブ（星とか）を簡単に設定	○	○
ChartSampler	チャートサンプラー

便利系

ライブラリ名	簡易説明	詳細	デモ	ソース
flexlib	Base64Imageとか	○	○	○
as3corelib	Json形式が簡単に扱えたり	○		○
var_dump	XMLやObjectのデバッグが簡単に	○	○
as3syndicationlib	RSSやAtomが簡単に読める
as3youtubelib	YouTubeを使うならコレ
as3flickrlib	Flickrを使うならコレ
as3httpclient	Httpなクライアント。ほんと？
flex-object-handles	コンポーネントのリサイズや回転。	○
SuperPanelPlus	ドラッグやりサイズができるパネル
as3xls	エクセルの読み込みとかできるみたい。
SWFAddress	URLアドレスやタイトルを動的に変更
tweener	値をぐいーんと変化させるのに便利。バネっぽいのとかも
WiiFlash.org	FlashでWiiリモコンを使う。
IFrame HTML component.	FlexでIFrame（HTML）を使うならコレ
Flex TimeEntry Component	時間を簡単に設定	○
spellcheck	スペルチェックをしてくれるコンポーネント
Korax ColorPicker Control	拡張されたカラーピッカー
Flex Video Player	再生・停止・早送りなどの機能
Mouse Gesture Recognition	手書き文字認識とか
queueloader-as3	キュー（順番）ダウンローダー	○

グラフィック系

ライブラリ名	簡易説明	詳細	デモ
Reflection Manager	鏡面反射	○
Live “reflection” component	鏡面反射	○
Free Visual Reflection Component for Flex 2	鏡面反射	○
PageFlip class	紙をめくる感じでヒラヒラ
FlexBook	本のコンポーネント
AlivePDF	AIRでPDF作成
apdf	PDF作成？
QRコード	ＱＲコードがタグでも簡単作成できます！
BarCode Generator Demo	よくつかわれているバーコードを作成
PaperVision3D(2.0)	３Ｄ表示
Blender AS3Exporter	Blenderから３ＤデータをFlashな３Ｄ（Away3D、PV3D、Sandy）に書き出し	○
Google Map for Flash	地図を作るならとりあえずコレ
UMap (AS 3.0)	OpenStreetMap と Microsoft Virtual Earth に対応した地図
ImageProcessing Library	画像処理ライブラリ	○
Box2D	物理演算。物が落ちるとかぶつかるとかができる
Variable Radius Pie Chart.	パイチャートの拡大縮小	○
A Flex component for graph visualization	バネなグラフ	○
the flare visualization toolkit			デモ
Rating Component	簡単にお気に入り度をつけることができる	○
RepeatingImage	画像をリピート描画
TileCanvas	キャンバスをタイル状に配置
Fisheye Component v0.3	OSXのドッグみたいな動作もＯＫ	○
flexmdi	ウィンドウ作成とかきれいに整列	○
FX SlideShow	簡単なスライドショー
Flex 2 RolloverImage component	マウスオーバーで簡単に画像を変更	○
Flex Thumbnail Browser Component	限られた場所で高速スライドショー	○
Animated DragTile Component	アイテムをドラッグドロップできるよ
RandomWalk component	PSPのクロスバーみたいなナビゲータ	○
The Gauge	時計とかちょっとした値の設定とかに便利そう
Free Audio Visualization Component for Flex 2	音声グラフのコンポーネント	○