#navi(ソフトウェア基礎演習II/05)
-[[出席チェック]]

*Yahoo! Widget Engine [#o3d35560]

-Workshop http://widgets.yahoo.com/workshop/
**主なタグ [#rf916329]
詳細は,上記リンクのYahoo! Widget Engine Reference GUIDEを参照
#code(){{
<?xml version="1.0" encoding="(Your .kon file encoding)"?>: XMLとエンコーディングに関するXML宣言
<widget>: Widgetコードの開始タグ
<debug>: デバッグウィンドウの表示有無(on, off)
<version>: Widgetのバージョン定義
<minimumVersion>: 最低稼働バージョン条件
<window>: ウィンドウ定義
<name>: ウィンドウの名前を定義. JavaScriptから参照されます.
<title>: ウィンドウのタイトルを定義します. コントロール/右クリックでユーザにWidgetの名前を「About <title>」表示されます.
<height>: ウィンドウの高さをピクセルで定義.
<width>: ウィンドウの幅をピクセルで定義
<visible>: Widgetが可視か不可視か,ブール値 (1または 0, true または false) で定義. 
<image>: イメージの利用.
<name>: イメージオブジェクトの名前の定義. JavaScriptから参照されます.
<hOffset>: ウィンドウの左上角からイメージオブジェクトの水平オフセットピクセル値.
<vOffset>: ウィンドウの左上角からイメージオブジェクトの垂直オフセットピクセル値.
<hRegistrationPoint>: Xピクセル座標定義.(デフォルトで左端が0)
<vRegistrationPoint>: Yピクセル座標定義.(デフォルトで上端が0)
<rotation>: 回転角度数の定義
<opacity>: 透明度の定義,(0〜255,または,%)
<onMouseDown>: Imageオブジェクト上でマウスボタンが押された場合のイベントを定義
<onMouseUp>: Imageオブジェクト上でマウスボタンが放された場合のイベントを定義
<text>: テキストの利用.
<name>: テキストオブジェクトの名前を定義.JavaScriptから参照されます.
<data>: テキストの内容を定義.
<hOffset>: ウィンドウの左上角からTextオブジェクトの水平オフセットピクセル値.<alignment> タグから影響される.
<vOffset>: ウィンドウの左上角からTextオブジェクトの垂直オフセットピクセル値.テキストのベースラインがオフセットに利用される.
<alignment>: テキスト配置:左寄せ"left", 中央"center", and 右寄せ"right" 
<color>: テキストの色を16進数で定義 (例: #000000 is black, #8000FF is violet, #FFFFFF is white).
<font>: フォントの定義.
<size>: フォントサイズ(ポイント).
<opacity>: 透明度の定義,(0〜255,または,%)
<onMouseDown>: Textオブジェクト上でマウスボタンが押された場合のイベントを定義
<onMouseUp>: Textオブジェクト上でマウスボタンが放された場合のイベントを定義
<textarea>: テキスト入力の利用
<name>: テキストエリアオブジェクトの名前. JavaScriptから参照されます.
<hOffset>: ウィンドウの左上角からTextオブジェクトの水平オフセットピクセル値.<alignment> タグから影響される.
<vOffset>: ウィンドウの左上角からTextオブジェクトの垂直オフセットピクセル値.テキストのベースラインがオフセットに利用される.
<lines>: テキストエリアの行数の定義
<columns>: テキストエリアの列数(幅)の定義
<color>: テキストの色を16進数で定義  (examples: #000000 is black, #8000FF is violet, #FFFFFF is white).
<font>: 入力フォントの定義
<bgColor>: 入力バックグランドカラーを16進数で定義 (examples: #000000 is black, #8000ff is violet, #ffffff is white).
<bgopacity>: 透明度の定義,(0〜255,または,%)
<onKeyPress>: キー入力の利用
<action trigger="(Some event here)">: trigger属性で記述されるイベント時の実行記述
<about-box>: about-boxに表示されるイメージを定義.
}}
**サンプル [#w92193f6]
フォルダHelloWordを作り,その中にフォルダContentsを作る.
以下のソースをHelloWorld.konとしてセーブし,HelloWorld.png (HelloWorld.pngは,下欄のリンクより)とともに,HelloWord/Contents/に置く.
#code(){{
<?xml version="1.0" encoding="UTF-8"?> 
<widget> 
	<debug>on</debug> 

	//windowオブジェクト
	<window>
		<name>main_window</name> 	//Windowオブジェクト名
		<title>Hello World</title>	//ウィンドウのタイトル
		<height>200</height> 	//高さ
		<width>400</width> 		//幅
		<visible>true</visible> //可視
	</window> 

	//imageオブジェクト
	<image>
		<src>HelloWorld.png</src>	//表示する画像ファイル指定
		<opacity>100%</opacity>		//透明度
	</image>

	// textオブジェクト その1
	<text> 
		<name>myText</name> 	//Textオブジェクト名
		<color>#FF0000</color>	//カラー属性指定
		<bgColor>#00ffff</bgColor>	//バックグランドカラー属性指定
		<bgOpacity>150</bgOpacity>	//透明度
		<data>Hello World!</data>	//表示するテキストデータ
		<size>48</size> 	//フォントサイズ
		<alignment>center</alignment> //配置
		<vOffset>100</vOffset> //ウィンドウ左上角から下へのオフセット値
		<hOffset>200</hOffset> //ウィンドウ左上角から右へのオフセット値
	</text> 

	// textオブジェクト その2
	<text> 
		<name>OK</name> 
		<color>#FF0000</color> 
		<bgColor>#00ffff</bgColor> 
		<bgOpacity>150</bgOpacity>
		<data>OK</data>
		<size>48</size> 
		<alignment>center</alignment> 
		<vOffset>150</vOffset> 
		<hOffset>300</hOffset> 
		
		//マウスカーソルが入ったとき
		<onMouseEnter>
			//Textオブジェクトその1(オブジェクト名myText)のデータを"Enter"に書き換える
			myText.data = "Enter"
		</onMouseEnter>
		
		//マウスカーソルが出たとき
		<onMouseEXit>
			myText.data = "Hello World"
		</onMouseEXit>
		
		//マウスボタンが押されたとき
		<onMouseDown>
			myText.data = "Push"
		</onMouseDown>
		
		//マウスボタンが離されたとき
		<onMouseUp>
			myText.data = "Leave"
		</onMouseUp>
    </text>
</widget>
}}
***上記ソースファイルの説明 [#y856464e]
-起動して,1つの<window>オブジェクト,1つの<image>オブジェクト,<text>オブジェクト2つを表示する.
-ふたつめの<text>オブジェクト"OK"に,マウスを重ねたり押したりすることによって,最初の<text>オブジェクト"myText"を入れ替えて,表示を変更させる.
***フォルダ構成 [#kd2c8cd5]
 HelloWorld---Contents---HelloWorld.kon
                       +-HelloWorld.png

HelloWorld.konファイルをダブルクリックすれば,実行結果が得られる.
***Widgetとしての完成 [#s4de8e32]
-Macの場合
--一番上位のHelloWorldフォルダに「.widget」を追加する.
--自動的にHelloWorld.widgetフォルダには,アイコンがついて,Widgetファイルになる.
-Windowsの場合
--HelloWorldフォルダをzip圧縮して,HelloWorld.zipをつくる.
--HelloWorld.zipの「.zip」を「.widget」に書き換える.

 HelloWorld.widget---Contents---HelloWorld.kon
                              +-HelloWorld.png

#navi(ソフトウェア基礎演習II/05)

トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS