今日気になったページ
壁画アニメーション
リアル壁画アニメーション。すごい時間かかってるんじゃ。
Adobe AIR in Action: Monitoring Sockets
AIRでサーバーが稼働しているかチェック。ポートも指定できるよ。
Box2d で降りしきる箱と戯れる箱
Box2Dのサンプル。
クライアントサイドのキャッシュの禁止
キャッシュあるとデバッグしにくい時もあるよね
教科書.net
教科書への熱い思いをもう一度。
"The Internet is the Wii"(インターネットこそWiiだ) - Wiimote-over-HTTP
HTTPからWiiリモコンを使う。
Google Maps上でゴルフゲームができるAndroid向けアプリ
Androidの和製アプリ
SVGExport
描画したものをSVGへと変換
簡単な年齢・月齢の求め方
日付から年齢を作成
HTMLからFlexに値を渡す方法。
＃下に「さらにPHP(Web)へのリクエストをそのままFlexに渡す方法」を追記してます。
サイトをPHPで作成していると、同種類のページが１０も２０もできて、スライドショーもページごとに必要になってくるケースがあります。
グルメＧｙａｏがそんな感じだと思います。
毎回、Flashをページごとにパブリッシュするのは時間がかかるので、できれば動的なFlashが望ましいと思います。
こんな感じ（htmlからFlexへ値を渡すことができます。
http://moeten.info/flex/20080708_paramTest/bin-release/main.html
値はURLのクエリのような形式で渡します。
"FlashVars" , "sid=13&m=moe",
HTMLのソース
Flexプロジェクトのhtml-templateの中にあるindex.tmplate.htmlを編集します。
htmlファイルにいくつかパラメーターを設定できそうなところがあるので、そこにパラメーターを追加してあげます。
AC_FL_RunContent(
"src", "${swf}",
"width", "${width}",
"height", "${height}",
"align", "middle",
"id", "${application}",
"quality", "high",
"bgcolor", "${bgcolor}",
"name", "${application}",
→これを追加 "FlashVars" , "sid=13&m=moe",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
noscript部分
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="${application}" width="${width}" height="${height}" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="${swf}.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="${bgcolor}" /> →これを追加 <param name="FlashVars" value="sid=13&m=moe" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="${swf}.swf" quality="high" bgcolor="${bgcolor}" width="${width}" height="${height}" name="${application}" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> </embed> </object>
Flexのソース
ActionScriptの場合はLoaderInfo.parameters
Flexの場合はthis.parametersでFlashVarsの値が取得できます。
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ //簡単デバッグクラス import com.flexer.Debug; //初期化関数 private function init():void{ myLog.text = Debug.dump(this.parameters ); } ]]> </mx:Script> <mx:TextArea id="myLog" x="10" y="10" width="388" height="432"/> </mx:Application>
parametersにObject形式でFlashVarsの値が入ります。
デバッグにはflexerのデバッグクラスが便利なので今回はそちらを使っています。
ちなみに、デバッグクラスを使わなくても普通に this.parameters["sid"] や this.parameters.sid でオブジェクトの中身を表示することもできます。
さらにPHP(Web)へのリクエストをそのままFlexに渡す方法。
PHPへリクエストされた情報は $_SERVER の "QUERY_STRING" に格納されるのでそれをFlashVarsに割り当てます。
サンプルはこちら
http://moeten.info/flex/20080708_paramTest/bin-release/urltest.php?m=haruhi&sid=10
urltest.phpの後ろの文字は自由に変更できます。
PHPなソースはこちら
単純にFlashVarsの部分に $_SERVER["QUERY_STRING"] を入れています。
<?php $query = $_SERVER["QUERY_STRING"]; echo <<<EOD <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="history/history.css" /> <title></title> <script src="AC_OETags.js" language="javascript"></script> <script src="history/history.js" language="javascript"></script> <style> body { margin: 0px; overflow:hidden } </style> <script language="JavaScript" type="text/javascript"> <!-- var requiredMajorVersion = 9; var requiredMinorVersion = 0; var requiredRevision = 28; --> </script> </head> <body scroll="no"> <script language="JavaScript" type="text/javascript"> <!-- var hasProductInstall = DetectFlashVer(6, 0, 65); var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision); if ( hasProductInstall && !hasRequestedVersion ) { var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn"; var MMredirectURL = window.location; document.title = document.title.slice(0, 47) + " - Flash Player Installation"; var MMdoctitle = document.title; AC_FL_RunContent( "src", "playerProductInstall", "FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"", "width", "100%", "height", "100%", "align", "middle", "id", "main", "quality", "high", "bgcolor", "#869ca7", "name", "main", "FlashVars" , "{$query}", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer" ); } else if (hasRequestedVersion) { // if we've detected an acceptable version // embed the Flash Content SWF when all tests are passed AC_FL_RunContent( "src", "main", "width", "100%", "height", "100%", "align", "middle", "id", "main", "quality", "high", "bgcolor", "#869ca7", "name", "main", "FlashVars" , "{$query}", "allowScriptAccess","sameDomain", "type", "application/x-shockwave-flash", "pluginspage", "http://www.adobe.com/go/getflashplayer" ); } else { // flash is too old or we can't detect the plugin var alternateContent = 'Alternate HTML content should be placed here. ' + 'This content requires the Adobe Flash Player. ' + '<a href=http://www.adobe.com/go/getflash/>Get Flash</a>'; document.write(alternateContent); // insert non-flash content } // --> </script> <noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id="main" width="100%" height="100%" codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab"> <param name="movie" value="main.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#869ca7" /> <param name="FlashVars" value="{$query}" /> <param name="allowScriptAccess" value="sameDomain" /> <embed src="main.swf" quality="high" bgcolor="#869ca7" width="100%" height="100%" name="main" align="middle" play="true" loop="false" quality="high" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"> </embed> </object> </noscript> </body> </html> EOD; ?>
配列にフィルターをかける
配列にフィルターをかけて、一定の値の範囲内のみをタイルリストにて表示します。
http://moeten.info/flex/20080708_rakutenShop2/bin-release/main.html
以前作成したFlexで楽天検索に値段機能をつけてみました。
ポイントとなる部分
var dp:ArrayCollection; dp.filterFunction = sortRanges;
これで配列 dp に対して sortRanges をフィルターすることができます。
sortRanges はこんな感じ
private function sortRanges( item:Object ):Boolean{ var maxPrice:int = int(hs.value); return item.price <= hs.value; }
#スライドバーの値より低ければ true
あと、ちょっとお遊びとして、左のテーブルリストのアイテムをドラッグして、買い物かごに入れるとちょっとしたエフェクトが出るようにしてみました。
<mx:Sequence id="myItemsChange"> <mx:Move duration="750" easingFunction="{Back.easeInOut}" perElementOffset="20"/> </mx:Sequence>
また、余談ですが、エフェクトにも実行したいイベントを指定することができます。
filter="addItem"
こうするとaddItemのときのみにエフェクトが実行されるようになります。
データグリッドでの合計値の表示
データグリッドで合計値を表示してみました。
http://moeten.info/flex/20080708_rakutenShop3/bin-release/main.html
こつとしてはデータグリッドの更新を検出したら合計値を再計算します。
<mx:DataGrid updateComplete="calSum()">
合計値の計算
datagrid の分だけ for 文を回してあげればＯＫ
private function calSum():void{ if( dg2.dataProvider ){ var dp2:ArrayCollection = dg2.dataProvider as ArrayCollection; var sum:int = 0; var len:int = dp2.length; for( var i:int = 0 ; i < len ; i ++ ){ sum += dp2[i].price; } mySum.text = "" + sum + "円"; } }
おまけでアドバンストデータグリッドでもやってみました。
サマリーを使えばＯＫです。サマリーは oparation にて合計値や平均値を出すことが可能です。
AdvancedDataGrid なソースはこちら
<mx:Script> <![CDATA[ private function formatSummary(data:Object, col:AdvancedDataGridColumn):Object{ if (data.hasOwnProperty("summary")){ return { color:0xFF0000, fontWeight:"bold", fontSize:12 }; } return {}; } //SUM、MIN、MAX、AVG、COUNT private function flatSummaryObject():Object{ return { title:"合計", summary:true }; } private function flatSummaryObject2():Object{ return { title:"平均", summary:true }; } private function flatSummaryObject3():Object{ return { title:"最大", summary:true }; } private function flatSummaryObject4():Object{ return { title:"最小", summary:true }; } private function flatSummaryObject5():Object{ return { title:"個数", summary:true }; } ]]> </mx:Script> <mx:AdvancedDataGrid id="adg" creationComplete="groupedData.refresh();adg.dataProvider.showRoot=false" groupItemRenderer="mx.controls.advancedDataGridClasses.AdvancedDataGridItemRenderer" dropEnabled="true" x="462" y="571" width="369" height="200" styleFunction="formatSummary"> <mx:dataProvider> <mx:GroupingCollection id="groupedData" source="{dg2.dataProvider}" > <mx:Grouping> <mx:GroupingField > <mx:summaries> <mx:SummaryRow summaryPlacement="last" summaryObjectFunction="flatSummaryObject"> <mx:fields> <mx:SummaryField dataField="price" operation="SUM" /> </mx:fields> </mx:SummaryRow> <mx:SummaryRow summaryPlacement="last" summaryObjectFunction="flatSummaryObject2"> <mx:fields> <mx:SummaryField dataField="price" operation="AVG"/> </mx:fields> </mx:SummaryRow> <mx:SummaryRow summaryPlacement="last" summaryObjectFunction="flatSummaryObject3"> <mx:fields> <mx:SummaryField dataField="price" operation="MAX"/> </mx:fields> </mx:SummaryRow> <mx:SummaryRow summaryPlacement="last" summaryObjectFunction="flatSummaryObject4"> <mx:fields> <mx:SummaryField dataField="price" operation="MIN"/> </mx:fields> </mx:SummaryRow> <mx:SummaryRow summaryPlacement="last" summaryObjectFunction="flatSummaryObject5"> <mx:fields> <mx:SummaryField dataField="price" operation="COUNT"/> </mx:fields> </mx:SummaryRow> </mx:summaries> </mx:GroupingField> </mx:Grouping> </mx:GroupingCollection> </mx:dataProvider> <mx:groupedColumns> <mx:AdvancedDataGridColumn headerText = "title" dataField="title"/> <mx:AdvancedDataGridColumn headerText = "price" dataField="price" width="100" /> </mx:groupedColumns> </mx:AdvancedDataGrid> <mx:Button x="663" click="{groupedData.refresh();}" y="779" label="データグリッド更新（合計表示）"/>
