1. 作ったもの

1.1. デモ

https://mtside01.github.io/AmongUsMap/

上記で公開しています。

Among Usというゲーム用のMapを表示するAppです。（2022/04/17時点で使用可能な全マップ対応）

Among Us Map

ちなみにAmong Usとは宇宙空間で行う人狼ゲームのようなもので、僕はここ１年くらいハマっており月１、２回のペースで学生時代の友人と遊んでいます。

http://www.h2int.com/games/among-us/

ゲーム内での自身の行動をメンバに情報共有するために、マップを手元に開いておくことがほぼ必須となるのですが、いちいち画像検索したりするのが手間だったのでワンクリックでマップを表示できるアプリを作ってみました。

1.2. ソースコード

https://github.com/mtside01/AmongUsMap

2. ポイント（備忘録）

2.1. CDNでBootstrapを導入

僕のブログではおなじみの作業です。

今回のAppではBootstrap Icons、flex-row/flex-columnクラスを使用したかったので導入しています。

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body class="body">
    <!-- Optional JavaScript; choose one of the two! -->
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->

2.2. Bootstrap Iconsの導入

ハンバーガーメニューアイコンが欲しかったので、Bootstrap Iconsを利用してサクッと導入していきます。

https://icons.getbootstrap.jp/

上記サイトから使いたいアイコンを選んで、HTMLをコピーしてくるだけです。

IconsHTML

<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-list menuIcon" viewBox="0 0 16 16">
            <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/>
</svg>

2.3. 各メニューアイコン色をマウスオーバーに応じて変更する

上記で導入したBootstrap Iconsのカラーはcssで指定しているcolorプロパティに影響されます。

今回は通常時は白、マウスオーバー時は緑にしたかったので、hover疑似クラスを使用しています。

.menuIcon{
        color: #FFFFFF;
        width: 50px;
        height: auto;
}
.menuIcon:hover{
    color: #0DF205;
}

同様に、各マップ表示用メニューボタンのcssにもhover擬似クラスでマウスオーバー時の色を指定します。

.button{
        background-color: #000000;
        border: 4px solid;
        border-color: #FFFFFF;
        border-radius:12px;
        padding: 10px 10px;
        margin: 0.5vh 1vw;
        width: 15vw;
}
.button:hover{
    border-color: #0DF205;
}

2.4. メニューボタンのクリックに応じて画面に表示する画像を切り替える

各マップ表示用メニューボタンのクリックに応じて、画面中央に表示する画像を切り替えたかったので、showMap()というJavaScrip関数を用意し、各ボタンのクリック時の動作に紐づけています。

<div class="d-flex flex-column" id = "menu">
        <button class="button" onclick="showMap(0)">
            <img src="./images/skeld_logo.png" class="menulogo">
        </button>

        <button class="button" onclick="showMap(1)">
            <img src="./images/mirahq_logo.png" class="menulogo">
        </button>

        <button class="button" onclick="showMap(2)">
            <img src="./images/polus_logo.png" class="menulogo">
        </button>

        <button class="button" onclick="showMap(3)">
            <img src="./images/airship_logo.png" class="menulogo">
        </button>
</div>

それぞれのボタン毎に引数値を変え、引数に応じて予め用意した配列mapStringから文字列を取得しています。それを利用して画像ファイルまでのパスを記載しています。

var img;
let mapString = new Array('skeld', 'mirahq', 'polus', 'airship');
function showMap(mapNum){
    img = document.getElementById("image_file");
    img.src = "./images/" + mapString[mapNum] +"_map.png";
}

画像表示用img要素には予めimage_fileというidを指定しておくことで、JavaScript側からのsrc記載変更を可能としています。

<img id="image_file" src="./images/skeld_map.png" class="map">

2.5. ハンバーガーメニューのクリックに応じてメニュー一覧の表示/非表示を切り替える

ハンバーガーメニューのクリックに応じてマップを画面最大表示にしたかったので、クリック時にcssクラスの追加/削除を行えるJavaScript関数toggleMenu()を用意しました。

<button class="menuButton" onclick="toggleMenu()">

…

<img id="image_file" src="./images/skeld_map.png" class="map">

css要素の追加/削除にはclassListプロパティを使用しています。

classList.add()で指定したcssクラスを追加、classList.remove()で指定したcssクラスを削除しています。

let showMenu = true;
function toggleMenu(){
    let menuElem = document.getElementById("menu");
    let imgElem = document.getElementById("image_file")
    showMenu = !showMenu;
    if (showMenu == true)
    {
        menuElem.classList.remove("menubar");  
        imgElem.classList.remove("enlargeMap");
    }
    else{
        menuElem.classList.add("menubar");
        imgElem.classList.add("enlargeMap");

    }
}

※ 詳しくは以下などを参照

https://developer.mozilla.org/ja/docs/Web/API/Element/classList

ここで追加しているcssクラスでは単純にメニュー一覧を画面外に追いやる、画像サイズを画面横幅いっぱいに広げるということをしています。

調べたらもっとスマートなやり方があるかもしれません。

.menubar{
    position: relative;
    left: -50vw;
}

…

.enlargeMap{
    width: 100vw;
    position: relative;
    left: -15vw;
}

3. 感想

hover擬似クラスと表示画像の動的変更は今後も使う機会が多々あるんじゃないかなあ、と思う
css指定でメニュー一覧を画面外に追いやるというのはクソコード感があるので改善点の一つ
スマホ画面サイズに対応していないのでそのうち対応したい。PCとスマホ、画面サイズに応じてcss等を切り替える必要がありそう。

けにぶろぐ

Among Us Map App

目次