SQLの窓

2012年07月11日


Win8(JS Metro)の『分割・・・』テンプレートにアプリバーを追加して、新しいページを定義する



アプリバーは、Metro スタイル アプリのナビゲーション デザイン で説明されていますが、上の画像の画面下部にある細い帯のような部分の事で、画面上をマウスで右クリックするか、画面の下端をスワイプする事によって表示されます。

ここには、現在のビューに対して作用するコマンドを置く事がガイドラインとして書かれていますが、Microsoft のサンプルであるこの図のようなサンプルもあります( メニューとしても使われています ) 



新しいページの追加



新しいページの追加は、HTML で画面を作成し、その HTML 用の JavaScript のコードで、WinJS.UI.Pages.define を使ってページの定義を行う事によって準備できます。

ここでは、その呼び出しに『アプリバー』を使う為に、そのイベントを data.js で定義しています。

参考 : Win8(JS Metro)の『分割・・・』テンプレートを使って RSS を収集するサンプル

data.js では、本来リストビュー用のデータの処理を行っていますが、二つのビューから利用されるので定義場所として良い場所となります。また、元々複数のコード間で名前を参照できるように、名前空間の定義もあるのでイベントの実体をここで定義します。

但し、イベントの登録は各ページ定義の ready イベント で行います。

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

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

    <!-- GetXmlList references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder' }"></button>
    </div>
</body>
</html>

アプリバーの定義は、Metro JS のひな型のエントリポイント的位置付けの default.html で行われます。意味合い的には、アプリバーはコントロール用オブジェクト(data-win-control属性を持つ)であって、他の一般的な HTML とは識別され、実装は default.js で実行される『WinJS.UI.processAll()』で行われるようです。( ビューの書き換え/Navigate はその上にある DIV 内で行われます )


split.html
data.js

アプリバーとは関係無いですが、動的な HTML 処理サンプルとしてリンクと IFRAME を実装しています。リンクは直接 HTML を書き込む方法と、A要素にデータをバインドする方法の二つを実装しています




data.js 内の呼び出し部分
    function newPage() {
        Debug.writeln("newPage:" + WinJS.Navigation.location);
        if (WinJS.Navigation.location != "/pages/hello/hello.html") {
            WinJS.Navigation.navigate(
                '/pages/hello/hello.html',
                {
                    param1: '自動的に',
                    param2: 'ページのオプションとして ready イベントへ'
                }
            );
        }
        document.getElementById("appbar").winControl.hide();

    }

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        newPage: newPage,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

新しいページ

アプリバーは、▼この新しいページでも処理される為、自身である場合はなにもしないようにしています。また、戻るボタンはHTML側の定義で完結しています

hello.html
hello.js




posted by lightbox at 2012-07-11 12:08 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年07月03日


Win8(JS Metro)の『分割・・・』テンプレートを使って RSS を収集するサンプル

NAVER と Yahoo! の 天気を取り出してリストページを作成しています。変更したのは data.js で、もともとあった固定のデータは削除して、その枠組みをそのまま利用しています






