トップ  > メモ一覧  > カテゴリ「いろいろ」の絞り込み結果 : 3件

3件中 1 〜 3 表示  1 

No.2351 OpenFlashChartを使ってみました

Open Flash Chartを使ってみました


Webサイトでグラフを作成表示するためのライブラリの一つにOpen Flash Chartというものがあります。これはJSON形式のデータをSWFファイルに渡すことによりグラフを生成表示することができます。

まずは早速何かグラフを表示してみましょう。Open Flash Chartはこちらからダウンロードすることができます。

http://www.teethgrinder.co.uk/open-flash-chart-2/

ダウンロードしたファイルを解凍するといろんなファイルが出てきますが最低限必要なのはopen-flash-chart.swfです。このswfを埋め込んでJSON形式のデータをパラメータとして渡します。

chart.html
  1. <div id="chart"></div>
  2. <script type="text/javascript">
  3. //<![CDATA[
  4. swfobject.embedSWF("open-flash-chart.swf", "chart", "640", "480", "9.0.0", "expressInstall.swf", {"data-file":"data.json"});
  5. //]]>
  6. </script>

データとなるJSONは以下のようにしてみました。
data.json
  1. {
  2.   "title":
  3.   {
  4.     "text":"棒グラフ"
  5.   },
  6.   "elements":[
  7.     {
  8.       "type":"bar_filled",
  9.       "colour":"#3373CC",
  10.       "outline-colour":"#3373AC",
  11.       "values":[8,8,1,7,4,8,1,10,7,1,8,5,9,4]
  12.     }
  13.   ],
  14.   "x_axis":
  15.   {
  16.     "labels":
  17.     {
  18.       "labels":["7:00","8:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","0:00"]
  19.     },
  20.     "colour":"#898989",
  21.     "grid-colour":"#EEEEEE"
  22.   },
  23.   "y_axis":
  24.   {
  25.     "colour":"#898989",
  26.     "grid-colour":"#EEEEEE"
  27.   },
  28.   "bg_colour":"#FFFFFF"
  29. }

こんな感じでchart.htmlを表示すると棒グラフが表示されます。

ちなみに、Open Flash Chartはソースコードが公開されています。なので、ActionScript3が分かるのであれば自由にいじくりまわせます。先ほど解凍した中の open-flash-chartディレクトリにソースコードがあります。WindowsユーザであればFlex3 SDKとFlashDeveloperを用いてコンパイルすることができます。で、私もそうですがMacの場合は。。。FlashDeveloperがな いのでFlex3 SDKをインストールしてターミナルでコンパイルしてみましょう。

  1. $ cd open-flash-chart
  2. $ mxmlc main.as

おそらくエラーが出てくると思います。FlashDeveloperのクラスライブラリというかFlashConnectを使用しているらしく、それがないというエラーメッセージです。なので、
http://code.google.com/p/flashdevelop/source/browse/branches/FD3.1/FlashDevelop/Bin/Debug/Library/AS3/classes/org/flashdevelop/utils/?r=257こちらからFlashConnect.asとTraceLevel.asを持ってきて

  1. $ mkdir -p org/flashdevelop/utils

で、ディレクトリを作成しそこに設置してコンパイルします。これで無事swfが生成されていると思います。

そんなことで、JSON形式のデータを渡すだけで簡単に綺麗なグラフを生成することができるOpen Flash Chart、使ってみてはいかがでしょうか。

引用元

更新:2010/04/27 10:18 カテゴリ: Flash  > いろいろ ▲トップ

No.1711 テスト!!

テスト!!
更新:2009/11/06 16:26 カテゴリ: Flash  > いろいろ ▲トップ

No.1704 Flash内で作成した複数画像を同時にアップロードする

Flash内で作成した複数画像を同時にアップロードする


つい最近、「Flashで作成した画像(jpg)をサーバ側にアップロードする」ということが必要になることがありました。
普通に画像1個であれば簡単なのですが、今回は複数同時にアップしたいという状況でした。

連続してのアップロードや、zip圧縮、画像を結合してなど様々な方法を教えていただいたりしたのですが、サーバ側の処理をいかに通常処理、かつ楽するかの部分でいろいろ探したところ、
「HTTPPostBinary」というas3のライブラリで実現することができそうですので、ご紹介したいと思います。
こちらを利用するとAS側のプログラムも特に面倒ということもなさそうです。

それでは、早速試してみましょう。

HTTPPostBinary class connects your flash program to general webservice」から「HTTPPostBinary.as」をダウンロードしてFlexプロジェクト内に配置します。

で、実際に使いかたも、上記ブログ記事のとおり、
  1. var loader:URLLoader = new URLLoader();
  2. var request:URLRequest = new URLRequest("http://www.flickr.com/tools/uploader_go.gne");
  3. var httpdata:HTTPPostBinary = new HTTPPostBinary();
  4. httpdata.addBinary("photo", jpegDat, "image/jpeg", "snap.jpg");
  5. request.contentType = httpdata.contentType;
  6. request.method = httpdata.method;
  7. request.data = httpdata.encodeData();
  8. loader.load(request);

このように簡単に利用できます。

以下、ボタンを押したら2種類のサイズの画面イメージをサーバにPOSTするサンプルです。
今回のサンプルの構成は以下のようになっています。



