flabaka

3月6日（土）に開催された『福岡てら子4』に参加してきました。

そこで、COREXについてお話させて頂いたんですが、かなりグダグダな説明になってしまったので、まとめてみました。

Q1.COREXって何？

JSFLをクラス化出来るようにしたものです。

新規ドキュメントを開いて、新規asレイヤーを作って、stop();を記述したいって場合…

//新規ドキュメントを開く
fl.createDocument();

var path = fl.getDocumentDOM().getTimeline();

//新たにasというレイヤーを作成する
path.addNewLayer("as","normal",true);

//一番上のレイヤーを選択しておく
path.currentLayer = 0;

//1フレーム目に、スクリプトを記述
path.layers[0].frames[0].actionScript = "stop();";

こんな感じのコードを書いて、ファイル名を●●.jsflみたいに保存→実行するかと思います。

ですがCOREXを使うと、以下のようにAS3のクラスファイルの書式と同じような感じで、JSFLのコードを書くことが出来ます。

package{

	public class Sample1 {

		public function Sample1() {

			//新規ドキュメントを開く
			fl.createDocument();

			//新たにasというレイヤーを作成する
			fl.getDocumentDOM().getTimeline().addNewLayer("as","normal",true);

			//一番上のレイヤーを選択しておく
			fl.getDocumentDOM().getTimeline().currentLayer = 0;

			//1フレーム目に、スクリプトを記述
			fl.getDocumentDOM().getTimeline().layers[0].frames[0]
			.actionScript = "stop();";

		}
	}
}

（試しにCOREXを使わずに）このスクリプトを、●●.jsflという拡張子で保存→実行してみると…

シンタックスエラーになってしまいます。

ですが、COREXを使うと、このスクリプトをJSFLとして実行してくれます。

Q2.COREXって、どこで使われているの？

Progressionのプロジェクトの書き出し、プロジェクトのアップデートなどに使われています。

Q3.COREXを使いたい場合、どうすればいいの？

COREXを使う場合、いくつかファイルが必要になります。

1. COREX.jsflファイル
2. 起動用のjsflファイル
3. クラス化したjsflcファイル
4. jslfccファイル

それぞれ詳しく見ていきます。

COREX.jsflファイル

このファイルは、Progressionをインストールすると、自動的に作成されるファイルです。

どこにあるかは、以下のコードを実行すると、分かります。

fl.trace(fl.configURI);

起動用のjsflファイル

これは自分で作らなければいけません。

作り方は、blog.progression.jp内のF-site資料の中のファイルを参照すると良いでしょう！

COREX.jsflファイル内にも起動コードの作り方が書かれているんですが、こちらは旧バージョンのコードになっています。

ですので、起動ファイルは、F-siteの資料にあるコードを使いましょう！

さて、起動コードのString.fromCharCode以下に、謎の数字が出てきます。

何が書かれているかは、以下のソースを記述すれば、理解出来ます。

var str:String = String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,105,110,
115,116,97,108,108,101,100,46);
trace(str);

これを実行してみると、String.fromCharCode以下の数字が、COREX is not installed.だということが分かります。

つまり起動コード内を要約すると、「fl.configURIで表示されるパスにCOREX.jsflがある場合は、JSFLを実行する。COREX.jsflが存在しない場合は、COREX is not installed.を表示して、処理を中断する」ということになります。

クラス化したjsflcファイル

これも自分で作らないといけません。

先の新規asレイヤーを作って～のサンプルコードを、Sample1.jsflcという拡張子で保存します。

jslfccファイル

これはCOREXを実行すると、自動的に作成されるキャッシュファイルみたいなものです。（あまり気にしなくて良いかと…）

jsflccファイルは、fl.configURI + COREXフォルダ内に作成されます。

jsflcファイルのタイムスタンプが異なる場合に、再コンパイルが行われるみたいです。

ここまでを軽くまとめると…

Progressionを既にインストールしている方は、起動用のJSFLファイルとクラス化したJSFLCファイルを作成すれば、COREXを使えるよ！　ということになります。

