Home > study > tips

tips Archive

jQueryでやる!ブログで使えそうな楽しいナビメニュー45ホームページを作る人のネタ帳

  • 2010-02-12 (金)
  • tips | web
  • Noriyuki Sakurai

[Progression] catchError:読み込み時のエラーを処理する

前回のエントリーの続きみたいなもんですが、
xmlなどの外部ファイルを読み込んだ時に、該当ファイルがなかったり、ネットワークエラーなどで読み込めなかった場合、処理が途中で中断してしまいます。
それを適切に処理するために、エラーが起きた場合の処理を入れる必要があるのですが、
いままで(ver.3)は、.listenコマンドで入れることができたのですが、
ver.4からは.listenコマンドが廃止になり、方法が変わりました。

前回のエントリーにも紹介したKAYAC様の記事にその答えが書いてあるので、
それを参考に、LoadURLを使った時の書き方をメモしておきます。

addCommand(
	new LoadURL( new URLRequest( "scenes.xml" ) ,{
	catchError:function( target:Object, error:Error ):void{
		trace( "【エラーをキャッチ】" );
		//読み込み処理を中断させる。(スキップ?)
		target.interrupt();
	}
	}),
	function():void {
		var xml:XML = new XML( this.latestData );
		//取得したxmlからシーンを作成
		addSceneFromXML( xml );
	}
);

LoadURLのinitObjectとして、catchErrorを設定するってわけですね。
これによって読み込みエラーが起きても、全体の処理は続くことになります。
interrupt()メソッドは、「その場で中断」ということですが、読み込み処理自体の中断ということになるようです。

ちなみに、コマンドフローの段階的な状況での制御は
onStart(開始時)、onInterrupt(中断時)、onError(エラー時)、onComplete(終了時)で設定できる。
それを組み合わせるとこんな感じ。