UploadFlex.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.   <mx:Script>
  4.     <![CDATA[
  5.  
  6.       import mx.graphics.codec.JPEGEncoder;
  7.       import ym.net.HTTPPostBinary;
  8.       
  9.       public function upload():void { 
  10.         
  11.         //1個目の画像
  12.         var bmd:BitmapData = new BitmapData(100, 200, false, 0xFFFFFF);
  13.         bmd.draw(this);
  14.         var encoder1:JPEGEncoder = new JPEGEncoder(100);
  15.         var bytes1:ByteArray = encoder1.encode(bmd);
  16.         
  17.         //2個目の画像
  18.         var bmd2:BitmapData = new BitmapData(50, 50, false, 0xFFFFFF);
  19.         bmd2.draw(this);
  20.         var encoder2:JPEGEncoder = new JPEGEncoder(100);
  21.         var bytes2:ByteArray = encoder2.encode(bmd2);
  22.         
  23.         var loader:URLLoader = new URLLoader();
  24.         var request:URLRequest = new URLRequest("/sample/post.php");
  25.         var httpdata:HTTPPostBinary = new HTTPPostBinary();
  26.         
  27.         //画像を添付
  28.         httpdata.addBinary("img1", bytes1, "image/jpeg", "img1.jpg");
  29.         httpdata.addBinary("img2", bytes2, "image/jpeg", "img2.jpg");
  30.         
  31.         //テキストデータも同時に送信してみる
  32.         httpdata.addString("hoge", "test string");        
  33.         
  34.         request.contentType = httpdata.contentType;
  35.         request.method = httpdata.method;
  36.         request.data = httpdata.encodeData();
  37.         
  38.         //送信
  39.         loader.load(request);
  40.       
  41.       }
  42.       
  43.     ]]>
  44.   </mx:Script>
  45.   <mx:Button click="upload()" label="upload" />
  46. </mx:Application>

手元のFlexBuilderでの作成が手軽だったので、Flexプロジェクトとして作成していますが、
通常のASプロジェクトでもHTTPPostBinary自体の動作には影響なく動くでしょう。

そして、受け取る側のphpコードはおなじみの$_POST, $_FILESで大丈夫です。

post.php
  1. <?php
  2.  
  3. /*
  4. ■UploadFlex.swfから以下のようなデータがPOSTされてくる
  5.  
  6. $_POST = Array
  7. (
  8.     [hoge] => test string
  9. )
  10.  
  11. $_FILES = Array
  12. (
  13.     [img1] => Array
  14.         (
  15.             [name] => img1.jpg
  16.             [type] => image/jpeg
  17.             [tmp_name] => /tmp/phpD7lTa9
  18.             [error] => 0
  19.             [size] => 4873
  20.         )
  21.  
  22.     [img2] => Array
  23.         (
  24.             [name] => img2.jpg
  25.             [type] => image/jpeg
  26.             [tmp_name] => /tmp/php7V23q5
  27.             [error] => 0
  28.             [size] => 2733
  29.         )
  30.  
  31. )
  32.  
  33. */
  34.  
  35. error_log(print_r($_POST, true), 3, '/tmp/hoge.txt');
  36. error_log(print_r($_FILES, true), 3, '/tmp/hoge.txt');
  37.  
  38. //uploadディレクトリにPOSTされたファイルを保存
  39. foreach ($_FILES as $key => $file) {
  40.     if ($file['error'] == UPLOAD_ERR_OK) {
  41.         $tmp_name = $file["tmp_name"];
  42.         $name = $file["name"];
  43.         move_uploaded_file($tmp_name, "./upload/".$name);
  44.     }
  45. }

実際にアップロードされた画像ファイルが以下の2個となります。
  
※ボタンだけを配置したFlashのキャプチャをしているため、見た目はアレですが、、、ちゃんと、指定した2種類のサイズで切り抜いて作成されています。


まだ、ちゃんとした検証はしてないですが、最新のFlash10のバージョンでは、手元のIE6, IE7, IE8, Firefox3.5では複数画像もPOSTデータも正常にサーバ側で受け取ることができました。

引用元

更新:2009/11/05 08:33 カテゴリ: Flash  > いろいろ ▲トップ
3件中 1 〜 3 表示  1 

FuelPHP

Mac

フロントエンド開発

web開発

プロマネ

マネタイズ

プレゼン

webサービス運用

webサービス

Linux

サーバ管理

MySQL

ソース・開発

svn・git

PHP

HTML・CSS

JavaScript

ツール, ライブラリ

ビジネス

テンプレート

負荷・チューニング

Windows

メール

メール・手紙文例

CodeIgniter

オブジェクト指向

UI・フロントエンド

cloud

マークアップ・テキスト

Flash

デザイン

DBその他

Ruby

PostgreSQL

ユーティリティ・ソフト

Firefox

ハードウェア

Google

symfony

OpenPNE全般

OpenPNE2

Hack(賢コツ)

OpenPNE3

リンク

個人開発

その他

未確認

KVS

ubuntu

Android

負荷試験

オープンソース

社会

便利ツール

マネー

Twig

食品宅配

WEB設計

オーディオ

一般常識

アプリ開発

サイトマップ

うずら技術ブログ

たませんSNS

rss2.0