(function () {
    "use strict";

    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    function resolveGroupReference(key) {
        for (var i = 0; i < groupedItems.groups.length; i++) {
            if (groupedItems.groups.getAt(i).key === key) {
                return groupedItems.groups.getAt(i);
            }
        }
    }

    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    var backImage1 = "https://lh4.googleusercontent.com/-hHZ3UeOrQGQ/T_J4kLkBN2I/AAAAAAAAHB0/D-MsMRu7j0g/s205/_naver.png";
    var backImage2 = "https://lh5.googleusercontent.com/-F7zC9HwtSTw/T_J4kIny9XI/AAAAAAAAHBw/AesYu2jQHbI/s224/_yahoo.png";

    var sampleGroups = null;
    var sampleItems = null;

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    var serverUrl = "http://matome.naver.jp/feed/hot";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for( var i = 0; i < items.length; i++ ) {

            var item = {};
            item.group = {};
            item.group.key = "naver"
            item.group.title = "NAVER"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage1;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "作者 : " + items[i].getElementsByTagName("dc:creator")[0].firstChild.nodeValue;
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = items[i].getElementsByTagName("media:thumbnail")[0].getAttribute("url");
            item.backgroundImage = thumbnail_img;

            list.push(item);
           
        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    var serverUrl = "http://rss.weather.yahoo.co.jp/rss/days/6200.xml";
    var xhr = new WinJS.xhr({
        type: "GET",
        url: serverUrl
    }).then(function (req) {

        Debug.writeln(req.responseXML);
        var root = req.responseXML;
        var items = root.getElementsByTagName("item");
        var thumbnail_img = null;

        for (var i = 0; i < items.length; i++) {

            var item = {};
            item.group = {};
            item.group.key = "yahoo"
            item.group.title = "Yahoo! 天気"
            item.group.subtitle = "Windows8 ひな形拡張";
            item.group.backgroundImage = backImage2;
            item.group.description = "グループの説明";

            item.title = items[i].getElementsByTagName("title")[0].firstChild.nodeValue;
            item.subtitle = "";
            item.description = "";

            try {
                item.content = items[i].getElementsByTagName("description")[0].firstChild.nodeValue;
            }
            catch (e) {
                item.content = "";
            }

            thumbnail_img = "https://lh3.googleusercontent.com/-byjvNpDs538/TwbSVn_202I/AAAAAAAAE2g/gbeMVoj4SPU/s200/b17nauke014.jpg";
            item.backgroundImage = thumbnail_img;

            list.push(item);

        }


    }, function (req) {
        Debug.writeln("正しく取得できませんでした");
    });


    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemsFromGroup: getItemsFromGroup,
        getItemReference: getItemReference,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });
})();

※ item.group.key が同一のデータが一つのグループとしてまとめられます


posted by lightbox at 2012-07-03 14:00 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年06月27日


Win8(JS Metro)の『分割・・・』テンプレートから追加のページを定義する方法

元となる記事

『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

新しいページは、新しい HTML と JS を作成して、items.html のタイトルの横から呼び出したいと思います
新しい items.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">分割</span>
                <button id="newpage">新しいページ</button>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

items.js では、items.html の定義である、WinJS.UI.Pages.define が実行されているので、その初期処理部分である『ready』で新しく追加したボタンのイベントを作成し、新しいページの呼び出し処理である、WinJS.Navigation.navigate を実行しています。この際、第一引数には URL を指定しますが、第二引数には新しいページへと引き渡す JSON をオブジェクトをセットしています

新しいページの HTML 記述(hello.html)

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

    <!-- WinJS references -->
    <link rel="stylesheet" type="text/css" href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/split/split.css" rel="stylesheet" />
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>

    <div style="padding:20px;">
    <header aria-label="Header content" role="banner">
        <button class="win-backbutton" aria-label="Back" disabled></button>
    </header>
        こんにちは

    </div>
    

</body>
</html>

新しいページは何も定義はしていませんが、唯一『戻るボタン』を配置する際にルールがあると思って下さい。これし、navigator.js に書かれている、『header[role=banner] .win-backbutton』というセレクタに合わせる必要があるということです。この条件に合わせることで、ナビゲートのコントロールはほぼ、navigator.js が行います。

あとは、hello.js で、このページの定義を行う事で全体が正しく動作します

(function () {
    "use strict";

    var appViewState = Windows.UI.ViewManagement.ApplicationViewState;
    var binding = WinJS.Binding;
    var nav = WinJS.Navigation;
    var ui = WinJS.UI;
    var utils = WinJS.Utilities;

    ui.Pages.define("/pages/hello/hello.html", {

        // この関数は、ユーザーがこのページに移動するたびに呼び出されます。
        // ページ要素にアプリケーションのデータを設定します。
        ready: function (element, options) {
            Debug.writeln(JSON.stringify(options, null, "   "));
        },
        unload: function () {
            
        }
    });
})();

