@blocklet/ui-react/docs/components-layout-footer.ja.md

Some useful front-end web components that can be used in Blocklets.

# Footer

`Footer` コンポーネントは、アプリケーションに標準化されたレスポンシブなフッターを提供します。blocklet のメタデータを読み取ることで、ブランディング、ナビゲーションリンク、ソーシャルメディアアイコン、著作権情報などのコンテンツを自動的に入力します。このデータ駆動型のアプローチにより、一貫性が確保され、設定が簡素化されます。

このコンポーネントはレスポンシブに設計されており、さまざまな画面サイズに合わせてレイアウトを調整します。また、アプリケーションが埋め込みモードで実行されている場合に自身を非表示にするロジックが組み込まれており、統合時にクリーンなユーザーインターフェースを保証します。

## 基本的な使用方法

アプリケーションにフッターを追加するには、`Footer` コンポーネントをインポートしてレンダリングするだけです。グローバルな `window.blocklet` オブジェクトから自動的にデータを取得するため、基本的な使用には props は必要ありません。

```jsx 使用例 icon=logos:react
import React from 'react';
import { Footer } from '@blocklet/ui-react';

export default function App() {
  return (
    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
      <main style={{ flex: 1 }}>
        {/* ここにアプリケーションのコンテンツを記述します */}
      </main>
      <Footer />
    </div>
  );
}
```

## Props

`Footer` コンポーネントは、以下の props を通じてカスタマイズできます。

<x-field-group>
  <x-field data-name="meta" data-type="object" data-required="false">
    <x-field-desc markdown>
      blocklet のメタデータを含むオブジェクト。この prop を使用して、デフォルトの `window.blocklet` 設定を上書きしたり、グローバルオブジェクトが利用できない環境でデータを提供したりします。構造は blocklet のメタデータ形式と一致する必要があります。
    </x-field-desc>
  </x-field>
  <x-field data-name="theme" data-type="object" data-required="false">
    <x-field-desc markdown>
      フッターの外観をカスタマイズするためのテーマオブジェクト。このオブジェクトはアプリケーションのデフォルトテーマと深くマージされ、色、フォント、スペーシングなどの特定のスタイルを上書きできます。
    </x-field-desc>
  </x-field>
</x-field-group>

## メタデータの設定

`Footer` のコンテンツは、主に blocklet のメタデータファイル (`blocklet.yml`) を通じて設定されます。コンポーネントは、このファイルから特定のフィールドを読み取り、さまざまなセクションをレンダリングします。

以下は、フッターのすべてのセクションにデータを入力する `blocklet.yml` 設定の例です。

```yaml blocklet.yml
name: my-app
title: My App
description: A detailed description of my application that appears in the footer.
copyright: 'My Company Inc.'

# ナビゲーションリンクはグループに構造化されています
navigation:
  # メインフッターナビゲーション、グルーピングのために2つのレベルをサポート
  footer:
    - title: 'Products'
      items:
        - title: 'Product A'
          link: '/products/a'
        - title: 'Product B'
          link: '/products/b'
    - title: 'Resources'
      items:
        - title: 'Documentation'
          link: '/docs'
        - title: 'Blog'
          link: '/blog'

  # ソーシャルメディアリンク
  social:
    - title: 'twitter' # アイコンはタイトルから推測されます（例：'twitter'、'github'）
      link: 'https://twitter.com/your-handle'
    - title: 'github'
      icon: 'mdi:github' # Iconify のアイコン名を指定することもできます
      link: 'https://github.com/your-org'

  # ボトムリンク、通常は法的情報やプライバシー情報用
  bottom:
    - title: 'Privacy Policy'
      link: '/privacy'
    - title: 'Terms of Service'
      link: '/terms'
```

### データ構造

メタデータ内の `navigation` オブジェクトは、フッターに表示されるリンクを定義します。これは `footer`、`social`、`bottom` の3つの異なるセクションに整理されています。

<x-field-group>
  <x-field data-name="navigation" data-type="object">
    <x-field-desc markdown>
      アプリケーションのすべてのナビゲーション構造を含みます。
    </x-field-desc>
    <x-field data-name="footer" data-type="array">
      <x-field-desc markdown>
        メインフッターナビゲーションエリアのリンクグループの配列。2階層の階層をサポートします。
      </x-field-desc>
      <x-field data-name="[].title" data-type="string" data-required="true" data-desc="ナビゲーショングループのタイトル（例：'Products'）。"></x-field>
      <x-field data-name="[].link" data-type="string" data-required="false" data-desc="グループタイトル自体のためのオプションのリンク。"></x-field>
      <x-field data-name="[].items" data-type="array" data-required="false" data-desc="子ナビゲーションリンクの配列。">
        <x-field data-name="[].title" data-type="string" data-required="true" data-desc="リンクの表示テキスト。"></x-field>
        <x-field data-name="[].link" data-type="string" data-required="true" data-desc="ナビゲーションリンクのURL。"></x-field>
      </x-field>
    </x-field>
    <x-field data-name="social" data-type="array">
      <x-field-desc markdown>
        ソーシャルメディアプロフィールへのリンクの配列。
      </x-field-desc>
      <x-field data-name="[].title" data-type="string" data-required="true" data-desc="ソーシャルメディアプラットフォームの名前。アイコンを推測するために使用されます（例：'twitter'）。"></x-field>
      <x-field data-name="[].icon" data-type="string" data-required="false" data-desc="Iconify 文字列（例：`mdi:github`）を使用してアイコンを明示的に指定します。推測されたアイコンを上書きします。"></x-field>
      <x-field data-name="[].link" data-type="string" data-required="true" data-desc="ソーシャルメディアプロフィールへのURL。"></x-field>
    </x-field>
    <x-field data-name="bottom" data-type="array">
      <x-field-desc markdown>
        フッターの最下部に表示されるリンクの配列。通常は法的通知用です。
      </x-field-desc>
      <x-field data-name="[].title" data-type="string" data-required="true" data-desc="リンクの表示テキスト（例：'Privacy Policy'）。"></x-field>
      <x-field data-name="[].link" data-type="string" data-required="true" data-desc="リンクのURL。"></x-field>
    </x-field>
  </x-field>
</x-field-group>

## レイアウト

`Footer` コンポーネントは、提供されたデータに基づいて最も適切なレイアウトを賢く選択します。これにより、さまざまなユースケースでクリーンで機能的な表示が保証されます。

-   **標準レイアウト**: このレイアウトは、メタデータに `footer` ナビゲーションリンクまたは `social` メディアリンクが定義されている場合に自動的に有効になります。ブランド情報、ソーシャルアイコン、ナビゲーションカラムをエレガントに整理するマルチセクションデザインが特徴です。モバイルデバイスでは、ナビゲーショングループは折りたたみ可能なアコーディオンになり、より良いユーザーエクスペリエンスを提供します。

-   **プレーンレイアウト**: `footer` または `social` リンクが提供されていない場合、コンポーネントは簡素化された単一行のレイアウトにフォールバックします。これは、「利用規約」や「プライバシーポリシー」などの著作権表示といくつかの必須リンクのみを必要とするアプリケーションに最適です。

## テーマ設定

`theme` オブジェクトを渡すことで、フッターの外観をカスタマイズできます。このオブジェクトは既存のテーマと深くマージされ、特定のオーバーライドが可能です。

```jsx カスタムテーマの例 icon=logos:react
import { Footer } from '@blocklet/ui-react';

const customTheme = {
  palette: {
    background: {
      default: '#2c3e50', // フッター用のより暗い背景
    },
    text: {
      primary: '#ecf0f1',
      secondary: '#bdc3c7',
    },
    divider: '#34495e',
  },
};

// ... コンポーネントの render メソッド内
<Footer theme={customTheme} bordered />;
```

## 埋め込みモードでの動作

`Footer` コンポーネントは、アプリケーションが埋め込みコンテキストでレンダリングされる際に自動的に非表示にする高階コンポーネント (`withHideWhenEmbed`) でラップされています。この動作は、セッションストレージキー `EMBED_MODE_KEY` によって制御されます。このキーが `1` に設定されている場合、フッターはレンダリングされません。これは、blocklet が別のアプリケーション内で表示される際に、冗長なフッターを防ぐのに役立ちます。

---

blocklet メタデータを通じて設定されるヘッダーコンポーネントに関する情報については、[Header ドキュメント](./components-layout-header.md) を参照してください。