SQLの窓

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#) | このブログの読者になる | 更新情報をチェックする
Seesaa の各ページの表示について
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定> 詳細設定> ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。

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

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

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

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


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

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

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

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

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



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

CSS ドロップシャドウの参考デモ
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり