HTMLドキュメント（マークアップ）にFlashコンテンツを埋め込むJSライブラリとしては、もはやスタンダードとなった感のあるSWFObjectですがバージョンナンバーが1.5から一気に2.0に上がり配布場所もグーグルコードに変わりました。（私はよく知りませんでしたがその前にSWFFixと言うプロジェクトがあったようです）

そもそもこのライブラリは、IEのアクティブコンテンツ特許問題（現在は和解済み）の解決策としてdeconceptの方がリリースしたものですが（と思う？）バージョンアップを繰り返すたびに便利になりExpressInstallにも対応しているので最近ではブログパーツの配信なんかでも使われています。

基本的な使い方はHeadタグ内でswfobject.jsを読み込み、その後にHeadタグ、またはBodyタグ内で埋め込みに関わる部分を記述します。

■記述例

<script type="text/javascript" src="swfobject.js"></script>


  <script type="text/javascript">


  var flashvars = {};


  var params = {};


  var attributes = {};


  swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);


</script>

その他、詳細はSWFObject_2_0_documentationあたりをご参考にどうぞ。

投稿者: 日時: 17:25 | パーマリンク | コメント (0) | トラックバック (0)

Prototypeベースのグラフィックフレームワーク「 Prototype Graphic Framework (PGF)」がリリースされています。

下記のようなシンプルなコードでベクターグラフィックを描画／表示できるようです。

// Create an SVG renderer

var renderer = new SVGRenderer("whiteboard");


// Create a rectangle with some attributes like color and bounds

var rect = new Graphic.Rectangle(renderer);

rect.setFill({r: 255, g: 0, b: 0, a: 128});

rect.setStroke({r: 255, g: 255, b: 0, a: 128, w: 5});

rect.setBounds(10, 20, 200, 300);

rect.setRoundCorner(10, 10);

rect.translate(10, 20);

rect.rotate(30);

renderer.add(rect);

ただし、IEが相変わらずSVGをサポートしていないので、SVG (Firefox、 WebKit、Opera)、VML (IE) またはcanvas (Firefox、Safari、WebKit、Opera)となるようです。
canvasに対する対応は、作者自身の優先順位度が低いとのこと。

興味のある方はどうぞ。

投稿者: 日時: 11:56 | パーマリンク

Dreamweaver等のウェッブ作成専用ツールを使っていても「デバッグ」に焦点を当てるとかなり貧弱な状況です。
特にAjax（JavaScript）のデバッグは、フレームワークを使うことによるコードの肥大（手続きは簡素化するが全体が肥大する）も手伝ってより難しいものになっていましたが「Firebug 」の出現でデバッグ効率が格段にアップしそうです。

Firebug は、バージョン”0.4”のときから使っていましたが最新版は”1.0.1”になりかなり安定したものになっています。

また、当然ですがウェッブ上の任意のページのトレースや構造解析に使用可能です。

ちなみにFirebugは、Firefoxの機能拡張（アドオン）ですので導入も削除も簡単です。

その他、Flash使いにも便利な機能拡張（アドオン）たち；
■Web Developer 1.1.2 日本語版
■Flash Switcher
■FlashTracer
■SWF Catcher

投稿者: 日時: 23:05 | パーマリンク

以前、このブログで紹介したActionscript widgetと同じようなリファレンス検索タイプのウィジェット「Prototype Reference Widget」がリリースされています。

これは、ウィジェット内の検索フィールドにキーワードを入れることでPrototype API Documentationサイトのキーワード該当ページをデフォルトブラウザで表示するものです。ただし、Actionscript widgetのようなキーワードのポップアップリストが付いてないのである程度キーワードを知ってないと少々使いづらいかも。

ちなみに、Mac OS X Dashboard専用のウィジェットです。
また、Prototypeは、Ajax（JavaScript）で最も有名なフレームワークのひとつです。

このウィジェットが役立つかどうかは、いつものように皆さんのご判断でどうぞ！

■追伸
最近、Dashboardウィジェット作成ツール（Dashcodeベータ版）が登場しているのでより簡単により短時間でおもしろいものが作れるかもしれませんね。

投稿者: 日時: 23:20 | パーマリンク

上のキャプチャ画像は歴代アメリカ大統領のある時のスピーチをトップ100のタグにまとめて表示しているサイトです。
上部にあるスライダーを動かすことで年代とそのときのスピーチが時系列でスライドします。（インターフェイスはAJAXです）

タグクラウドは、このブログでも使用しているようにキーワード検索（集合）のビジュアル表示ですが、上記のように個人が何かの時に使用しているワード（言葉）を限定して考えればいろいろな応用が考えられますよね・・・