▼ JSON.stringify による options出力内容です
{
   "param1": "自動的に",
   "param2": "ページのオプションとして ready イベントへ"
}



posted by lightbox at 2012-06-27 13:42 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年06月21日


『分割アプリケーション』/ Win8(Metro)テンプレートのテンプレートたる意味

ページ遷移は本来 Navigate オブジェクトの navigated イベントで自分で動的にページを作成すると思ってたのですが、PageControl オブジェクトの助けを借りて、ページの定義単位で完結するようなテンプレートになっているようです。

まず、開始は default.html ですが、DIV 要素に URL が定義されています
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>SplitApp</title>

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

    <!-- SplitApp references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/navigator.js"></script>
</head>
<body>
    <div id="contenthost" data-win-control="Application.PageControlNavigator" data-win-options="{home: '/pages/items/items.html'}"></div>
    <!-- <div id="appbar" data-win-control="WinJS.UI.AppBar">
        <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd', label:'Command', icon:'placeholder'}"></button>
    </div> -->
</body>
</html>

但し、それは option 部分で、事の始まりは 『data-win-control="Application.PageControlNavigator"』 から開始される事になります。ここで、Application は、このアプリケーションが作成した名前空間で、さらにアプリケーションが作成した PageControlNavigator オブジェクトに支配されている事になります。この PageControlNavigator は、navigator.js で定義されており、この PageControlNavigator こそが、API で定義されている本来の Navigater オブジェクトのこのアプリケーション用のラッパーとなっています。

navigate.js の参照

先頭部分がコンストラクタですが、ここで Navigate オブジェクトの navigated イベントに _navigated イベントがマップされているのが解ります(他にも初期処理がなされています)。そして、肝心の _navigated で、WinJS.UI.Pages.render(args.detail.location, newElement, args.detail.state, parented) が実行されて新しいページ定義が、newElement にロードされてページ遷移が起きます。(この、メソッドは Microsoft のドキュメントではまだ第一引数の記述が無いようです)

このテンプレートの場合、初回の表示で 『/pages/items/items.html』 が呼びだされる事になるわけですが、このページは ListView になっており、それなりにかなりのテンプレート用のコードが付加されています。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8" />
    <title>itemsPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0.RC/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0.RC/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0.RC/js/ui.js"></script>
    
    <link href="/css/default.css" rel="stylesheet" />
    <link href="/pages/items/items.css" rel="stylesheet" />
    <script src="/js/data.js"></script>
    <script src="/pages/items/items.js"></script>
</head>
<body>
    <!-- This template is used to display each item in the ListView declared below. -->
    <div class="itemtemplate" data-win-control="WinJS.Binding.Template">
        <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
        <div class="item-overlay">
            <h4 class="item-title" data-win-bind="textContent: title"></h4>
            <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
        </div>
    </div>

    <!-- The content that will be loaded and displayed. -->
    <div class="itemspage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle">SplitApp</span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">
            <div class="itemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
        </section>
    </div>
</body>
</html>

表示される本体は、下のほうにある DIV 要素内( class="itemspage fragment" ) です。上にある DIV 要素は、ListView の一つ一つのアイテムの表示用テンプレートです。しかも、ページ全体を支配するのはこれらでは無く、items.js であり、データ表示の為に data.js も読み込む事になります。

items.js の参照

data.js の参照

items.js では、ページ全体を WinJS.UI.define メソッドで、PageControl オブジェクトとして定義しています。このページ用の interface は、現在のところは ready イベントのみ本来のページ用のもののようです。それ以外は全て内部でのやりとりで呼び出されます。

■ initializeLayout は ready または、updateLayout から。
■ itemInvoked は、ready 内で ListView からマップ
■ updateLayout は、本体の PageControlNavigator から window.onresize の結果として呼び出されています。

参考 : Metro スタイル アプリ用 JavaScript プロジェクト テンプレート

まとめ

結局、split.html でも同様の定義がなされており( unload イベントはドキュメントに無く裏付けできませんでした )、結局 data.js にある JSON オブジェクトの内容によって表示されるコンテンツが決まり、css によって見栄えが変わる本当の意味でのテンプレートになっています。殆ど、テンプレートコードを触る余地は無く、よほどの知識が無いと逆に動かないものになってしまうようなものである事は間違いありません。


posted by lightbox at 2012-06-21 22:47 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年06月14日


Windows8(JavaScript Metro Style) 関連リンク

Windows8 と単純に言っても、範囲が広くなるので、まず導入部分を特別に以下のリンク先にまとめました。

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

で、ここからは応用部分です オフィシャル的情報発信リンクWindows 8 アプリ開発者ブログGo Metro(Facebook) 自前まとめ一覧『People』で、Twitter アカウント登録したら解除不能。アプリ削除しました これは、Windows8 リリースプレビューでホーム画面のアプリを使っていて遭遇したバグらしきものです。まあ、おかげでアプリの再登録手順を経験できました。 ■ Windows8 Metro(JS) でのカメラの利用は簡単ですが、問題も多々あるようです わざわざ新しい WEBカメラも買って、その他あわせて3つのカメラでテストしたのですが、結局まだ使えるのでは無かったというのが結果です。機能はふつうに動いてはいましたが、メモリ関連の問題があるようです。( カメラは、Android でもエミュレータで動作を確認はしましたが、アプリからは使えなかったです )。まだ発展途上です > 開発とカメラ ちなみに、古い WEB カメラは最初動作しなかったのですが、最新ドライバをインストールしたら動作しました。 ■ 余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移 ( この画面のサンプルは、JavaScript and HTML5 touch game sample ) プロシェクト作成時に、画面分割アプリとグリッドと言う ListView と 画面遷移のひな形が用意されていますが、そもそもコードを読むものではなくデータ部分( JSON ) を変更して作るようなものになっています。コードは相当の知識が無いと読めない SDK レベルのものなのですが、これは、その中の Navigate 処理に触れたものです。 ■ Win8 Metro(JS) : 印刷処理 印刷処理は簡単です。ただ、UI が全くいままでと違うのと、印刷する部分を CSS で制御したりするのが新鮮でした。しかし、まだバグがあるようで Canvas 内の印刷は固まってしまってうまくいきませんでした。Canvas 内で Three.js が動いていて、メモリを使いすぎていたのかもしれません。 ■ Windows8 Metro(JS) で jQuery の datepicker を動作確認しました というか、JavaScript Metro は jQuery を元に作られているような部分が多々あります。サンプルの中にも jQuery の少し古いライブラリが組み込まれていたのもありました。とにかく、ふつうに動作しますので、Metro の画面遷移使うより、jQuery の UI 使ったほうが実装ははるかに簡単なような気がします
posted by lightbox at 2012-06-14 09:37 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月23日


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


起動後の画面です。サインインを実行してからアップロードボタンをクリックしてアップロードするファイルを選択します



まずはサインイン





サインインが完了したのでメッセージを表示しています。
( ここまでで、▲ リンク先と同じです )



▲ アップードボタンをクリックすると、▼ に画面が切り替わります。





ファイルを選択し終わりましたので、『開く』でアップロードが開始されます。終了メッセージの表示を実装していないので、Debug.writeln の結果で確認します。






ソースコードを見る
posted by lightbox at 2012-05-23 10:59 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月21日


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

Live SDK のダウンロードとインストール

まず、『Live SDK for Windows and Windows Phone』をダウンロードしてインストールします。



アプリを登録

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

以下の画像の一番下の部分(2つ)に、アプリケーション名( ここでは SkyApp )と、サンプル通りの Publisher として CN=lightbox と入力しました。



この後でパッケージ名が表示されるので、それを Visual Studio のほうにセットします。この内容は記録しなくても、以下のページで確認できます。

▼ 登録後の状態です。



Visual Studio より参照設定

SDK を使用するように構成します



実際の実行の画面遷移





Windows Live から見たアプリの管理画面

プロフィールから『管理』へ移動するとアプリの一覧が表示されて個別に管理できます。最初のほうの詳細情報はアプリを作った開発者が利用する画面で、こちらは使用するユーザが管理する画面です( Twitter と同じです )



ソースコード
<!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>

※ こちらにあったソースでテストしました

関連する Microsoft のページ

Live SDK による Windows 8 アプリへのシングル サインオン機能の実装と SkyDrive との連携



posted by lightbox at 2012-05-21 16:09 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

Windows8 Metro(JS) でのカメラの利用は簡単ですが、まだ製品版では無いせいか他の処理と同時に動かすと、問題もあるようです

注意するのは、プロジェクトのプロパティの『機能』のタブで、カメラとマイクロフォンを使えるようにチェックするところです。

サンプルコードをそのままで、簡単に写真撮影やビデオ撮影が可能ですが、ただそれだけでどう使えるかは良く解りません。古い WEBカメラを使ったのでただプロジェクタで表示しただけです。もし、WEB カメラが接写できるならリアルタイムでプロジェクタに手元のモバイル(iPhone や Android)の状態を表示できるので試してみました。
    function scenario1CapturePhoto() {
        try {
            var dialog = new Windows.Media.Capture.CameraCaptureUI();
            var aspectRatio = { width: 16, height: 9 };
            dialog.photoSettings.croppedAspectRatio = aspectRatio;
            dialog.captureFileAsync(Windows.Media.Capture.CameraCaptureUIMode.photo).done(function (file) {
            }, function (err) {
            });
        } catch (err) {
        }
    }

これだけで、画面いっぱいにカメラ表示になります。どうもダイアログらしいのですが、Microsoft のサンプルには、ビデオのほうのサンプルもありますが、基本的には同じようなもので、.done で画像化されたファイルを受け取って、対象要素にセットするというものです。( img や video )

このへんは、非常に HTML5 が都合よくなっています。ただ、このアプリのテストは、Three.js で 3D モデルを表示したり、カメラを使ったりというメニュー処理になっているのですが、そちらの処理を実行してからカメラを実行して戻って来ると、メニューリンクがクリックできなくなるという不具合が出ています。Windows Metro で画面切り替えして戻って来るとクリックできるので、OS の問題か、何か復帰処理がいるかどちらかですが、Microsoft のサンプルでは特になにもしていませんでした。


posted by lightbox at 2012-05-21 15:14 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月12日


Windows8 Metro(JS) で Three.js の 3D モデル表示(Canvas)を行う

これのテストを行った時に、ちょうど Three.js の仕様変更の時期に重なっていろいろありましたこのデータはテクスチャが1枚なので、対応方法としては一番簡単な方法を取っています。



Visual Studio 11 では、シュミレータでデバッグできるので上はその画像です。PC そのもので実行する方法がデフォルトですが、デスクトップとの切り替えが面倒なので、デスクトップ内のウインドウで Metro 表示そのものを見る事ができます。

※ このテストでは必要ありませんでしたが、右側のコントロールでウインドウを縦にする事ができます
※ ソースコードには、Three.js の内容に対してコメントで特に解説を入れてあります。
ソースコードを見る
posted by lightbox at 2012-05-12 01:16 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年05月05日


Windows8 Metro(JS)の画面切り替えが解る、jQuery とのコラボ



画面を切り替える際に、現実には default.html に DIV のウインドウを作成して置き換え続けて画面が切り替わります。置き換え先の HTML に JavaScript を配置して jQuery の $(function()) を実行しても最初しかロードされないので、default.htmlに全てを見渡せるスクリプトを書く必要があります。

