Yahoo!ウィジェットをFlashで作ってみる

Published by alt on 10月 27, 2008 04:55 pm Category[ サンプル ]　Tag[ ウィジェット, ソースコード ]　

Yahoo!ウィジェットサンプル

Yahoo!ウィジェットをFlashで作ってみました。
というかフォーマットに沿ってグラデの上に文字を乗っけたFlashを貼り付けてみただけです。
以下に開発にあたってのメモをとったので参考までに。
ソースファイルごとまるごとアップしたのでたぶんそっち見たほうが早いかも。
※ちなみにバージョンはFlashがサポートされた4.5で作ってあります。

【ウィジェットエンジンのインストール】

こちらからバージョン4.5のエンジンをインストールします。

————————————————————————-

【.widgetパッケージにするためのファイル構造】

widgetTest（アプリ名）
　｜
　― Contents
　　　｜
　　　― widget.xml（環境設定ファイル）
　　　― widgetTest.kon（アプリ名.kon）←適当なエディタで.konで保存する
　　　― js
　　　　　｜
　　　　　― sample.js（サンプルjs）
　　　― swf
　　　　　｜
　　　　　― sample.swf（貼り付けswf）
　　　― images
　　　　　｜
　　　　　― sample.png（サンプル画像）

————————————————————————-

【環境設定ファイル widget.xml】

widget.xmlファイルはウィジェットの実行には不要ですが、強く推奨します。
このファイルは、ウィジェットの名前、作者、組織、著作権情報、およびウィジェットドックおよびセキュリティダイアログにより使用される画像への相対パスなどのウィジェットに関する情報を指定します。
widget.xmlには識別子の付与のため、フィールドがあります。
例：　425b0c3e-fd99-11db-8314-0800200c9a66
http://widgets.yahoo.com/widgets/uuid-vaultのツールを使って、UUIDを生成してください。

————————————————————————-

【ウィジェットのデバッグ方法】

widgetTest.konに
< setting name="debug" value="on" />を記述し、
デバッガをonにした状態でwidgetTest.konをダブルクリックします。
アプリが書き出されるのと同時にデバッガも起動します。
変更内容が反映されていないときはデバッガのReloadボタンを押しましょう。

————————————————————————-

【ウィジェットのパッケージング】

パッケージングにはウィジェットの形式の変換を行うウィジェット「ウィジェットコンバーター」を
以下からダウンロードします。
http://widgets.yahoo.co.jp/workshop/
使い方はサンプルで作ったwidgetTestフォルダをウィジェットコンバーターにドラッグ＆ドロップして変換を押すだけ。

————————————————————————-

【ウィジェットのアップデート】

修正したいバグを発見したり、追加したい新機能があるときは
ギャラリーアップロードツールを使って更新することができます。
ウィジェットを更新すると、あなたのウィジェットのユーザーは通知され、アイコンをクリックするとユーザーに新規バージョンに更新したいかどうかを尋ねるダイアログが生成されます。
ユーザが同意した場合は、新規バージョンが自動的にダウンロードされ、インストールされます。
※この機能はアメリカのYahoo! Widgetsに投稿した場合にのみになります。

————————————————————————-

【ウィジェットのデジタル署名】

ウィジェットエンジンではウィジェットファイルへのデジタル署名をサポートしています。

————————————————————————-

【懸念事項】

・ユーザーマシンにYahoo!ウィジェットエンジンのインストールが必要。
・3.0、4.0、4.5で多少仕様が変わっている。
・Flashがサポートされたバージョン4.5以降で作った場合、ユーザー側のエンジンがそれより古いときはどうなるのか？
・ランタイムインストールの際、チェック外すの忘れてYahoo!メッセンジャーやらYahoo!ツールバーを入れちゃう人いそう。
・最初からダウンロードセットに含まれたアプリやMacのドックみたいなのが画面を埋める。Googleデスクトップとバッティングしたら余計邪魔。
・Flash上のみドラッグできません。（JSとの連携ならできる？）
　http://labs.anthill.jp/2007/12/yahoo_widgetsflash.html
・Flash内の文字のエッジが荒れます。
（貼り付け前のSWF単体ではもちろんきれいに表示されています）
Yahoo!ウィジェットSWFサンプル
————————————————————————-

【サンプルソース】

widgetTest.kon

<?xml version="1.0" encoding="utf-8"?>

