チュートリアル: Windows ストアアプリでの LightSwitch データの使用

[アーティクル]
02/21/2013

このチュートリアルに従って作業すると、Visual Studio LightSwitch のアプリケーションからデータを実行するには、Open Data Protocol (OData) をサポートする Windows ストアアプリケーションまたは他のアプリケーションを作成または構成する方法について学習できます。

必須コンポーネント

このチュートリアルを完了するには、Windows 8 で Visual Studio 2012 が実行されている必要があります。Microsoft Web サイトの MSDN サンプルギャラリーから Contoso Construction アプリケーションをダウンロードして、readme.txt ファイルの設定手順に従う必要もあります。以前に Windows ストアアプリケーションを作成したことがない場合は、Windows ストアアプリケーションのプロジェクトを作成するときに開発者ライセンスの取得を求めるメッセージが表示されます。

OData データソースを公開するには

メニューバーで [ファイル]、[開く]、[Project/Location] (プロジェクト/場所) の順に選択します。
[プロジェクトを開く] ダイアログボックスで、ContosoConstruction.sln ファイルを参照し、ファイルを開きます。
ソリューションエクスプローラーで、[プロパティ] のショートカットメニューを開き、[開く] を選択します。
アプリケーションデザイナーで、[アプリケーションの種類] タブをクリックします。
[クライアント] セクションで、[Web] オプションボタンを選択します。

この手順では、OData フィードとして Contoso Construction アプリケーションの両方のデータソースを公開します。

ストア Windows アプリケーションを作成するには

メニューバーで [ファイル] をクリックし、[追加] を選択し、[新しいプロジェクト] をクリックします。
JavaScript のプロジェクトの種類の一覧で、[分割アプリケーション] を選択します。
[名前] ボックスに「ContosoProjects」と入力し、[OK] をクリックします。

ContosoConstruction プロジェクトがソリューションに追加されます。

スクリプトライブラリを追加するには

メニューバーで、[ツール]、[ライブラリパッケージマネージャー]、[パッケージマネージャーコンソール] の順に選択します。

[パッケージマネージャーコンソール] ウィンドウが表示されます。
[パッケージマネージャーコンソール] コマンドプロンプトに、「install-package jquery」と入力し、Enter キーを押します。
コマンドが完了したら、「install-package datajs」と入力し、Enter キーを押します。

コマンドが完了したら、ソリューションエクスプローラーのスクリプト フォルダーに次の JavaScript ファイルが表示されます。
- datajs-1.0.2.js
- datajs-1.0.2.min.js
- jquery-1.7.1.js
- jquery-1.7.1.min.js
- jquery-1.7.1.-vsdoc.js

Windows アプリケーションのストアを変更するには

ソリューションエクスプローラーで、default.html ファイルを開きます。

WinJS references セクションで、次の参照を追加します。

<!-- jQuery references --> 
  <script src="/Scripts/jquery-1.7.1.js"></script> 
  <!-- datajs references --> 
  <script src="/Scripts/datajs-1.0.2.js"></script>

ソリューションエクスプローラーで、[js] ノードを展開し、default.js ファイルを開きます。
var app = WinJS.Application; 行の下に次の変数を追加します。
```
var OData = window.OData;
```
ソリューションエクスプローラーで、data.js ファイルを開きます。

sampleGroups セクションのコードを次のコードで置き換えます。

var sampleGroups = [ 
        {
            key: "allProjects", title: "All Projects", subtitle: "All Contoso projects.",
            backgroundImage: darkGray
        },
    ];

コメント // TODO: Replace the data with your real data. の後ろにある関数を探して、既存のコードを次のコードと置き換えます。

//Generic function for loading data via a odata url
    function loadData(data, odataUrl, dataLoaded) {
        if (data) {
            return WinJS.Promise.as(data);
        }
        else {
            return new WinJS.Promise(function (complete, error, progress) {
                OData.read(odataUrl,
                function (data) {
                    complete(dataLoaded(data.results));
                },
                function (dataerror) {
                    error(dataerror);
                });
            });
        }
    }


    var projectsODataUrl = "https://localhost:#####/ApplicationData.svc/Projects";
    //TODO: Replace projectsODataUrl with url for deployed OData service
    //  before publishing this application.
    var _projects;
    //Loads projects
    function loadProjects() {
        loadData(_projects, projectsODataUrl, function (results) {
            _projects = results;
            return _projects;
        }).then(function (projects) {
            var items = [];

            $.each(projects, function (l, e) {
                var notes;
                if (e.Notes === null) {
                    notes = "";
                }
                else {
                    notes = e.Notes;
                }
                items.push({
                    displayName: e.ProjectName, subtitle: "Estimate: $" +
                        e.OriginalEstimate, description: "", content: notes
                });
            });
            showProjects(items.sort(), sampleGroups[0]);
        });
    }

    //Adds projects to binding list.
    function showProjects(items, itemGroup) {
        items.forEach(function (item) {
            list.push(
                {
                    group: itemGroup, title: item.displayName,
                    subtitle: item.subtitle, description: item.description,
                    content: item.content, backgroundImage: lightGray
                }
              )
        });
    }

    loadProjects();

Windows の機能を指定するには、アプリケーションを格納します。

ソリューションエクスプローラーで、package.appxmanifest ファイルを開きます。
[機能] タブで、[Private Networks (Client and Server)] (プライベートネットワーク (クライアントおよびサーバー)) チェックボックスをオンにします。

この手順では、エンタープライズアプリケーションがイントラネットのリソースにアクセスできるようにします。この設定は、Windows ストアからの一般的な Windows ストアアプリケーションでは必要ありません。

アプリケーションをデバッグしてテストするには

ソリューションエクスプローラーで、[ソリューション] ノードのショートカットメニューを開き、[プロパティ] を選択します。
[マルチスタートアッププロジェクト] オプションボタンを選択します。
[操作] 列で、[ContosoConstruction] および [ContosoProjects] プロジェクトの両方で [開始] を選択します。

重要

スタートアップの順序で ContosoContruction が ContosoProjects の前にリストされていることを確認します。
ソリューションエクスプローラーで、data.js ファイルを開きます。
return new WinJS.Promise で始まる行で、ブレークポイントを設定します。
F5 キーを押してデバッグを開始します。

ブレークポイントに達すると、アプリケーションで読み込みが開始されてから、実行が停止されます。
Contoso Construction アプリケーションが実行されているブラウザーウィンドウで、アドレスバーにポート番号をコピーします。

ポート番号は、URL で https://localhost: の後に続く数値です。
イミディエイト ウィンドウで、odataUrl = https://localhost:#####/ApplicationData.svc/Projects を入力し、ポート番号を ##### に置き換え、Enter キーを選択します。
F5 キーを押して、Contoso プロジェクトアプリケーションの読み込みを再開します。

Contoso プロジェクトアプリケーションが表示されます。
[すべてのプロジェクト] ボタンをクリックして、Contoso Construction アプリケーションからプロジェクトの一覧を表示します。

重要
スタートアップの順序で ContosoContruction が ContosoProjects の前にリストされていることを確認します。

次の手順

アプリケーションを配置する準備が整ったら、各プロジェクトを個別に公開する必要があります。まず、LightSwitch アプリケーションを運用サーバーに発行します。LightSwitch アプリケーションが配置され、運用サーバーの OData サービス URL を確認したら、配置する前に Windows ストアアプリケーションの data.js ファイルのポート番号を更新します。

参照

その他の技術情報

データソースとしての LightSwitch

方法: 3 層アプリケーションを配置する

方法: Windows ストアのアプリケーションを配置します。

チュートリアル: Windows ストア アプリでの LightSwitch データの使用