2019年11月06日 に投稿

とっても簡単！Vueでフルスクリーン機能を実装する

こんにちは。フリーランス・コンサルタント＆エンジニアの 九保すこひ です。

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

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

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

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

です。

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

そこで！

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

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

開発環境： Vue 2.6

やりたいこと

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

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

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

画像を一覧表示する

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

今回は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];

        }
    }
});

まず、ここでやっているのはフルスクリーンの表示／非表示の切り替えです。

とはいっても、先ほどのHTML側で設定したv-ifが全てやってくれるので後は、showFullscreenの中身をtrue / falseに切り替えるだけです。

実際に切り替えを行っているのは、画像をクリックしたときのonImageClick()と、フルスクリーンを終了するときのclose()２ヶ所です。

そして、画像を順に次々を切り替えているのはtoNext()とtoPrev()で、ここではcurrentImageIndex、つまり選択された画像のインデックス番号を足したり、引いたりして中身を変更しています。

ただし、状況によっては新しいインデックス番号が存在しない（たとえば-1など）場合が出てくるので、その場合は「一周ぐるっと回ったインデックス番号」を設定することになります。

currentImageIndexは、先ほどフルスクリーンの<img>タグに設定していますので、番号が変更になるごとに新しい画像が表示されることになります。

お疲れ様でした😊✨

テストしてみる

では、いつものように今回開発したコードを実行してテストしてみましょう！

※ なお、縦横どちらが長くてもフルスクリーン表示できるのをチェックしたいので、わざと２つの画像は長方形にしています。

はい！うまくいきました😊✨

ダウンロードする

今回実際に開発したソースコードを以下からダウンロードすることができます。

※ CSS, JavaScript, 画像全てCDNを通して呼び出しているのでダウンロードして展開したらすぐ実行できます。

Vueでフルスクリーン機能を実装する
開発のご依頼お待ちしております
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします！ by 九保すこひ

おわりに

ということで、今回もよりVueの便利さを知ってもらうためにフルスクリーン機能をつくってみました。

前回も今回もですが、Vueのv-ifを使えば、簡単に表示／非表示の切り替えができるのがわかっていただけたと思います。

なお、今回は画像を使いましたが、実はこれは自前で用意したものではなく、https://placeholder.com/ というウェブサービスを利用させていただきました。

実はこのサービス、縦横サイズなどのパラメータが入ったURLを指定だけでそのまま画像が使えるという、開発者にとっては心からありがたいサービスになっています。（そのため、デザイナーさんからHTMLファイルをもらうとplaceholder.comの画像が埋め込まれていることもあります）

しかも、英語だけですがテキストも変更できますし色も変更することができます。ぜひ皆さんも興味があったら使ってみてくださいね。

ではでは〜！

このエントリーをはてなブックマークに追加       follow us in feedly  

合わせて読みたい