Azure プロジェクトの Wiki を使用してチームの知識を共有する

受講生用ラボマニュアル

ラボの要件

このラボには、Microsoft Edge または Azure DevOps 対応ブラウザーが必要です。
Azure DevOps 組織を設定する: このラボで使える Azure DevOps 組織がまだない場合は、AZ-400 ラボの前提条件に関するページの手順に従って作成してください。
サンプルの eShopOnWeb プロジェクトを設定する: このラボで使用できるサンプルの eShopOnWeb プロジェクトがまだない場合は、AZ-400 ラボの前提条件に関するページに記載されている手順に従って作成してください。

ラボの概要

このラボでは、マークダウンのコンテンツの管理やマーメイドダイアグラムの作成など、Azure DevOps で Wiki を作成および構成します。

目標

このラボを完了すると、次のことができるようになります。

Azure プロジェクトで Wiki を作成する。
マークダウンを追加および編集する。
マーメイドダイアグラムを作成する。

推定時間:45 分

Instructions

演習 0:ラボの前提条件の構成

この演習では、ラボの前提条件の検証、Azure DevOps 組織の準備が整っていること、および eShopOnWeb プロジェクトを作成したことについてもう一度確認してください。詳細については上記の手順を参照してください。

演習 1:コードを Wiki として公開する

この演習では、Azure DevOps リポジトリを Wiki として公開し、公開された Wiki を管理する手順を説明します。

注:Git リポジトリに保持しているコンテンツは、Azure DevOps wiki に公開できます。たとえば、ソフトウェア開発キット、製品ドキュメント、またはREADME ファイルをサポートするために作成されたコンテンツは、Wiki に直接公開できます。同じ Azure DevOps チームプロジェクト内で複数の Wiki を公開するオプションがあります。

タスク 1:Azure DevOps リポジトリのブランチを wiki として公開する

このタスクでは、Azure DevOps リポジトリのブランチを wiki として公開します。

注:公開された Wiki が製品バージョンに対応している場合は、製品の新しいバージョンをリリースするときに新しいブランチを公開できます。

左側の垂直メニューで [リポジトリ] をクリックし、[ファイル] ペインの上部セクションで [eShopOnWeb] リポジトリが選択されていることを確認します (上部のドロップダウンから Git アイコンで選択します)。ブランチのドロップダウンリスト (ブランチアイコンのある “ファイル” の上) で、[メイン] を選択し、メインブランチのコンテンツを確認します。
[ファイル] ペインの左側にあるリポジトリフォルダーとファイル階層の一覧で、 [src] フォルダーを展開して、 [Web] > [wwwroot] > [images] サブフォルダーを参照します。 [Images] サブフォルダーで brand.png エントリを見つけ、その右端をポイントして [その他] メニューを表す縦の省略記号 (3 つのドット) を表示し、 [ダウンロード] をクリックして、brand.png ファイルをラボコンピューターのローカルの [ダウンロード] フォルダーにダウンロードします。

注:このラボの次の演習では、この画像を使用します。
Wiki ソースファイルは、Repos の現在のフォルダー構造内の別のフォルダーに格納します。 Repos 内から、 [ファイル] を選びます。フォルダー構造の上部に eShopOnWeb というリポジトリタイトルがあることに注意してください。 省略記号 (3 つのドット) を選び、 [新規] > [フォルダー] を選んで、[新しいフォルダー名] のタイトルとして「ドキュメント」を指定します。リポジトリでは空のフォルダーを作成できないため、[新しいファイル名] として「READ.ME」を指定します。
[作成] ボタンを選んで、フォルダーとファイルの作成を確認します。
READ.ME ファイルが組み込みのビューモードで開きます。これは “コードとして” 格納されるため、 [コミット] ボタンをクリックして変更をコミットする必要があります。 [コミット] ウィンドウで、もう一度 [コミット] を選んで確認します。
Azure DevOps の左側の垂直メニューで [概要] をクリックし、 [概要] セクションで [Wiki] を選んで、 [Wiki としてコードを公開する] を選びます。

[Wiki としてコードを公開する] ペインで、次の設定を指定して [公開] をクリックします。

設定	値
リポジトリ	eShopOnWeb
[Branch](ブランチ)	main
Folder	/Documents
Wiki 名	eShopOnWeb (ドキュメント)

注: これにより、Wiki セクションが自動的に開き、エディターが発行されます。ここで、Wiki ページのタイトルを指定したり、実際のコンテンツを追加したりできます。 MarkDown 形式を使うことが推奨されることに注意してください。リボンを使うといくつかの MarkDown レイアウト構文に役立ちます。

Wiki ページの [タイトル] フィールドに、「オンライン小売店へようこそ!」と入力します。

Wiki ページの本文に、次のテキストを貼り付けます。

 ##Welcome to Our Online Retail Store!
 At our online retail store, we offer a **wide range of products** to meet the **needs of our customers**. Our selection includes everything from *clothing and accessories to electronics, home decor, and more*.
    
 We pride ourselves on providing a seamless shopping experience for our customers. Our website offers the following benefits:
 1. user-friendly,
 1. and easy to navigate, 
 1. allowing you to find what you're looking for,
 1. quickly and easily. 
    
 We also offer a range of **_payment and shipping options_** to make your shopping experience as convenient as possible.
    
 ### about the team
 Our team is dedicated to providing exceptional customer service. If you have any questions or concerns, our knowledgeable and friendly support team is always available to assist you. We also offer a hassle-free return policy, so if you're not completely satisfied with your purchase, you can easily return it for a refund or exchange.
    
 ### Physical Stores
 |Location|Area|Hours|
 |--|--|--|
 | New Orleans | Home and DIY  |07.30am-09.30pm  |
 | Seattle | Gardening | 10.00am-08.30pm  |
 | New York | Furniture Specialists  | 10.00am-09.00pm |
    
 ## Our Store Qualities
 - We're committed to providing high-quality products
 - Our products are offered at affordable prices 
 - We work with reputable suppliers and manufacturers 
 - We ensure that our products meet our strict standards for quality and durability. 
 - Plus, we regularly offer sales and discounts to help you save even more.
    
 #Summary
 Thank you for choosing our online retail store for your shopping needs. We look forward to serving you!

