こんにちは！
九保すこひです（フリーランスのITコンサルタント、エンジニア）

【X】九保すこひ＠フリーランスエンジニア

さてさて、前回はVueでどれぐらいフロントエンド開発が楽になるかを知ってもらうという目的で、Vueなら複数ページの入力もたった１ファイルで開発できる！という記事をお届けしました。

そして、今回はその流れを受けて「Vueならこんなこともできます！」という位置づけで記事をお届けしたいと思います。

では、その具体的な機能内容はというと、

画像のフルスクリーン表示

です。

例えば、画像が一覧表示されていて、そのうち１つをクリックすると画面いっぱいに表示されるという機能になります。さらに、フルスクリーン表示している時は「次へ」「前へ」ボタンを表示し、順番に画像が切り替わるようにするときっと便利だと思います。

そこで！

今回は、Vueを使って画像をフルスクリーン表示する方法をご紹介します。（最後に今回実際に開発したソースコードをダウンロードすることができます）

ぜひ皆さんのお役に立てると嬉しいです

開発環境： Vue 2.6

目次 [非表示]

1 やりたいこと
2 画像を一覧表示する
3 画像がクリックされたときのクリック・イベントを用意する
4 選択された画像のURLが取得できる疑似変数をつくる
5 フルスクリーン部分をつくる
6 テストしてみる
7 ダウンロードする
8 おわりに

やりたいこと

まずはやりたいことをまとめておきます。

一覧表示されている画像をクリックするとフルスクリーン表示する
画像は縦横どちらが長くても中央に表示できるようにする
フルスクリーン・モードのときは「次へ」「前へ」ボタンで画像が順番に切り替わる
同じくフルスクリーン・モードの時は「閉じる」ボタンで元に戻れるようにする

では順を追ってみていきましょう！

画像を一覧表示する

ではまずは画像の一覧を表示する部分を作っていきましょう。

今回はBootstrap 4のレイアウトを使って500 × 500 pxの画像を10枚表示します。

<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div id="app" class="p-3">
        <h1 class="mb-4">Vueで画像をフルスクリーン表示 &#x1F60A;</h1>
        <!-- 画像ギャラリー -->
        <div class="row">
            <div class="col-md-2 text-center" v-for="(url,index) in imageUrls">
                <a href="#">
                    <img :src="url" class="img-fluid mb-3">
                </a>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
    <script>

        new Vue({
            el: '#app',
            data: {
                imageUrls: [
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-1',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-2',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-3',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-4',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-5',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-6',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-7',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-8',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-9',
                    'https://via.placeholder.com/500/FFCCCC/550000?text=Image-10',
                ]
            }
        });

    </script>
</body>
</html>

ここでやっているのは、表示する画像のURLを配列に入れておきv-forを使ってそれらを<img>タグに適用しているだけです。

これを実行すると次のようになります。

画像がクリックされたときのクリック・イベントを用意する

では次に、これらの画像がクリックされたとき実行されるメソッドを作っていきましょう。

まずはHTML側にイベントを設定します。（indexはv-forのindex、つまり画像のインデックス番号になります）

<a href="#" @click.prevent="onImageClick(index)">
    <img :src="url" class="img-fluid mb-3">
</a>

※ ちなみに、preventをつけるとクリックしてもアドレスが#に移動することがなくなります。

では、JavaScript側です。

new Vue({
    el: '#app',
    data: {

        // 省略

        currentImageIndex: -1,
    },
    methods: {
        onImageClick(index) {

            this.currentImageIndex = index;

        }
    },
});

ここでやっているのは、「クリックされた画像のインデックス番号を保持しておく」だけです。

選択された画像のURLが取得できる疑似変数をつくる

では、保持してる画像のインデックス番号を使って、そのURLが取得できる疑似変数currentImageUrlをつくりましょう。

new Vue({

    // 省略

    computed: {
        currentImageUrl() {

            return this.imageUrls[this.currentImageIndex];

        }
    }
});

これでVue内ならthis.currentImageUrl、テンプレート内ではcurrentImageUrlとすれば、現在選択されている画像のURLが取得できるようになります。

フルスクリーン部分をつくる

では、フルスクリーン表示する画像のURLが取得できるようになったので、メインのフルスクリーン部分をつくっていくことにしましょう。

まずはCSS部分です。

<html>
<head>

    <!-- 省略 -->

    <style>

        #fullscreen {

            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;

        }

        #fullscreen img {

            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 100%;
            max-height: 100%;
            margin: auto;

        }

    </style>
</head>

ここで重要なのはposition:absoluteではなく、position:fixedを使っているところです。なぜならスクロールされるほど画像が表示された場合にfixed（画面に固定）でないとフルスクリーンがずれてしまうからです。

そして、HTML部分です。

<div id="app" class="p-3">

    <!-- 省略（画像の一覧） -->

    <div id="fullscreen" v-if="showFullscreen">
        <button style="position:fixed;bottom:20px;left:20px;" type="button" class="btn btn-lg btn-info" @click="toPrev">前へ</button>
        <button style="position:fixed;bottom:20px;right:20px;" type="button" class="btn btn-lg btn-info" @click="toNext">次へ</button>
        <button style="position:fixed;top:20px;right:20px;" type="button" class="btn btn-lg btn-outline-light" @click="close">閉じる</button>
        <img :src="currentImageUrl">
    </div>
</div>

ここで先ほどのcurrentImageUrlを使い、「次へ」「前へ」そして、「閉じる」ボタンを設置しています。

また、v-ifでフルスクリーンの表示が切り替わるようになっている部分にも注目しておいてください。

new Vue({
    el: '#app',
    data: {

        // 省略

        showFullscreen: false // フルスクリーンの表示切り替え
    },
    methods: {
        onImageClick(index) {

            this.currentImageIndex = index;
            this.showFullscreen = true; // フルスクリーンを表示する

        },
        toNext() {

            this.currentImageIndex++;

            if(this.imageUrls[this.currentImageIndex] === undefined) {

                this.currentImageIndex = 0;

            }

        },
        toPrev() {

            this.currentImageIndex--;

            if(this.currentImageIndex < 0) {

                this.currentImageIndex = this.imageUrls.length - 1;

            }

        },
        close() {

            this.showFullscreen = false; // フルスクリーンを表示する

        }
    },
    computed: {
        currentImageUrl() {

            return this.imageUrls[this.currentImageIndex];

        }
    }
});