study Archive

弊社が制作したサイト「GRAND | 五月女則子 | スタイリスト・シズルコーディネータ」が、”Progression“のショーケースに掲載されました。

→ http://progression.jp/ja/showcase/#grand

ありがとうございました。

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

そろそろjQueryもやらないと。。。

Progression4 beta1.3の驚異的進化 – Is It So Easy?.

またまた、色々アップグレード。
どんどん進化していきます。
追いつくのが大変。。

Progression4でHTMLのデータを読み込む – Is It So Easy?.

これってスゴイことなんじゃないかと思う。
いや、たぶんものすごくスゴイこと（日本語変

んで、今作ってる某サイトで、試しに導入してみてます。
なんとか、該当するHTMLをSWFで再現するところまでできた。
タイトルとか本文の見栄えはまぁ、CSSでのデザイン制御みたいな感覚だけど、
<table>とか<li><dl>なんかがくると、
もう、ブラウザ自体をプログラミングしてるみたいな感じで大変すぎ。
要素が増えた場合など、ある程度はフレキシブルに対応できるようにはしたけど、
どんなタグがきても・・・というのは、そりゃもうエライことです。
こういうの汎用的に使えるソースがあったらみんなうれしいんじゃないかなぁ。
というか、わたくしがうれしいですｗ

前回のエントリーの続きみたいなもんですが、
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で、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様です。

AS2の頃は、_root.hoge();とか、_parent.hoge();といった具合に、
割と簡単な記述で参照できたのですが、AS3からはだいぶ変わってた。
これを知らないばかりに、単純なところでエライ苦労をしたりする。

// ルートのタイムラインのフレームアクション
function myTest():void {
trace(”test”);
}

// myTestを参照する例1
MovieClip(root).myTest();

// myTestを参照する例2
Object(root).myTest();

// myTestを参照する例3
var myRootObj:MovieClip = root as MovieClip;
myRootObj.myTest();

// myTestを参照する例4
var myRootObj:Object = root as Object;
myRootObj.myTest();

// myTestを参照する例5
var myRootObj:MovieClip = MovieClip(root);
myRootObj.myTest();

// あるいは
var myRootObj:Object = MovieClip(root);
myRootObj.myTest();

// myTestを参照する例6
var myRootObj:Object = Object(root);
myRootObj.myTest();

/* ************************************
※AS2.0の_rootは、AS3.0でrootになりました。
　rootは、DisplayObjectクラスのプロパティです。

※parentも同様です。
var myRootObj:Object = Object(this.parent);
myRootObj.myTest();
あるいは、
var myRootObj:Object = this.parent;
myRootObj.myTest();
孫（子の子）からのときは
var myRootObj:Object = this.parent.parent;
myRootObj.myTest();
※thisはスクリプトが書かれているインスタンスを指します。
************************************ */

これで、もう、つまずくことはありません！（うそ

引用元はこちらです。
rootやparentの参照（as3） « SPHERE BLOG.

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

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

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

「携帯動画変換ちゃん」

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

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

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

ポートフォリオ部分のテキストを、1文字ずつランダム表示するようにしました。
参考サイト：AS3版ランダムテキスト

上記サイトのソースを参考にさせていただき、
尚且つ、TextFormatの適用と、
改行があった場合は分割して、行の頭から表示する仕組みを追加しました。

何気に、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を読み込む。
こちらが、対応しているコード一覧。