ウィジェットドキュメント
Currency.Wiki通貨コンバーターウィジェットの埋め込み・カスタマイズ完全ガイド。
目次
1 はじめに
通貨コンバーターウィジェットの追加は簡単です。以下の手順に従ってください：
- ウィジェットビルダーページでウィジェットの外観をカスタマイズ
- お好みのウィジェットスタイル、通貨、テーマを選択
- 生成された埋め込みコード（スクリプトまたはIframe）をコピー
- ウィジェットを表示したい場所のHTMLにコードを貼り付け
ヒント： ウィジェットビルダーのクイックスタートプリセットを使えば、すぐにプリセット済みウィジェットで始められます。
2 埋め込み方法
スクリプト埋め込み（推奨）
スクリプト埋め込みはウィジェットを直接ページに挿入します。通貨ドロップダウンが周囲のコンテンツの前面に表示され、選択が簡単です。
<div id="currency-wiki-widget"></div>
<script src="https://widget.currency.wiki/v3/script.js?style=compact&theme=light&from=USD&to=EUR"></script>
- ドロップダウンがウィジェット外に表示
- インタラクティブな通貨選択に最適
- ページとのシームレスな統合
Iframe埋め込み
Iframe埋め込みはウィジェット用の分離されたコンテナを作成します。セキュアで、厳しいコンテンツポリシー環境でも動作します。
<iframe src="https://widget.currency.wiki/v3/embed?style=compact&theme=light&from=USD&to=EUR"
width="300" height="180" frameborder="0"></iframe>
- ページのスタイルから完全に分離
- 厳格なCSPにも対応
- シンプルかつ安全な実装
注： インタラクティブ性重視ならスクリプト埋め込み（ドロップダウンが前面表示）。分離やCSP制限が必要な場合はIframe埋め込みを推奨します。
3 ウィジェットスタイル
ウェブサイトのデザインに合わせて11種類のウィジェットスタイルから選択できます。各スタイルは用途や表示サイズに最適化されています。
mini
250x140px
コンパクトな1行コンバーター。ヘッダーや狭いスペースに最適。
square
250x250px
1:1比率のウィジェット。入れ替えボタン付き。サイドバーに最適。
compact
300x180px
必要な機能を備えた小型コンバーター。
inline
480x56px
横並びレイアウト。コンテンツやナビゲーション内への埋め込みに最適。
tall
200x280px
縦長サイドバーレイアウト。クラシックラベル付き。
mini-chart
250x260px
スパークラインチャート付きのコンパクトコンバーター。
multi-expandable
300x320px
マルチ通貨コンバーター。ユーザーが通貨を追加・削除可能。
multi-fixed
300x300px
固定リストの為替レート。特定レートの表示に最適。
rates-compact
250x320px
最終更新時刻付きの凝縮レートリスト。
rates-viewer
300x500px
詳細なレート情報付きのフルチャートビュー。
rates-viewer-compact
300x400px
チャート付きのコンパクトレートビューワ。
4 URLパラメータ
URLパラメータでウィジェットをカスタマイズできます。これらのパラメータはスクリプト・Iframe両方の埋め込み方法で利用可能です。
| パラメータ | デフォルト | 説明 |
|---|---|---|
| style | compact | ウィジェットスタイル（mini, square, compact, inline, tall, mini-chart, multi-expandable, multi-fixed, rates-compact, rates-viewer, rates-viewer-compact） |
| theme | light | カラーテーマ（light, dark, auto） |
| from | USD | 変換元通貨コード（例：USD, EUR, GBP） |
| to | EUR | 変換先通貨コード（例：EUR, USD, JPY） |
| amount | 1000 | 変換のデフォルト金額 |
| accent | #2563eb | アクセントカラー（#なしの16進数） |
| lang | en | ウィジェット言語コード（例：en, es, fr, de） |
| flags | 1 | 国旗表示（1=表示、0=非表示） |
| display | iso | 通貨表示形式（iso=USD、symbol=$） |
| lock | 0 | 通貨固定（1=固定、0=変更可） |
| currencies | EUR,GBP,JPY | マルチ通貨ウィジェット用のカンマ区切り通貨リスト |
| dropdown | all | ドロップダウン通貨（all, top10, top20, またはカンマ区切りリスト） |
| branding | 1 | ブランド表示（1=表示、0=非表示） |
| brandinglink | 1 | ブランドをクリック可能に（1=リンク、0=テキストのみ） |
| format | auto | 数字の書式（auto, us, eu, french, indian） |
| decimals | 2 | 小数点以下の桁数（0-6） |
| chart | 0 | チャート有効化（1=有効、0=無効） |
| chartperiod | 7d | チャート期間（7d, 14d, 30d, 90d） |
例
ダークテーマのコンパクトコンバーター：
?style=compact&theme=dark&from=USD&to=EUR
マルチ通貨為替レート：
?style=multi-fixed&from=USD¤cies=EUR,GBP,JPY,CAD
30日間チャート付きミニコンバーター：
?style=mini-chart&from=EUR&to=USD&chartperiod=30d
コードの代わりに通貨記号を表示：
?style=compact&display=symbol&from=USD&to=EUR
カスタム金額で通貨固定：
?style=compact&from=GBP&to=USD&lock=1&amount=100
5 カスタマイズオプション
テーマオプション
- light - 明るい背景＋暗い文字
- dark - 暗い背景＋明るい文字
- auto - ユーザーのシステム設定に自動で合わせる
通貨表示形式
- iso - USD、EUR、GBPなどISOコードを表示
- symbol - $、€、£など通貨記号を表示
数字の書式
- auto - 訪問者のブラウザ設定を自動検出
- us - 米国式：1,234.56
- eu - 欧州式：1.234,56
- french - フランス式：1 234,56
- indian - インド式：1,23,456.78
ドロップダウン通貨オプション
- all - サポートされているすべての170以上の通貨
- top10 - 人気トップ10通貨
- top20 - 取引量トップ20通貨
- USD,EUR,GBP,... - 特定通貨のカスタムリスト
ヒント： ウィジェットビルダーを使えば、これらすべてのオプションを視覚的に設定し、埋め込みコードを自動生成できます。
6 トラブルシューティング
ウィジェットが表示されない
埋め込みコードがHTML内の正しい場所にあるか確認してください。スクリプト埋め込みの場合は、正しいIDのコンテナdivが存在するか確認し、ブラウザのコンソールでJavaScriptエラーをチェックしてください。
ドロップダウンが動作しない
Iframe埋め込みの場合、ドロップダウンはウィジェット内でスクロールします。オーバーレイ付きのフル機能ドロップダウンを使いたい場合はスクリプト埋め込みを利用してください。
スタイルの競合
ウェブサイトのCSSがウィジェットの外観に影響している場合、ウィジェットのスタイルをページから分離するIframe埋め込みをお試しください。
コンテンツセキュリティポリシー（CSP）問題
厳しいCSPを設定している場合は、currency.wikiをscript-srcおよびframe-srcの許可リストに追加してください。例：script-src 'self' currency.wiki; frame-src 'self' currency.wiki;
