Footer | ArcBlock

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

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

基本的な使用方法

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

使用例

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 を通じてカスタマイズできます。

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

メタデータの設定

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

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

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つの異なるセクションに整理されています。

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

レイアウト

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

標準レイアウト: このレイアウトは、メタデータに footer ナビゲーションリンクまたは social メディアリンクが定義されている場合に自動的に有効になります。ブランド情報、ソーシャルアイコン、ナビゲーションカラムをエレガントに整理するマルチセクションデザインが特徴です。モバイルデバイスでは、ナビゲーショングループは折りたたみ可能なアコーディオンになり、より良いユーザーエクスペリエンスを提供します。
プレーンレイアウト: footer または social リンクが提供されていない場合、コンポーネントは簡素化された単一行のレイアウトにフォールバックします。これは、「利用規約」や「プライバシーポリシー」などの著作権表示といくつかの必須リンクのみを必要とするアプリケーションに最適です。

テーマ設定

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

カスタムテーマの例

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 ドキュメントを参照してください。