レスポンシブデザイン

このガイドで学べること

このガイドでは、NoodlアプリでレスポンシブUIを構築するために使用できるいくつかの異なる技術について見ていきます。

Columnsノードを使ったシンプルなグリッド

レスポンシブが必要とされる最も一般的な状況の1つは、アイテムのグリッドです。レスポンシブなグリッドを作成する最も簡単な方法は、ColumnsノードのMin Column Width入力を使用することです。このアプローチは、カードや画像のように、アイテムが同じ幅であるべきグリッドを扱う場合に最適です。この技術のための2つの主要な入力に焦点を当てましょう：

レイアウト文字列

レイアウト文字列とは、単に数字の間にスペースがある文字列です。各数字はコンテナーの全幅の一部を表し、列に変換されます。レイアウト文字列1 2 1を持つColumnsノードに5つの子がある場合、次のようにレンダリングされます：

最小列幅

最小列幅は、各列の最小幅を設定します。まず、提供されたレイアウト文字列に基づいて列が収まるかどうかを確認します。コンテナーが最小幅で列を保持できない場合、レイアウトは自動的に列が少ないグリッドに折りたたまれます。

渡された子要素が親の100%の幅に設定されていることを確認してください。

戦略

この方法を使用する最も一般的な方法は、レイアウトが持つことを望む最大の列数にレイアウト文字列を設定し、グリッドアイテムが壊れ始める値に最小列幅を設定することです。これにより、次のような結果が得られます：

メディアクエリプレファブとStatesノード

上記の技術は、均一なグリッドにはうまく機能しますが、もっと高度なレイアウトが必要な場合はどうでしょうか？もっとパディングを追加したり、フォントサイズを変更したり、あるいはレイアウト文字列をまったく変更したい場合があります。

これには、**メディアクエリプレファブとStates**ノードを使用できます。これらのドキュメントを読むことは良い考えですが、今のところは簡単な紹介を行います。Statesノードから始めましょう。

StatesノードはNoodlで非常に便利で柔軟なツールです。しかし、このガイドでは、その最も基本的な機能にのみ焦点を当てます。本質的に、これはノードのStateに応じて異なるデータを保持する異なるValuesを設定することを可能にします。これは、Statesノードのプロパティパネルの3つの主要なセクションで見ることができます。例を見てみましょう。

プロパティ付き

まず、使用したい異なるStatesを設定します。これらは何でも名付けることができますが、画面サイズのレスポンシビリティに取り組んでいるので、記述的にしましょう：

次に、このノードが出力したいValuesを作成します。この例では、ヘッダーの下部マージンを扱っているので、それに名前を付けましょう：

次に、異なる状態に対してValueが出力したいデータを入力します：

状態を設定したら、特定の状態がアクティブになるタイミングを決定する必要があります。メディアクエリプレファブのMatch Media Queryコンポーネントは、アクティブな画面サイズのブレークポイントをチェックし、

一致に基づいてtrueまたはfalseを出力します。これらの出力を使用して、定義された状態をトリガーできます：

この方法は、任意のトリガーで任意の値を設定するために使用できます - ボタン内のテキストでさえも！

Columnsとともに

この技術は、Columnsノードに異なるレイアウト文字列を送信するときに非常に強力になります。ここでは、ビューポートサイズに応じて1 1 2 1、2 1 1、1 2のレイアウトを変更する例を示します：

Mountedを使用して

異なる画面サイズでレスポンシブレイアウトが大きく異なることがあります。たとえば、ヘッダーメニューはデスクトップとモバイルで_まったく_異なる見た目になることがあり、上記の技術を使用するのが難しい（または煩雑な）場合があります。これには、Match Media Queryのブレークポイント出力を使用して、ビジュアルノードのMounted入力に送信し、ビジュアルツリーの異なる部分を表示/非表示にすることができます：

上記のケースでは、Mountedをコンポーネント入力ノードに持つ2つのコンポーネントを作成しました。その値は、コンポーネントのルートノードのMounted入力に渡されます：

コンテナクエリ

これまでのところ、UIを画面のサイズに応じてレスポンシブにするために、画面のサイズをチェックしてきました。これは最も伝統的なアプローチであり、まだうまく機能しています。しかし、アプリのアーキテクチャとデザインが進化するにつれて、業界は任意のコンテキストでうまく機能するより自動的なコンポーネントシステムの必要性を見出しました。

この解決策の1つは、コンテナクエリと呼ばれる概念です。ここでは、問題のコンポーネントのサイズをチェックし、それに基づいてレスポンシブ性を設定します（ビューポートではなく）。

これが、Functionノードを使用してコンポーネントの幅をチェックし、異なるLayout Stringsを設定する非常に基本的な例です：

関数ノードで実行されるコードは次のとおりです：

if (Inputs.Width > 300) {
    Outputs.GreaterThan300()
} else {
    Outputs.LessThan300()
}

これで、どんなページ幅のコンテナーでも、常にうまく機能するレイアウトでアイテムグリッドをどこにでも使用できます。

これは、レスポンシビリティと再利用性の両方にとって素晴らしいことです。ここでは、2

つの異なるサイズのコンテナーに配置されたプロファイルカードの例を示します。どんなコンテキストに置いても、常に良い見た目になります：

AIによるチェックの生成

コンテナクエリの例では、コンポーネントが300pxより大きいか小さいかを切り替えるときに2つの状態の間で切り替えるために、単純なif文をFunctionノードで使用しました。

このif文は、異なるシグナルを出力するように拡張されることがあります。これは手作業で書くこともできますし、`/Function

`コマンドを使用してAIアシスタントによって生成されることもあります：

（AIは、幅の入力でこの関数を使用したいと仮定しました。Width入力を要求したので、それは問題ありません。それに送られるどんな数字でも機能します。）

リミッターコンポーネント

これまでのところ、主に内容を小さい画面に適合させることについて話してきました。しかし、画面が大きくなったときにコンテンツを制限することも重要です。これを行うには、Limiterコンポーネントを使用できます。基本バージョンは、中央揃えとパディングのための2つのGroupノードと、コンテンツを保持するmax-widthを持つ別のノードを使用します：

これにより、次の結果が得られます：

このコンポーネントを使用すると、アプリ全体でコンテンツのサイズと間隔を一貫して保つことができます。

以下の「ノードをコピー」ボタンを押すと、このコンポーネントのより高度で設定可能なバージョンをコピーできます：

プロパティパネルで次のオプションが特徴です：

ビルディングを始めましょう！

これで、レスポンシブデザインを構築する際に使用するすべての技術を知っています。しかし、Noodlは柔軟であり、常にコミュニティから新しいことを学んでいます。ここで触れられていないが共有したいと思う自分のヒントやトリックがあれば、Discordサーバーにぜひ参加してください。コミュニティは常にあなたのアイデアやフィードバックを聞くことを喜んでいます。

Happy Noodling!