【Vue】回線速度によって画像サイズを切り替えるさてさて、最近特にですが「ユーザビリティ」に興味がでてきていろいろと勉強をしています。そんな中「やっぱりGoogleはすごいな」と思う経験をしました。ある日、電車の中でYouTubeを観ていたのですが、急に画質が荒くなってしまったんですね。(地方なので無料Wi-Fiがありません😫)これって、YouTube側で「回線が遅くなった」というのを検知してわざわざサイズが小さい動画に切り替えてくれているってことだと思うんです。画質が悪かろうが動画を再生し続けられるというユーザビリティですね。最近ではスマホも高性能になり、普通にYouTube動画が再生できるようになりましたが、逆にYouTubeが人気になりすぎて「通信速度制限」が発生したりするという話をちらほら聞いたりします。画質の切り替えはそういったものへの対応といっていいでしょう。この経験を元に、次のようなことを考えました。回線速度によって画像の大きさを切り替えることはできないだろうか!?と。!YouTubeのように回線速度を計算して、その速度に応じたサイズの画像を表示できればウェブサイトでもユーザビリティが向上するのではないかと考えたんですね。いうことで、今回はVueを使ってこの機能を実装してみることにしました。2.6まずはVueの基本形をつくり、回線スピード{早い/普通/遅い}を判別する変数downloadSpeedを追加します。合わせて読みたい回線速度を計算するでは、続いて回線速度の計算です。計算手順は次のとおりです。1秒間に何メガ転送できるか実際のコードはこちらです。この計算で使う画像(100kb)はこちらのページからダウンロードさせていただきました。Network)しながら直接画像にアクセスするとContent-Lengthが確認できますので、その数字をそのまま書き込んでください。Mbpsにしていますが、お好みで変更してください。回線速度で画像を切り替えるVueコンポーネントをつくるでは、回線速度{fast/medium/slow}が取得できるようになったので、次はこの速度で画像を切り替えるVueコンポーネントv-imageをつくっていきましょう。});</script>ここでは、{fast/medium/slow}のうちどれかが入ってくるspeedというプロパティを使って、{大きい/中くらい/小さい}の中からどの画像を表示するかを判断しています。それぞれのURLは以下のプロパティで指定できるようになります。large-srcmedium-srcsmall-src実際の使い方はこうなります。small-src="https://via.placeholder.com/150"></v-image>お疲れ様でした😊✨ダウンロードする今回実際に開発したソースコードを以下からダウンロードすることができます。回線速度を計算する画像はご自身で用意していただく必要があります。【Vue】回線速度によって画像サイズを切り替えるおわりにということで、今回は回線速度を計算して画像を切り替えるという機能を実装してみました。ちなみに回線速度は常に変化しているので、より正確に速度計算をするには何度か同じ計算を繰り返してその平均をとるようにするといいでしょう。速度計算の時に使う画像自体のサイズが大きすぎると、負荷が大きくなってしまって、逆にユーザビリティを下げる結果になってしまうので、ここはバランスが大事になるかと思います。考えると、このテクニックがより役立つのは画像をたくさん表示しないといけない画像ギャラリーや商品ページということになるかと思います。サイトのページにアクセスするごとに回線速度を計算していると、やはり負荷が大きくなってしまうので、例えばログイン時や1日に○回という頻度で速度計算をし、DBやcookieなどに保存しておくのといいかもしれません。いろんな機能も適材適所ですね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。