先のサンプルでいうと、起動用のJSFLファイルはこんな感じになります。

$={u:fl.configURI+"COREX.jsfl",c:false,$:function(){alert(String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,
105,110,115,116,97,108,108,101,100,46))}};(eval(FLfile.read($.u))||$).$
( "Sample1", [] )

あとは、この起動ファイルを実行してあげればOKです。

F-siteの資料の起動用JSFLの説明

%SCRIPT%

起動用のJSFLの( “クラス化したファイル名”, [] )の第三引数に、%SCRIPT%と指定すると、実行中のスクリプトのパスを、出力パネルにfile:///URIの形式で表示してくれます。

%COREX%

第三引数に%COREX%を使うと、COREX.jsflのある場所を基準にパスの設定が可能になります。

COREX.jsflの基本的な使い方の箇所にも、説明が書かれています。

デバッグモード

第四引数のデバッグモードを有効にすると、パッケージ情報などを出力パネルに表示してくれます。

Q4.COREXを勉強するには？

以下のものを参考にすると良いと思います。

• fl.configURI + COREX.jsflファイル
• fl.configURI + Progression/JSFL以下のファイル
• blog.progression.jp内のF-site資料
• JSFLのオンラインマニュアル＆PDF

Q5.クラス化出来るということは、継承も可能なの？

可能です。F-siteの資料内にあるサンプルでも、継承が使われています。

先の例でいうと、Sample1を継承したSample2を作ってみると…

●起動用のjsflファイル

$={u:fl.configURI+"COREX.jsfl",c:false,$:function(){alert(String.fromCharCode(67,79,82,69,88,32,105,115,32,110,111,116,32,
105,110,115,116,97,108,108,101,100,46))}};(eval(FLfile.read($.u))||$).$
( "Sample2", [] )

●クラス化したjsflcファイル

package {

	//Sample1をインポートする
	import Sample1;

	public class Sample2 extends Sample1 {

		//変数を定義（データ型の指定は不要）
		private var _path = fl.getDocumentDOM();

		public function Sample2() {

			//ライブラリにフォルダを追加
			_path.library.newFolder("hoge");

		}
	}
}

こんな感じにしてあげると、Sample1に新たな機能を付け加えることが可能になります。

気をつけることは何かある？

データ型の指定

COREX.jsflのコメント部分にも書かれていますが、変数や関数のデータ型の指定は不要です。

文字列内のコメント

文字列の中に、コメントを入れたいという場合、注意が必要です。

package{

	public class Sample1 {

		public function Sample1() {

			（略）

			//1フレーム目に、スクリプトを記述
			fl.getDocumentDOM().getTimeline().layers[0].frames[0]
			.actionScript = "stop();";

		}
	}
}

このコードを、以下のように変更して、実行してみると…

（略）

//1フレーム目に、スクリプトを記述
fl.getDocumentDOM().getTimeline().layers[0].frames[0].actionScript = '//stopをかけておく\n\nstop();';

これだと、JSFLが起動してくれません。

（略）

//1フレーム目に、スクリプトを記述
fl.getDocumentDOM().getTimeline().layers[0].frames[0].actionScript = '\/\/stopをかけておく\n\nstop();';

コメント部分は、エスケープ処理してあげる必要があります。

他にもいくつか…

（今回のサンプルでは出てきませんでしたが）他にもいくつか注意点があります。

詳しくは、COREX.jsflのコメント部分をご覧下さい。

サンプルをダウンロード

今回作成したサンプルを、ちょっと試してみたいという方は、こちらからDLしてください！

まとめ

こんな感じでCOREXを使うと、AS3っぽくJSFLを書くことが出来ます。

興味がある方は、一度、使われてみては如何でしょうか？

来週の土曜日（3月6日）は、二都市（名古屋と福岡）で、面白そうなFlashのイベントが開催されますよねぇ…

WCAN mini ActionScript Vol.14

今回は、テーマがデバイス。

マウスやキーボードだけではつまらない！デバイスの可能性を探りたい！そんな勢いで、今回のテーマは『デバイス』になりました！みなさんでネタを持ち寄りでワイワイやりたいと思います！
Flash / AS 以外でも、デバイス的な何かであれば全然OKです！気軽にご参加ください！ネタは5分〜20分を目安にお願いします！

