Nextでも！Nuxtでも！Viewport Extraで手軽に縮小表示

こんにちは！ エンジニアのつっちーです。

突然ですが、フレームワークって便利ですよね。色々ありますが、JavaScriptだと今はNextやNuxtでしょうか（2022年3月時点）。私もこの2つにはどっぷりハマっており、楽しく便利に使わせてもらっています。自身に限らず、様々なところで採用事例を見かけるため、かなりスタンダードな選択肢となっているように感じます。

さて、小さい端末やiPadでの縮小表示に便利なライブラリViewport Extraですが、引き続きたくさんご利用いただいています。今後もまだまだ使ってもらいたい。そのためには、Next/Nuxtと一緒に動作することが求められると考えました。もちろん可能ですが、すこし工夫が必要……ということで、今回はこれらを併用する方法を紹介します。

Viewport Extraの説明についてはこちらの記事をご覧ください。

iPhone SE／5s／5にもう悩まない！Viewport Extraで手軽に縮小表示

つっちー

2019.02.28

iPadにPC向けデザインを縮小表示するときにも！Viewport Extraで手軽に縮小表示

つっちー

2019.06.06

Viewport Extra

GitHub
JSDelivr (CDN)
npm
CDNへのリクエスト数が年間250,000,000回を超えました！（2022年3月時点）

サンプルについて

ここからは、サンプルとともに併用の方法を紹介していきます。

• サンプルはすべて「表示幅414pxに最適化された内容を、表示幅375pxの端末で縮小表示する」ものです。
• アプリケーションのすべてのファイルが見られるようCodeSandboxを利用しますが、iframeでの結果表示は実機でのviewportの扱いを再現しきれないため、動作確認は別タブで表示するリンクから行ってください。

Nuxt2との併用方法

まずは、設定が一番シンプルなNuxtのv2から説明します。pluginのスクリプトが最初に一度だけ実行されることを利用して、Viewport Extraを適用します。

サンプルコードはGitHubでも確認できます。動作確認はこちらから。

package.json

npm i viewport-extra

Viewport Extraをパッケージとして利用するため、上記のコマンドでインストールします。

plugins/viewport-extra.js

ここでviewport-extraパッケージをimportします。

nuxt.config.js

headオプション

全ページに適用されるmetaタグを設定します。デフォルトのViewport設定は残したまま、Viewport Extraの最小幅設定を追加しています。

pluginsオプション

前述のpluginを指定します。

Nuxt3との併用方法

つづいて、Nuxtのv3について説明しますが、こちらはv3がまだ安定版でないため、利用方法も変わる可能性があります（2022年3月時点）。app.vueのスクリプトが最初に一度だけ実行されることを利用して、Viewport Extraを適用します。

サンプルコードはGitHubでも確認できます。動作確認はこちらから。

package.json

npm i viewport-extra

Viewport Extraをパッケージとして利用するため、上記のコマンドでインストールします。

nuxt.config.ts

metaオプション

全ページに適用されるmetaタグを設定します。デフォルトのViewport設定のみ追加します。

app.vue

ここでviewport-extraパッケージをimportし、関数を2つ受け取ります。値が上書きされてしまうことを避けるため、headオプションの適用が終わるタイミングでViewport Extraの最小幅設定を実行します。

Nextとの併用方法

最後に、Nextについて説明します。pages/_app.js(ts)に、最初に一度だけ実行されるようにスクリプトを書き、Viewport Extraを適用します。

サンプルコードはGitHubでも確認できます。動作確認はこちらから。

package.json

npm i viewport-extra

Viewport Extraをパッケージとして利用するため、上記のコマンドでインストールします。

pages/_app.js(ts)

ここでviewport-extraパッケージをimportし、関数を2つ受け取ります。一度だけしか実行されないuseEffectでViewport Extraの最小幅設定を実行します。

また、全ページに適用されるmetaタグもここで設定します。ページ遷移のたびにviewport設定が再評価されることを避けるため、あえて無効な設定としておきます（content属性を設定しない）。

まとめ

Viewport Extraは、表示幅320pxの端末へ楽に対応したいと開発したライブラリでしたが、大きな端末が増えた今でも値を変えて使い続けていけるライブラリです。

Next/Nuxtとも合わせて、今後ともどんどん利用してもらえればと思います！

ではまた。つっちーでした。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。