Fuda Cards ドキュメント

Fuda Cards 札 — Collectible card frames for the web

画像やライブ3Dを入れるコレクション用のカード枠です。本物の厚み、縁、箔、山、傷み、バインダーを、2つのWebコンポーネントで使えます。

インストール

npm install @johnmorrisdotca/fuda-cards

最初に読む

• はじめに最初のFudaカードをページに置き、続けてカードの山、使い込んだカード、コレクションまで、ビルド作業なしで数分で試せます。

エントリーポイント

ガイド

やり方

• カード要素fuda-card要素のすべての属性、プロパティ、CSS変数と、それぞれの初期値、大きさと見た目の整え方を説明します。
• 素材と山実際のカード用紙、プラスチック、金属と同じ厚みをカードに持たせ、デッキ全体を、乱れ具合とシードを決めた1つの山として描きます。
• 摩耗使い込んだカードを、ミントから破損まで、プリセット、シード、種類ごとのつまみで描きます。
• 動きと回転縦長の画像をパンさせ、フォーカスしたカードで自動再生し、カード全体を回し、自分の操作で回転を動かします。
• コレクションfuda-collectionでコレクション全体を10種類の表示で見せます。渡す一覧の入力規則、種類、メタデータ、URLの扱いを説明します。
• バインダーと山リングまたはジップのバインダーのページをめくり、カードの山を扇状に開き、1枚取り出し、animateとspeedで動きを調整します。
• カード内のライブ3D1つのWebGLコンテキストで、同時に1枚のカードだけを本物の3Dで回し、ほかは画像にします。live-3dモジュールと自分のthree.jsを使います。
• HTMLとCDNビルドなしでカードをページに置く方法です。jsDelivrまたはunpkgから読み込みます。コレクションとライブ3Dにはインポートマップを使います。
• バンドラーViteまたはwebpackでカードを使う方法です。要素は、ブラウザーで動くコードの中で1回インポートするだけで、ほかに設定はいりません。
• フレームワークReact、Vue、Svelte、Angularでカードを使う方法です。要素のインポートはブラウザー側だけで行います。ふつうのHTML、バンドラー、iframeは別のガイドにあります。
• iframeに埋め込む自分で作らないページにカードを載せる方法です。埋め込みページのiframeを使い、設定はそのアドレスに入れます。
• TypeScriptとNodeすべての設定の型と、DOMのないサーバーでも動く表、計算、配置を説明します。

解説

• アクセシビリティとテーマFudaのカードとコレクションが、キーボード、タッチ、スクリーンリーダー、動きの軽減のために行うこと、任せていること、設定できるすべての色と大きさです。
• アーキテクチャパッケージが小さなモジュールにどう分かれているか、ふつうのカードがほとんど何も読み込まない理由、srcの各ファイルの役割を説明します。

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

• 困ったとき・よくある質問カードが空白、画像がちらつく、コレクションが何も出ない、ズームバーがない、カードが回らないなど、うまくいかないときの対処です。

アップグレード

• アップグレード0.1から0.10まで、各バージョンで対応が必要な変更と、以前のバージョンから今も使えるものをまとめます。

• 変更履歴@johnmorrisdotca/fuda-cards 0.11.0 のソースから作成しました。
• すべてのエクスポートを1ページでapi.html
• 言語モデル向けのドキュメントllms.txt · llms-full.txt

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。