このサンプルテキストを見ると、タイトルとサブタイトル (##)、太字 (* )、斜体 ( )、テーブルの作成方法など、MarkDown 構文のいくつかの一般的な機能の概要がわかります。
終わったら、右上隅にある [保存] ボタンを選びます。
ブラウザーを更新するか、他の DevOps ポータルオプションを選んで Wiki セクションに戻ります。 EshopOnWeb (ドキュメント) Wiki が表示され、Wiki の HomePage として [オンライン小売店へようこそ!] と表示されていることに注意してください。

タスク 2:公開された Wiki のコンテンツを管理する

このタスクでは、前のタスクで公開した Wiki のコンテンツを管理します。

左側の縦型メニューで [リポジトリ] をクリックし、[ファイル] ペインの上部のドロップダウンメニューに eShopOnWeb リポジトリとメイン ブランチが表示されていることを確認します。リポジトリフォルダー階層で [ドキュメント] フォルダーを選び、Welcome-to-our-Online-Retail-Store!.md ファイルを選びます。
ここでは MarkDown 形式が生のテキスト形式として表示され、ここからもファイルの内容の編集を続けられることに注意してください。

注: Wiki ソースファイルはソースコードとして処理されるため、従来のソース管理からのすべての操作 (クローン、pull request、承認など) を Wiki ページにも適用できることを覚えておいてください。

演習 2:プロジェクト Wiki の作成と管理

この演習では、プロジェクト Wiki の作成と管理について説明します。

注:既存のリポジトリとは別に、Wiki を作成および管理できます。

タスク 1:マーメイド図と画像を含むプロジェクト Wiki を作成する

このタスクでは、プロジェクト Wiki を作成し、それにマーメイド図と画像を追加します。

ラボコンピューターの、EShopOnweb プロジェクトの Wiki ペインが表示されている Azure DevOps ポータルで (eShopOnWeb (ドキュメント) Wiki のコンテンツが選ばれています)、ペイン上部の eShopOnWeb (ドキュメント) ドロップダウンリストヘッダー (下矢印アイコン) をクリックして、ドロップダウンリストで [新しいプロジェクト Wiki を作成する] を選びます。
[ページタイトル] テキストボックスに、「プロジェクト設計」と入力します。
ページの本文にカーソルを置き、ヘッダー設定を表すツールバーの左端のアイコンをクリックし、ドロップダウンリストで [ヘッダー 1] をクリックします。これにより、行の先頭にハッシュ文字 ( # ) が自動的に追加されます。
新しく追加された # 文字の直後に、「認証と認可」と入力し、Enter キーを押します。
ヘッダー設定を表すツールバーの左端のアイコンをクリックし、ドロップダウンリストで [ヘッダー 2] をクリックします。これにより、行の先頭にハッシュ文字 ( ## ) が自動的に追加されます。
新しく追加された ## 文字の直後に、「Azure DevOps OAuth 2.0 認証フロー」と入力し、Enter キーを押します。

次のコードをコピーして貼り付け、マーメイド図を Wiki に挿入します。

 ::: mermaid
 sequenceDiagram
  participant U as User
  participant A as Your app
  participant D as Azure DevOps
  U->>A: Use your app
  A->>D: Request authorization for user
  D-->>U: Request authorization
  U->>D: Grant authorization
  D-->>A: Send authorization code
  A->>D: Get access token
  D-->>A: Send access token
  A->>D: Call REST API with access token
  D-->>A: Respond to REST API
  A-->>U: Relay REST API response
 :::

注: マーメイド構文の詳細については、「マーメイドについて」を参照してください。

エディターペインの右側にある、プレビューペインで、[ダイアグラムのロード] をクリックして、結果を確認します。

注:出力は、OAuth 2.0を使用してREST API へのアクセスを承認する方法を示すフローチャートのようになります。
エディターペインの右上隅にある [保存] ボタンの横にある下向きのキャレットをクリックし、ドロップダウンメニューで、[リビジョンメッセージと一緒に保存する] をクリックします。
[ページの保存] ダイアログボックスで、「OAuth 2.0 マーメイド図を使用した認証と承認セクション」と入力し、[保存] をクリックします。
[プロジェクト設計] エディターペインで、このタスクの前半で追加したマーメイド要素の最後にカーソルを置き、Enter キーを押して行を追加し、ヘッダー設定を表すツールバーの左端のアイコンをクリックし、ドロップダウンリストで [ヘッダー 2] をクリックします。これにより、行の先頭にダブルハッシュ文字 ( ## ) が自動的に追加されます。
新しく追加された ## 文字の直後に、「ユーザーインターフェイス」と入力し、Enter キーを押します。
[プロジェクト設計] エディターペインのツールバーで、 [ファイルの挿入] アクションを表すペーパークリップアイコンをクリックし、 [開く] ダイアログボックスで [ダウンロード] フォルダーに移動し、前の演習でダウンロードした Brand.png ファイルを選んで [開く] をクリックします。
プロジェクト設計エディターペインに戻り、プレビューペインを確認して、画像が正しく表示されていることを確認します。
エディターペインの右上隅にある [保存] ボタンの横にある下向きのキャレットをクリックし、ドロップダウンメニューで、[リビジョンメッセージと一緒に保存する] をクリックします。
[ページの保存] ダイアログボックスで、「eShopOnWeb 画像を含むユーザーインターフェイスセクション」と入力し [保存] をクリックします。
エディターペインに戻り、右上隅にある [閉じる] をクリックします。

タスク 2:プロジェクト Wiki の管理

このタスクでは、新しく作成されたプロジェクト Wiki を管理します。

注:まず、Wiki ページへの最新の変更を元に戻します。

ラボコンピューターの、eShopOnWeb プロジェクトの Wiki ペインが表示されている Azure DevOps ポータルで (プロジェクト設計 Wiki のコンテンツが選択されています)、右上隅の縦の省略記号をクリックし、ドロップダウンメニューで [リビジョンを表示する] をクリックします。
[リビジョン] ペインで、最新の変更を表すエントリをクリックします。
表示されたペインで、ドキュメントの以前のバージョンと現在のバージョンの比較を確認し、[元に戻す] をクリックし、確認を求められたら、もう一度 [元に戻す] をクリックして、[ページの参照] をクリックします。
[プロジェクト設計] ペインに戻り、変更が正常に元に戻されたことを確認します。

注:ここで、プロジェクト Wiki に別のページを追加し、それを Wiki ホームページとして設定します。
[プロジェクト設計] ペインの左下隅にある [+ 新しいページ] をクリックします。
ページエディターペインの [ページタイトル] テキストボックスに「プロジェクト設計の概要」と入力し、[保存] をクリックして、[閉じる] をクリックします。
プロジェクト設計プロジェクト Wiki 内のページを一覧表示するペインに戻り、プロジェクト設計概要エントリを見つけ、マウスポインターで選択し、プロジェクト設計ページエントリの上にドラッグアンドドロップします。
表示されるウィンドウの [移動] ボタンを選んで、変更を確認します。
プロジェクト設計概要エントリがトップレベルページとして一覧表示され、ホームアイコンがそれを Wiki ホームページとして指定していることを確認します。

確認

このラボでは、Markdown コンテンツの管理やマーメイド図の作成など、Azure DevOps で Wiki を作成および構成しました。