イベントの詳細＆申し込みは、ATNDからどうぞ！

参加しようかなぁ…とお考えの方は、お早めにお申し込みください！

福岡てら子 4 「Now Loading（エロいの）」

こちらは、ローディングネタです。

今回はFlashでの外部読み込みには欠かせないローディングネタを作ってきてもらいます。読み込み後のコンテンツがエロかったり、ローディングバー自体がエロかったり、とにかくエロければ何でもOKです。

イベントの詳細＆申し込みは、ATNDからどうぞ！

参加しようかなぁ…とお考えの方は、こちらもお早めに！

軽～いノリで…

「美味しいラーメンを食べに、福岡行っちゃおうかなぁ…」という軽～いノリで、来週、福岡に行くことにしました！

ということで、福岡てら子に参加しちゃいます。

某旅行雑誌（「る」から始まって、「ぶ」で終わる）の福岡版を購入して、あれこれやっておりますが、「福岡に来たら、これは見ておかないと！」とか、「お土産は、これがいいんじゃない？」とか、「●●を食べるなら、この店がオススメ！」なんていう有力情報がありましたら、この記事にコメントを付けて頂くか、twitterで@flabaka宛につぶやいて頂けると、非常に助かります。

ということで、来週は、福岡てら子の皆様、お世話になります！

google-code-prettifyをa-blog cmsで試してみました。

導入方法は、SyntaxHighlighterのときとほぼ一緒です。

ダウンロードしてくる

google-code-prettifyをダウンロードしてきます。

ちなみにですが、google-code-prettifyはApache License 2.0となっております。

zipを展開しておいて、フォルダ名をprettifyみたいにしておきます。

index.htmlに追記・1

使用中のテーマのindex.htmlに、以下を追記します。

<script type="text/javascript" src="prettify/prettify.js"></script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

cssとかsqlとかの場合は、別途フォルダ内のjsを読み込んであげます。

index.htmlに追記・2

マニュアルみたいなのには、bodyタグの所にonload=”prettyPrint()”って書いてね！　とあります。

a-blog cmsはjQueryが使える状態になっているので、今回は以下のようにしてみました。

<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript">
	$(function(){
		prettyPrint();
		})
</script>
<link rel="stylesheet" type="text/css" href="prettify/prettify.css" />

テーマフォルダにアップロード

使用中のテーマフォルダ内に、prettifyフォルダ＆index.htmlファイルをアップロードします。

a-blog cms側の設定

a-blog cmsにログインして、管理ページ>カスタマイズ管理>コンフィグ>（エントリーの）編集設定に移動します。

テキストタグセレクトの箇所に、prettify用のタグを追記します。

タグ

pre.prettyprint

ラベル

prettyprint

ここまで終わったら、保存ボタンを押しておきます。

あとはエントリの際に、prettyprintを選択してあげればOKです。

マニュアルみたいなのには、ASは対応していないと書かれていたんですが、試してみたら、意外といい感じになってくれました。（javaやmxmlはOKだから？）

カラーを変更したい！　とかは、prettify.cssを編集すればいいんじゃないかと…

個人的にはSyntaxHighlighterの方が好きなんですが、google-code-prettifyでも（割と）いい感じになるということで…

ツール>フォルダオプション>表示から、縮小版をキャッシュしないにチェックを入れてあるんだけど、FlashDevelopで新規プロジェクトを作成した際、Thumbs.dbファイルがプロジェクトパネルに表示されてしまって、何か嫌だなぁって場合。

毎回手動で消すのはちょいと面倒。

そんな時は、F10>Settingsパネル>Project Manager>Excluded File Typesの箇所に、拡張子（今回だと「.db」）を追加してあげます。

こうしておけば、新規プロジェクトを作成しても、プロジェクトパネル上にThumbs.dbが表示されなくなります。

忘れないように、メモ。

a-blog cmsの設定を変更

ではa-blog cms側をカスタマイズしていきます。