<widget version="1.0" minimumVersion="4.5" name="widgetTest">

    

    //デバッグ

    <settings>

        < setting name="debug" value="on" />

    </settings>

    

    

    //画面設定

    <window name="widgetTestWindow" title="widgetTest" width="500" height="230" visible="true" shadow="1" style="background-color:#FFFFFF">

        

        

        //テキスト挿入サンプル

        <text name="myText" data="Hello World!">

            <hOffset>355</hOffset>

            <vOffset>180</vOffset>

            <size>18</size>

            <color>#000000</color>

            <bgColor>#ffffff</bgColor>

            <bgOpacity>255</bgOpacity>

        </text>

        

        //画像挿入サンプル

        <image src="images/sample.png">

             <hOffset>350</hOffset>

             <vOffset>50</vOffset>

             <onMouseDown>

             </onMouseDown>

        </image>

        

        //FLASH挿入（minimumVersionは4.5以降でFLASH使用可能）

        <flash src="swf/sample.swf">

            <name>flashView</name>

            <vOffset>0</vOffset>

            <hOffset>0</hOffset>

            <width>300</width>

            <height>230</height>

            <scale>noScale</scale> //showAll,noBorder,exactFit,noScale

            <useFlashContextMenu>false</useFlashContextMenu> //コンテクストメニュー

            //<base></base> //Flash Playerムービーですべての相対パスを解決するために使用する基準となるディレクトリパスま

たはURLを指定

            <allowNetworking>all</allowNetworking> //ネットワーク機能を有効

            <minVersion>524288</minVersion> //必須の最低のFlashバージョンを指定（バージョンx65536の倍数として指定）

            <quality>High</quality> //品質

            var currentMode = myFlash.wMode; //WMODE

        </flash>

        

        

        //その他オブジェクト

        <canvas />

        <textarea />

        <frame />

        <scrollbar />

        <script />

        

    </window>

    

    

    //アクション設定

    <action trigger="onLoad">

        include("js/sample.js"); //外部jsファイルの実行

    </action>

    

    <action trigger="onMouseDown">

        //closeWidget(); //閉じる処理

    </action>

    

    

    //プリファレンス設定（ユーザーによるカスタマイズ機能の追加）

    <preference>

        <name>continentSelector</name>

        <title>番号:</title>

        <type>popup</type>

        <option>1</option>

        <option>2</option>

        <option>3</option>

        <defaultValue>1</defaultValue>

        <description>番号を選択してください。</description>

    </preference>

    <preference>

        <name>textColorPref</name>

        <title>色:</title>

        <type>color</type>

        <defaultValue>#FF0000</defaultValue>

        <description>色を選択してください。</description>

    </preference>

    <preference>

        <name>textFontPref</name>

        <title>フォント:</title>

        <type>font</type>

        <defaultValue>Futura Medium</defaultValue>

        <description>フォントを選択してください。</description>

    </preference>

    <preference name="timerIntervalPref">

        <title>更新頻度:</title>

        <type>slider</type>

        <minLength>1</minLength>

        <maxLength>10</maxLength>

        <ticks>10</ticks>

        <tickLabel>1</tickLabel>

        <tickLabel>秒数</tickLabel>

        <tickLabel>10</tickLabel>

        <defaultValue>1</defaultValue>

        <description>更新頻度を選択してください。</description>

    </preference>

    

</widget>

widget.xml

<?xml version="1.0" encoding="utf-8"?>



//セキュリティ

<security>

</security>



//メタデータ

<metadata>

    <name>widgetTest</name> //ウィジェット名

    <version>1.0</version> //ウィジェットタグのバージョン

    <identifier>com.yahoo.widget.widgetTest</identifier> //ウィジェットを区別するID（UUID推奨）

    <image usage="dock" src="images/sample.png"/> //ドック表示の時の画像

    <image usage="security" src="images/sample.png"/> //初回実行時等のセキュリティーダイアログでの画像

    <author name="alt" organization="alt" href="http://blog.alt-scape.com"/> //セキュリティーダイアログ等に表示されるウィジェットの作者情報

    <copyright>(c) 2007-2008 alt.</copyright> //ウィジェットの著作権

    <desciption>これはテストサンプルです</ desciption > //ウィジェットの説明

    <platform minVersion="4.5" os="windows"/> //ウィジェットの動作するエンジンの最小バージョンおよびプラットフォーム

</metadata>