Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

More Decks by たくのろじぃ / Takunology

Other Decks in Education

Transcript

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide