Minecraft を使った Azure の新しい学び⽅ Global Azure 2023 @⽇本マイクロソフト品川オフィス ⼤川 匠（たくのろじぃ） @takunology_net takunology #jazug #GlobalAzure

⾃⼰紹介 教育版マインクラフトを使⽤したプログラミング教室の講師 && 教材の開発 普段のお仕事 プログラミング(C#) や Azure で⾊々試す, Minecraft, GitHub徘徊, 温泉巡り 趣味 ⼤川 匠 | たくのろじぃ 株式会社YAGO コース発明部 / 講師 元 Microsoft Learn Student Ambassador (2021 - 2023) OSS開発 出版物(Zennにて無料公開中︕) C#でマイクラのコマンドを実⾏できるライブラリ つい最近(3⽉)まで⼤学⽣でした︕

お品書き 1. Minecraft が学習ツールとして優秀な話 2. Azure Virtual Machines でマイクラサーバを⽴てる 3. Azure Functions でマイクラのコマンドを動かす 4. Azure Static Web Apps でマイクラ向けWebアプリをつくる 5. Azure Cosmos DB で作物の収穫量を記録する（おまけ） • これから Azure を使ってみたい⽅ • Minecraft と Azure の組み合わせに興味のある⽅ こんな⽅におすすめ︕

1. Minecraft が学習ツールとして優秀な話 学習ツールとしての Minecraft をご紹介

Minecraft • 全世界で1.7億⼈以上が遊んでいるゲームプロダクト • プラットフォーム別に3種類展開 Java Edition Bedrock Edition (統合版) Education (教育版) • PC限定で動作 • 多種多様なModを導⼊できる • ⾃由度が⾼い • 様々なプラットフォームで動作 • クロスプレイが可能（Relms） • マーケットプレイスの利⽤が可能 • 学習教材・ワールドが豊富 • 同じ組織内でマルチプレイ可能 • 化学ブロックやMakeCodeが付属 5

Minecraft を使⽤した学びの例 • MakeCodeを使うとプログラミング学習に利⽤できる • 統合版または教育版で利⽤可能 6

Java 版でも学べるコンテンツをつくりたい • MinecraftConnection を使うと C# からマイクラのコマンドを実⾏できる • ⾃動化やプログラミング学習に利⽤ 7 /summon firework_rocket ~20 ~ ~ {LifeTime:30,FireworksItem:{id:firework_rocket,Count:1,tag:{Fireworks:{Flight:2,Explosions: [{Type:1,Flicker:0,Trail:0,Colors:[I;3887386],FadeColors:[I;2437522]}]}}}} 花⽕を1発打ち上げるのに必要なコマンドの例↓ C#でたくさん花⽕を打ち上げる↓ https://github.com/takunology/MinecraftConnection

Minecraft で Azure について学べるか🤔 これまでに、ローカル環境でやってきたことを思い出す 8 マイクラサーバを⽴てられる Blazor アプリを作れる C#からコマンドを実⾏できる

Minecraft で Azure について学べるか🤔 これを Azure の各種サービスに当てはめてみると・・・︖ 9 マイクラサーバを⽴てられる Blazor アプリを作れる C#からコマンドを実⾏できる 仮想マシンが必要 .NET ランタイムが必要 SPAをデプロイできる環境が必要 Azure Virtual Machines があるじゃないか︕ Azure Functions があるじゃないか︕ Azure Static Web Apps があるじゃないか︕ Azure で全部解決できる︕（しかも学⽣は Azure for Students プランがあるので無料︕） https://azure.microsoft.com/ja-jp/free/students/

Minecraft で Azure は学べる︕💡 10 マイクラサーバの運⽤ Blazor の運⽤ コマンドの実⾏ データの記録 みんなでワイワイマルチプレイしたい︕ → Azure Virtual Machines 作物の収穫量を記録したい︕ → Azure Cosmos DB 遠隔操作でコマンドを実⾏したい︕ → Azure Functions Webアプリからコマンド操作したい︕ → Azure Static Web Apps 学習テーマ ハードウェアの選定, ネットワーク, 環境構築など 学習テーマ コーディング(C#), イベント駆動, バインドなど 学習テーマ コーディング(C#), マークアップ(HTML), CI/CDなど 学習テーマ NoSQL, クエリ, JSONなど

2. Azure Virtual Machines でマイクラサーバを⽴てる Java Edition インスタンス作成 / ネットワーク設定 / 環境構築 / マルチプレイ

Azure Virtual Machines • 仮想マシンを作ることができるサービス • ⽤途によってCPUやメモリ、ディスクサイズなどをスケールアップすることができる • バニラサーバ（Modなし）の場合、2GiB以上あれば問題ない（OSも考慮する必要がある） • マルチプレイ⼈数が3⼈増えるごとに1GiB増やすのがオススメ 12

仮想マシンをつくる 13 1. 「Azure サービス」から「リソースの作成」を選択 2. 「仮想マシン」を選択（なければ検索） 3. 「プロジェクトの詳細」の必要事項を記⼊ 4. 「確認および作成」から「作成」をクリック 5. 「秘密キー」をダウンロードして保管

ネットワーク設定 – ポート解放 14 1. 仮想マシンのリソースより、「ネットワーク」を選択 2. 「受信ポートの規則を追加」を選択 3. 画像のように設定して「追加」をクリック マルチプレイ⽤のポート︓25565 Remote console (RCON)⽤ポート : 25575

ネットワーク設定 – DNS設定 15 1. 仮想マシンのリソースより、DNS名の「未構成」を選択 2. DNS名ラベルを任意に設定（ユニーク） 3. 保存をクリック 4. 仮想マシンのリソースに戻ってDNS名を確認

マイクラサーバ構築⼿順 16 1. 秘密キーを使⽤してコンソールよりssh接続 ssh -i <秘密キーのパス>.pem [email protected] 2. サーバファイルを⼊れるディレクトリをつくって移動する mkdir MinecraftServer && cd $_ 3. Java 17 ⽤のパッケージをとってくる sudo add-apt-repository ppa:linuxuprising/java -y 4. アップデートする sudo apt update 5. Java 17 のインストール sudo apt install openjdk-17-jdk -y 5. Minecraft Server のインストール curl -L -O https://piston-data.mojang.com/v1/objects/8f3112a1049751cc472ec13e397eade5336ca7ae/server.jar

マイクラサーバ構築⼿順 17 6. サーバ起動ファイル (start.sh) を作る echo java –Xmx2G –Xms2G –jar server.jar > start.sh 7. 起動ファイルに実⾏権限を付与する chmod o+x start.sh 8. サーバを起動する（が、初回起動は失敗します） ./start.sh 9. 作成された Eura.txt の eula=false を true に変える（利⽤規約への同意） echo eula=true > eula.txt 10. server.properties にて RCONを許可 / パスワードを設定する enable-rcon=true rcon.password=任意のパスワード 11. もう⼀度サーバを起動する（サーバコンソールにてDONEの表記があればOK） ./start.sh

みんなでマルチプレイ︕ 18 1. 「起動構成」より、バージョンをサーバと合わせる 2. マイクラを起動したら「マルチプレイ」→「サーバを追加」を選択 3. 「サーバーアドレス」に Azure で設定したDNS名を記⼊ 4. 作ったマルチプレイサーバに接続 5. サーバを閉じるときは必ずコンソールで “stop” コマンドを 使⽤する

こんな時はどうする︖ 19 Q. サーバのシャットダウンを忘れてヤバイ請求額になりそう A. ⾃動シャットダウン機能を使いましょう︕ Q. ⼈数が増えたのでメモリ増やしたいんだけど、もしかしてサーバの設定初期化されてしまう︖ A. 初期化されないので、柔軟にスケールアップしていきましょう︕

3. Azure Functions でマイクラのコマンドを動かす Visual Studio での開発

Azure Functions 21 • サーバレスな関数アプリ (API) を作ることができるサービス（⽉々100万回まで無料で実⾏できる） • 条件に応じて動きを変えることができる（イベント駆動） • Visual Studio で作ってデプロイすることも可能 • 値を受け取って処理したり、別のリソースへ出⼒したりできる（バインド） 7時になったで 動くで〜 リクエストあったで 動くで〜 イベント駆動（イベントドリブン） バインド タイマートリガー HTTP トリガー データ送るで 整形しとくで 記録しとくで ⼊⼒バインド 出⼒バインド

関数アプリをつくる 22 1. 「リソースの作成」を選択 2. 「関数アプリ」の「作成」を選択（なければ検索） 3. 必要事項を記⼊ 4. 「確認および作成」→「作成」をクリック

Visual Studio で開発する 23 1. 新しいプロジェクトの作成から「Azure Functions」を選択 2. プロジェクト名をつけて次へ 3. Function にて 「Http trigger」 を選択 4. 「作成」をクリック Authorization level 関数を呼び出すときにAPIキーを必要とするかどうかの設定 Function : APIキーが必要 Anonymous : APIキーは必要なし Admin : マスターキーが必要

Visual Studio で開発する 24 5. NuGet にて MinecraftConnection を導⼊ 6. 下記のようにコーディング using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Microsoft.Azure.WebJobs; using Microsoft.Azure.WebJobs.Extensions.Http; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.Logging; using MinecraftConnection; namespace HttpFunc { public static class Function1 { [FunctionName("Function1")] public static async Task Run( [HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req, ILogger log) { string address = “.japaneast.cloudapp.azure.com"; ushort port = 25575; string pass = "minecraft"; MinecraftCommands commands = new MinecraftCommands(address, port, pass); commands.DisplayTitle("Hello, Minecraft!"); return new OkObjectResult("OK"); } } }

Visual Studio で開発する 25 7. URLをコピーしてブラウザからリクエストする 8. マインクラフトにてタイトルが表⽰されればOK

Visual Studio で開発する 26 9. ソリューションエクスプローラーからプロジェクトを右クリックして「発⾏」をクリック 10. ターゲットを「Azure」→「Azure Function App (Windows)」を選択して次へ 11. 関数アプリのインスタンスを選択して「完了」をクリック 12. 「発⾏」をクリックしてFunctionsへデプロイ

Functions のURLとキーの取得 27 1. 関数アプリのリソースから「関数」→デプロイされた関数名を選択 2. 「関数のURLの取得」を選択し、リンクをコピー 3. ブラウザからリクエストしてみる 4. マイクラにてタイトルが表⽰されれば完成︕

4. Azure Static Web Apps でマイクラ向けWebアプリをつくる 作った関数アプリ(API)を Blazor から叩いてみる

Azure Static Web Apps 29 • SPA (Single Page Application) を運⽤できるサービス • Blazor, React, Vue などのフレームワークが利⽤可能 • コードは GitHub リポジトリにプッシュし、Actions で⾃動デプロイ GitHub Actions によるデプロイ Azure Functions との組み合わせ ボタンをポチー コマンド実⾏ タイトルロゴが ドーン︕ コード書いたで Push! お、workflow あるやんけ テストとデプロイ しとくわぁ デプロイ完了

Blazor プロジェクトの作成 30 1. プロジェクトの作成から Blazor WebAssembly アプリを選択 2. プロジェクト名を記⼊して次へ 3. 追加情報は特にいじらずに作成 4. ソリューションエクスプローラーより Pages/Index.razor を下記のように書き換える (URLは関数アプリのリソースからコピーする) @page "/" マイクラアプリ

Hello, Global Azure

@code { async Task HelloButton() { using (HttpClient client = new HttpClient()) { await client.GetAsync("https://func-taku-demo001.azurewebsites.net/api/Function1?code=<コード>"); } } }

そのままでは実⾏できない︖ 31 このまま動かそうとすると CORS（クロスオリジンリソース共有）エラーが発⽣する → 許可していないドメインから不正に実⾏されるのを防ぐもの Azure Functions 側でローカルホストからのアクセスを許可しないといけない

CORS設定 32 1. 関数アプリのリソースから CORS を選択 2. 許可される元のドメインの欄に Blazor のリンクを貼る 3. リンクを貼れたら保存して、再び Blazor から API を叩いてみる

GitHubリポジトリの作成 33 1. Visual Studio の Git から「Git リポジトリの作成」をクリック 2. 変更点がなければこのまま「作成とプッシュ」をクリック たったこれだけ︕すごく簡単︕

リソースの作成 34 1. 「リソースの作成」から「静的Webアプリ」を検索して作成 2. プランはそのままにして作成 3. 必要事項に記⼊する

リソースの作成 35 4. GitHubアカウントと連携し、組織、リポジトリ、分岐を選択 5. ビルドのプリセットは Blazor を選択 6. アプリの場所 = プロジェクト名にする 今回はソリューション直下のため “./” とする 7. 「確認および作成」→「作成」をクリック 8. デプロイが完了するまで2分ほど待つ 9. リソースへ移動し、「参照」をクリック 10. URLをコピーして CORS の許可ドメインに追記 11. ボタンを押してみる︕ ./

ソースコードの変更 36 • プログラムを変更する前に、⼀度プルする（workflow ファイルが⽣成されている） • 書き換えたら再びコミット＆プッシュするだけで⾃動でデプロイされる

5. Azure Cosmos DB で作物の収穫量を記録する 「こんな使い⽅もできますよ」という簡単な紹介

Azure Cosmos DB 38 • NoSQL なデータベース（ドキュメント指向） • データ⾃体はJSON形式で管理される • C#からアクセスするには Microsoft.Azure.Documents を使⽤する

農業の⾃動化 39 • 作物を回収、種まき、回収量の記録までを⾃動で⾏うシステムの構築 • LINE Messaging API を利⽤して収穫量の通知もおこなう

実⾏例 40 https://youtu.be/_bIUlvyddFU

ドキュメントの中⾝ 41

これが Minecraft を使った Azure の新しい学び⽅ 42 マイクラサーバの運⽤ Blazor の運⽤ コマンドの実⾏ データの記録 みんなでワイワイマルチプレイしたい︕ → Azure Virtual Machines 作物の収穫量を記録したい︕ → Azure Cosmos DB 遠隔操作でコマンドを実⾏したい︕ → Azure Functions Webアプリからコマンド操作したい︕ → Azure Static Web Apps 学習テーマ ハードウェアの選定, ネットワーク, 環境構築など 学習テーマ コーディング(C#), イベント駆動, バインドなど 学習テーマ コーディング(C#), マークアップ(HTML), CI/CDなど 学習テーマ NoSQL, クエリ, JSONなど

Microsoft Learn もあります︕ 43 1. Azure Virtual Machines の概要（ラーニングモジュール） https://learn.microsoft.com/ja-jp/training/modules/intro-to-azure-virtual-machines/ 2. Azure Functions の概要（ラーニングモジュール） https://learn.microsoft.com/ja-jp/training/modules/intro-azure-functions/ 3. Azure Static Web Apps （ラーニングパス） https://learn.microsoft.com/ja-jp/training/paths/azure-static-web-apps/ 4. Azure Cosmos DB の基礎を調べる（ラーニングモジュール） https://learn.microsoft.com/ja-jp/training/modules/explore-non-relational-data-stores-azure/

Minecraft × Azure で遊んで学ぼう︕ ありがとうございました︕