2019年11月6日とっても簡単!Vueでフルスクリーン機能を実装するさてさて、前回はVueでどれぐらいフロントエンド開発が楽になるかを知ってもらうという目的で、Vueなら複数ページの入力もたった1ファイルで開発できる!という記事をお届けしました。今回はその流れを受けて「Vueならこんなこともできます!」という位置づけで記事をお届けしたいと思います。画像のフルスクリーン表示です。画像が一覧表示されていて、そのうち1つをクリックすると画面いっぱいに表示されるという機能になります。フルスクリーン表示している時は「次へ」「前へ」ボタンを表示し、順番に画像が切り替わるようにするときっと便利だと思います。そこで!今回は、Vueを使って画像をフルスクリーン表示する方法をご紹介します。合わせて読みたいやりたいことまずはやりたいことをまとめておきます。一覧表示されている画像をクリックするとフルスクリーン表示する画像は縦横どちらが長くても中央に表示できるようにするフルスクリーン・モードのときは「次へ」「前へ」ボタンで画像が順番に切り替わる同じくフルスクリーン・モードの時は「閉じる」ボタンで元に戻れるようにするでは順を追ってみていきましょう!画像を一覧表示するではまずは画像の一覧を表示する部分を作っていきましょう。pxの画像を10枚表示します。</script></body></html>ここでやっているのは、表示する画像のURLを配列に入れておきv-forを使ってそれらを<img>タグに適用しているだけです。これを実行すると次のようになります。画像がクリックされたときのクリック・イベントを用意するでは次に、これらの画像がクリックされたとき実行されるメソッドを作っていきましょう。HTML側にイベントを設定します。ちなみに、preventをつけるとクリックしてもアドレスが#に移動することがなくなります。JavaScript側です。},});ここでやっているのは、「クリックされた画像のインデックス番号を保持しておく」だけです。選択された画像のURLが取得できる疑似変数をつくるでは、保持してる画像のインデックス番号を使って、そのURLが取得できる疑似変数currentImageUrlをつくりましょう。}});これでVue内ならthis.currentImageUrl、テンプレート内ではcurrentImageUrlとすれば、現在選択されている画像のURLが取得できるようになります。フルスクリーン部分をつくるでは、フルスクリーン表示する画像のURLが取得できるようになったので、メインのフルスクリーン部分をつくっていくことにしましょう。</style></head>ここで重要なのはposition:absoluteではなく、position:fixedを使っているところです。スクロールされるほど画像が表示された場合にfixed(画面に固定)でないとフルスクリーンがずれてしまうからです。</div></div>ここで先ほどのcurrentImageUrlを使い、「次へ」「前へ」そして、「閉じる」ボタンを設置しています。v-ifでフルスクリーンの表示が切り替わるようになっている部分にも注目しておいてください。}});まず、ここでやっているのはフルスクリーンの表示/非表示の切り替えです。falseに切り替えるだけです。実際に切り替えを行っているのは、画像をクリックしたときのonImageClick()と、フルスクリーンを終了するときのclose()2ヶ所です。画像を順に次々を切り替えているのはtoNext()とtoPrev()で、ここではcurrentImageIndex、つまり選択された画像のインデックス番号を足したり、引いたりして中身を変更しています。状況によっては新しいインデックス番号が存在しない(たとえば-1など)場合が出てくるので、その場合は「一周ぐるっと回ったインデックス番号」を設定することになります。currentImageIndexは、先ほどフルスクリーンの<img>タグに設定していますので、番号が変更になるごとに新しい画像が表示されることになります。縦横どちらが長くてもフルスクリーン表示できるのをチェックしたいので、わざと2つの画像は長方形にしています。はい!うまくいきました😊✨ダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。画像全てCDNを通して呼び出しているのでダウンロードして展開したらすぐ実行できます。Vueでフルスクリーン機能を実装するおわりにということで、今回もよりVueの便利さを知ってもらうためにフルスクリーン機能をつくってみました。前回も今回もですが、Vueのv-ifを使えば、簡単に表示/非表示の切り替えができるのがわかっていただけたと思います。いうウェブサービスを利用させていただきました。実はこのサービス、縦横サイズなどのパラメータが入ったURLを指定だけでそのまま画像が使えるという、開発者にとっては心からありがたいサービスになっています。(そのため、デザイナーさんからHTMLファイルをもらうとplaceholder.comの画像が埋め込まれていることもあります)しかも、英語だけですがテキストも変更できますし色も変更することができます。皆さんも興味があったら使ってみてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。