例えば、ワード数が少ない方がやりやすいという前提で考えればある任意の音楽アーティストの作詞曲を一曲に付き50ワード程度にタグクラウド化することによってそのアーティストがどのような言葉をチョイスしているのかワード的な傾向が一目瞭然になるとともに次の作詞の際に似た傾向を避けることもできますよね？！

曲もそうですが、良く言えばそのアーティストの個性ともなる「○○節（ぶし）」も悪く言えば「マンネリ」と言うことになります。

自分の創作（発想）の傾向を簡単にビジュアル化できるようなツールを作れば今後作詞をしているアーティストにはニーズがありそうです。おまけにボキャブラリを増やすような機能も付いてれば、なおさら（笑）

投稿者: 日時: 23:57 | パーマリンク

Flash（ActionScript）だけでは、データを保存することができないので、Perl、PHP、Ruby、Python等のいずれかのサーバースクリプトを利用することになります。

ここでは、PHPを使ったシンプルな読み書きをメモ用にまとめてみました。

一行ごとに処理する方法（汎用のFileManagerクラス等も存在する）もありますが、データ行数が少ない場合は個々のデータ処理をActionScript側で行い、POST送信された変数をPHPで丸ごと読み書きした方が簡単（ロジックがシンプル）です。

<?php
$fp=fopen("download.xml","r");
$load=fread($fp,filesize ("download.xml"));
print $load;
fclose($fp);  
?>

<?php
$fp=fopen("download.xml","w"));
$data =stripcslashes($HTTP_POST_VARS["send_data"]);
flock($fp,LOCK_EX);
fwrite($fp,$data);
flock($fp,LOCK_UN);
fclose($fp);
?>

「send_data」は、Flash側からPOST送信される変数名（プロパティ）。
stripcslashes()関数は、送信された文字列をアンエスケープする（必要な場合）
上記のサンプルではXMLデータをやり取りしてるので文字列内にシングルクォート（'）やダブルクォート（"）やバックスラッシュ（\）、ヌル文字を含む場合はActionScript側でエスケープする必要があるので、当然PHP側でアンエスケープする。

投稿者: 日時: 23:30 | パーマリンク

米グーグルが公開したGoogle Web Toolkit（GWT）は、Java言語を使ってGoogle MapsやGmailのようなAjaxアプリケーションを開発し、GWTコンパイラでJavaScriptとHTMLに変換できると言うものです。

ただし、JavaとJavaScriptは似て非なるもの（似てるのは名前の一部のみですが）なので普段Java言語を使わない人にとってはイマイチかなあ・・・
でもJavaマスターにとってはかなり便利な代物かもね？！

AJAXアプリケーションを作るUI要素を構成するために、UIコンポーネント(ウィジット)のGWTのセットを使うことができます。（下記サンプル）UIコンポーネントはPanel内に配置される。

public class Hello implements EntryPoint {
  public void onModuleLoad() {
    Button b = new Button("Click me", new ClickListener() {
      public void onClick(Widget sender) {
        Window.alert("Hello, AJAX");
      }
    });
    RootPanel.get().add(b);
  }
}

投稿者: 日時: 21:55 | パーマリンク

Adobe Lab.からSpryと言う名のAjaxフレームワークが公開されました。

AdobeがなぜAjax専用のフレームワークをリリースしたのか？な、ところもありますが使い勝手が良ければ問題なしとしましょう（笑）

Adobe Lab.の解説によるとSpryフレームワークは、ウェブデザイナーのために設計されたJavaScriptライブラリとのこと。
つまりJavaScriptに精通していなくてもスマートなAjaxページが作成できるようです。

■以下のデモサイトとソースコードを見れば納得です。

◆MYCOMジャーナルレビュー

投稿者: 日時: 21:21 | パーマリンク

Flash 8で実装されたExternalInterface APIを使うことでブラウザ側JavaScriptとシームレスにやり取りすることが可能ですが、このExternalInterface APIを使ってSWF側のActionScriptをライブラリ化してしまったのがPaul Colton氏によって開発されたAFLAX技術です。

もうちょっと別な名称がなかったのか・・・って感じがしないでもないですが（笑）

まあ、それはさておいてもAjax（JavaScript）がメインの開発者にとってはFlashをクラスライブラリのように使えるので結構便利かも知れません。

一番シンプルなスタイルでは、以下のファイルのみでFlashコマンドが利用可能です。
例えば、ブートストラップファイルのみで簡潔するような利用方法（DrawAPIで図形を描く等）です。

• /include/nifty.js


• /lib/AFLAX/aflax.js


• /lib/MochiKit/MochiKit.js


• /lib/AFLAX/aflax.swf //ブートストラップSWFファイル

<script type="text/javascript" src="../../include/nifty.js"></script>
<script type="text/javascript" src="../../lib/AFLAX/aflax.js"></script>
<script type="text/javascript" src="../../lib/MochiKit/MochiKit.js"></script>

<script>
 var aflax = new AFLAX("../../lib/AFLAX/aflax.swf");
  //

 function go() { 
    draw();
  }

 function draw()  {
  t = new AFLAX.MovieClip(aflax);  
  t.beginFill(0x000099);  
  t.lineStyle(2, 0x000033, 100);  
  t.moveTo(-50, 50);  
  t.lineTo(0, -50);  
  t.lineTo(50, 50);  
  t.endFill(); 
 }

</script> 

投稿者: 日時: 23:28 | パーマリンク

米Googleが開設したファイナンスサイト（例によってベータ版）で株価チャート表示にFlashが使われています。
ただし”Googleが使うとこうなる”という感じでAjaxとFlashが小気味よく連携したものになってます。
Flash Playerの対象バージョンは７以降ということなのでJavaScriptの連携にはOSFlashプロジェクトの「Flash JavaScript Integration Kit」が使われてるようです（たぶん・・・）

ITproニュース
米Google，金融情報サイト「Google Finance」を開設
・・・
株価チャートは，Ajaxによりドラッグ操作で対象期間を移動できるほか，拡大／縮小（当日～数年間の変動）表示が行える。株価が変動した際の関連ニュースへのリンクも提供する。
・・・

投稿者: 日時: 23:22 | パーマリンク

米Yahoo!が買収したKonfabulator（小型デスクトップ・アプリケーション実行エンジン）の最新版が「Yahoo! Widget Engine 3.0」と名前を変え無償ダウンロードが可能になってます。
このリリースから米Yahoo!が提供している各種サービスに”Yahoo! API”を利用してアクセスが可能となるようです。

■ニュース
→米Yahoo!，ウイジェット実行エンジンの新版「Yahoo! Widget Engine 3.0」を無償提供（IT PRO)
→米Yahoo!、「Konfabulator」改め「Widget Engine 3.0」をリリース（PCWEB）

☆Yahoo!開発者サイト
→Yahoo! Developer Network Home

サンプルスクリプト例（XMLでレイアウトを、JavaScriptで動作を、定義する）
これはKonfabulator時代とまったく同じです。

→サンプルスクリプトの詳細はWIDGET ENGINE 3.0 REFERENCEをどうぞ！

投稿者: 日時: 23:21 | パーマリンク

Konfabulatorとは、JavaScriptとXMLの技術をベースとして作成したデストップアクセサリのようなミニアプリケーション実行環境で、現在のMac OS X Tigerに実装されたDashboardの原型のようなものです。

まあ、こう言うと誤解を受けそうですがマックにしてもウィンドウズにしても、その時々に話題となるようなユーティリティアプリケーションをOSのメジャーアップデートの際に自前技術として組み込んでしまうと言う新興会社潰しのようなことがよくあります。

このKonfabulatorも同様でMac OS X TigerにDashboardと言う似た技術が組み込まれてしまったことによりマック環境での役目が危うくなっていましたがウィンドウズ版を出すことで生き残りを模索していたようです・・・が現実的にはほとんど忘れられた存在になってました。

本日のニュースによるとYahooに買収されたことで今後Yahooが提供する新しいXML APIに取り込まれたのち、「Yahoo! Widgets」という名称で無償公開される予定とのことです。

今後の展開が俄然楽しみになってきました。

また、今回の買収でKonfabulator 2.1がフリーウェアになりましたので興味のある方は今から始めてもいいのでは・・・

投稿者: 日時: 16:36 | パーマリンク

最近技術系ブログ等でよく話題になっているAJAXについてCNET Japanが特集記事を掲載していますので興味深く読みました。

AJAXに注目--グーグルが最新ウェブアプリ開発に選んだ「旧技術」

(CNET News.com)
・・・・・
Googleは旧来の技術を利用して「Google Maps」や「Gmail」といった最新アプリケーションを構築した。 Googleのこの動きを受けて、開発者らはJavaScriptやDynamic HTMLといった1990年代からある技術を見直し始めた。
・・・・・
AJAXという造語にけちをつけるブロガーも少なくない。また、Googleのエンジニアらは彼らのコーディングテクニックを単にJavaScriptと呼んでいる。
・・・・・

Googleのようなコンピュータサイエンスの博士号を持ったプログラマが珍しくない会社では、技術研究／開発に余念がないのかと思ったら、意外や意外、既存技術で新しいものを作り出すアプローチが盛んに行われているようですね。
やはり大事なのは応用力と言うことでしょうか？！

投稿者: 日時: 02:26 | パーマリンク