ここでは、navigated イベントに集中して記述しています。

default.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta charset="utf-8">
    <title>Application2</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>

    <link rel="stylesheet" type="text/css" href="/css/jquery-ui-1.8.19.custom.css" />
    <script type="text/javascript" src="/js/jquery-1.7.2.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.19.custom.min.js"></script>

    <!-- Application2 references -->
    <link href="/css/default.css" rel="stylesheet">
    <script src="/js/default.js"></script>


</head>
<body>
    <div id="contentHost"></div>
    <div
        id="appbar"
        data-win-control="WinJS.UI.AppBar"
        aria-label="Command Bar"
        data-win-options="{
        commands:[
        {id:'home', label:'メニュー', icon:'&#xE10F;', section: 'global', onclick: R101.navigateHome},
        {id:'play', label:'ゲーム', icon:'&#xE102;', section: 'global', onclick: R101.navigateGame},
        {id:'rules', label:'ルール', icon:'&#xE104;', section: 'global', onclick: R101.navigateRules},
        {id:'scores', label:'スコア', icon:'&#xE113;', section: 'global', onclick: R101.navigateScores},
        {id:'credits', label:'クレジット', icon:'&#xE10C;', section: 'global', onclick: R101.navigateCredits}
    ]}"></div>

</body>
</html>
default.js

▼ JavaScript のコード
続きを読む
posted by lightbox at 2012-05-05 02:27 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月28日


Google ドキュメントを使ってソースコード配布と解説

Google Drive が始まったので、かねてより Google+ ではソースコードだけが共有するの
に面倒だったので、使ってみると思いの外便利です。で、思いもしなかった効果があった
ので、ここで試してみます。

以下のコードは、Three.js で使われていた WebGL のチェックコードで、実行文ですので
処理されて結果が true か false になります。
上の表示は、Google ドキュメントを公開して IFRAME でコードを取得して少し見栄え
を調整して貼り付けていますが、Excel や Word のように『図形』を追加して表現が
簡単にできます。これは Word と同様の『文書』ですが、ソースコードは CTRL+A で
選択されるのでコピーも簡単です。

挿入から図形描画



文書の作成



ソース部分の強調も時間をかければ見やすいものになりますし、変更は Google ドキュ
メントのほうで基本的な内容は行います。
( 表示エリアの調整は IFRAME 側で行う必要があります )

IFRAME 基本コードの取得






posted by lightbox at 2012-04-28 01:24 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月25日


余計なものを全て排除した Win8 Metro(JS) アプリの画面遷移

画面はまたこのゲームサンプル(の一部)を使いました
( 正式タイトルは JavaScript and HTML5 touch game sample )



結局、要素の部分を置き換える為の正式な SDK は存在しました。そのサンプルのタイトルは
『Loading HTML fragments sample』ですが、navigate メソッドはやはり骨格であって、置き
換えは自分で行って検証しました。置き換える為に使われる HTML のヘッダ部分の置き換え後
の影響は厳密では無い事もわかりましたが、確実に説明のつかない結果だったので、不必要な
ものは省いてコードを構成しています。

一つ解ったのは、navigate の骨格を使う事によって、自動的に back メソッド等が使えるよう
になる事です。他のサンプルでも不思議だったのですが、『戻る』アイコンがあるのに、どうも
イベント定義されているふしが無かったのですが、navigate 完了後に一網打尽にされるようで
す。
続きを読む
posted by lightbox at 2012-04-25 22:51 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月24日


querySelectorAll(結果はNodeList) と forEach( Array のメソッド ) の動作確認コード

Windows8 Metro(JS) のコードを追っかけていて気になったので、確認しておこうと思い、
簡単な確認用のコードを作成しました。