画像サイズ

まずは、アップロードする画像のサイズを変更したいので、管理画面→カスタマイズ管理→コンフィグ→エントリー→編集設定に移動します。

今回使う画像は、サムネイル画像（200px×100px）と詳細ページに表示する大きめの画像（400px×200px）なので、サイズセレクト→イメージサイズ選択肢の値を以下の様に変更してあげます。

画像URLサイズ選択肢の方も同じ様に変更しておきます。

続いて、イメージ編集→モバイル用画像の最大幅の値も変更してあげます。

イメージサイズや画像URLサイズを200pxに設定しても、ここのモバイル用画像の最大幅が160pxだった場合、画像をアップロードすると作成されるtinyの画像が、160pxになってしまいました。

なので、ここの値も200pxに変更してあげます。

圧縮率は画像編集ソフトの方で設定しているので、a-blog側では100%に設定してあります。

カスタムフィールドの作成

詳細ページから、「→もっと詳しく」のボタンを押した際に遷移するブログ記事のURLを格納しておくカスタムフィールドを作成します。

作り方は、a-blog cmsのカスタムフィールドを使う際の注意点の記事をご覧下さい。

ソースだけ掲載しておきます。（テーマフォルダ\themes\vicuna\admin\entry\entry.html）

<!-- BEGIN_MODULE Admin_Entry_Edit -->
<!-- BEGIN step#apply -->
（略）
<tr class="detail-fade-body">
　　　　<th>トラックバック</th>
　　　　<td><textarea name="trackback_url" cols="30"></textarea>
　　　　<input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="detail-fade-body">
　　　　<th>Blogの記事へ</th>
　　　　<td><input type="text" name="blogpost" size="50" class="entryFormInputText" />
　　　　<input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
<!-- END step#apply -->
<!-- BEGIN step#reapply -->
（略）
<tr class="textM detail-fade-body">
　　　　<th>トラックバック</th>
　　　　<td><textarea name="trackback_url" cols="30">{trackback_url}</textarea>
　　　　<input type="hidden" name="entry[]" value="trackback_url" /></td>
</tr>
<!--以下の記述を追記-->
<tr class="textM detail-fade-body">
　　　　<th>BlogURL</th>
　　　　<td><input type="text" name="blogpost" size="50" value="{blogpost}" />
　　　　<input type="hidden" name="field[]" value="blogpost" /></td>
</tr>
（略）
<!-- END step#result -->
<!-- END_MODULE Admin_Entry_Edit -->

このファイルもテーマフォルダ内に階層構造を保ったまま、アップしてあげます。

エントリする

ここまで終わったら、あとは記事を投稿してくだけです。

画像をアップする際、400×200pxのものを事前に用意し、サイズは「そのまま」でアップロードします。

すると、●●●●.jpg（400×200px）とtiny-●●●●.jpg（200×100px）がアーカイブフォルダ内に作成されます。

こうしておくと、昨日のテンプレートのpathと設定しているところには、●●●●.jpg（400×200px）へのリンクが。tiny_pathと設定しているところには、tiny-●●●●.jpg（200×100px）へのリンクが、それぞれ作成されることになります。

あとは、ファイル名をPRMLのscene nameに。BlogURLを、ブログの詳細記事へのリンクとして使いたかったので、それぞれ以下の様に設定していきます。

ここまで出来たら、投稿を保存します。

a-blog cmsのディレクトリ/ファイル名.xmlにアクセスしてあげて、投稿した値がXML側に反映されていれば、OKです。

吐き出されるFeed（XML）を、Progression側で読み込んであげる

ここら辺りも、MTやWPの場合と同じですね。

override protected function atSceneLoad():void {
　　　　addCommand(
　　　　　　　　new LoadURL( new URLRequest( "a-blog cmsのディレクトリ/ファイル名.xml" ) ),
　　　　　　　　function() {
　　　　　　　　　　　　trace(this.latestData);
　　　　　　　　}
　　　　);
}

Progression4の場合だと、LoaderListという便利なものがあるので、それを使ってあげるといいかと思います。