1.
MicrosoftとGitHubの開発エコシステムで、
開発にドライブをかけよう！
#BS10 #MSDevDay
日本マイクロソフト株式会社
Cloud Solution Architect
服部 佑樹

2.
本日お話しすること
1. フロントエンドを
中心とした開発ツール
2. 開発者コラボレーション

3.
この二つは繋がっています
Microsoft と GitHub の開発エコシステム

4.
成熟したクラウドの世界
今何が起こっているのか
Image from Unsplash

5.
成熟度したクラウドの世界のトレンド
全体の動き
1. 抽象化と整理・スイートスポットの模索
👉 さらなる抽象化 vs 抽象化の揺り戻し
2. コラボレーションとエコシステム
👉 人の連携と、機能の連携
3. エンタープライズガバナンス
👉 膨れ上がったサービスの統治
個別の動き
1. パフォーマンスやデバッグ
2. 機能の洗練
Image from Unsplash

6.
クラウドのトレンドの
中心は開発者
Image from Unsplash

7.
Customers
迅速な
フィード
バック
より安全なリリース
顧客満足 開発者の満足
Products
より良い
顧客体験
素早くリリース
• ソフトウェアの品質が 22% Up
• 変更時の失敗は 3～7 倍ほど少なく
• 修復・リカバリーに要する時間が
50～150 倍短縮
• 30～50倍のスピードで
デプロイ可能に
• リードタイムを
200～400 倍短縮
• 顧客が重視する機能を
21% 増しで実装
フィードバックには
3 倍速で対応
顧客からの評価が+24%向上
今日求められている開発

8.
本日お話しすること
抽象化の世界における
開発者エンパワーメント
コラボレーションと
エコシステム

9.
本日のポイント
Visual Studio Code
GitHub Codespaces
GitHub
Developer Repository GitHub Actions Static Web Apps
Functions
Azure AD
Azure AD B2C
User
Azure

10.
Empower Developers

11.
Empower Developers
Static Web Apps で静的 Web アプリを公開
Azure Static Web Apps とは、静的 web アプリを公開するための Azure のサービスです。
Github や Azure DevOps といったコードリポジトリにコミットしたソースをもとに、自動的に静的サイト
を公開することができます。

12.
Empower Developers
Static Web Apps の特徴
React や Blazor・Vue などで
構築された静的 Web アプリ
をホスト可能
GitHub Actions や
Azure Pipelines との
統合で開発を加速
バックエンドは
サーバーレスサービスを
利用し API として構築

13.
Empower Developers
Static Web Apps の主な機能
• HTML、CSS、Javascriptなどの静的コンテンツの web ホスティング
• 標準アカウントを使用して既存の Functions アプリをリンクするオプションを備えた Functions に
よって提供される統合 API サポート
• リポジトリの変更によってビルドとデプロイがトリガーされるファーストクラスの GitHub 統合
• コンテンツユーザーの近くに配置する、グローバルに分散された静的コンテンツ
• 仮想ネットワーク統合 (Private Link)
• 自動的に更新される無料の SSL 証明書
• ブランド化されたカスタマイズをアプリに提供するカスタムドメイン
• API 呼び出し時のリバースプロキシ
• Azure Active Directory、GitHub、及び Twitter との認証プロバイダーの統合
• カスタマイズ可能な認可ロールの定義と割り当て
• 発行前にサイトのプレビューのために pull request を検知して Staging 環境を自動作成

14.
Empower Developers
ホスティングプランと価格
Static Web Apps は、Free と Standard の2種類のプランで利用できます。
Free プラン Standard プラン
価格 無料 $9 / アプリ / 月
Web ホスティング ✓ ✓
GitHub 統合 ✓ ✓
Azure DevOps 統合 ✓ ✓
グローバル分散された静的コンテンツ ✓ ✓
SSL 証明書の無料自動更新 ✓ ✓
ステージング環境 アプリあたり3 アプリあたり10
アプリの最大サイズ アプリあたり250MB アプリあたり500MB
カスタムドメイン アプリあたり2 アプリあたり5
API のための Functions マネージド マネージドまたは持ち込み
認証プロバイダー統合 事前構成済み カスタム登録
SLA 無し ✓

15.
Empower Developers
Azure Functions
アプリ開発を加速させる
イベントベースのサーバーレスサービス
統合プログラミングモデル
組み込みのトリガーとバインディングを使用して、関数を呼び出
すタイミングと接続するデータを定義する
充実した開発環境
お好みのエディタや使いやすいウェブベースのインターフェイス
を使用して、ローカルでコーディング、テスト、デバッグを行う
ことができます（モニタリングも可能）。
ホスティングオプションの柔軟性
開発経験を損なうことなく、よりビジネスニーズに合った導入モ
デルを選択できます。

