NgSysV.レスポンシブ/アダプティブ デザイン

この投稿シリーズは NgateSystems.com にインデックスされています。とても便利なキーワード検索機能もあります。

最終レビュー日: 2024 年 11 月

1. はじめに

Post 4.2 では、Web アプリを Web 検索に表示したい場合は、次のことを確認する必要があることが明らかになりました。

• あなたの Web アプリは携帯電話の小さな画面で表示するとうまく機能します。
• 検索エンジンによってインデックス付けされるコンテンツはすべて、モバイル版で表示されます。

ソフトウェアが主にデスクトップ ユーザーを対象としている場合、これは非常に迷惑ですが、それが人生です。この問題に体系的に取り組む方法を見てみましょう。

2. Tailwind を使用したレスポンシブデザイン

レスポンシブ デザインでは、CSS スタイルの「組み込まれた」機能を使用して、表示デバイスの幅をテストし、それに応じて書式を調整します。これはすべてブラウザ内で自動的に行われますが、各「ブレークポイント」 (新しい幅固有のスタイルが適用される画面の幅) で何が起こるかについて明示的に指示する必要があります。

これまでこのシリーズで使用してきた標準の CSS スタイルは、「メディア クエリ」と呼ばれる手法を使用してこれらの適応効果を実現します。しかし、この記事では、Tailwind と呼ばれる「オープン ライブラリ」を紹介します。これは応答性の高いスタイル向けにカスタマイズされており、さらに多くの利点があります。

これは、幅 768 ピクセルまでの画面で中央の見出しを画面幅の 95% に制限する Tailwind スタイルの例です。この幅を超えると、中央の見出しは画面幅の 60% に制限されます:

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

しかし、ここで「この displayIsMobile ブール値はどのように初期化されるのでしょうか?」と尋ねるでしょう。

サーバーが myURL/myPage に対するブラウザー要求を受信すると、通常、最初に実行されるのは、サーバー側 を実行して初期データを提供する page.server.js ファイル内のload() 関数です。ページ用に。 myPage の page.svelte (サーバー側でも実行されている) がこのデータを受信すると、その「テンプレート」セクションの初期レンダリングを実行し、HTML のブロックをブラウザーに送り返します。ただし、これを行うには、displayIsMobile の値が必要です。

「クライアント側」を実行している場合、答えは簡単です。「window」オブジェクトを使用して window.width を検査し、それに応じて displayIsMobile を設定します。ただし、この場合、page.server.js ファイルも page.svelte ファイルも、通常どおりサーバー側で実行され、クライアントに直接問い合わせることはできません。

オプションの 1 つは、displayIsMobile に適切なデフォルト値を選択し、デフォルトの表示を返すことです。その後、クライアントで onMount() 関数を使用してウィンドウのプロパティを検査し、デフォルトの表示をより適切に再レンダリングできます。ただし、次の 2 つの結果が生じます:

• 初期表示を再レンダリングすると、各ページが起動して再レンダリングされるときに、クライアント デバイスに不快な「ちらつき」効果が発生します。
• Web クローラー (常に JavaScript を実行するとは限らない) が正しいコンテンツを認識できない可能性があるため、SEO に重大な損害が生じる可能性があります。

したがって、これを適切に実行したい場合は、サーバー上で displayisMobile を適切に設定する方法を見つけなければなりません。 こうすることで、完全にレンダリングされたページをできるだけ早くクライアントに送信し、パフォーマンスと SEO の両方を最適化できます。

ポスト 3.5 を読んだことがある人は、サーバー リクエストに付随する「ヘッダー」を使用して役立つ情報を送信できることを覚えているでしょう。ページ myURL/myPage に対するブラウザーのリクエストのヘッダーには、役立つ情報が含まれている可能性がありますか?

ありがたいことに、答えは「はい、そうです」です。たとえば、browser-requests ユーザー エージェント ヘッダーには、リクエストがデスクトップ ブラウザーではなくモバイルから送信されていることを示すために使用される「エンジンとブラウザー」コンポーネントが含まれています。しかし、ユーザー エージェント リクエスト ヘッダーのルーツはコンピューティングの最も暗い過去にあり、その機能は複数の競合する利益のバランスを取るのに苦労してきました。

ここでの主な問題は、ユーザー環境の正確すぎる記述 (ヘッダーにはユーザーのブラウザ、オペレーティング システムの種類とバージョンなどの詳細も含まれます) が、ユーザーがサイト内を移動する際に識別および追跡するために使用される可能性があるという懸念です。ウェブ。この問題は未解決のままです。

これは「ユーザーエージェント」の例です:

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

この混乱を解析するときに遭遇する問題は簡単にわかると思います!

しかし、他の選択肢もあります。 Google による最近の取り組みでは、ブラウザが sec-ch-ua-mobile と呼ばれる、より単純な新しいヘッダーを提供することが提案されました。これには、ブラウザがモバイル応答を予期しているかどうかを示す単純な文字列が含まれています (詳細については、「Sec-CH-UA-Mobile」を参照)。

ただし、sec-ch-ua-mobile ヘッダーは Chrome と Edge から利用できるようになりましたが、他のブラウザーが必ずしもこの取り組みをサポートするとは限りません。いずれにせよ、sec-ch-ua-mobile ヘッダーでは、応答を調整して、たとえば明示的な「タブレット」バージョンを提供するのに十分な詳細が得られません。

これはすべて非常に面倒ですが、最初の呼び出しポートとして sec-ch-ua-mobile を使用し、フォールバックとしてユーザー エージェントを使用しても問題ないと結論付けるには十分かもしれません。その場合、page.svelte ファイルに displayIsMobile 変数を与えるコードを次に示します。

紛らわしいことに、hooks.server.js ファイルと呼ばれる新しいタイプの Svelte ファイルから始まります。

load() 関数に page.svelte ファイルの displayIsMobile を設定するコードを入れる可能性がありますが、すべての page.svelte ページにこれらのいずれかが含まれるわけではありません。たとえそれができたとしても (もちろん、いつでも作成できます)、all のload() 関数で displayIsMobile コードを複製する必要があることがわかります。

対照的に、hooks.server.js ファイルは、Svelte がサーバーに送信されるすべてのリクエストに対して起動する一種の「スーパー」load() 関数です。他のアクティビティが実行される前に実行されます。これは、sec-ch-ua-mobile ヘッダーを検査し、displayIsMobile の値を作成するのに最適な場所になります。

以下のコードは、displayIsMobile がhooks.server.js ファイルによってどのように構築されるかを示しています。また、この値が期待される page.svelte ファイルにどのように返されるのかも示します。

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

これで、displayIsMobile がブラウザー要求のイベント オブジェクト内に存在します。このイベントは、現在のリクエストを表すために SvelteKit によって構築された複合オブジェクトです。これには次のようなプロパティが含まれます:

• event.request: これは元の Request オブジェクトであり、HTTP メソッド (GET、POST など)、ヘッダー、URL、本文などの詳細が含まれます。
• event.locals: リクエストのその後のライフサイクル全体にわたってこのデータを利用できるようにする場所。

ご想像のとおり、event は必要な場所ならどこでも利用できるようになるため、displayIsMobile のホームを提供するために必要なのは、event.locals です。

handle() の {event, response} 引数の形式は困惑するかもしれません。これは「構造化」構文の例です。これにより、オブジェクト自体を参照せずに、オブジェクトから特定のプロパティを直接抽出できます。イベントと応答をプロパティとして含むスーパーオブジェクト args があると想像してください。次に、従来の
を使用する代わりに、

User-Agent: Mozilla/4.9 Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

「構文の構造化」により、これを
のように書くことができます。

// src/hooks.server.js
export async function handle({ event, resolve }) {

    let displayIsMobile;
    console.log("event.request.headers['sec-ch-ua-mobile']: ", event.request.headers.get('sec-ch-ua-mobile'));
    // First, try to get the mobile flag from the 'sec-ch-ua-mobile' header. This is a string header
    // and its value is '?1' if the user agent is a mobile device, otherwise it is '?0'.
    if (event.request.headers.get('sec-ch-ua-mobile') !== undefined) {
        displayIsMobile = event.request.headers.get('sec-ch-ua-mobile') === '?1' ? true : false;
    } else {
        // Otherwise, try the 'user-agent' header. For robust mobile detection, you might consider using
        // the ua-parser-js library. It provides consistent results across various edge cases.
        if (event.request.headers.get('user-agent') !== undefined) {
            displayIsMobile = event.request.headers.get('user-agent').toLowerCase().includes('mobile');
        } else {
            displayIsMobile = false
        }
    }

    // Put displayIsMobile into event.locals. This is an object provided by SvelteKit that is specific to a
    // particular browser request and which is acessible in every page and layout. In brief, event.locals lets
    // you pass data throughout the lifecycle of a request in SvelteKit. It provides a convenient way to share
    // computed values or state without needing to repeat logic or fetch data multiple times.
    event.locals.displayIsMobile = displayIsMobile;

    // Proceed with the request. In SvelteKit, resolve(event) is crucial for handling the request lifecycle.
    // It processes the current request and generates the final response that will be sent back to the client.
    const response = await resolve(event);
    return response;
}

本質的に、これは親オブジェクトの名前 (args) を知らずにオブジェクト args のプロパティ (args.event など) を参照する方法です。これにより、より緊密で弾力性のあるコードが作成されます。

とにかく、これまで述べたように、displayIsMobile がブラウザー要求のイベント オブジェクト内に存在するようになったので、やるべきことは明らかですが、page.server.js ファイル内のload() 関数を使用して、それを取り出して返すことです。それをpage.svelte.
に追加します。

function handle(args) {
    const event = args.event;
    const resolve = args.resolve;
    // ... (code referencing variables "event" and "resolve")
}

それでは、最後に、アダプティブ ページを配信するための非常に単純な page.svelte ファイルを示します

function handle({ event, resolve }) {
    // ...(code referencing variables "event" and "resolve")
}

楽しんでいただければ幸いです!

要約すると、完全なシーケンスは次のとおりです:

1. Sveltekit サーバーはブラウザの myURL/myPage リクエストを処理し、プロジェクトのhooks.server.js ファイルを起動します。ここでは、リクエスト ヘッダーが取得され、適切な displayIsMobile 値が決定され、結果が Sveltekit イベント オブジェクトに格納されます。
2. myPage ルートの page.server.j ファイル内のload() 関数は、イベントから displayIsMobile を取得し、それを page.svelte に返します。
3. page.svelte ファイルは data.displayIsMobile 値を取得し、これをテンプレート セクションで使用して適切な HTML を生成します。
4. Sveltekit は、ブラウザーにインタラクティブな動作を追加するスクリプトを構築します。 Tailwind 参照は、ページの構築中にすでに CSS メディア クエリに変換されています。
5. ブラウザはこの HTML を受信し、Sveltekit スクリプトで「ハイドレート」し、メディア クエリの指示に従ってクライアント デバイス上でレンダリングします。

ページがハイドレートされると、反応性は純粋にクライアント側の問題になります。 コードのテンプレート セクション内の SvelteKit {#if PopupIsVisible は、popupIsVisible に基づいて DOM 要素を切り替えるコンパイル済み関数になります。