dotFes で発表してきました。貴重な時間を割いて僕の授業に来てくださった皆さん、時間足りずにテンパってすいませんでした。

その反省プラス、教室に入りたくても入れなかった人もいらしたとのお話も聞きました（雨のせいもあって会場人多すぎなせいもあって）ので、このエントリでできるだけフォローさせていただこうと思います。何本かスクリーンキャストを作りましたので、もろもろ資料をダウンロードした上で見てもらえればと思います。

とりあえず今日の発表があまりにも・・・だったので、発表できなかった問題4も含め、帰宅後急遽作った動画です。動画の解像度低いとか、解説があやふやとかあれば後日撮りなおしとかも考えます。
（注：このエントリの続きにスクリーンキャストビデオを埋め込みまくっています。これってRSSリーダーとかで迷惑かかってます？大丈夫？）

配布プリントデータ

当日配布したプリントの元 pdf データ（全5枚）を以下の場所に zip 圧縮(4.3MB)しておきました。

http://www.trick7.com/dotFes/dotFes_trick7_print.zip

問題1～4までのファイル一式

http://www.trick7.com/dotFes/dotFes_trick7_source.zip

FlashDevelop を使った都合上、各問題フォルダに「.as3proj」形式のプロジェクトファイルが同梱されていますが、FlashCS3 しか持っていない人でも .as ファイルを CS3 で開いていただけば大丈夫です。

導入

プリント1枚目のドキュメントクラス解説に言及したビデオを近日作ります。
ドキュメントクラス使用の有無を挙手で聞いた時に、使ったことない人が僕が想定してたよりも多かったので、ここで発表内容を細かめに切り替えたのが時間足りなくなった元凶だったかも。でも、ここを理解してないと以下の問題に進めないと思うので、後日頭スッキリした状態でビデオ用意しますー。

問題１

1. Flash ステージ上に「00」と書かれたテキストフィールドと「+」ボタンがあります。ボタンをクリックするとテキストフィールドの数が加算されるようにしなさい。

2. さらにボタンを長押しすると「ピッ・ピッ・ピッ・ピピピピピ…」というふうに、最初はゆっくり、そして高速に数字が加算されていくスクリプトを考えなさい。

3. AS3 には AS2 のような releaseOutside が存在していないようだ。同様の機能になるように AS3 でコーディングしなさい。

問題2

Tweener を使って「手を抜いて作ってる割にはそれっぽい」かつ「使いまわしがきく」ようなボタンの仕組みを考えなさい。（ビデオ準備中）

問題3

1. Flash で時計を作り、出力ウィンドウに「00:00:00」の形式で毎秒出力しなさい。

2. 秒数が3の倍数と3が付く時には「00:00:00～！」と出力されるようにしなさい。

問題4

ドキュメントクラス上に四角形を描画する外部クラスをaddChildで表示させようとしている。四角形のサイズをステージの半分にしたいのに、外部クラスから stage.stageWidth, stage.stageHeight がうまく取得できない。どういう対応が考えられるだろうか？

親クラス内で定義されているxmlの値を、そこにaddChildされた子クラスから「parent」を使って読み込みたいのにうまくいかない。どういう対応が考えられるだろうか。

全体を通して

AS3でコーディングしてて「強制型変換・キャスト」と「function(e:Event)系のメソッドのちょっと応用的な使い方」とかでつまづくことって結構ありませんか？って同意を求めたかったんだと思います。

注意！さくーしゃさんがコメントくださった中で、ちょっと-90度してるあたりでご指摘いただいたので、今回の degree 系の実装を変更するかもしれません。（TeraClock.as からは Degree 系を取っ払って元に戻して、作るとしたら別途 View に特化した（？）2D時計用クラスを作る感じがいいんでしょうかね？それとも TeraClock.as 中の-90処理を取っ払うだけ？MVのスマートな在り方みたいなのがよく分かってないんです僕。）

追記：上の点をふまえて、「上が0度」になるようにTeraClockライブラリを修正しました。下のチュートリアルビデオ中では、「針を右向き」に作っていますが、今のTeraClockライブラリを使う時は「針を上向き」に作るのが正しいです。ビデオを早く撮り直せばいいのですがスイマセン。
やり方としては WebDesigning 12月号に書いたアナログ時計の作り方を参考にしていただけるとベストです。

Flash で簡単に時計が作れる「TeraClock ライブラリ」に機能を追加しました。アナログ時計も簡単に作れます。

ライブラリファイルも含めたソース一式（CS3 形式）はこちら。あと、Spark のサイト内にも一応 TeraClock のページ作りました。

作り方は以下ビデオをご参考に。（ライブラリの SVN 取得などの操作は前回のビデオをどうぞ。）

どういう機能を追加したかというと、アナログ時計の時針・分針・秒針の角度をそれぞれ、hoursDegree, minutesDegree, secondsDegree プロパティで取得できるようにしただけでーす。
9/17日に TeraClock.as を改修しているので、それ以前のを使ってる人は上書きしておいてください。アナログ時計角度機能が別にいらない人はそのままでもいいですよ。

東京てら子・大阪てら子で合計30個以上の Flash 時計が集まりそうなのでワクワクですな。（東京は補欠の方にはすみませんが、さすがに部屋に入れそうにないので、すみませんがキャンセル待ちにてお願いします。作品の URL 応募とか、Ust 発表とかでよければ是非。。）

とりあえず簡単な使い方をスクリーンキャストにしました。（音出ます！）

前回の TeraFire 同様、今回も Spark Project 内にライブラリを置いてありますので、SVN 取得してください。やり方は TeraFire のビデオとか WebDesigning の8月号に載ってます。フルパスは以下：

http://www.libspark.org/svn/as3/TeraClock/src/com/trick7/utils/TeraClock.as

主な機能

ちょっとややこしい文章なので、上のビデオ見たあとに読んでいただいたほうがいいかもです。

• 時(HOURS_CHANGED)・分(MINUTES_CHANGED)・秒(SECONDS_CHANGED)それぞれの更新タイミングをイベントとして受け取れます。秒イベントで関数動かしつつ、別途時報イベントで別関数を実行とかが簡単にできます。
  とはいえ、よく見かける「ピッ(57)・ピッ(58)・ピッ(59)・ポーン(00)」的な「○秒の時に○○する」ってのがしたい場合は TeraClock.SECONDS_CHANGED リスナーの関数内で if 分岐させてください。
• 時・分・秒の各値は、（TeraClockインスタンス名）.seconds とかで取得できます。秒の値に応じてオブジェクトのサイズ変形とかするときはこっちですね。
  
  一方、デジタル数字で表示させたい時は、たとえば5秒のときは「05」にしたいですよね。そういうときは2桁モードとして、（TeraClockインスタンス名）.seconds2ってやると常に2桁になるようにしてあります。
• コンストラクタのパラメータにタイムゾーンを渡してやると世界各国の時間が表示されます。日本は世界標準時間から +9:00で、new TeraClock(9); としてやれば日本時計になりますが、9って指定しなくてもデフォルトで日本時計になるようにしてあります。ハワイは -10:00 なので new TeraClock(-10); とするわけですね。各国のタイムゾーンは Windows の時計をダブルクリックして確認しましょう。ただサマータイムは未実装なのでご注意。
• uranodai さんが AS2 用に TeraClock を移植してくださいました！Spark においてあります(http://www.libspark.org/svn/as2/TeraClock/)。ありがとうございますー。
• さくーしゃさんが、「時・分・秒」の各「00」の10の位・1の位を別々の値（int型）として取得できる機能を追加してくださいました。(AS3版のみ)
• タロタローグ ブログの人が、コンストラクト直後に時間取得できるように改修してくださいました。これで、new TeraClock(); 直後に時間取得可能になりました。（それまではSECONDS_CHANGEDイベントで取得する感じだったのです。これもAS3版のみ）

これから調べること

とりあえず公開してみんなに突っ込んでもらえて「完全な時計生成ライブラリ」になればいいなとか思ったりしていますが、コンストラクタとメソッドは崩さないようにしたい心持ちでいます。

• EventDispatcher クラスを継承させたカスタムイベント用の別ファイル（例えばClockEvent.as）を作ろうか迷ったけど、コンストラクタで if 分岐で super(SECONDS_CHANGED);とかができなくてとりあえずやめた。
• 結果1個の as ファイル（TeraClock.as）に記述する形になったのだけど、ENTER_FRAME させてるし、EventDispatcher も継承してるし Sprite 型にしたのだけど、なんか Sprite でいいのかなぁと不安。もっと絞れないかなぁ。
• ENTER_FRAME イベントで毎フレーム時間を取得している仕様なので、すっごい実行してる感があるから、ここは Timer クラスを使った方が・・とか思っていたのだけど、実はそもそも Timer クラスの中で ENTER_FRAME が動いてるらしく、それだったら ENTER_FRAME させたほうがいいと twitter で教えてもらった。
• で、カスタムイベントもその中で定義しているのだけど、呼び出し側のイベントハンドラ関数の引数んとこが (e:Event) じゃないと動かないらしい。
• サマータイム実装するかなぁ。コンストラクタの第2パラメータの Boolean でやるかもだけど、それやると各国間の時差取得系のメソッドは実装しにくくなりそう。
• 毎フレーム余計な処理を控えたかったので日時取得系は TeraCalender クラスとかで別途作る予定。

ソースコードとか

リファレンス代りに貼っておきます。まずはライブラリ本体（TeraClock.as）

package com.trick7.utils {
import flash.display.*;
import flash.events.Event;
import flash.events.EventDispatcher;

/**
* @author tera
* サンプルコード（ドキュメントクラスとして設定すれば動きます）：
package  {
import flash.events.Event;
import flash.display.Sprite;
import com.trick7.utils.TeraClock;
public class Main extends Sprite{
public var clock:TeraClock;
public function Main() {
clock = new TeraClock();
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
clock.addEventListener(TeraClock.MINUTES_CHANGED, minutesListener);
clock.addEventListener(TeraClock.HOURS_CHANGED, hoursListener);
}
private function secondsListener(e:Event):void {
trace(clock.seconds + "秒です。現在：" +clock.hours+":"+clock.minutes+":"+clock.seconds+" です。" );
}
private function minutesListener(e:Event):void {
trace(clock.minutes +"分になったよ。");
}
private function hoursListener(e:Event):void {
trace(clock.hours+"時になったよ。");
}
}
}
*/
public class TeraClock extends Sprite {
public static const HOURS_CHANGED:String = "hoursChanged";
public static const MINUTES_CHANGED:String = "minutesChanged";
public static const SECONDS_CHANGED:String = "secondsChanged";
private var _hours:int;
private var _minutes:int;
private var _seconds:int;
private var _preSeconds:int;
private var _gmt:int;
// コンストラクタ関数。引数でタイムゾーンを設定できる。デフォルトは+9:00（日本）
public function TeraClock(GMT:int = 9) {
_gmt = GMT%24;
addEventListener(Event.ENTER_FRAME, enterFrameListener);
}

private function enterFrameListener(e:Event):void {
var date:Date = new Date();
if(_gmt>=0){
_hours = (date.getUTCHours() + _gmt) % 24;
}else {
_hours = (24+(date.getUTCHours() + _gmt)) % 24;
}
_minutes = date.getUTCMinutes();
_seconds = date.getUTCSeconds();
if (_seconds != _preSeconds) {
//trace(_hours + ":" + _minutes + ":" + _seconds);
dispatchEvent(new Event(SECONDS_CHANGED));
if (_seconds == 0) {
dispatchEvent(new Event(MINUTES_CHANGED));
if (_minutes == 0) {
dispatchEvent(new Event(HOURS_CHANGED));
}
}
}
_preSeconds = _seconds;
}
// 外部から値を取得するためのゲッター。セッターはとりあえずいらないや。
public function get hours():int { return _hours; }
public function get minutes():int { return _minutes; }
public function get seconds():int { return _seconds; }
// 上位1桁返す
public function get hoursUpper():int { return _hours / 10; }
public function get minutesUpper():int { return _minutes / 10; }
public function get secondsUpper():int { return _seconds / 10; }
// 下位1桁返す
public function get hoursLower():int { return _hours % 10; }
public function get minutesLower():int  { return _minutes % 10; }
public function get secondsLower():int { return _seconds % 10; }
// 1桁の数の時を2桁にする。返り値は String 型になる。
public function get hours2():String { return niketa(_hours); }
public function get minutes2():String { return niketa(_minutes); }
public function get seconds2():String { return niketa(_seconds); }
// 2桁にして返す関数
private function niketa(num:int):String {
if (num < 10) {
return String("0"+num);
}else {
return String(num);
}
}
//アナログ時計にした時の針の角度を返す。針のムービークリップは右方向を向けてに作成・配置しておくこと。(9/17追加)
public function get hoursDegree():Number {
return ((_hours % 12) * 30 - 90) + (_minutes / 2) + (_seconds/120);
}
public function get minutesDegree():Number {
return (_minutes * 6 - 90) + (_seconds / 10);
}
public function get secondsDegree():Number {
return _seconds*6 - 90;
}
}
}

以下がその使用例。ドキュメントクラス Main.as とした場合：

package  {
import flash.events.Event;
import flash.display.Sprite;
import com.trick7.utils.TeraClock;
public class Main extends Sprite{
public var clock:TeraClock;
public function Main() {
clock = new TeraClock();
clock.addEventListener(TeraClock.SECONDS_CHANGED, secondsListener);
clock.addEventListener(TeraClock.MINUTES_CHANGED, minutesListener);
clock.addEventListener(TeraClock.HOURS_CHANGED, hoursListener);
}

private function secondsListener(e:Event):void {
trace(clock.seconds + "秒です。現在：" +clock.hours2+":"+clock.minutes2+":"+clock.seconds2+" です。" );
}
private function minutesListener(e:Event):void {
trace(clock.minutes +"分になったよ。");
}
private function hoursListener(e:Event):void {
trace(clock.hours+"時になったよ。");
}
}
}

「Web Designing 8月号」にて ActionScript ライブラリの設定方法を中心に記事を書かせていただきましたが、実際にライブラリを使っていくのは8月18日発売の次号（Tweener特集予定）からとなります。

それまでに退屈されてしまうのも寂しいので、練習台としてライブラリを作ってみました。どうぞ試しに使ってみてくださいませ。3行の ActionScript で簡単に炎が作れます！（※AS3用ライブラリです）

AS ライブラリデビューの皆さんへ

Web Designing 8月号を読んで内容を理解していただいた前提で、

1. ローカルPC上に任意のフォルダを作成し、中に新規 fla ファイルと src フォルダを作成する。
2. fla ファイルを開き、フレームレート30（任意）、背景色を黒、ドキュメントレベルのクラスパスを src フォルダに通しておく。
3. Subversion クライアントソフトを使って SparkProject のリポジトリ（http://www.libspark.org/svn）に SVN 接続する。
4. Sparkリポジトリの中の「as3」ディレクトリの中に「TeraFire」ライブラリのフォルダがありますので、ライブラリを入手します。
5. ローカルPC上にTeraFireライブラリのセッティングができたら、fla ファイルのフレームスクリプトに以下のようにコードを記述します。

import com.trick7.effects.TeraFire;
var fire:TeraFire = new TeraFire(100,100);
addChild(fire);

この状態でパブリッシュするとステージ上の x:100, y:100 の位置に炎がゆらゆら表示されているはずです。

「これだけでゆらめく炎が使えるんですよ～。ライブラリって便利ですよね～。」とお伝えしたかったのですが、いかがでしょうか？

模範演技として、火を表示させるまでのスクリーンキャスト動画を作りました。10分映像で31MBもあるので高速回線の人のみどうぞ。風邪で鼻声です。

ヒント１：やっぱり AS ライブラリよく分かんないという人用、ライブラリ添付＆クラスパス通し済み、「あとはパブリッシュするだけ」のファイル一式。ソースはこちら：fire.zip（FlashCS3形式）

ライブラリを既に使いまくっている皆さんへ

僕みたいなもんでも SparkProject のコミッタになれました。SparkProjectマネージャーの yossy さん曰く、”「これコミットして大丈夫なのかな…」と考える前にコミットして欲しい“というのは本当に大丈夫なようですｗ。

ちなみに今回アップした TeraFire クラスのコンストラクタですが：

TeraFire(xPos:Number=0, yPos:Number=0, fireWidth:Number=30, fireHeight:Number=90)

となっております。ということで炎の位置、大きさはコンストラクト時に自由に設定できます。もっと内部処理を軽くできる余地をあえて残しており（嘘ｗ）、皆さんの母性本能をくすぐる仕様になっていますので、ぜひぜひ中身をご覧ください。内部で何をやっているかというと：

1. 内側から順に「オレンジ→赤→透明」のグラデーション塗りの楕円を描画、グラデーションの中心は円の中心からずらしてあります。これをビットマップ化して「炎のベース」としておく。
2. 炎っていうのは芯の付近は揺らぎが少ないので、下部分の揺らぎの適応量が少なくなるようにマスク的な役割を果たす白黒グラデーションビットマップを作成しておく。
3. perlinNoise でモヤモヤ画像を生成し、さっき作った「下部分揺らぎ抑え用グラデーションビットマップ」と合成（copyPixels）し、その画像をもとに DisplacementMapFilter を炎のベースに適応させる。モヤモヤ画像は毎フレーム上方向にスクロールするようにオフセット設定されているので、結果炎が揺らめきながら上方向にスクロールするわけです。

だいたいそんな感じです。洋書「Flash 8 Essentials」 のロウソクのサンプルを多大に参考にしています。

「trick7.com blog: Progression をインストールしてタイムラインベースで作ってみたけどつまづくビデオ」

リンク先でも書いていますが、Progression には ActionScript ベースでの開発アプローチと、Flash タイムラインベースの開発アプローチがあります。タイムラインベースの開発は、クラスファイルを記述せずともアクセシビリティの高いサイトを作ることができるので、Flash 経験の浅い人でも使い勝手の良いサイトを効率よく作れます。シーンの管理がイメージできればあとあと理解しやすいかと思います。

また撮りなおします。この前はうまくできたのになぁ・・・

taka:nium 先生！2回も教えてもらったのに、こんなに覚えの悪い生徒で本当にごめんなさい。

追記：
ビデオ中盤で、全部のMCが左上に重なるのを回避するために「基準点をずらす」というカッコ悪いアプローチをしてしまいましたが、

<cast cls="ProfileBtn" index="10" x="15" y="20" />

という設定ができるんですって（via cellfusionさんの記事）。見落としまくりでお恥ずかしいｗ

前回のビデオの前に公開すべきでしたが、オープンソースの ActionScript エディタ「FlashDevelop」上でコードを記述し、ワンアクションで　Flash CS3 上からパブリッシュプレビューする方法をスクリーンキャストします。

グラフィックシンボルは Flash CS3 で作るけど、コード補完機能は便利そうだから外部 AS エディタを使いたいなという僕には魅力的な組み合わせです。

FlashDevelop は周りの人が結構使っていて、僕も最近やっと使い出したので詳しいことは全然分かりませんが、ビデオ内で実演している機能だけでも僕は感動できたので、その嬉しがっている様子をビデオにしてみたという感じです。

ビデオは以下：

「trick7.com blog: FlashDevelop でコーディングして Flash CS3 からパブリッシュする」

僕でも実感できる便利な機能をいくつか挙げると：

• コード補完機能。クラスパスを通しておけばカスタムクラスも補完してくれる。「Tw」とタイプすれば「Tweener」がリストアップされ、それを決定後「.（ドット）」をタイプすると Tweener のメソッドリストがリストアップ「addTween」を選べる感じ。超効率化。
• 使うクラスを型指定したタイミングで、使うクラスの import 文が補完される。関数の中で var bmp:Bitmap とタイプすれば、コードの上のほうで import flash.display.Bitmap が勝手に補完されるわけです。
• いまだに trace 関数中心でデバッグする人にとっては Flash IDE パブリッシュ環境での出力確認ができる。
• クラスにカーソルフォーカス中、F4 キーを押すと、そのクラスファイルやメソッドが開く、Shift+F4 で戻れる。
• ショートカット一発でコメントアウトとか。
• 僕はまだやってませんが、AS2 もコーディングできる。これが FlexBuilder との違いですね。
• 日本語もエディタ上でインライン入力できる。（文字コード設定や使用フォント設定等の日本語化作業が必要）
• 起動とか動作速度が速い（気がする）。
• tmp=5; とタイプすると tmp = 5; みたいに「半角スペース」を勝手に補完してくれる。僕にはありがたい。邪魔な人はオフにすればいいです。
• コードが折り畳める

「それって FlexBuilder でもできるよ」とか「Flash CS3 でもできるし」というものもありますが、こんなところがパッと使った感じで便利なのです。将来的にはもっとカスタマイズしていって、スニペット登録（予め自分が登録しておいたコードスタイルを簡単に呼び出す）等の便利機能を使っていけばいいのでしょうが、その辺は del.icio.us/trick7/flashdevelop でブクマさせていただいているのでおいおい学習。インストール方法もそちらで。

毎回言うのもしつこいので控えていますが、僕自身理解しているかどうか怪しい状態でビデオにしてたりするので、間違えてたり補足あれば教えてください。備忘録代わりにビデオにしてるという感じです。よろしくお願いします。

関連：
AS エディタはこのエントリとかで紹介してるエディタが有名どころですね。

ActionScript 3.0 では僕のように難しいことをしないような制作者でも ロード対象となる XML の名前空間の処理に戸惑うこと必至です。僕はついでにポリシーファイルでもつまづきますが。。
今回はリクルートWEBサービスの API を題材にして、XML にアクセスできるまでをスクリーンキャスト（ビデオチュートリアルのことなんですが海外ではスクリーンキャストの方が浸透してるらしい）します。朝一で録音したので途中で痰がからんでいる箇所があったりするのですが勘弁してください。

キャストは以下リンクより。リンク先に参考にさせていただいたサイトへのリンクも掲載しておきます。

「trick7.com blog: ActionScript 3.0 で名前空間のある XML の処理とクロスドメイン対策」

やってることは gotoAndLearn.com(Lee Brimlow さん) のこのスクリーンキャストとほぼ同じで、ロード対象が名前空間（namespace）を含んだ外部 XML だった場合の処理を解説しているという内容です。

• クロスドメインポリシーファイルの設定ってどこにコード書けばいい？
• 名前空間の設定ってどうすりゃいいの？
• グルメサーチの店舗データの中に catch（キャッチコピー）ノードがあるのですが、これが AS の try-catch の catch とバッティングしてエラーがでます。その対処法。

今回、FlashDevelop でコーディング、Flash CS3 でパブリッシュしてますが、この連携方法は別のキャストビデオを用意しましたので後日アップします。FlashDevelop が便利すぎます。ビデオ中のコード補完機能に戸惑っている箇所がありますが、きちんと自分用に設定すれば解消されることでしょう。

今回はあくまで実験なので、実用性とか日本語解説の精度とかはご容赦ください。

今回題材にした元動画は
「Animating with Tweener（Tweener の使い方）」←_blankで開きます
です。

聞き方としては：

• 上のリンクを開いてもらって画面下の右端のボリュームボタンで英語音声をオフにしておきます。
• このベージ内の「こえ部ブログパーツ」か「こえ部直リンクページ」を別ウィンドウで開いて脇に置いておきます。
• できるだけ同時に再生ボタンを押して日本語解説で聞く感じです。

以下気づいた点

• 録音内容はグダグダなようですが、即興録音でテイク30とかやってます。これでも３時間かかってます。原稿用意しておいた方がいいと思います。
• 作っておいてなんだけど、僕の英語力でもオリジナルの英語解説の方が分かりやすい。。
• どちらかと言えば Flash エントリーユーザー向けの解説を意識した方がいい気がする。既にできる人は動画だけでも内容理解できるし。
• 英語の内容をまんま日本語で喋るのではなく、上記のようにエントリーユーザーをターゲットにして基礎補足解説を挟む方がいいかも。
• 例えば、今回のビデオ内容は僕には音声なくても理解できる内容だったけど、他プログラミング言語スクリーンキャスト（例：「Ruby on Rails で15分でブログを作るビデオ」）とかは映像だけでは僕にはチンプンカンプンなので、そういう初心者レベルの人には日本語解説はありがたいと思うのです。
• もっと ActionScript ができる人の解説も聞いてみたい。
• 気づいた点ございましたら、こえ部サイトで今回の声にコメントぶら下げてくださいませ。

将来的に僕がやりたいのは、「gotoAndLearn.com」＋「ニコ動」＋「こえ部」のようなスクリーンキャストポータルサイトがいいなと思っていて、内容としては：

• 同じ再生タイムライン上に他のFlasherさんのコメントをかぶせる仕組みが欲しい。で、ユーザー側でどのFlasherさんのコメントをアクティブにするかを選択できる実装。
• 声投稿恥ずかしいという人向けにニコ動ライクな文字投稿システムも実装。でもコードを投稿＆見やすい方がさらにいいからUIは違うスタイルで。
• ちなみに以前 AdobeMediaPlayer ベースでやろうとしてたけども、実装予定だったタグや評価機能が実装されてないし、日本語も表示できないので断念しました。

作りたいのに全然取りかかれてない。というか作るスキルがない。

関連記事：
trick7.com blog: こえ部
trick7.com blog: 「こえ部」オススメ
trick7.com blog: gotoAndLearn.com

今回は、はてなダイアリーが iGoogle ガジェットを貼れることを活かして、はてなダイアリーにできるだけシンプルに自作 Flash ブログパーツを貼付ける方法を実演しています。

今回ご紹介している内容、および、はてなダイアリー用貼付けコードのテンプレートは：

「iGoogle ガジェットを可能な限りシンプルに「はてなダイアリー」に貼る方法 : メディアテクノロジーラボ　ブログ」

にまとめておりますので、そちらもあわせてお読みくださいませ。

で、今回のビデオは：

「trick7.com blog: 自作 iGoogle ガジェットをはてなダイアリーに貼付ける」（11分3秒）

にて、だいぶグダグダとやっております。

で、上記作業を済ませば、自作 Flash ブログパーツを「はてなダイアリー」ユーザーさんにも使ってもらえるようになるわけです。僕の場合：

はてなダイアリー用「コジマヨシーケンサー」貼付けコード：

<script src="http://gmodules.com/ig/ifr?url=http://www.trick7.com/yosequencer/yosequencer.xml&synd=open&w=160&h=225&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>

はてなダイアリー用「ジョネレーター」貼付けコード（こちらは xml をサイトのルートに置いた例）：

<script src="http://gmodules.com/ig/ifr?url=http://www.trick7.com/jonerator.xml&synd=open&w=240&h=340&title=&border=%23ffffff%7C0px%2C0px+solid+%23ffffff&output=js"></script>

という感じですね。興味ありましたら貼付けて下さい。
（Windows:IE6, FireFox2 / MacOSX:Safari, FireFox2 にて表示確認）

Google Japan Blog の方もどんどん更新されていますのでどうぞ。FLASHer と iGoogle ガジェットの親和性の高さに、逆に申し訳なく感じている僕のコメントが見られます：

• 「デベロッパー 交流会（第 1 回）─ Vol.1」
• 「デベロッパー 交流会（第 1 回）─ Vol.2」
• 「デベロッパー 交流会（第 1 回）─ Vol.3」

以上で、iGoogle ガジェットに関する一連のエントリを締めくくろうと思っております。それでは iGoogle ガジェットコンテストでお会いしましょう。僕はもっと「便利ツール」っぽいガジェットを作ろうと思ってます。

追記：あれ！もっとシンプルに貼れるの？

なんとか貼付けコードから CSS を設定しようと悪戦苦闘するメモ：

メモ１：
埋め込みコードの中で、JavaScript から CSS を操作して：

.ig_reset, .ig_reset{
border:0;
padding:0;
background-color:#ffffff;
}

みたいな設定したいのだけど、こういう記事を拝見しても DOM が理解できていないので、要勉強です。

メモ２：
「CSS + JavaScript Tips」の資料を拝見しました。頑張ってみます。

メモ３：
こちらのサイトを参考に：

<script type="text/javascript">
// stylesheet object
var ss = document.styleSheets[0];
if (document.all) {
// IE
ss.addRule(".ig_reset, .ig_reset td", "background-color:0xff0000");
} else {
// FireFox
ss.insertRule(".ig_reset, .ig_reset {background-color:0xff0000}", ss.cssRules.length);
}
</script>

してみたけど駄目だった。（サイト全体の css でガジェット部分のボーダー＆背景色を消しているので、試しに JS からガジェット背景色を赤にしようと試みているのですが。。）

今回は MTL（メディアテクノロジーラボ）ブログに書いた記事をベースに、チュートリアルビデオを2本つくりました。
Flash を iGoogle ガジェットにする作業が、いかに簡単かが伝わればいいなと思っております。

久しぶりのビデオチュートリアルだったので、慣らし運転も兼ねてまずは導入ビデオ：

「trick7.com blog: iGoogle と Google Desktop 導入」（6分16秒）

にて、iGoogle の基本的な使い方と Google Desktop を Windows にインストールする様子を解説しています。ここで気付いたのですが、Google Desktop は僕が使っているデスクトップキャプチャソフト「Camtasia Studio 4」には映らないようです。チュートリアルビデオ上には映っていませんが、その他資料と想像力で補って下さい。尚、自作ガジェット等の追加ガジェットを Google Desktop に追加する機能は、現状は Windows 版 Google Desktop のみです。Mac 版ではできませんのでご注意を。（半日迷ったw）

で、次が本番：

「Flash ブログパーツを3分で Google ガジェットにする実演ビデオ」（8分45秒）

ビデオ映像自体は8分ありますが、Flash を iGoogle に落とし込む作業は3分程度で済んでいます。MTL ブログに書いた「Flash を iGoogle ガジェット化するための xml テンプレート」をコピペして、数カ所の文字修正すればいいだけなのですから。ここでも Google Desktop サイドバーは、ビデオ上では表示されていない（一部中途半端に表示）ですが、当方のモニタ上ではバッチリ表示できております。

とにかく、こんなに簡単なのだから、個人で FLASH ブログパーツを作られている方は、一度試してみてはいかがでしょうか？
座談会「Google デベロッパー交流会」の中でも話題になっていたのですが、Ajax/JavaScript でのガジェット制作においては、デバッグ作業というのが結構てこずるらしく（僕は JS 分からないので程度は分かりませんが）、その点 FLASHer は、今回解説したように「Flash 作って最後にぺろっと貼るだけ」という、卑怯なまでに「自分の土俵で」ガジェットが作れてしまうので、10/1締め切りの iGoogleガジェットコンテスト、実は FLASHer にとっておいしいコンテストなのではないでしょうか（笑）

引き続き、次のエントリーでは、MTL ブログの「iGoogle ガジェットを可能な限りシンプルに「はてなダイアリー」に貼る方法」の記事をもとにしたチュートリアルビデオを用意しますので、ブログパーツクリエイターさんは、それを使って「はてダ」ユーザーさん獲得を視野に入れることができるようになるかと思います。

補足事項：
Google Desktop のインストールに関しては、プライバシー保護を危惧する意見もありますので、各自ご検討ください。僕の PC には特に見られて困るデータもないし、いつものように「解析するのは自動化された機械ですから大丈夫」と Google もコメントするだろうし、別に「クロエにハッキングされて、ジャックバウアーが突然押し掛けてくる」ということではないので、僕は構わずインストールしました。どちらかというと、マシンのパフォーマンスにどれだけ影響するかの方が気になりますが、それはこれから体験してみます。