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 | オワコン | このブログの読者になる | 更新情報をチェックする

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) | オワコン | このブログの読者になる | 更新情報をチェックする

2012年03月25日

Spark のスキンを使った時のウインドウサイズ変更オペレーション : Adobe AIR Flex

ベースアーティクル

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


▼ この記事の本文



サンプルの Panel の背景色を黒にしていたのでサンプルでは見えませんが
右下の隅にドラッグできる小さな三角形のエリアがあり、それを使ってウイ
ンドウサイズを変更します。

※ 画像は、背景を白にしています
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";

s|Panel {
	backgroundColor:white;
}

</fx:Style>
Flex4 の CSS 指定は基本的には Flex3 の時と同じ記述方法なんですが、
名前空間の指定が無いと、そもそも対象を限定できないようになってい
ます。

要素記述でも xmlns:s="library://ns.adobe.com/flex/spark" となっていますが、
それと合わせて @namespace s "library://ns.adobe.com/flex/spark"; という記述
で表現を統一しているようです( 実際には s は変更できるはずです )

機能としてのバージョンアップは、# による id セレクタと 子孫セレクタが使える
ようになっています。

Flex 4 マスターシリーズ #04 Flex 4 CSS

<fx:Style> では、外部ソース(source="style_sheet")が指定できますし、ブラウ
ザでの知識を超える事は無く、自然に使えるはずです。


posted by at 2012-03-25 01:39 | 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 %>
この記述は、以下の場所で使用します