widgetown｜ウィジェット情報ポータル「ウィジェッタウン」｜ガジェット・ブログパーツ
トップ>特集
第3回　デスクトップウィジェット編
今度はデスクトップウィジェットに挑戦！

ウィジェットを作ってみよう！ということで第1回、第2回でブログパーツを作ってみました。
ここで、ステップ2に進んじゃいましょう。今回は、ググッとレベルアップ（？）して、お待ちかねデスクトップウィジェットの作り方です。

本編では、Adobe Flex Builder 3　Beta3を使ったAdobe AIRのデスクトップウィジェットの作成方法をお届けします。
なお、デスクトップウィジェットと書くとちょっと長いので、ここではウィジェットと略させてもらっちゃいます。

こちらの講座も今まで同様、「スクリプトは殆ど･･･」という方、必見です！
なんせサンデープログラミングですから。
とりあえず、ウィジェットとして動くものを作ってみて、「おぉ！」と感動しちゃってください。
※Adobe AIRは現在Beta3が公開されています。Beta版なので商用利用はできません。

AIRウィジェットで作ろう！

デスクトップウィジェットとして公開する方法も、ブログパーツの公開方法と同様、いろいろな方法があります。が、今回は、その中でもAdobe AIRを使った公開を選びました。


なぜAIRか････
理由は簡単。今、一番ホットだから！です。（笑）
さくっと作って、さらっと言ってしまいましょう。「これAIRで作ったから。」
注目度アップ、まちがいなし！！だと、思います。たぶん。

デスクトップウィジェットの作り方

まずは、これがないと何も始まりません！作業環境を構築しましょう。
今回必要なものは以下の２点です。

・Flex Builder Public Beta3
・Adobe AIR Beta3

Flex Builder 3 Beta版はAdobe Labsで無償で公開されています。
下記からダウンロードし、利用規約に同意しインストールしてください。
・Flex Builder Public Beta3
http://labs.adobe.com/technologies/flex/flexbuilder3/

AIRアプリを動作させるAdobe AIRもインストールします。
こちらも同様にインストールします。
・Adobe AIR Beta3
http://labs.adobe.com/downloads/air.html

Flex Builder 3を使う

インストールができたら、まずFlex Builder 3を起動します。

ワークスペースの選択という画面が出てきますが今回はそのまま「はい」を選択します。
※Flexでのファイルを保存するフォルダ（ワークスペース）変えたい場合は、[ファイル]→[ワークスぺースの切り替え]から行います。

Flex スタートページが表示されます。ここにFlexのサンプル等がありますので、もっと詳しく知りたい場合はいろいろ見てみるとよいでしょう。

それでは、早速作業に入りたいと思います。
Flexではプロジェクトという単位でファイルを管理します。
[ファイル]→[新規]→[Flex プロジェクト]を選択

プロジェクト名を入力、アプリケーションの種類をデスクトップアプリケーションを選択し「OK」を押します。今回はプロジェクト名をwidgetownとしました。
※Flexプロジェクトを選択すると、通常のFlexのプロジェクトが選択できます。

そうするとAIRを作るのに必要ファイル（widgetown-app.xmlなど）が自動生成されます。これがFlex Builderを使う利点です。
※widgetown-app.xmlはAIRアプリケーションの名前や、アイコンなどを設定するのに使います。

コードをかいてみよう

Flexで使う言語はMXMLとActionScriptです。MXMLはXMLの一種でタグで記述していきます。
それではwidgetown.mxmlに以下のようにコードを追加してみましょう。

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:SWFLoader source="http://www.widgetown.com/contents/programming/20080205/yuru_live.swf"/>
	
</mx:WindowedApplication>
入力のコツは<sとキーボードで入力するとダイアログボックスが出てきますので、その中からFlashをロードするタグSWFLoaderを探してenterで確定します。Flex Builderのコード補完機能は非常に便利です。
※SWFLoaderは、Flash（SWF）を読み込み表示する機能を持つタブです。sourceでファイルのURLを指定します。


次にswfの表示サイズを指定しましょう。SWFLoaderのタグに以下のように 横（width）　高さ（height）を入力します。
<mx:SWFLoader width="128" height="200"
 source="http://www.widgetown.com/contents/programming/20080205/yuru_live.swf"/>
さてちゃんと入力できたら[実行]→[widgetownのデバッグ]を選択し動かしてみましょう。


ウィンドウの設定をする

次にウィンドウのサイズを指定してみましょう。AIRのサイズを設定するには WindowedApplicationをタグに以下のようにし 横（width）　高さ（height）を指定します。

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
width="128" height="200">
ここでのサイズ指定をしましたが、これだとウィンドウの枠込みのサイズとなってしまいます。
そこでウィンドウの枠を非表示にしてみましょう。手順は以下の通りです。

・ WindowedApplicationタグを Application　に修正
・ widgetown-app.xmlの中の以下のタグのコメントをはずし以下のよう変更します。
<systemChrome>none</systemChrome>
<transparent>true</transparent>
<visible>true</visible>
[実行]→[widgetownのデバッグ]を選択し動かして、スクロールが表示されない状態であればOKです。

ドラッグできるようにする

先ほどウィンドウを消してしまったので、ウィジェットがドラッグできなくなってしまいました。
そこでドラッグできるようにActionScriptを記述します。

ActionScriptは<mx:Script>タグ内に記述します。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	width="128" 
	height="200"
	applicationComplete="handleComplete(event);"
	>
	
	<mx:Script>
		<![CDATA[
			
			private function handleComplete(e:Event):void
			{
				stage.addEventListener(MouseEvent.MOUSE_DOWN , handleMouseDown );
			}
			
			private function handleMouseDown(e:Event):void
			{
				stage.nativeWindow.startMove();
			}
		]]>
	</mx:Script>
	
	
	<mx:SWFLoader width="128" height="200"
  source="http://www.widgetown.com/contents/programming/20080205/yuru_live.swf"/>

	
</mx:Application>
＝解説＝
applicationComplete="handleComplete(event);"は開始時に行われる関数（リスナー）MXMLで指定しています。Javascriptのbody onloadのような感じです。
ActionScriptでリスナーを設定するには addEventListenerメソッドを使います。
addEventListener（イベント名　、リスナーファンクション）;
同様に
stage.addEventListener(MouseEvent.MOUSE_DOWN , handleMouseDown );
の箇所はstage上でマウスがクリック（ダウン）された時に呼ばれる関数はhandleMouseDownです。という意味です。
stage.nativeWindow.startMove();は、ウィンドウをドラックするという意味です。
※stageとは、表示される範囲を示しています。

わからなければコピペでOKです。だってサンデープログラミングですから。
以上でコードは完成です。


[実行]→[widgetownのデバッグ]を選択し動かして、ドラッグできればOKです。

アイコン変更してみる

あともうひと息。せっかくなので、アイコンも変えてみましょう。
AIRのアイコンに必要なものは4つの画像です。サイズは、16pix　32pix　48pix　128pixを準備しましょう。画像形式はレイヤーなしのpng形式です。 今回は　16.png 32.png 48.png 128.pngというファイルを用意しました。
以下からダウンロードできます。

iconダウンロード

まずFlexナビゲータのsrcフォルダ上で右クリックし、[新規]→[フォルダ]でiconフォルダを作成、その中にアイコンファイルをドラッグ＆ドロップします。


次にアイコンを設定します。アイコンを指定するにはwidgetown-app.xmlの中で指定します。このファイルにはアプリケーションの名前等を指定するファイルです。
あらかじめコメントアウトされているのでコメントをはずし、以下のように修正します。
※iconタグは２箇所あるので要注意。はずすコメントは下記のほうです！

<!-- The icon the system uses for the application. For at least one resolution,
specify the path to a PNG file included in the AIR package. Optional. -->

			<!-- <icon>
				<image16x16></image16x16>
				<image32x32></image32x32>
				<image48x48></image48x48>
				<image128x128></image128x128>
			</icon> -->
上記の部分を、以下のように書き換えます。 
			<icon>
				<image16x16>icon/16.png</image16x16>
				<image32x32>icon/32.png</image32x32>
				<image48x48>icon/48.png</image48x48>
				<image128x128>icon/128.png</image128x128>
			</icon>

.airファイルを作る

それではAIRファイルとして配布できるように書き出しを行います。これをリリースビルドと言います。ここまで来たら、もうゴールは目の前です！落ち着いて進めましょう。


[プロジェクト]→[リリースビルド書き出し]を選択し次に、「次へ」を選択します。

次に山場のデジタル署名です。これはアプリケーションが第三者に※改変されていないかを示す仕組みです。AIR Beta3ではここでの署名が必須になっています。

右のcreateを押して以下の項目を記述します。
publiser name　（あなたの名前）
password　（パスワード）

最後のSave asで保存します。このファイルはあなたがこのファイルを作成したことを示すものですので大切に保管して他の人の手に渡らないようにしてください。

先ほどのウイザードに戻ると思いますので「終了」を選択します。
そうするとFlexナビゲータの中にwidgetown.airが生成されます。

widgetown.airをクリックしてインストールできれば成功です！！


うまくいかない人は以下にソース一式があるので参考にしてください。

サンプルソースをダウンロード

サンプルAIRウィジェットはこちら

投稿おまちしています

さてお気づきかもしれませんが、今回の解説でロードするswfを変更すれば自分のウィジェットを作ることができます。 中のFlashを変えて自分のオリジナルのウィジェットを作ってぜひ投稿してください！

が、今日作ったウィジェットをそのままアップしてしまうと、同じウィジェットでwidgetownがいっぱいなってしまいます！！！（笑）是非、ご自分でカスタマイズしてアップしてくださいね。 今回の特集や「ゆる時計（仮）」のご意見・ご感想がありましたら、
「ゆる時計（仮）」詳細ページ の下部にあるコメント欄まで、どしどしお寄せください。
「ゆる時計（仮）」詳細ページはコチラ

あとがき

今回は、編集部から最後に一言。

実は、この記事通りに、編集担当の私Nもデスクトップウィジェットを作ってみたんです。

そしたらなんと！ちゃんとウィジェットが作れちゃいました～。

スクリプトどころかFlashも触ったことありません。というか、htmlだって書けません。。。
でも、そんな私でも、この記事の通りにやったら、ウィジェットが出来てしまいました！

というわけで、さらさらっと読んで「う～んムリかも」と思ったあなた！！
今すぐFlex Builderをダウンロードしてください。いや、しなさい。（笑）
そして、感動してください。
ウィジェットへの道も一歩から、です。


文：widgetown編集部
2008年2月5日

お知らせ/ニュース
特集 特集 昼下がりのレポート 特集 Monday Journal 特集 サンデープログラミング

リクエスト受付中

∗こんなウィジェットを作ってほしい！

サイトへのご意見

∗コンテンツを増やしてほしい！

他薦依頼

∗リンク先のフォームでお受けしてます！

■ はじめての方へ


■ 開発者の方へ


■ 広告掲載お申し込み

■関連リンク

totop