Angularによる画像ブレークポイントの管理

公開: 2022-03-10
クイックサマリー↬BreakPointObserverと呼ばれる組み込みのAngular機能は、レスポンシブ画像を処理するための強力なインターフェイスを提供します。 クラウドで画像を提供、変換、管理できるサービスを見てみましょう。 このような魅力的なツールを手元に用意することで、訪問者を失うことなく、没入型のビジュアルWebエクスペリエンスを作成できます。

Web開発者として、応答性が高く、メディアが豊富なアプリケーションを作成する必要があることがよくあります。 このような要件があるということは、エンドユーザーに最高のエクスペリエンスを提供したいので、画像ブレークポイントとメディアクエリを処理する必要があることを意味します。 要件のリストに加えて、SPAやその他のアプリケーションタイプの作成に最適なAngularなどのフロントエンドフレームワークを使用する必要がある場合があります。

この記事では、画像のブレークポイント、そのユースケース、および実践的な例全体を見ていきます。 Angular独自のBreakPointObserverを使用して、Angularアプリケーションに実装します。 このアプローチを使用しながら、この人気のあるフレームワークが前述の手法をシームレスに処理するのに役立つ理由についても説明します。

画像のブレークポイントとレスポンシブ画像

レスポンシブレイアウト（ビューポートサイズに基づいてブレークポイントをキャプチャし、ページのレイアウトを変更するブレークポイントに基づいて）の時代では、レイアウト後でも、画像を適切なサイズで表示できるようにする必要があります。変化する。 最新のレスポンシブWebサイトでは、適切な画像を選択することは非常に困難です。

開発者が現時点で利用できる2つのオプションについて説明しましょう。

ジャンプした後もっと！ 以下を読み続けてください↓

srcset

srcsetを使用すると、レンダリングされた<img>サイズとディスプレイの密度に基づいて、ブラウザが切り替える画像のリストを定義できます。

例を見てみましょう：

 <img src="tuscany.jpg" />

上記では、3つの画像を指定し、 wは画像のピクセル幅を示します。 上記をsrcsetで使用する場合は、 sizes属性も指定する必要があります（これは、 srcsetとwを使用する場合、sizes属性も必要であることが仕様で義務付けられているために必要です）。 この属性の目的は何ですか？ ブラウザは、ページをレイアウトする前に（画像の大きさがわかる前に）、ソースセットからロードするリソースを選択する必要があります。 sizesは、レイアウト後、画像がビューポートの幅の100％を占めるというブラウザへのヒントと考えることができます（これがvwの参照です）。 ブラウザは、ロード時に実際のビューポート幅（および画像のDPR）を認識しているため、計算を実行して必要なリソースのサイズを把握し、ソースセットから1つを選択できます。

<picture>要素と<source media="">要素の組み合わせにより、レイアウトブレークポイントのようなメディアクエリに応じて画像リソースを切り替えることができます。

この例も見てみましょう。

 <picture> <source media="(min-width: 1440px)"> <source media="(min-width: 900px)"> <source media="(min-width: 600px)"> <img src="../assets/images/tuscany-sm.jpg" /> </picture>

上記のコードを、小、中、大のサイズの選択した画像でローカルに変更します。 ブラウザのサイズを変更すると、別の画像が得られることに注意してください。

上記のすべてからの重要なポイントは、特定のブレークポイントで画像をスワップアウトする場合、 <picture>要素を使用してメディアクエリをマークアップに直接配置できることです。

注： <picture>とsrcset + sizesの違いを調べることに興味がある場合は、EricPortisのすばらしい記事であるsrcsetとsizesを読むことをお勧めします。

これまで、純粋なHTML環境でメディアクエリとともに画像ブレークポイントを使用する方法について説明してきました。 メディアクエリをまったく指定しなくても、画像ブレークポイントとそれに対応するブレークポイントの画像を生成する便利な、ほぼ半自動化された方法がある方がはるかに良いのではないでしょうか。 幸いなことに、Angularには私たちを支援するメカニズムが組み込まれています。また、サードパーティのサービスを使用して、特定の条件に基づいて適切な画像を動的に生成する方法についても見ていきます。

角度レイアウトモジュール

Angularには、CDK（Component Dev Kit）ツールセットに含まれるレイアウトモジュールが付属しています。 Angular CDKには、コンポーネント開発を支援するための十分にテストされたツールが含まれています。 CDKの一部は、 BreakpointObserverを含むレイアウトモジュールです。 このヘルパーは、メディアクエリブレークポイントへのアクセスを提供します。つまり、ブラウザーのサイズ（画面サイズ）が直感的に変更されたときに、コンポーネント（およびそのコンテンツ）が変更に適応できることを意味します。

推奨読書：レイアウトモジュール

理論がわからなくなったので、ビジネスに取り掛かり、レスポンシブ画像ブレークポイントを実装するアプリケーションを作成しましょう。 この最初の反復では、Angular CLIを介してアプリケーションのシェルを作成します： ng new bpoそして、必要なオプションを選択します。

BreakpointObserverを使用するには、AngularのCDKレイアウトモジュールもインストールする必要があります。これは、npm： npm i @angular/cdkを介して実行できます。

インストール後、必要なインポートステートメントを必要なコンポーネントに追加できるようになります。

 // app.component.ts import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

BreakpointObserverを使用すると、ビューポート幅の変更をサブスクライブでき、Angularは便利なアクセサーを提供します。これは、メディアクエリをまったく使用する必要がないことを意味します。 先に進んで、これを試してみましょう：

 // app.component.ts constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle XSmall breakpoint } if (result.breakpoints[Breakpoints.Small]) { // handle Small breakpoint } if (result.breakpoints[Breakpoints.Medium]) { // handle Medium breakpoint } if (result.breakpoints[Breakpoints.Large]) { // handle Large breakpoint } if (result.breakpoints[Breakpoints.XLarge]) { // handle XLarge breakpoint } }); }

前述のように、上記のアクセサプロパティは、次のようにメディアクエリを反映します。

  • Breakpoints.XSmall ：max-width = 599.99px
  • Breakpoints.Small ：最小幅= 600ピクセルおよび最大幅= 959.99ピクセル
  • Breakpoints.Medium ：最小幅= 960ピクセルおよび最大幅= 1279.99ピクセル
  • Breakpoints.Large ：最小幅= 1280ピクセルおよび最大幅= 1919.99ピクセル
  • Breakpoints.XLarge ：min-width = 1920px

これですべてが整ったので、適切な画像の生成を開始できます。

画像のレスポンシブブレークポイント

レスポンシブ画像を生成するためのいくつかのオプションがあります。

  1. レスポンシブ画像ブレークポイントジェネレータ
    このツールを使用すると、任意の画像をアップロードしたり、生成したい画像の数など、さまざまなオプションを設定したりできます。 ツールを実行すると、生成された画像に関する視覚的な表現が得られ、前述の<picture>要素を使用する生成されたコードとともにzipファイルとしてダウンロードできます。
  2. もう1つの解決策は、プロジェクトのビルドステップを作成して、 gulp-responsiveまたはgrunt-responsive-imagesなどのNPMリポジトリで利用可能ないくつかのパッケージを介してブレークポイントを生成することです。 これらは両方とも、オペレーティングシステム用にインストールする必要のある追加のライブラリに依存しています。 （詳細については、適切なリポジトリを確認してください。）
  3. さらに別の解決策は、Cloudinaryなどのサービスを使用して画像を保存し、要求されたリソースのURLを変更するだけで必要なサイズと形式で画像を提供することです。 これが私たちに最も柔軟性を与えるので、これが私たちのアプローチになります。

推奨読書： EricPortisによるレスポンシブ画像ブレークポイントジェネレータを使用したアートディレクションの自動化

元の画像をCloudinaryアカウントにアップロードしました。つまり、次のURLからその画像にアクセスできます。

 https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg

これは、フルサイズの生のオリジナルの変更されていない画像です。

画像のURLを変更して、はるかに小さいバージョンを生成できます。 たとえば、幅600ピクセルの画像が必要な場合は、Cloudinary URL *を次のように更新できます。

 https://res.cloudinary.com/tamas-demo/image/upload/w_600/breakpoints-article/tuscany.jpg

* URLに追加されたw_600に注意してください。

うまくいけば、この時点で、これがすべてどこに向かっているのかがわかります。 上記のアプローチに基づいて、適切なブレークポイントに対して適切な画像の生成を非常に迅速に開始できます。

Cloudinaryを使用するということは、同じイメージの複数のバージョンを作成、保存、管理する必要がないことを意味します。これは、Cloudinaryによってオンザフライで実行されます。

コードを更新しましょう：

 <!-- app.component.html --> <div> <h1>Current breakpoint: {{ breakpoint }}</h1> <img [src]="imagePath"> </div>
 // app.component.ts import { Component, OnInit } from '@angular/core'; // ... export class AppComponent implements OnInit { imagePath; constructor(public breakpointObserver: BreakpointObserver) { } ngOnInit() { this.breakpointObserver.observe([ ... } }

前述のリストから、監視するブレークポイントをいくつでも選択できます。オブザーバーがあるため、変更をサブスクライブして、それに基づいて操作できます。

 this.breakpointObserver.observe([ Breakpoints.XSmall, Breakpoints.Small, Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge ]).subscribe(result => { if (result.breakpoints[Breakpoints.XSmall]) { // handle this case } });

Cloudinaryのさまざまな画像のオプションを処理するために、非常にわかりやすいアプローチを利用します。 いずれの場合も、オプション変数を作成し、最終的なCloudinaryURLを更新します。

コンポーネント定義の先頭に以下を追加します。

 // app.component.ts imagePath; breakpoint; cloudinaryOptions; baseURL = 'https://res.cloudinary.com/tamas-demo/image/upload/breakpoints-article/tuscany.jpg';

また、最初のifステートメントに以下も追加します。

 // app.component.ts let url = this.baseURL.split('/'); let insertIndex = url.indexOf('upload'); const options = 'c_thumb,g_auto,f_auto,q_auto,w_400'; url.splice(insertIndex + 1, 0, options); this.imagePath = url.join('/'); this.breakpoint = Breakpoints.XSmall;

結果は、更新されたCloudinaryURLになります。

 https://res.cloudinary.com/tamas-demo/image/upload/c_thumb,g_auto,f_auto,q_auto,w_400/breakpoints-article/tuscany.jpg

ここで設定しているオプションは何ですか？

  • c_thumb （画像のサムネイルを生成します）;
  • g_auto （最も興味深い部分に焦点を当てています。サムネイルに大聖堂が表示されています）;
  • f_auto （特定のブラウザに最も適切な形式、つまりChrome用のWebPを提供します）;
  • q_auto （ビジュアルに影響を与えることなく画像の品質（したがって全体のサイズ）を低下させます）;
  • w_400 （画像の幅を400pxに設定します）。

好奇心のために、元の画像サイズをこの新しく生成された画像と比較してみましょう：2.28MBと29.08KB！

これで簡単な仕事ができました。ブレークポイントごとに異なるオプションを作成する必要があります。 StackBlitzでサンプルアプリケーションを作成したので、すぐにテストできます（プレビューもここで確認できます）。

結論

デスクトップおよびモバイルデバイスの多様性と、今日のWebで使用されるメディアの量は、目覚ましい数に達しています。 Web開発者として、私たちはあらゆるデバイスで動作し、視覚的体験に影響を与えないWebアプリケーションの作成の最前線に立つ必要があります。

適切な画像が適切なデバイスにロードされるようにする方法はたくさんあります（またはデバイスのサイズを変更する場合でも）。 この記事では、レスポンシブ画像を処理するための強力なインターフェイスを提供するBreakPointObserverと呼ばれる組み込みのAngular機能を利用するアプローチを確認しました。 さらに、クラウドで画像を提供、変換、管理できるサービスも検討しました。 このような魅力的なツールを手元に置いても、訪問者を失うことなく、没入型のビジュアルWebエクスペリエンスを作成できます。