Minecraft を使った Azure の新しい学び方

Global Azure 2023 で発表したスライド資料です。

イベント詳細
https://jazug.connpass.com/event/279068/

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. 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
   

   View Slide

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

   View Slide

9. 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/
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. マイクラサーバ構築⼿順
    16
    1. 秘密キーを使⽤してコンソールよりssh接続
    ssh -i <秘密キーのパス>.pem demouser@.japaneast.cloudapp.azure.com
    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
    

    View Slide

17. マイクラサーバ構築⼿順
    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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 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");
    }
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 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=<コード>");
    }
    }
    }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

41. ドキュメントの中⾝
    41
    

    View Slide

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

    View Slide

43. 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/
    

    View Slide

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

    View Slide