addCommand(
	new LoadURL( new URLRequest( "scenes.xml" ) ,{
	catchError:function( target:Object, error:Error ):void{
		trace( "【エラーをキャッチ】" );
		//読み込み処理を中断させる。(スキップ?)
		target.interrupt();
	},
	onStart:function():void{
		trace( "XMLの読み込み【開始】" );
	},
	onError:function():void{
		trace( "【【【 エラー 】】】" );
	},
	onComplete:function():void{
		trace( "XMLの読み込み【完了】" );
	},
	onInterrupt:function():void{
		trace( "XMLの読み込み【中断】" );
	}
	}),
	function():void {
		var xml:XML = new XML( this.latestData );
		//取得したxmlからシーンを作成
		addSceneFromXML( xml );
	}

上記の場合、onComplete
ver.3の頃に比べ、だいぶすっきり表記できます。
catchErrorと、onErrorの違いがわからんのですが、
プログレスバーや、ローディングアニメーションもこれで制御できそうです。

[Progression] dataHolderからデータを取り出す。

Progressionで、XMLデータからscene構造を作成した場合(いや、そうでなくても?)、sceneInfo.dataで各sceneの情報を得られたのですが、それがProgression ver.4からは変更になりました。

ver.4からは、sceneInfo.dataではなく、DataHolderクラスが追加され、dataHolder.data でアクセスするようになったそうです。

実は、sceneInfo.dataのことも、ついこの前知ったばかりなのですが、こりゃ便利と思ってver.4で使おうとしたらですね、思いっきりハマりまして、dataHolderを使うことまではわかっても、具体的な使い方がわからずで、結局しこしこと手当たり次第に試すという力技でその方法を発見しました。
せっかくなのでメモっときます。

scene構造を定義したXMLファイルの例

	
		
		プロフィール内容
	

作成したProfileSceneのソース

	protected override function atSceneInit():void {
		addCommand(
			function():void{
				trace( dataHolder);
				trace( dataHolder.target );
				trace( dataHolder.target.name );    //scene "name" 属性の値
				trace( dataHolder.target.title );   //scene "title" 属性の値
				trace( dataHolder.data[0].@href );  //ひとつめのデータの"href"属性
				trace( dataHolder.data[1].text() ); //ふたつめのデータの要素
			}
		);
	}

上記を実行するとこのように出力されます

[object WebDataHolder]
[ProfileScene sceneId=/index/profile]
profile
PROFILE | MYSITE
profile.png
プロフィール内容

scene “cls” 属性の値だけどうしてもアクセスできないんですが、
全然わからないです。わかる方教えてください。
まぁ、表現する上では必要ないのでいいんですが、なんとなく悔しい。
というか根本的な部分を理解してないようなので、
どなたかご教授いただければ幸いです。

Progression4での変更点でハマりやすいポイントが、下記のページでまとめられています。
[小ネタ] Progression 4 でハマりやすいポイント
他にもいくつかポイントがあるので、これは要チェックです。

わたくしは、1日半これでハマりました。。。orz

追記:後日、かの「KAYAC」様のブログにて、ver.4における変更点をわかりやすくまとめた記事を発見いたしました。
Progression4の新コマンドあれこれ
これはわかりやすい!
さすがKAYAC様です。

携帯動画変換ちゃん

  • 2009-08-26 (水)
  • tips
  • Noriyuki Sakurai

最近、動画を扱うことが少しずつ増えてきました。
動画を使ったサイトの提案とかもありますが、
PSPに動画入れて遊んでみたりとか、
そんな感じで、ますます手軽なメディアになりつつあります。

そんな折りに、ある方から、
「動画を携帯用に変換できない?」という相談を受けました。
携帯メディアはあまり詳しくないので、
これを機会に色々調べてみました。

Mac用の市販ソフトも色々あるようですが、
フリーで便利そうなソフトを見つけたのでメモっときます。
ちなみに、市販ソフトでは、このへんが良さそうかなと思います。
他にもオススメあったら教えてください。

「携帯動画変換ちゃん」

これは、Win用に開発された “携帯動画変換君” をMac版にアレンジ?したものです。
インストールはやや複雑ですが、これ一本で色々変換できるので、
なかなか便利そうです。iTuneやiPod、PSP用にも変換できる!
変換は簡単なんだけど、携帯に動画ファイルを入れるのに苦労しました(笑)

それと、ちょっと工夫すればFLVからの変換もできそうなのですが、
その方法は、よくわからんです。

まぁ、そんな時は、こんなサイトで、
MP4に変換すれば、一応いけるかな・・と。
ちょっと手間ですが。

ソースコードをハイライト表示 [SyntaxHighlighter]

  • 2009-06-22 (月)
  • as3 | tips
  • Noriyuki Sakurai

何気に、as3やprogression関係で検索してご覧いただいている方が多いので、
ちゃんと技術系ブログ(ってほどじゃないけど)らしく、ソースコードをハイライト表示して、見やすいデザインにしてみました。
色々あるようですが、SyntaxHighlighterというのが良さそうなので、それを導入。

↓こんな感じ。

function test() : String
{
	return 10;
}

手順

  • SyntaxHighlighter」をダウンロード。
    この記事を書いている時点ではversion 2.0.320。
  • ダウンロードしたもの解凍し、”scripts”フォルダ”styles”フォルダをアップロード。
  • <head></head>内に、以下のソースを記述。
    
    
    
    
    
    
    

    サンプルHTMLにはなぜか”shBrushAS3.js”のリンクが入っていないので注意。
    リンクパスはもちろん各ブログに対応したものに変更する。

  • 適用したい箇所に<pre class=”brush: as3;”></pre>とマークアップ。

デザインが今一つな気がしますが、オプションで変えられるのかな?
なんだかよくわかっていませんが、とりあえずソースコードは見やすくなった。。。?
今回はAS3とxml,html,xhtmlに対応するようにしました。
その他のコードに反映したい場合は、該当するjsを読み込む。
こちらが、対応しているコード一覧

[AS3] LoaderからBitmapへ

  • 2009-06-12 (金)
  • as3 | tips
  • Noriyuki Sakurai

Loaderで読み込んだ画像を、Bitmapへ変換する方法と、ビットマップとして書き出す方法。
Bitmapにすると、スムーズに拡大縮小ができるし、フィルターかけた時など処理が軽くなる。

変換する方法

var bm:Bitmap = Bitmap(loader.content);

Loader.contentでBitmapを呼び出す。
※new Bitmapにするとうまくいかない?

複製して書き出す方法

var bmData:BitmapData = new BitmapData(loader.width, loader.height);
bmData.draw(loader.content);
var bm:Bitmap=new Bitmap(bmData);

一度読み込んだ画像を使い回す時などは複製した方が良さそう。
filterをかけると、両方にかかってしまう。

また、progressionを使った場合、initObjectにloaderを渡して、
連携をとることも可能。

initObjectで渡す

var image = new Image({loader:imgLoader});
var bmData:BitmapData = new BitmapData(initObject.imgLoader.width, initObject.imgLoader.height);
bmData.draw(initObject.imgLoader.content);
var bm:Bitmap=new Bitmap(bmData);

ま、渡す時にloader.contentを渡してもうまくいく。

※2009.11.18追記※
上記の var image = new Image({loader:imgLoader}); は、間違ってるかも。
var image = new Image({imgLoader:loader:}); これが正解かな。逆でした。

WordPress をインストールしたら最初にしておくこと – わーどぷれすっ!

  • 2009-01-14 (水)
  • tips | web
  • Noriyuki Sakurai

魅力的なウェブサイトを作成するために知っておくと便利な9つのスクリプト – GIGAZINE

  • 2008-11-12 (水)
  • tips | web
  • Noriyuki Sakurai

ホーム > study > tips

Search
Feeds
Meta

Return to page top