forEach の引数は二つで、二つ目は省略可能です。オブジェクトを指定した場合、その
オブジェクトを一つ目の引数の関数内で、this として参照できました。関数は、3つの
引数を取る事ができ、それぞれ、配列の要素、その要素のインデックス番号、配列その
もののようです。

※ IE では forEach は IE9(標準モード) である必要があります
<div id="target">
<input class="ent" value="a" />
<input class="ent" value="b" />
<input class="ent" value="c" />
</div>

<script type="text/javascript">
var col = document.querySelectorAll(".ent");
var arr = [];
arr.push( col[0] );
arr.push( col[1] );
arr.push( col[2] );
arr.forEach(
	function( element, index, base ) {
		console.log(element.value);
		console.log(index);
		console.log( base[index].value );
		console.log(this.ref);
	}
	,{ ref: "参照できています" }
);
</script>


posted by lightbox at 2012-04-24 16:44 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月18日


Win8 Metro(JS) のクラス定義用クラスでの記述仕様で、getter が存在します

サンプルコードにあった記述を簡略して記述して実行テストして試してみました。
ここでは、getter の戻り値が function なので、prop という本来プロパティで
あるはずのものが、メソッドとして( 引数あり )定義されて実行できるようにな
っていました。

※ 最初の function は コンストラクタで、func はメソッドとなります。

var test = WinJS.Class.define(
	function () {
	},
	{
		func: function () { },
		prop: {
			get: function () {
			return
				function (a, b, c) {
					return a + b + c;
				}
			}
		}
	}
);

var inst = new test();

Debug.writeln(inst.prop(1, 2, 3));



posted by lightbox at 2012-04-18 13:18 | Windows8 Metro(JS/C#) | このブログの読者になる | 更新情報をチェックする

2012年04月17日


Win8 Metro で画面の表示変更は、画面部分(?)オブジェクトの入れ替えを自分で行います

デベロッパーの時のサンプルと、コンシューマーの時のサンプルとでは若干仕様変更
があったような気がしますが、それでも画面変更は基本的にこんな感じで行うようです。
( そういえば、MessageDialog のスタイル(色)が変わっていました )

今日調べたサンプルは、以下のような画面でゲームそのものは単純ですが表示ページ
がたくさんありました。



メインページ(default.html)画面入れ替え用の DIV が一つあるだけで、画面は他の HTML
より動的に作成されます。
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Game</title>

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

    <!-- App references -->
    <link rel="stylesheet" href="/css/default.css" />
    <script src="/js/assetManager.js"></script>
    <script src="/js/movingAverage.js"></script>
    <script src="/js/frameTimer.js"></script>
    <script src="/js/touchPanel.js"></script>
    <script src="/js/scores.js"></script>
    <script src="/js/gameState.js"></script>
    <script src="/js/game.js"></script>
    <script src="/js/navigator.js"></script>
    <script src="/js/default.js"></script>
    <script src="/js/homePage.js"></script>
    <script src="/js/creditsPage.js"></script>
    <script src="/js/rulesPage.js"></script>
    <script src="/js/gamePage.js"></script>
    <script src="/js/scoresPage.js"></script>
</head>
<body>
    <!-- Fragment host -->
    <div id="contentHost" data-win-control="GameManager.PageControlNavigator" data-win-options="{home: '/html/homePage.html'}"></div>

    <!-- 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>
</html>

パっと見は、contentHost に勝手にページがロードされるように読めるのですが、すべて
カスタムの作業となっており、その時に利用されるのが、WinJS.Navigation Namespace と
いう名前空間です。

ここに navigate と言う function が存在するのですが、それを実行したからといって
何かが起こるのでは無く、navigated というイベントが発生するだけで、そこで実際の
実装を行うようですが、他にもこの作業を行うのにいろいろガイドラインが存在するよ
うです。

これは、無理に読み解かずに『ありもの』を利用するのが良いと思われます



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

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

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

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

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


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

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

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

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

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


Windows
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり