チュートリアル: JavaScript を使用して SDK を作成する

[アーティクル]
10/10/2023

このチュートリアルでは、JavaScript を使用し、Visual Studio 拡張機能 (VSIX) として簡単な数値演算 SDK を作成する方法について説明します。このチュートリアルは、次の部分に分かれています。

SimpleMathVSIX 拡張機能 SDK プロジェクトを作成するには
SDK を使用するサンプルアプリを作成するには

JavaScript の場合、クラスライブラリプロジェクトの種類はありません。このチュートリアルでは、サンプルの arithmetic.js ファイルを VSIX プロジェクトに直接作成します。実際には、VSIX プロジェクトに配置する前に、まず JavaScript と CSS ファイルを Windows ストアアプリとして作成してテストすることをお勧めします (たとえば、空のアプリケーション テンプレートを使用して)。

前提条件

このチュートリアルを行うには、Visual Studio SDK をインストールする必要があります。詳細については、「Visual Studio SDK」を参照してください。

SimpleMathVSIX 拡張機能 SDK プロジェクトを作成するには

メニューバーで、 [ファイル]>[新規作成]>[プロジェクト] を選択します。
テンプレートカテゴリの一覧で、[Visual C#] の下の [拡張性] を選択し、[VSIX プロジェクト] テンプレートを選択します。
[名前] テキストボックスに「SimpleMathVSIX」を指定して、[OK] ボタンを選択します。
Visual Studio パッケージウィザードが表示されたら、ウェルカム ページで [次へ] をクリックします。次に、1/7 ページで [完了] ボタンをクリックします。

マニフェストデザイナーが開きますが、このチュートリアルが複雑にならないように、マニフェストファイルを直接変更します。

ソリューションエクスプローラーで、source.extension.vsixmanifest ファイルのショートカットメニューを開き、[コードの表示] を選択します。このコードを使用して、ファイル内の既存のコンテンツを置き換えます。

<?xml version="1.0" encoding="utf-8"?>
<PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
  <Metadata>
    <Identity Id="SimpleMathVSIX" Version="1.0" Language="en-US" Publisher="myname" />
    <DisplayName>Simple Math</DisplayName>
    <Description>Does basic arithmetic calculations.</Description>
  </Metadata>
  <Installation Scope="Global" AllUsers="true">
    <InstallationTarget Id="Microsoft.ExtensionSDK" TargetPlatformIdentifier="Windows" TargetPlatformVersion="v8.0" SdkName="SimpleMath" SdkVersion="1.0" />
  </Installation>
  <Dependencies>
    <Dependency Id="Microsoft.Framework.NDP" DisplayName="Microsoft .NET Framework" d:Source="Manual" Version="4.5" />
  </Dependencies>
  <Assets>
    <Asset Type="Microsoft.ExtensionSDK" d:Source="File" Path="SDKManifest.xml" />
  </Assets>
</PackageManifest>

ソリューションエクスプローラーで、SimpleMathVSIX プロジェクトのショートカットメニューを開き、[追加]>[新しい項目] を選択します。
[データ] カテゴリで [XML ファイル] を選択し、ファイルに SDKManifest.xml という名前を付けて、[追加] ボタンをクリックします。
ソリューションエクスプローラーで、SDKManifest.xml ファイルのショートカットメニューを開き、[開く] を選択して、XML エディターでファイルを表示します。

SDKManifest.xml ファイルに次のコードを追加します。

<?xml version="1.0" encoding="utf-8" ?>
<FileList
  DisplayName="Simple Math"
  MinVSVersion="14.0"
  AppliesTo="JavaScript+WindowsAppContainer"
  SupportsMultipleVersions="Error"
  MoreInfo="https://msdn.microsoft.com/">

  <!-- JS -->
  <File Content="js\arithmetic.js" />
</FileList>

ソリューションエクスプローラーで、SDKManifest.xml ファイルのショートカットメニューの [プロパティ] を選択します。
[プロパティ] ウィンドウで、[VSIX に含める] プロパティを [True] に設定します。
ソリューションエクスプローラーの SimpleMathVSIX プロジェクトのショートカットメニューで、[追加]>[新しいフォルダー] を選択して、フォルダーに Redist という名前を付けます。
Redist の下にサブフォルダーを追加して、次のフォルダー構造を作成します。

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
\js フォルダーのショートカットメニューで、[追加]>[新しい項目] を選択します。
[Visual C# アイテム] で、[Web] カテゴリを選択し、[JavaScript ファイル] 項目を選択します。ファイルに arithmetic.js という名前を付けて、[追加] ボタンを選択します。

arithmetic.js に次のコードを挿入します。

(function (global) {
    "use strict";
    global.Arithmetic = {
        add: function (firstNumber, secondNumber) {
            return firstNumber + secondNumber;
        },

        subtract: function (firstNumber, secondNumber) {
            return firstNumber - secondNumber;
        },

        multiply: function (firstNumber, secondNumber) {
            return firstNumber * secondNumber;
        },

        divide: function (firstNumber, secondNumber) {
            return firstNumber / secondNumber;
        }
    };
})(this);

ソリューションエクスプローラーで、arithmetic.js ファイルのショートカットメニューの [プロパティ] を選択します。次のプロパティを変更します。
- [VSIX に含める] プロパティを [True]に設定します。
- [出力ディレクトリにコピー] プロパティを [常にコピーする] に設定します。
ソリューションエクスプローラーで、SimpleMathVSIX プロジェクトのショートカットメニューの [ビルド] を選択します。
ビルドが正常に完了したら、プロジェクトのショートカットメニューで [エクスプローラーでフォルダーを開く] を選択します。 \bin\debug\ に移動し、SimpleMathVSIX.vsix を実行してインストールします。
[インストール] を選択して、インストールを完了します。
Visual Studio を再起動します。

SDK を使用するサンプルアプリを作成するには

メニューバーで、 [ファイル]>[新規作成]>[プロジェクト] を選択します。
テンプレートカテゴリの一覧で、[JavaScript] の下にある [Windows ストア] を選択し、[空のアプリケーション] テンプレートを選択します。
[名前] ボックスに、ArithmeticUI を指定します。 [OK] を選択します。
ソリューションエクスプローラーで、[ArithmeticUI] プロジェクトのショートカットメニューを開いて、[追加]>[参照] を選択します。
[Windows] の下で [拡張機能] を選択し、[単純な数値演算] が表示されることを確認します。
[単純な数値演算] チェックボックスをオンにして、[OK] ボタンをクリックします。
ソリューションエクスプローラーの [参照] に、[単純な数値演算] の参照が表示されていることに注意してください。これを展開して、arithmetic.js を含む \js フォルダーがあることを確認します。 arithmetic.js を開いて、ソースコードがインストールされていることを確認できます。

次のコードを使用して default.htm の内容を置き換えます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ArithmeticUI</title>

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

    <!-- ArithmeticUI references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/SimpleMath/js/arithmetic.js"></script>
</head>
<body>
    <form>
    <div id="calculator" class="ms-grid">
        <input name="firstNumber" id="firstNumber" type="number" step="any">
        <div id="operators">
            <button class="operator" type="button">+</button>
            <button class="operator" type="button">-</button>
            <button class="operator" type="button">*</button>
            <button class="operator" type="button">/</button>
        </div>
        <input id="secondNumber" type="number">
        <button class="calculate" type="button">=</button>
        <input id="result" type="number" name="result" disabled="" readonly="">
    </div>
    </form>
</body>
</html>

次のコードを使用して \js\default.js の内容を置き換えます。

(function () {
    "use strict";

    var app = WinJS.Application;
    var operation = null;

    function calculateResult() {
        var firstNumber = parseFloat(document.querySelector("#firstNumber").value),
            secondNumber = parseFloat(document.querySelector("#secondNumber").value),
            result = 0;

        if (isNaN(firstNumber) || isNaN(secondNumber)) {
            result = 0;
        }
        else {
            switch (operation) {
                case "+":
                    result = Arithmetic.add(firstNumber, secondNumber);
                    break;
                case "-":
                    result = Arithmetic.subtract(firstNumber, secondNumber);
                    break;
                case "*":
                    result = Arithmetic.multiply(firstNumber, secondNumber);
                    break;
                case "/":
                    result = Arithmetic.divide(firstNumber, secondNumber);
                    break;
                default:
            }
        }
        document.querySelector("#result").value = result.toString();
    }

    app.onactivated = function (args) {
        document.querySelector("#calculator").addEventListener("click", function (event) {
            if (event.target.tagName.toLowerCase() === "button") {
                switch (event.target.className) {
                    case "operator":
                        operation = event.target.innerText;
                        break;
                    case "calculate":
                        calculateResult();
                        break;
                    default:
                        break;
                }
            }
        });
    };

    app.start();
})();

\css\default.css の内容を次のコードに置き換えます。

form {
    display: -ms-grid;
    -ms-grid-rows: 1fr auto 1fr;
    -ms-grid-columns: 1fr auto 1fr;
    height: 100%;
    width: 100%;
}

button, input[type=number] {
    margin-right: 5px;
    -ms-grid-row-align: center;
}

#calculator {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: auto min-content auto auto auto;
}

.ms-grid input {
    width: 5em;
}

#firstNumber {
    -ms-grid-column: 1;
    -ms-grid-row-align: center;
}

#operators {
    -ms-grid-column: 2;
    -ms-grid-row-align: center;
}

    #operators button.operator {
        margin-bottom: 5px;
        height: 40px;
    }

#secondNumber {
    -ms-grid-column: 3;
}

button.calculate {
    -ms-grid-column: 4;
    -ms-grid-row-align: center;
    height: 40px;
}

#result {
    -ms-grid-column: 5;
}

F5 キーを押して、アプリをビルドして実行します。
アプリの UI で、任意の 2 つの数値を入力し、操作を選択して、= ボタンを選択します。正しい結果が表示されます。

ソフトウェア開発キットを作成する

次の方法で共有

チュートリアル: JavaScript を使用して SDK を作成する

前提条件

SimpleMathVSIX 拡張機能 SDK プロジェクトを作成するには

SDK を使用するサンプルアプリを作成するには

その他のリソース

次の方法で共有

チュートリアル: JavaScript を使用して SDK を作成する

前提条件

SimpleMathVSIX 拡張機能 SDK プロジェクトを作成するには

SDK を使用するサンプル アプリを作成するには

関連するコンテンツ

その他のリソース

SDK を使用するサンプルアプリを作成するには