16.
Empower Developers
GitHub Actions でどこからでもデプロイ
セキュリティで保護されたスケーラブルな
エンタープライズ ワークフローの自動化
すべてを自動化する
GitHubアクションを使用して開発ライフサイクル全体を自動化し、
作業しているどこからでもコードを出荷
いつでもどこでも Azure にデプロイ
Azure 用 GitHub アクションを使用すると、カスタムの自動化ワーク
フローを簡単に作成して、Azure にビルド、テスト、パッケージ化
、リリース、デプロイを行うことができます。
世界最大のDevOpsエコシステムで迅速にデプロイ
GitHub マーケットプレースで 3,000 を超えるコミュニティ構築の
デプロイとテスト プロセスを調査および統合する

17.
Empower Developers
Azure でアプリを保護および監視
エンドツーエンドの観察可能性とインサイトを提
供する Application Insights
問題を迅速に検出、診断、修正
ノイズから信号を分離し、機械学習アルゴリズムを含む高度な分析
を使用して、プラットフォーム間で根本原因分析を加速します。
企業を保護する
インテリジェントなセキュリティ分析機能を使用してセキュリティ
体制を強化し、人工知能で脅威の検出と対応を迅速に行います。
詳細な運用上の洞察を得る
複数の仮想マシン間でアプリケーションとネットワークの依存関係
を包括的に把握し、根本原因の分析をより迅速に実行します。

18.
Demo
Empower
Developers

19.
事例
東部ガス VS Code + GitHub + Teams + Azure Static Web
Apps
「開発者にとって、ツールからサービスまで、開発のために必要なものが全てそろっていることが Microsoft 環境の魅力」
「距離」を超えて実現した緊密なコミュニ
ケーションによるコラボレーション
互いの拠点は東北と九州 遠距離のアジャイル開発を成功
に導くツール群
改善とアウトプットリリースのサイクルの高
速化
クラウド環境を使い倒すことで超短納期の遠隔開発
を実現
顧客のニーズに即応できる拡張性
顧客体験を繰り返し試行しながらより良い形に
ブラッシュアップ
Azure Static Web Apps
静的ホスティング x GitHub 連動 x Azure
Functions と統合で低コストで静的サイト展開可能

20.
Collaboration

21.
Collaboration
現在の状況...埋め込み可能なコンテンツ
Unfurler Adaptive Cards Message
Extensions
Fluid Components
▪ ハブ間で支離滅裂なUX ▪ ユニバーサルレイアウト(静止)
▪ ハブ間でコピー/ペースト不可
▪ ライブ＆アクショナブルだが、
チーム内のみ
▪ ハブをまたいだコピー＆ペース
トができない
▪ M365 でのクロスプラッ
トフォーム
▪ ハブを跨いだ連携

22.
Collaboration
Microsoft Loop

23.
hhhhhhhh
GitHub Actions
Azure Static Web Apps
Collaborate with Loop in the future ちらっとお見せする

24.
Demo
Collaboration

25.
まとめ
1. サービス提供の速さが求められる時、目下の注目対象とされるのは
フロントエンドとクラウドの繋ぎこみ。Azure Static Web Apps は
その中心を担います。
2. 開発者エコシステムは、コラボレーションツールを含めた統合の強
い動きがあります。その波を捉えていきましょう。
3. クラウドの主役は開発者。
GitHub と Microsoft のエコシステムでプロダクト開発にドライブ
をかけましょう。
Image from Unsplash

26.
◼ 本書に記載した情報は、本書各項目に関する発行日現在の Microsoft の見解を表明するものです。Microsoftは絶えず変化する市場に対応しなければならないため、ここに記載した情報に
対していかなる責務を負うものではなく、提示された情報の信憑性については保証できません。
◼ 本書は情報提供のみを目的としています。 Microsoft は、明示的または暗示的を問わず、本書にいかなる保証も与えるものではありません。
◼ すべての当該著作権法を遵守することはお客様の責務です。Microsoftの書面による明確な許可なく、本書の如何なる部分についても、転載や検索システムへの格納または挿入を行うこと
は、どのような形式または手段（電子的、機械的、複写、レコーディング、その他）、および目的であっても禁じられています。これらは著作権保護された権利を制限するものではあり
ません。
◼ Microsoftは、本書の内容を保護する特許、特許出願書、商標、著作権、またはその他の知的財産権を保有する場合があります。Microsoftから書面によるライセンス契約が明確に供給さ
れる場合を除いて、本書の提供はこれらの特許、商標、著作権、またはその他の知的財産へのライセンスを与えるものではありません。
◼ Microsoft, Windows, その他本文中に登場した各製品名は、Microsoft Corporation の米国およびその他の国における登録商標または商標です。
その他、記載されている会社名および製品名は、一般に各社の商標です。