困ったとき・よくある質問

カードが現れる前に画像がちらつく

スクリプトが<fuda-card>を定義するまで、ブラウザーは<img>を元の大きさで描くので、画像全体が枠に入る前に見えてしまいます。次の1行を、<head>の中で、スクリプトと自分のスタイルより前に置いてください。カードは見えないまま、カードの大きさの場所だけが確保されるので、現れても何も動きません。

<style>fuda-card:where(:not(:defined)){display:inline-block;width:300px;aspect-ratio:2.5/3.5;overflow:hidden;visibility:hidden}fuda-collection:where(:not(:defined)){display:block;min-height:calc(var(--fuda-stage-height,clamp(300px,calc(100svh - 440px),620px)) + 380px)}</style>

定義されたあとも、カードは画面上の大きさを持ち、スロットのすべての画像が読み込まれるまで画像を隠し、それからフェードインさせます（動きの軽減のときはフェードなし）。スクリプトが実行されないと、カードは空白のままです。そのときに画像をそのまま見せたければ、<noscript><style>fuda-card:not(:defined){visibility:visible}</style></noscript>を加えてください。

カードが空白のまま

要素が登録されていません。@johnmorrisdotca/fuda-cards/elementが、ブラウザーで動くコードの中で1回インポートされているか、パスやインポートマップが解決できているか（ネットワークのパネルに404が出ます）、中の画像が読み込まれているかを確かめてください。画像はスロットのすべてが読み込まれるまで隠されます。画像の読み込みに失敗すると、枠は空のままになります。

「HTMLElement is not defined」

elementかcollection-elementをサーバーでインポートしています。これらは評価時にHTMLElementを継承します。ブラウザーだけでインポートしてください（HTMLとCDNとバンドラーを参照）。メインのエントリーと@johnmorrisdotca/fuda-cards/collectionは、サーバーでも安全です。

コレクションに何も表示されない

cardsはプロパティです。HTMLにcards='[...]'と書いても何も起きません。スクリプトで配列を確かめ、parseCollectionに通してください。最初の不正な項目を示すErrorを投げます（nameやimageがない、idの重複、cardでもobjectでもないkind、不正なmetadata）。

ズームバーがない、またはコンソールに@johnmorrisdotca/kazoku-ui/view-controls/defineを解決できないと出る

バンドラーのないページでは、コレクションにその名前のインポートマップが要ります（HTMLとCDNを参照）。カード1枚の<fuda-card>には要りません。

角度、傾き、自動回転が出ない

カードを1枚も含まないコレクション（すべての項目がkind: 'object'）には、回るものがないので、これらは出ず、URLにも角度が含まれません。山以外の平らな表示も、回りません。

何も動かない

要素のanimate="off"と、システムの動きの軽減の設定を確かめてください。動きの軽減がオンのときは、カードの回転、パン、自動再生、ライブ3Dのカードは、仕様として止まります。autoplay="focus"にはmotion="pan"が必要です。画像をカードの幅いっぱいに広げたとき、表示枠より縦に長くないと、動く距離がありません。

取り出したカードを置く余白がない

pile-controlsは、カードの下に3つのボタンを描きます。カードの下に約70 pxの余白を残してください。開いた扇や脇の山はカードの外まで広がります。card.pileBoundsを読むか、fuda-pileを待ち受けて、レイアウトを合わせてください。

wearが何も表示しない

perfect、空の値、未知の名前、度合いがすべて0の場合は、意図して何も描きません。wearPresetsと綴りを照らし合わせてください。摩耗は、<fuda-collection>の画像や、山の一番上より下のカードには描かれません。

縁がおかしい、影で3Dが平らになる

ドロップシャドウは要素そのものに付いたフィルターです。カードとその面の間にある要素にfilterを付けると3Dが平らになり、裏面が鏡像で見えます。フィルターを外すか、--fuda-edgeで縁の色を変えてください。

ライブ3Dが始まらない

動きの軽減のとき、WebGLがないとき、コンテキストを失ったあと、ほかのカードがフォーカスを持っている間は、カードは画像のままです。どの場合もlive.focus(card)はfalseになります。loadがthreeのモジュールを返していること、item.buildがシーン、カメラ、objectを返していることを確かめてください。

質問

フレームワークは必要ですか。 いいえ。何かを取得しますか。 渡された画像のURLだけを、閲覧者のブラウザーで取得します。何かを保存しますか。 いいえ。デモは名前を付けたコレクションをブラウザーのlocalStorageに保存しますが、パッケージは保存しません。アクセシブルですか。 組み込まれているものと確かめた範囲は、アクセシビリティとテーマを参照してください。