SQLの窓 イラストAC フリー素材

2012年06月14日

Windows8(JavaScript Metro Style 導入) 関連リンク

サンプルコードダウンロード( Metro style - C#, VB.NET, C++, JavaScript )

JavaScript では、世の中の一般的なライブラリが動作します。jQueryThree.js も動作確認済です



API reference for Metro style apps

API 部分はまだ日本語化されていません。

JavaScript

WinJS Namespace

WinJS API は JavaScript で書かれています。 XMLHttpRequest を使う為の使いやすい関数である xhr function が定義されています

※ Windows8 の XMLHttpRequest の POST メソッドのテストの為に、超簡易掲示板を授業中に作成

また、Metro JavaScript は jQuery を元に作られているようで、その中核となる処理が、WinJS.Promise objectPromise.then method です。サンプルコードを読むには、この扱いを知っていないと理解できない部分が多くなりますが、要するに ( 成功, 失敗, プログレス ) という処理を非同期で行う為の仕様です。


Windows.UI.Popups namespace

これはメッセージボックスにあたるものですが、UI 的にはウインドウではなく画面の左右いっぱいに広がる細い帯のようなものになります。

JavaScript のオブジェクト

ここは日本語になっていますが、直訳なのであまり解りやすいものではありません。しかし、Debug オブジェクトがあるのでチェックしておく必要があります。write と writeln メソッドでデバッグ情報を出力します。

JavaScript の参照

ここは JavaScript そのもののリファレンスです。ステートメントで debugger ステートメント をチェックしておいて下さい。これが書かれたところでブレークポイントを設けたのと同じ結果になります。


Windows.Storage namespace

ここは、ローカルファイルのアクセス方法です。サンプルコードに『File access sample』というそのままのものがありますが、最初にアプリ使用するファイルを作成する仕様になっています。これは、セキュリティ上の仕様らしく、Windows で作成したファイルをそののまではアプリからアクセスできません。アプリと関連付けして初めて使えるようになるようです。


WinJS.Namespace Namespace

妙な名前の API ですが、多用されています。参照を統一する為の名前を定義するもので、JavaScript のスコープ外から名称を参照する為に共通仕様的に最初に定義して使います。


LiveSDK

Download the Live SDK
( 日本語ページから行くとなにかまだ挙動がおかしいです )

JavaScript API (Windows 8 Consumer Preview and web)

WindowsConsumerPreview やその他の環境で、Microsoft の Live SDK を試す為の情報

Windows8 Metro(JS) で LiveSDK を使って signin してテキスト表示するだけのサンプルコードの実行

Windows8 で SkyDrive にアップロードするサンプル



アプリの登録やその情報の使い方が慣れて無い人には解りにくいかもしれませんが、Twitter のアプリを作った経験のある人には常識的な内容です。LiveSDK は、Android バージョンもとてもうまく動いています。
( LiveSDK-for-Android のサンプルプロジェクトのビルド手順 )

LiveSDK-for-Android ビルド手順 - NAVER まとめ


posted by at 2012-06-14 07:48 | オワコン | このブログの読者になる | 更新情報をチェックする

2012年06月05日

Windows 8 Release Preview のコントロールパネルの Flash Player 設定マネージャ











タグ:Windows8 Flash
posted by at 2012-06-05 14:31 | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月31日

Windows8 の XMLHttpRequest の POST メソッドのテストの為に、超簡易掲示板を授業中に作成

toypark は、オンラインで WEBベースの クライアントアプリがあるので、直接タイプして登録。最初、Seesaa のブログの記事のコメント欄を使ってたら、しばらくしてスパム扱いされて書き込み禁止になってしまったので・・・

で、Windows8 が UTF-8 で、他のキャラクタセットの URL エンコードが必要になったので、ecl.js をベクターからダウンロードして、Windows8 に実装しましたが、普通に動きます。ほんと、このライブラリは良くできています。
<?
header( "Content-Type: text/html; Charset=shift_jis" );
header( "pragma: no-cache" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
header( "Cache-control: no-cache" );

error_reporting(E_ALL ^ E_NOTICE);

ini_set( 'display_errors', "1" );

?>
<html>
<form method="POST">
<textarea name="text"></textarea>
<input type="submit" name="send" value="送信">
</form>
<?
$text = @file_get_contents("./text.log");


if ( $_POST['send'] != "" ) {
    $text .= "<br />\n" . $_POST['text'];
    file_put_contents("./text.log", $text );
}


print $text;
?>
</html>
以下のコードは、Windows8サンプルの『Secondary tiles sample』の中にあります。これは、データを決め打ちで処理していますが、ecl.js は正しく動作しています。
( JavaScript のみで、日本語が Shift_JIS に変換されて URL エンコードされます )

★ コンシューマからリリースの変化で、サンプルの中身も変わったようです。
★ XMLHttpRequest のサンプルは、Metro style banking app with strong authentication sample を見て下さい

    function scenario7RefreshChannels() {
        var serverUrl = document.getElementById("serverUrlField").value;

        // Send the channel to the server
        var xhr = new WinJS.xhr({
            type: "POST",
            url: serverUrl,
            headers: { "Content-Type": "application/x-www-form-urlencoded" },

            // Send the tile id of the secondary tile for handling in your service, in addition to the channelUri
            data: "tileId=abc&channelUri=xyz"

        }).then(function (req) {
            id("scenario7Output").innerHTML += req.response;
        }, function (req) {
            sdkSample.displayError("Could not send channel URI to server: " + req.statusText);
        });
    }
関連する記事

JavaScript のみで、SHIFT_JIS や EUC-JP を UrlEncode に近い Escapeする Escape Codec Library


posted by at 2012-05-31 20:42 | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月27日

AIR+FLARToolkitサンプル開発キット / collada(dae)とメタセコイア(mqo)ローダ実装済



吹き出しはデータとして添付しました。表示エリアと同じ大きさで、吹き出し部分以外は透過です。セリフとモンスターの汗はマウスドラッグで直書きです。miku(はちゅね) の向こうに見えている手は、ALT + PrintScreen ですね、すいません。



左の miku は、メタセコイアで、右の miku は、collada です。



さて、やっと AIR におもちゃがのっかりました。あとは、これを Android の apk でビルドしてどーなるかなんですが・・・。これが動かないと、いまどき papervision3d を引っ張り出した意味が無いんですが、メタセコデータがそのままロードできるし、Google ギャラリーの dae がロードできるはずです。3年前の WEB 上で結構な建物とかが回ってたので、ローカルのいまどきの PC ならストレス無く動くと思うのです。

結構多くのいろいろな著作物が同梱されています。

AIR の入れ物と、zip でロードして来るところを自分で作成しました。(沢山のフリーソフトに感謝です)

■ リソースの著作権とライセンス等

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

FLARToolkit
saqoosha
[GPL License]

Papervision3D
[MIT ライセンス]

zip 書庫の処理
David Chang
[GPL License]

モンスター 3D モデル
光陰像型

negimiku_dae.zip
note.x さん

muku01.mqo
ファイル保管庫@七葉(nh0019.zip)

初音ミクのライセンス
クリプトン・フューチャー・メディア株式会社
[ピアプロ・キャラクター・ライセンス]


本当はオブジェクト毎に設定できるようなものを作ってしまえば、ジオラマ的なおもちゃ箱が出来上がると思うんですが、そんな時間は無いのが現実なのです・・・・。ははは

※ ちなみに、こんな画像をディスプレイに表示してカメラ向けても AR は作動します。




posted by at 2012-05-27 20:50 | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月21日

AIR Flex4 で WEB カメラを最も簡単に実装する方法

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

VideoDisplay を使って、ムービを簡単に再生できましたが、ムービーをロードした状態からだと、特に難しい事を意識しなくてもWEB カメラを表示できます。ダミーでお好きな画像が初期表示される mp4 等を用意すれば OK です。







撮影した画像





Panel を画像化しているので全体が画像化されています。撮影ボタンを押すと、ファイルを保存する為のダイアログが表示されるので、このままではつかいにくいので注意して下さい。
ソースを見る
タグ:AIR flex
posted by at 2012-05-21 20:58 | オワコン | このブログの読者になる | 更新情報をチェックする

2009年末に作った Flex3 + FLARToolkit のソースを Flex4 に書き直しました

2009年バージョンはこちらです。zipfile ボタンで、.mqo と テクスチャの入ったファイルを読み込んで表示させる事ができます。当時作りっぱなしで放置していて、ソースを公開するのを忘れてたので再構築しました。

2009年バージョン + はちゅね



けっこういろんな人がかかわったソースが同梱されています。基本は FLARToolkit ですが、これのライセンスは GPL です。あと、メタセコイアをロードする為のソースとかもろもろ。

FLARToolkit のソースは当時の一番古いものです。今はもうちょっと新しいのがありますが( 二つ対象表示できる? )、3D 表示の元となるのが Papervision3D で、これは 2010 年に開発が止まってしまったソフトウェアで、忘れられてしまった感があります。しかし、PC もよくなったし、AIR で動かしていると結構なレスポンスなので、再び引っ張り出していろいろテストしています。ブラウザで動かす WebGL よりもレスポンスいいし、AIR ならアンドロイドで動くかもしれないので、おもしろいかもしれません。

Flex4バージョン



AR では、マーカーが必要なので、簡単にテストできるように画面上に画像貼っているので、そこへカメラを向ければ 3D モデル等を表示できます。画面上でドラッグすると字が書けますし、透過の画像をうまく配置すると吹き出しにセリフいれたり、その画像を 3D としてロードしてもいいです。ただ、3D 平面と 3D 球は位置固定なので使い勝手は悪いです。3D モデルは、データの座標を移動すれば位置は変えれますけど。



モデルは複数ロードできるので、座標を調整すると並んで表示できますが、なにもしないとこんな事になりますwww



※ 書いた文字は、色を白に変えて書くとリセットされます。


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:mx="library://ns.adobe.com/flex/mx"
	xmlns:s="library://ns.adobe.com/flex/spark"
	applicationComplete="initOk();"
	usePreloader="true"
>

<fx:Script>
<![CDATA[

	import mx.controls.*;
	import mx.events.*; 
	import mx.formatters.*;
	import mx.graphics.codec.PNGEncoder;
	import flash.external.*;
	import flash.media.Camera;
	import org.libspark.pv3d.Metasequoia_v;

	private var camera:Camera;
	private var fRef:FileReference;
	private var loader:Loader;
	private var actType:int = 0;

	private var sc:SimpleCube;

	private var m_status:Boolean = false;
	private var cvs_thickness:Number = 4;
	private var cmd_cnt:Number = 0;
	private var bmp:BitmapData = null;
	private var mqo_v:Metasequoia_v = null;

	// *********************************************************
	// ログ表示
	// *********************************************************
	public function firebug(data:Object):void {
	
		var fmt:DateFormatter = new DateFormatter();
	
		fmt.formatString = "YYYY/MM/DD HH:NN:SS";
		var logdt:String = fmt.format( new Date );
	
		ExternalInterface.call(
			"console.log", logdt,
			data+""
		);
	
	}

	// *********************************************************
	// 初期処理
	// *********************************************************
	public function initOk():void {

		// NumericStepper のイベント処理
		ns.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.scale = ns.value;
				}
			}
		);
		ns2.addEventListener( flash.events.Event.CHANGE,
			function(e:flash.events.Event):void {
				if ( mqo_v != null ) {
					mqo_v.rotationX = ns2.value;
				}
			}
		);

		camera = Camera.getCamera();
		if ( camera ) {
			sc = new SimpleCube();
			myImage.rawChildren.addChild(sc);
			firebug("FLARToolKit を追加しました");
		}


		// ファイルリファレンスの準備
		fRef = new FileReference();
		// ファイル保存用ダイアログを表示して保存する
		// ビルドに -target-player=10.0.12 オプションが必要
		// 以下の例では、エラー以外のイベントには空の無名関数が関係づけられています
		fRef.addEventListener(Event.OPEN, function(e:Event):void {} );
		fRef.addEventListener(ProgressEvent.PROGRESS, function(e:ProgressEvent):void {} );
		fRef.addEventListener(Event.COMPLETE, function(e:Event):void {

			firebug( actType );
			// 処理完了後の処理

			// 読み出す
			if ( actType == 0 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					myImage.rawChildren.addChild(e.target.content);
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}
			if ( actType == 2 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageNormal(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			if ( actType == 3 ) {
				loader = new Loader();
				loader.loadBytes(FileReference(e.target).data);
				loader.contentLoaderInfo.addEventListener(Event.INIT,function(e:Event):void{

					firebug( "追加しました1" );
					if ( camera ) {
						sc.loadImageBall(e.target.content);
					}
					firebug( "追加しました2" );
					firebug( e.target.content );
				});
				firebug( "ロードが完了しました" );
			}

			// 保存が完了
			if ( actType == 1 ) {
				firebug( "保存が完了しました" );
			}
		} );
		fRef.addEventListener(Event.CANCEL, function(e:Event):void {} );
		fRef.addEventListener(Event.SELECT, function(e:Event):void {
			// ファイル選択後の処理
			if ( actType == 0 ) {
				firebug( "ロードします" );
				FileReference(e.target).load();
				firebug( "ロードを開始しました" );
			}
			if ( actType == 2 ) {
				firebug( "3D平面ロードします" );
				FileReference(e.target).load();
				firebug( "3D平面ロードを開始しました" );
			}
			if ( actType == 3 ) {
				firebug( "3D球面ロードします" );
				FileReference(e.target).load();
				firebug( "3D球面ロードを開始しました" );
			}
			if ( actType == 1 ) {
				firebug( "保存します" );
			}
		} );
		fRef.addEventListener(IOErrorEvent.IO_ERROR, fRefError );


		// *************************************************
		// メタセコイア拡張のロード完了
		// *************************************************
		mqo_v = new Metasequoia_v();
		mqo_v.addEventListener(Event.COMPLETE, function(e:Event):void {

			sc.loadMqo(mqo_v);
			mqo_v.rotationX = -90;
			mqo_v.scale = 1;
			ns.value = 1;
			ns2.value = mqo_v.rotationX;

		});

	}

	// *********************************************************
	// 撮影と保存( Flash 全体 )
	// *********************************************************
	public function shot():void {

		myPanel.title = comment.text;

		var bitmap:Bitmap = new Bitmap();
		var bitmapData:BitmapData = new BitmapData(shotarea.width, shotarea.height);
		bitmap.bitmapData = bitmapData;
		bitmapData.draw(shotarea);

		var pngEnc:PNGEncoder = new PNGEncoder();
		var png:ByteArray = pngEnc.encode(bitmap.bitmapData);

		firebug( "撮影しました" );

		actType = 1;
		fRef.save( png, "shot.png" );

	}

	// *********************************************************
	// IOエラー
	// *********************************************************
	public function fRefError( e:IOErrorEvent ):void {
		Alert.show(e.text);
	}

	// *********************************************************
	// マウスダウン
	// *********************************************************
	public function Mouse_Down(e:flash.events.MouseEvent):void {

		m_status = true;
		cvs.graphics.moveTo(
			e.localX,
			e.localY
		);

	}

	// *********************************************************
	// マウスアップ
	// *********************************************************
	public function Mouse_Up(e:flash.events.MouseEvent):void {

		m_status = false;

	}

	// *********************************************************
	// マウス移動
	// *********************************************************
	public function Mouse_Move(e:flash.events.MouseEvent):void {

		if ( m_status ) {

			cvs_thickness = 4;
			if ( cp.selectedColor == 0xffffff ) {
				bmp = new BitmapData(640,480,true,0x00000000);
				cvs.graphics.clear();
				cvs.graphics.beginBitmapFill(bmp); 
				cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
				cvs.graphics.endFill(); 
				cp.selectedColor = 0x000000;
				cvs.graphics.moveTo(
					e.localX,
					e.localY
				);
				return;
			}
			cvs.graphics.lineStyle(
				cvs_thickness,
				cp.selectedColor,
				1
			);
			cvs.graphics.lineTo(
				e.localX,
				e.localY
			);
			cmd_cnt++;
			if ( cmd_cnt > 20 ) {
				cmd_cnt = 0;
				Convert_bmp();
			}
			cvs.graphics.moveTo(
				e.localX,
				e.localY
			);
		}
	}

	// *********************************************************
	// 変換
	// *********************************************************
	public function Convert_bmp():void {

		if ( bmp == null ) {
			bmp = new BitmapData(640,480,true,0x00000000);
		}

		bmp.draw(cvs);
		cvs.graphics.clear();
		cvs.graphics.beginBitmapFill(bmp); 
		cvs.graphics.drawRect(0, 0, bmp.width, bmp.height); 
		cvs.graphics.endFill(); 

	}


]]>
</fx:Script>

<s:Panel
	id="myPanel"
	title="{comment.text}"
	top="10"
	left="10"
	right="10"
	bottom="10"
	mouseDown="Mouse_Down(event)"
	mouseUp="Mouse_Up(event)"
	mouseMove="Mouse_Move(event)"
	mouseOut="Mouse_Move(event)"
>
<s:BorderContainer id="shotarea" left="10" top="10">
	<mx:Canvas
		id="myImage"
		width="640"
		height="480"
	>
	</mx:Canvas>
	<s:SpriteVisualElement
		id="cvs"
		width="640" height="480"
	>
	</s:SpriteVisualElement>
</s:BorderContainer>

<s:VGroup left="10" y="500">
	<s:HGroup paddingTop="10">
		<mx:ColorPicker id="cp" showTextField="true" />
		<s:Button
			styleName="blackButton"
			id="shotButton"
			label="シャッターを押す"
			click="shot();"
			toolTip="撮影"
		/>
		<s:Button
			styleName="blackButton"
			id="loadButton"
			label="ローカル画像のロード"
			click="actType=0;fRef.browse();"
		/>
		<s:TextInput
			id="comment"
			width="250"
			text="メタセコイアとその他のロード"
		/>
	</s:HGroup>
	<s:HGroup paddingTop="10">
		<s:Button
			styleName="blackButton"
			id="load3DButton1"
			label="3D平面ロード"
			click="actType=2;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton2"
			label="3D球面ロード"
			click="actType=3;fRef.browse();"
		/>
		<s:Button
			styleName="blackButton"
			id="load3DButton6"
			label="メタセコイアとテクスチャの入った ZIP 書庫"
			click="mqo_v.browse('zip');"
		/>
	
		<s:NumericStepper
			id="ns" 
			minimum="0.1"
			 maximum="5" 
			stepSize="0.1" 
			value="1.0" 
			width="60"
		/>
	
		<s:NumericStepper
			id="ns2" 
			minimum="-180"
			 maximum="180" 
			stepSize="10" 
			value="-90" 
			width="60"
		/>
	
	</s:HGroup>
</s:VGroup>


</s:Panel>


</s:Application>

Flex3 から Flex4 の移行にあたって、FLARToolkit のベースとなる Canvas はそのままにしていますが、他は Flex4 仕様です。ColorPicker は、mx しか無いようなのでそのままですが、Flex4 になって結構面倒な仕様変更が多かったですね。やっぱこれじゃあ、日本じゃまだはやんないと思います・・・・はあ。





著作者情報

FLARToolkit
saqoosha
[GPL License]

Metasequoia.as
Copyright (c) 2007-2008 rch850
Metasequoia_v.as
改造 : lightbox

TGADecoder.as
 Copyright (c) 2008 rch850

BMPDecoder.as
Copyright (c) 2007 munegon

Papervision3D
MIT ライセンス

モンスター 3D モデル
光陰像型(3Dキャラ)
初音ミクのライセンス
■ 権利者 : クリプトン・フューチャー・メディア株式会社
■ ライセンス名 : ピアプロ・キャラクター・ライセンス
( ※ キャラクター利用のガイドライン )



しかし、Google Chrome に埋め込まれてる Flash は、Flex でテキスト入力しようとすると、日本語が入力されないというバグがあります。標準の Flash に変更すれば正常になりますが、一般の人には無理でしょうから、作り手は HTML 上で入力させて取り込むという作業が必要ですね。やっぱはやんないなぁ・・・・

▼ 以下はその手順です。



chrome:plugins で表示したページの右上から詳細表示にしてすべての Flash プラグインを表示して、Windows なら gcswf32.dll を無効にする。


ひとりごと

マーカーを 3D 表示させて、そこに カメラ向けるとどうなるんだろ。


タグ:AIR flex FLARToolKit
posted by at 2012-05-21 11:50 | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月16日

Windows8 + LiveSDK のサンプルコードの実行



Live SDK のダウンロード

Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成します。( アプリケーション名を登録して、ID を取得する )

▼ Visual Studio より参照設定


▼ 実行




▼ 承認時に、Microsoft サイトに登録されたアプリケーション情報

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>SkyApp</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <script src="///LiveSDKHTML/js/wl.js"></script>

    <!-- SkyApp references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>
</head>
<body>
    <h1>JavaScript Code Sample</h1>
    <div id="signin"></div>
    <label id="info"></label>
    <script>
        WL.Event.subscribe("auth.login", onLogin);
        WL.init({
            scope: ["wl.signin", "wl.basic"]
        });
        WL.ui({
            name: "signin",
            element: "signin"
        });
        function onLogin() {
            WL.api({
                path: "me",
                method: "GET"
            }).then(
                function (response) {
                    document.getElementById("info").innerText =
                        "Hello, " + response.first_name + " " + response.last_name + "!";
                },
                function (responseFailed) {
                    document.getElementById("info").innerText =
                        "Error calling API: " + responseFailed.error.message;
                }
            );
        }
    </script>
</body>
</html>



タグ:Windows8 LiveSDK
posted by at 2012-05-16 18:10 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月12日

WindowsConsumerPreview やその他の環境で、Microsoft の Live SDK を試す為の情報

ダウンロード

Live Connect Downloads
Windows8 とWindows Phone の場合 SDK のインストールが必要になります
その他ではそれぞれ違いますが、基本はソースパッケージのダウンロードのようです。

すぐ試せるのは、Code Samples 内の PHP バージョンです。

Windows8 での手順

Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携
( Windows 8 アプリ開発者ブログ )

SDK をインストール後、Live Connect のアプリ管理 (英語) サイトで、Metro スタイル アプリをマイクロソフトのクラウド サービスにアクセスするように構成。

設置方法は英文ですが、SDK ダウンロードページからリンクされているので信頼できそうです。

WEB 版での設置も含めたページはこちらから( 内容は同じだと思います )

WEB からのアクセス

アップロードやダウンロードはできませんが、参照は簡単にできるようで、日本語の記事があります

使ってみよう! Windows Live SDK/API



タグ:Windows8 LiveSDK
posted by at 2012-05-12 12:47 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年05月04日

Adobe AIR Flex をだれでも簡単に作成できるパッケージ : ★ 超シンプル FLV プレーヤー ★

2012/5/4 : バグ修正

ビデオのロード後のイベントは、durationChangeでは無く、
creationComplete で行う必要がありました。
( 大きいファイルでは情報を取得する為の準備が完了していませんでした )
Flex3 の時に作成したものを flex_sdk_4.6 で動作するように調整しました。 AIR の SDK は必要ありません。出来上がったアプリケーションを、自身の PC にインストールしないのであれば、AIR の ランタイムも必要ありません。 ▼ 実行画面 ( ウインドウのサイズ変更は、右下の角をドラッグします ) MKEditotr で簡単に修正やビルドができます http://www.mk-square.com/ ▼ SOFTWARE => MKEditor for Windows => Download Information ▼ MKEditor for Windows Version 3.9.9-J 開発環境 1) Java6 ( Java7 では、パッケージ作成でエラーが出ます ) ( PATH 環境変数に設定する必要があります ) 2) flex_sdk_4.6 ( SDK の場所は、パッケージ内の設定ファイルに記述します / Java も OK ) 3) Microsoft Visual C++ 2010 再頒布可能パッケージ (x86) ( 既にインストールされている場合は fcsh 実行時にエラーが出ません ) ※ 日本語ドキュメントのダウンロードは公式では無いですが以下にあるようです http://help.adobe.com/ja_JP/Flex/4.0/Flex_4_docs.zip と言うか、以前は公式にリンクがあったのですが内容が古い為、公式なリンクが 消えているのが実情だと思います。過去にも何度かこういう事がありました。 Flex3 はこちら http://livedocs.adobe.com/flex/3_jp/flex3jp_documentation.zip ちなみに、Flex2 のダウンロードも生きているようです http://download.macromedia.com/pub/documentation/jp/flex/2/flex201_documentation.zip オンラインドキュメント Flex4 リファレンス : 日本語オンライン Adobe AIR Android と iOS 用の設定 Flex3 日本語汎用マニュアル Adobe Flex 4.6 英文マニュアル 重要な公式テクニカルアーティクル Flex 4 マスターシリーズ #04 Flex 4 CSS Flex 4 マスターシリーズ #05 Spark コンポーネント Flex 4 マスターシリーズ #07 Spark Skining part 1 Flex 4 マスターシリーズ #10 Flex 4 Spark Layouts 関連する記事 ビルド手順(1) : コマンドプロンプトの設定 ビルド手順(2) : SDKの設定 ビルド手順(3) : コマンドプロンプトでビルド デバッグ実行 デバッグ用ログ出力 Flex で定義されているスキンを使って『外観』をかっこよく AIR アプリケーション記述ファイルについて FLVプレーヤーをもっと簡単に。VideoDisplay を VideoPlayer に変更する Spark のスキンを使った時のウインドウサイズ変更オペレーション ▼ こちらでは、まとめた時のちょっとした情報とソースを貼ってあります 2年半ぶりに Air Flex のコードを整備しましたが、 相変わらず欲しい情報が見つからないのが Adobe のようです
posted by at 2012-05-04 22:46 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年04月13日

アプリケーションバーを追加する : Win8 Metro(JS)

サンプルID

JavaScript and HTML5 touch game sample

オプションの意味についてはこちらのリファレンスを参考にします

<body>
    <!-- App bar -->
    <div id="appbar" data-win-control="WinJS.UI.AppBar" aria-label="Command Bar" data-win-options="{
        commands:[
            {id:'home', label:'Menu', icon:'&#xE10F;', section: 'global', onclick: GameManager.navigateHome},
            {id:'play', label:'Game', icon:'&#xE102;', section: 'global', onclick: GameManager.navigateGame},
            {id:'rules', label:'Rules', icon:'&#xE104;', section: 'global', onclick: GameManager.navigateRules},
            {id:'scores', label:'Scores', icon:'&#xE113;', section: 'global', onclick: GameManager.navigateScores},
            {id:'credits', label:'Credits', icon:'&#xE10C;', section: 'global', onclick: GameManager.navigateCredits},
            {id:'newgame', label:'New', icon:'&#xE10E;', section: 'selection', onclick: GameManager.game.newGame},
            {id:'pause', label:'Pause', icon:'&#xE103;', section: 'selection', onclick: GameManager.game.togglePause}
        ]}"></div>
</body>

"selection"は、選択したオブジェクトのコンテキスト内で表示するように意図されているコマンド
のためのものです。"global"は、常に特定のページに表示するコマンドです。

関連する Microsoft の暫定ドキュメント

メトロスタイルのアプリ用ナビゲーションの設計

GameManager はオブジェクトでは無く、このアプリで定義されている名前空間です
( メソッドは、default.js 内で定義されているユーザーメソッドです )

    WinJS.Namespace.define("GameManager", {
        navigateHome: navigateHome,
        navigateGame: navigateGame,
        navigateRules: navigateRules,
        navigateScores: navigateScores,
        navigateCredits: navigateCredits,
        showPreferences: showPreferences,
        onBeforeShow: onBeforeShow,
        onAfterHide: onAfterHide,
        game: game,
        state: state,
        assetManager: assetManager,
        scoreHelper: scoreHelper,
        gameId: gameId,
        touchPanel: touchPanel
    });



posted by at 2012-04-13 22:19 | Comment(0) | オワコン | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。

また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。

※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです

対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。


※ エキスパートモードで表示しています

アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります

<% if:page_name eq 'archive' -%>
アーカイブページでのみ表示される内容
<% /if %>

<% if:page_name eq 'category' -%>
カテゴリページでのみ表示される内容
<% /if %>

<% if:page_name eq 'tag' -%>
タグページでのみ表示される内容
<% /if %>
この記述は、以下の場所で使用します


Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX