普通科高校の2年生をやっている@itsu_devです。
今回はMiRm（Minecraft 無料マルチプレイサーバーホスティングサービス）の基幹システムの入れ替えに伴い、@haniokasai氏と新しくシステムを開発しなおしたのでそれを紹介します。

はじめに

そもそもMiRmとは？

Minecraftを友達としようにも、

サーバーが必要
ソフトの導入・設定が面倒
環境構築が難しい
維持費がかかる

といった欠点があり、なかなか敷居の高いものでした。
そこでこれらすべてを解決すべく始まったのがMiRm Projectです。

MiRmにはどんな機能があるの？

サーバーソフトの標準出力のリアルタイム表示
サーバーソフトへの標準入力
FTP経由でのファイル操作
ワンタッチでのサーバー起動・停止
Markdown記法によるサーバーリストへの紹介文掲載

こういった機能をメインに、ほかにも様々な機能をユーザーに提供しています。

技術的な内容

使用した技術

タイトルにもあるように、Spring BootベースのWebアプリケーションとしてすべてを完結させています。「スマホだけでできる」がウリなので、もちろんPWAにも対応しています。
各ユーザーが所有するサーバーは一つのDockerコンテナで完結しており、ファイル操作やサーバーソフトの動作もすべてこの中で行っています。

他の主なものとしては

Thymeleaf（htmlテンプレートエンジン）
MySQL
Material Design Bootstrap（Bootstrapのマテリアルデザインライブラリ）
jQuery
SimpleMDE（埋め込みMarkdownエディタ）
darkmode.js（ダークモードの実装）
kotlin coroutine

といったところです。
全体を管理する基幹システムはkotlinで書かれています。

全体構成

Spring Boot

文献が豊富にあり、kotlinで扱うにはちょうどいいと思ったので採用しました。

csrfを有効にした時の403エラー

これはかなりハマった点なのですが、Spring security標準のcsrfを有効化した状態でREST Controllerで組んだAPIにpostすると403 Forbiddenで弾かれる問題が発生しました。(getだと問題はありませんでした。)

これに対する解決策としては

csrf認証自体を無効化する
postを受けるページに対するcsrf認証を無効化する

の二つが挙げられます。
(参考: https://qiita.com/xx2xyyy/items/385492431a95caa60d7a)

Thymeleaf

Spring Bootとよく使われるhtmlテンプレートエンジンです。一度別件で使ったことがある程度でしたが、改めて使ってみることにしました。

<span th:text=“${text}”></span>

@GetMapping(value = “example”)
public ModelAndView display(ModelAndView mv) {
    // 中略
    mv.addObject(“text”, “Hello, World!”);
    return mv;
}

上のようにhtmlにJava(kotlin)から変数を埋め込めるのですが、これがWebアプリを作る時に案外便利です。

Docker

基幹システムとDockerコンテナとの接続

基本的にはDocker-JavaとJava標準のProcess経由でのコマンド実行の両方を使っています。

Minecraftのコマンドを標準入力に書き込むのに、普通にdocker attach CONTAINERをProcess経由で実行して得たそれに対して行ってもよいのですが、それだとある問題が発生します。
それは、コンテナ内部のサーバーソフトがPID 1で動作していないことです。
この問題によってProcessで得られる標準入力に書き込んでもサーバーソフトに書きこまれない現象が発生しました。それを解決するために、コマンドを/proc/PID/fd/0に書き込むことにしました。

以下のコードでは、上記のPIDを得るためにdocker topコマンドの内容をパースしています。
※MiRmDockerClient#getCommandExceptList　サーバーソフトのプロセスを取得するために除外する文字列のリスト
※TopElementクラス　出力内容のオブジェクトクラス

public static List<TopElement> parse(String serverId) {
        ArrayList<TopElement> elements = new ArrayList<>();
        LinkedList<String> outputs = new LinkedList<>();

        try {
            StringBuffer buf = new StringBuffer();
            buf.append("docker -H "+ DOCKERHOST + " top " + serverId + MiRmDockerClient.getPrefix());
            MiRmDockerClient.getCommandExceptList().forEach(str -> buf.append(" | grep -v \"" + str + "\""));

            ProcessBuilder pb = new ProcessBuilder("/bin/bash", "-c", buf.toString());
            Process process = pb.start();
            BufferedReader reader = new BufferedReader(new InputStreamReader(process.getInputStream(), StandardCharsets.UTF_8));
            String temp;
            while ((temp = reader.readLine()) != null) {
                outputs.add(temp);
            }
            reader.close();
        } catch (IOException e) {
            e.printStackTrace();
        }

        outputs.forEach(str -> {
            str = str.replaceAll("\\s+", " ");
            if (!str.startsWith("UID")) {
                String[] data = str.split(" ");

                StringBuffer buf = new StringBuffer();
                for (int i = 7; i < data.length; i++) {
                    buf.append(" " + data[i]);
                }

                elements.add(new TopElement(
                        data[0],
                        Long.parseLong(data[1]),
                        Long.parseLong(data[2]),
                        Integer.parseInt(data[3]),
                        data[4],
                        data[5],
                        data[6],
                        buf.toString().substring(1)
                ));
            }
        });

        return elements;
    }

PWA (Progressive Web Application)

最近過熱してきている技術で、Webアプリをスマートフォンのネイティブアプリかのように動作させられる技術です。OS(Android/iOS)によって使える機能はまちまち(Androidの方が発展している)ですが、実用には十分耐えられるレベルです。

iOSでは以下のように動作します。
スプラッシュ

動作

タスクビュー

SimpleMDE

超簡単にMarkdownエディタをWebページに実装可能な"SimpleMDE"を参考にさせていただきました。ありがとうございます。

MiRmでサーバーリストを表示するのに、各サーバーに紹介文を書いてもらいたかったのですが、普通の文章だとみんな同じで目立たなくなってしまう。とはいえhtmlを敷居が高い...
と思った矢先、SimpleMDEというjsライブラリを見つけたのでこれを使用して簡単なMarkdownに対応させることにしました。

右下のLobiのアイコンはフォントを作成して表示しています。（参考：https://nelog.jp/feedly-web-iconic-font）

編集画面

実際の表示

編集はMarkdownですが、表示はhtmlで行っています。この変換もSimpleMDEに標準でついており、簡単に使用することができます。

以下のコードでtextareaをエディタ化しています。
toolbarの部分でエディタ上部のツールバーをカスタマイズできます。

<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
</head>

<body>
<label for="description">マークダウン記法が使えます。（htmlタグは使用不可・ボタンとして載っている記法のみ使用可能）</label>
<textarea class="form-control z-depth-1" id="description" name="description" rows="8" cols="40"
                          placeholder="xxサーバーへようこそ！" th:text="${description}">
</textarea>

<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script>
var simplemde = new SimpleMDE({
            element: document.getElementById("description"),
            forceSync: true,
            spellChecker: false,
            toolbar: ["bold", "italic", "strikethrough", "heading", "|", "quote", "unordered-list", "ordered-list", "link", "|", "preview", "side-by-side", "guide"]
        });

 marked.setOptions({
            sanitize: true,
            sanitizer: escape,
            breaks: true
        });
</script>
</body>
</html>

今後の展望

コントロールパネルや設定画面等、コンテンツの中身が多いがゆえに表示速度が若干遅いので、その辺をもっと改善していきたいと思っています。
また将来的にはより簡単に操作できるバージョンのリリースも考えています。

Spring Boot+Thymeleaf+DockerでMiRmの基幹システムを開発した