MCT インスタンスのカスタムホームページを設定する

2024-11-24

Microsoft コミュニティトレーニング (MCT) ホームページを、作成した他のカスタムホームページに置き換える場合は、シンプルな手順で簡単に実現できます。

作業を開始するには、MCT インスタンスにリンクするように設計されたカスタムホームページが必要です。 MCT カスタムホームページのサンプルデザインを次に示します

カスタムホームページを追加する手順

注意

Azure サブスクリプションは、MCT がデプロイされているのと同じサブスクリプションである必要があります。これらの手順では、Azure サブスクリプションの "共同作成者" アクセス権が必要です。
このカスタムホームページは、MCT がデプロイされているのと同じ Azure サブスクリプションでホストされている必要があります。
静的 Web サイトを取得するには、"General-purpose v2" 型のストレージアカウントが必要です

Azure ポータル
次の手順に従って、静的 Web サイトをホストするようにストレージアカウントを構成してください。
1. Web ブラウザーで Azure ポータルを開きます。
2. ストレージアカウントを見つけて、アカウントの概要を表示します。
3. [静的な Web サイト] を選択して、静的な Web サイトの構成ページを表示します。
4. [有効] を選択して、ストレージアカウントに対して静的な Web サイトホスティングを有効にします。
5. [インデックスドキュメント名] フィールドで、index.html の既定のインデックスページを指定してください。 (この index.html は、静的 Web サイトのホームページと同じである必要があります)
6. [エラードキュメントのパス] フィールドで、404.html の既定のエラーページを指定してください。
7. [保存] をクリックします。これで、Azure ポータルで静的な Web サイトのエンドポイントが表示されるようになります。
上記で構成したストレージアカウントにカスタムホームページをデプロイしてください。
1. ローカルファイルシステムで "mywebsite" という名前の空のフォルダーを作成してください。
2. Visual Studio Code を起動して、[エクスプローラー] パネルから先ほど作成したフォルダーを開いてください。
3. "mywebsite" フォルダーに既定のインデックスファイルを作成し、index.html という名前を付けてください。
4. カスタムホームページのすべてのファイルをコピーしてください。
5. ホームページには、"index.html" という名前を付ける必要があります。
6. "index.html" を編集し、すべての CTA リンク ("登録" など) を MCT サインインリンクに置き換えてください。 MCT Web サイトで [サインイン] の上にマウスポインターを合わせると、MCT の署名リンクを取得できます。次のスクリーンショットを参照してください。 MCT ログイン URL は、https://<AzurewebistesORfdBaseURL>/home/defaultsignin?whr=uri%3aPhoneAuth&referrer=basedomain の形式である必要があります。
7. 既定のエラーファイルを作成し、404.html という名前 (または必要に応じてその他の名前) を付けてください。
8. エディターで 404.html を開いてください。コードをファイルに貼り付けて保存してください (参照用のサンプルコードを以下に示します)
```
<!DOCTYPE html>
    <html>
        <body>
            <h1>404</h1>
        </body>
    </html>
```
9. [エクスプローラー] パネルの "mywebsite" フォルダーの下で右クリックし、[静的な Web サイトにデプロイ] を選択して Web サイトをデプロイしてください。 Azure にログインしてサブスクリプションのリストを取得することを求めるプロンプトが表示されます。
10. 上記の手順 2 で構成したストレージアカウントを含むサブスクリプションを選択してください。 サブスクリプションは、MCT がデプロイされている場所と同じである必要があります。 次に、プロンプトが表示されたらストレージアカウントを選択してください。

MCT がデプロイされている Azure サブスクリプションに静的 Web ページ (カスタムホームページ) が正常にデプロイされました。 Web サイトを起動して表示してください。

注意

詳細については、「チュートリアル: Blob Storage で静的 Web サイトをホストする」を参照してください
MCT インスタンスにデプロイするために使用できるカスタムホームページのサンプルテンプレートを次に示します。
- MCT_CustomHomePage_Templates.zip
- 複数の AD ログインをサポートする場合は、こちらのテンプレートを参照してください。 ILDigiTechLoginPage >> Assets >> DomainAndUrl.json から、このテンプレートに他の AD ログインを追加できます

カスタムホームページを使用してユーザーのサインインを追跡する

カスタムホームページを使用して MCT に署名するユーザー数の追跡は、AppInsights の追跡を通じて実現できます: JavaScript Web アプリ用の Azure の Application Insights

MCT とカスタムホームページがデプロイされている Azure サブスクリプションについて、次に示すようにインストルメンテーションキーを更新する必要があります。インストルメンテーションキーは、Azure portal の [AppInsights] セクションにあります。

Azure portal の AppInsights

<script type="text/javascript">
        var sdkInstance = "appInsightsSDK"; window[sdkInstance] = "appInsights"; var aiName = window[sdkInstance], aisdk = window[aiName] || function (e) {
            function n(e) { t[e] = function () { var n = arguments; t.queue.push(function () { t[e].apply(t, n) }) } } var t = { config: e }; t.initialize = !0; var i = document, a = window; setTimeout(function () { var n = i.createElement("script"); n.src = e.url || "https://az416426.vo.msecnd.net/next/ai.2.min.js", i.getElementsByTagName("script")[0].parentNode.appendChild(n) }); try { t.cookie = i.cookie } catch (e) { } t.queue = [], t.version = 2; for (var r = ["Event", "PageView", "Exception", "Trace", "DependencyData", "Metric", "PageViewPerformance"]; r.length;)n("track" + r.pop()); n("startTrackPage"), n("stopTrackPage"); var s = "Track" + r[0]; if (n("start" + s), n("stop" + s), n("setAuthenticatedUserContext"), n("clearAuthenticatedUserContext"), n("flush"), !(!0 === e.disableExceptionTracking || e.extensionConfig && e.extensionConfig.ApplicationInsightsAnalytics && !0 === e.extensionConfig.ApplicationInsightsAnalytics.disableExceptionTracking)) { n("_" + (r = "onerror")); var o = a[r]; a[r] = function (e, n, i, a, s) { var c = o && o(e, n, i, a, s); return !0 !== c && t["_" + r]({ message: e, url: n, lineNumber: i, columnNumber: a, error: s }), c }, e.autoExceptionInstrumented = !0 } return t
        }({
            instrumentationKey: "xxxxxxxx-xxx-xxx-xxxx-xxxxxxxxxxxx"
        });        
        window[aiName] = aisdk, aisdk.queue && 0 === aisdk.queue.length && aisdk.trackPageView({});
    </script>

注意

インスタンスには複数のカスタムホームページを含めることができます。各ホームページには、インスタンスのログインページにリンクするボタンが必要です。

次の方法で共有

MCT インスタンスのカスタム ホームページを設定する

カスタム ホームページを追加する手順

カスタム ホームページを使用してユーザーのサインインを追跡する

フィードバック

その他のリソース

MCT インスタンスのカスタムホームページを設定する

カスタムホームページを追加する手順

カスタムホームページを使用してユーザーのサインインを追跡する