# アプリに企業ロゴをドロップする — コピーペーストレシピ > ロゴが終わる一般的な形についての実践的なスニペット：``タグ、Reactコンポーネント、Next.js Image、Tailwind avatarスロット、ダークモード対応の``要素、OGイメージフォールバック、およびサーバー署名URL。すべてのスニペットはパブリック`https://api.clearlogo.dev`エンドポイントに対して機能します。 > > すべての例は、ブラウザキー（クライアントコード用）またはサーバーキー（バックエンドコード用）を持っていることを想定しています。[ダッシュボードからキーを作成します](https://clearlogo.dev/login?lang=ja)。 ## 1. プレーンHTML 最速可能な統合 — URLを``タグに貼り付けます。 ```html GitHub ``` `size`をレンダリング済みディメンションと一致させて、ブラウザがより大きなアセットをスケーリングして帯域幅を無駄にしないようにします。 ## 2. Reactコンポーネント 小さな再利用可能なコンポーネントはほとんどのプロダクトUI要件をカバーします。 ```tsx type CompanyLogoProps = { domain: string; size?: 32 | 48 | 64 | 96 | 128; alt?: string; }; const BROWSER_KEY = process.env.NEXT_PUBLIC_CLEARLOGO_KEY!; export function CompanyLogo({ domain, size = 64, alt }: CompanyLogoProps) { return ( {alt ); } ``` `loading="lazy"`と`decoding="async"`は長いリスト（CRM、ディレクトリ、アカウントテーブル）がペイントをブロックしないようにします。 ## 3. Next.js `` `next.config.js`にAPIホストを一度追加し、その後、最適化された``コンポーネントをどこでも使用します。 ```js // next.config.js module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "api.clearlogo.dev" }, ], }, }; ``` ```tsx import Image from "next/image"; export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) { return ( {`${domain} ); } ``` HiDPIディスプレイで網膜の鮮鋭度のために`size * 2`をリクエストします。WebP交渉がAPIからクライアントにフローするようにしたい場合は`unoptimized`を使用します。Next.jsが形式交渉自体を処理するようにしたい場合は削除してください。 ## 4. Tailwind avatarスロット ロゴを固定されたUIスロットにドロップし、ブランド全体で視覚的に一貫性を保ちます。 ```tsx
{name}
{domain}
``` `object-contain`に加えて固定のスロットサイズはテーブルとリストの最も確実な形です。ロゴがスロットエッジに触れないように`content=80`パラメータとペアにしてください。 ## 5. ダークモード対応ロゴ ``を`prefers-color-scheme`で使用してダーク/ライトバリアントをペイント時にスワップします。JavaScriptやロゴごとの再レンダーはゼロです。 ```html GitHub ``` Reactコンポーネントとしてラップ： ```tsx export function CompanyLogo({ domain, size = 64 }: { domain: string; size?: number }) { const base = `https://api.clearlogo.dev/logo/${domain}?size=${size}&content=80&token=${BROWSER_KEY}`; return ( {`${domain} ); } ``` APIは暗いバージョンが存在しない場合はライトバリアントにフォールバックするため、`theme=dark`をリクエストすることは常に安全です。アプリレベルのテーマスイッチ（OSレベルではない）の場合は、`prefers-color-scheme`の代わりにテーマ状態から宛先URLを駆動します。 ## 6. プレースホルダ付きリストレンダリング 長いリストの場合は、即座プレースホルダーをレンダリングし、空のスロットがフラッシュしないようにします。 ```tsx function LogoCell({ domain }: { domain: string }) { const [loaded, setLoaded] = useState(false); return (
setLoaded(true)} className={`h-full w-full object-contain transition-opacity ${ loaded ? "opacity-100" : "opacity-0" }`} />
); } ``` ## 7. 最初の文字付きエラーフォールバック APIがドメインのロゴを見つけられない場合は、代わりに決定的な文字アバターをレンダリングします。 ```tsx function LogoOrFallback({ domain, name }: { domain: string; name: string }) { const [errored, setErrored] = useState(false); if (errored) { return (
{name[0]?.toUpperCase() ?? "?"}
); } return ( {`${name} setErrored(true)} /> ); } ``` フォールバックはネットワークリクエストを実行しないため、たとえコールド行でもすばやくとどまります。 ## 8. Open Graphイメージフォールバック サーバー側フェッチを介して動的に生成されたOGイメージにロゴを埋め込みます。 ```ts // app/og/route.ts (Next.js, Edge runtime) import { ImageResponse } from "next/og"; export const runtime = "edge"; export async function GET(request: Request) { const { searchParams } = new URL(request.url); const domain = searchParams.get("domain") ?? "example.com"; const logoUrl = `https://api.clearlogo.dev/logo/${domain}?size=256&content=80&token=YOUR_SERVER_KEY`; return new ImageResponse( (
{domain}
), { width: 1200, height: 630 }, ); } ``` ブラウザキーではなく**サーバー**キーをここで使用します — エッジ関数はサーバー側であり、サーバーキーは制限されていないオリジンヘッダーを通じて存続するものです。 ## 9. 機密UIのためのバックエンド署名 URLをパブリックにしたくない場合（例：内部管理ツール）、バックエンドを通じてプロキシします。 ```ts // app/api/logo/[domain]/route.ts (Next.js) export async function GET( request: Request, { params }: { params: { domain: string } }, ) { const upstream = await fetch( `https://api.clearlogo.dev/logo/${params.domain}?size=128&content=80`, { headers: { Authorization: `Bearer ${process.env.CLEARLOGO_SERVER_KEY}` } }, ); return new Response(upstream.body, { headers: { "Content-Type": upstream.headers.get("Content-Type") ?? "image/png", "Cache-Control": "public, max-age=86400, s-maxage=86400", }, }); } ``` ページソースにはAPIキーがなく、独自のCDNでキャッシング制御を実行します。 ## 10. TypeScriptヘルパー 単一のヘルパーはコードベース全体でURL構築を一貫性保ちます。 ```ts type LogoOptions = { size?: 16 | 32 | 48 | 64 | 96 | 128 | 192 | 256 | 512 | 1024; content?: number; // 50–100, step 5 theme?: "light" | "dark"; format?: "png" | "webp" | "jpeg"; }; export function logoUrl(domain: string, opts: LogoOptions = {}): string { const params = new URLSearchParams({ size: String(opts.size ?? 64), content: String(opts.content ?? 80), token: process.env.NEXT_PUBLIC_CLEARLOGO_KEY!, }); if (opts.theme) params.set("theme", opts.theme); if (opts.format) params.set("format", opts.format); return `https://api.clearlogo.dev/logo/${encodeURIComponent(domain)}?${params}`; } ``` `encodeURIComponent`はドメイン内の一般的でない文字に対して保護し、ヘルパーを信頼できない入力で呼び出すことを安全にします。 ## 11. 接続を早期にウォームするためのプリコネクト ダッシュボードが数十個のロゴをフォールド上方でレンダリングする場合、最初のリクエストはDNS、TCP、およびTLSをカバーします。単一の``をドキュメントヘッドに追加して、最初の``がヒットする前に接続が準備できるようにします — 後続のすべてのロゴはURL単位でプリロードのブロートウェアなしで先手を取ります。 ```html ``` ```tsx // Next.js import Head from "next/head"; export function ClearLogoPreconnect() { return ( ); } ``` `preconnect`はDNSを解決し、TCP/TLSハンドシェイクを直ちに開きます。`dns-prefetch`はプリコネクトを無視するブラウザの安価なフォールバックです。2つのヒント、ページがレンダリングするロゴの数に関係なくです。ロゴごとの``を優先してください — プリロードは重量級であり、帯域幅予算に対してカウントし、レンダリングされたURLが僅かに異なる場合は役立ちません（サイズ、テーマ、トークン）プリロードされたものから。 ## FAQ ### どのレシピから始めるべきですか？ 単一のロゴの場合、シンプルな``レシピで十分です。リストとテーブルの場合は、Tailwind avatarスロット + ロゴ遅延ロードパターンから始めます。 ### テストのためにキーが必要ですか？ いいえ。エンドポイントは低ボリュームブラウジングのために匿名で機能します。ブラウザキーをプロダクションに配送する前に追加して、リクエストが適切に属され、プランに対してカウントされるようにします。 ### どのサイズをリクエストする必要がありますか？ CSSでレンダリングされたサイズを一致させ、その後、視網膜の鮮鋭度のために`2x`をリクエストします。32ピクセルスロットのために`1024`をリクエストしないでください — 帯域幅を消費し、見た目が良くなっていません。 ### JavaScriptなしでダークモードを処理する方法は？ `media="(prefers-color-scheme: dark)"`でゲート付きの``を持つ``要素を使用します。ブラウザはペイント時に正しいURLを選択します — ReactフックなしでReactフック、ロゴごとのアサレンダーなし、長いリストでもロゴ単位のオーバーヘッドなし。 ### ロゴのリストをより高速に読み込むにはどうすればよいですか？ 単一の``をドキュメントヘッドに追加します。これにより、ページ上のすべてのロゴに対してDNS/TCP/TLSが一度開きます。これはURL単位での``よりも安価です。 ### APIがロゴを返さない場合、フォールバックを表示するにはどうすればよいですか？ ``の`onError`をリッスンし、文字アバターまたはジェネリックアイコンにスワップします。上記のエラーフォールバックレシピはプロダクション形状です。 ### サーバー側のレンダリングからブラウザキーを使用できますか？ できます — しかし、サーバーキーはより良いフィットです。なぜなら、オリジンチェックに依存するのではなく、`Authorization: Bearer …`を介してリクエストを送信するためです。Next.js Server Components、OGルート、またはバックエンドプロキシの場合は、サーバーキーを使用します。 ### 独自のCDNでロゴをキャッシュするにはどうすればよいですか？ 上記のバックエンド署名レシピを使用します。アップストリーム応答には長寿命`Cache-Control`が含まれるため、プロキシで同じヘッダーを設定でき、CDNに残りを処理させることができます。