Communitygithub.com

honglin0000/livecanvas

テーマや素材を検索・検証して、Apple Live Photo 形式のアニメーション情報カードにします。Remotion を使用して画像、PNG、絵文字、シーン、タイムライン、オプションのチャートを構成。知識の説明、製品比較、変化の過程、データストーリーに最適。動きのあるプレビューとペアリング済みライブリソースを生成し、受信端末の互換性についても説明します。

livecanvas とは?

このスキルは、ユーザーが指定したテーマや材料を検索・検証した上で、Apple Live Photo 形式のアニメーション情報カード(LiveCanvas)を生成します。Remotion をレンダリングエンジンとして使用し、画像、PNG、絵文字、シーン、タイムライン、必要に応じてチャートを統合した動的なビジュアルストーリーを作成します。主な用途は、製品比較、データの変化の可視化、プロセスの説明など。デフォルト設定は日本語、1080×1440 解像度、30fps、約3秒、無音ですが、内容に応じて柔軟に調整可能です。このスキルは、まずテーマに関連する事実やデータを徹底的に調査・検証し、そのエビデンスを元にビジュアルを設計します。静的で読みやすいカバー画像と、アニメーション動画(MP4)を生成し、それらを Apple Live Photo 規格に準拠したペアリングリソースに変換。さらに、検証済みのデータ、ソース、編集可能な Remotion プロジェクトを含む `.pvt` パッケージを提供します。対応プラットフォームは macOS、Linux、Windows で、各プラットフォーム向けのペアリングスクリプトが用意されています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/honglin0000/livecanvas/tree/HEAD/livecanvas

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

LiveCanvas · 実況キャンバス

ユーザーの一言を、証拠に基づき、静的に読めて、動的に内容を伝えられる実況効果カードにします。旧称 LiveChart、現名称 LiveCanvas(実況キャンバス)は、チャート、画像、シーンストーリーを網羅します。デフォルトでテーマに関連する画像/アイコンとシーンアクションを能動的にデザインし、チャートはオプション表現です。デフォルトは日本語、Remotion、1080×1440、30 fps、約3秒、無音。これらは開始点であり、内容に応じて調整を許可します。3秒はApple形式の制限ではありません。

先に内容を決め、次に動きを決める

  1. リクエストから主体、指標、時間範囲、比較関係、用途を抽出。記事やレポートが与えられた場合は、まず完全な資料を読み、そこから主要なイベント、変化、能力、比較、シーンを抽出します。内容の重要性に応じて紙面を割り当て、価格や表示しやすい数字だけを選びません。具体的なニーズを優先し、ユーザーが与えた例を固定テンプレートとして扱いません。
  2. データを検索して検証し、データと口径を読んでください。まず、生の証拠、事実、または構造化データを保存してから、タイトル、数字、注釈を記述します。時系列がないテーマには、ファクトカード、プロセス、またはシーン説明を使用できます。グラフのためにデータを捏造してはいけません。
  3. 簡潔な制作説明を記述します:全体のコンテンツのメインライン、各カードの主体と結論、事実/データの口径、カバーの情報階層、絵コンテのタイムテーブル、素材計画。カード数はユーザーの要求と内容に応じて決定し、特定の数やテーマの組み合わせに固定しません。テーマに適した表現を選択し、折れ線グラフに数字を添えることをデフォルトにしません。デザイン上の判断は直接行います。情報が不足していて回答が実質的に変わる場合にのみ質問します。
  4. カバーと動きに従って制作します。Emil Kowalski の animate から、目的を持ち、控えめで、連続的で、リズムの明確な原則を取り入れます。ユーザーはすでに Remotion を指定しているため、上流のツール置き換え手順は実行せず、インタラクティブコンポーネントの時間制限を説明ビデオに機械的に適用しません。

文案:事実とデータを直接書く

  • タイトルは「主体+数字/変化/明確な結論」を優先します。例:「出力上限 1M tokens」「初回タスクコスト 39% 低減」「Text Arena 暫定首位」。必要な数字がない場合は、製品名、バージョン、または具体的なイベントを直接書き、無理にデータを盛り込みません。
  • 簡潔で直感的なステートメントを使用し、漠然とした宣伝、疑問文、比喩、対句、装飾的な英語ラベルを削除します。「再定義」「3つの変化を読む」「収益を実際のシーンに落とし込む」などの文を事実の代わりに使用しないでください。本文と添付画像の説明も同じ基準に従います。出典は機関名を明記します(例:Artificial Analysis、AA だけではない)。書き方の例と制限条件は カバーと動き を参照してください。
  • ユーザーが「AI臭すぎる」「データだけ載せて」「派手なのはやめて」と言った場合、まず文案と無関係な装飾を簡素化します。既存のテーマ、情報、必要な素材、選択されたデザインの方向性は保持し、主体カバーを勝手に削除したり、テーマを統合したり、セット全体を同じデータテンプレートに変更したりしません。
  • 修正時には、確認済みのテーマ、情報、ビジュアル要件を保持します。ユーザーがカード数や重点を変更した場合は、コンテンツを再配分し、統合、置き換え、再利用の関係を説明します。機械的にページを分割したり、テーマを繰り返して数を稼いだりしません。図番号に従って改訂前後の内容を照合し、トータルパッケージは異なるコンテンツごとに重複を排除します。

ビジュアル表現

  • カバーは製品名、バージョン番号、またはコアオブジェクトで視覚的な主従を確立します。「登場感」「衝撃力」などは効果の説明であり、画面上の文字として直接使用しません。具体的な方法は カバーと動き を参照してください。
  • セット全体で統一された配色、フォント、グラフィック言語を使用し、コンテンツに応じて構図を選択します。事実と関係性を説明するためにグラフィックを使用し、文字の積み重ね、大きな数字、装飾カード、または同じテンプレートの機械的な繰り返しを避けます。
  • デフォルトで、テーマのオブジェクトを画面に表示します:製品 PNG、コーヒーカップ、自動車、列車、メダル、都市の写真、天気絵文字など。コンテンツに関連する統一スタイルの素材セットを選択し、チャートの隅に装飾として貼り付けません。
  • オブジェクトの登場、移動、配置、置き換え、状態変化をデザインして内容を説明します。例えば、列車が年ノードを通過する、コーヒーカップが店舗カードを連れてくる、都市の風景が季節とともに切り替わる、など。
  • テーマに応じて、シーン、画像比較、アイコン配列、タイムライン、プロセスデモ、重要テキスト、必要に応じてチャートを組み合わせます。純粋なチャートは、それが最も明確である場合、またはユーザーが指定した場合にのみ採用します。
  • 画像や絵文字を使用する場合は、画像とアイコン を読み、素材を探し、利用可能性を確認し、プロジェクトに含めます。ユーザーが先に素材を提供する必要はありません。

検索のデフォルト値

  • 「最近3年」:最新の信頼できる完了観測日までのローリング3年間。実際の開始日と終了日を明記し、デフォルトで3つの年末値としません。月次グラフには完了した月末観測を使用します。最新の未完了月は個別に注記する必要があります。
  • 「年間気温」で年が指定されていない場合:最新の完全な自然年を使用し、デフォルトで月平均気温とします。結果の冒頭で選択を説明します。意図が明らかに平年の気候である場合は、明確な基準期間を持つ気候平均値を使用します。
  • 企業間比較では、観測日、指標、通貨を揃えるか、同じ基準期間の指数を明確に使用し、元の絶対値を保持します。
  • 上昇、下降、横ばい、季節変動を許可します。「成長曲線」というユーザーの発言があっても、下降を成長として描画してはいけません。
  • 日付はユーザーのタイムゾーンで解析し、機械の日付で「今年」をハードコードしてはいけません。

制作とパッケージング

実行と納品 および 直接納品 を読んでください。リソースパスはこのスキルディレクトリからの相対パスです。この絶対パスを SKILL_DIR と呼びます。

  • assets/remotion/ をレンダリングプロジェクトの起点として今回のディレクトリにコピーし、付属のロックファイル npm ci を使用します。その中の折れ線グラフは単なる例であり、絵コンテに従って composition を書き直す必要があります。デフォルトの最終版フォーマットではありません。インストール済みのスキル内で出力を生成したり、依存関係をインストールしたりしないでください。
  • サンプル data.json は合成データであり、テスト専用です。本番制作ではデータと文案を置き換え、サンプルマークを削除する前に事実確認を完了してください。
  • 時系列には、scripts/validate_data.py を使用して日付、出典引用、カバレッジ、範囲をチェックします。その他のコンテンツは、データと口径 に従って、マッチした事実/比較構造を使用し、日付シーケンスを無理に適用しません。検証に合格しても、ソースの事実が検証されたことを意味するわけではありません。
  • すべてのアニメーションは useCurrentFrame() によって駆動されます。CSS animation、壁時計、固定されていない乱数、ウェブギャラリーの組み込みアニメーションは禁止です。
  • 画像、絵文字、テキスト、シーン、チャートを同じ絵コンテに統合し、トレーサブルな事実、静的カバー、決定論的レンダリング、検証プロセスを保持します。
  • 同じ composition の完全な停止フレームから cover.jpg をエクスポートし、coverFrame / fps を記録します。カバー画像はアニメーション内に表示される必要があり、still-image-time は同じ時間を指します。
  • 生成環境に応じてペアリングツールを選択します:macOS では scripts/pair_live_photo.swift を使用。Linux/Windows では scripts/pair_live_photo.py を使用し、クロスプラットフォーム Apple Live Photo を読んでください。両方のパスで、無音 H.264 と JPEG を、共有識別子と timed metadata を含む Apple ペアリングリソースに書き込みます。これは中間ステップであり、納品完了ではありません。他の入力は最初にトランスコードし、ユーザーのオーディオトラックを黙って破棄しないでください。
  • パッケージ化が完了した後、ペアリングされた MOV を通常の方法で再度トランスコードしてはいけません。メタデータトラックが失われる可能性があります。
  • scripts/package_live_photo.py を使用して、明確な名前を持つ単一の .pvt パッケージを生成します。これをライブリソースパッケージとしてマークし、iPhone の「ファイル」アプリで直接プレビューできるとは保証しません。自動的に「写真」アプリを開いたりインポートしたりせず、フォトライブラリを変更しません。JPG + MOV ペアリングリソースで停止してはいけません。

検証と完了基準

まず事実と素材を確認し、次にカバーとビデオをプレビューします:開始、主要動作の中間、トランジション、データの極値(ある場合)、カバーの停止フレームを抜き打ちチェックします。画像の読み込み、絵文字のグリフ、透明なエッジ、中国語フォント、ラベルの重なり、数値の同期、単位、日付、トリミングを確認します。動作がテーマを説明していることを確認し、単なる数字や棒グラフの変化ではないことを確認します。実際の曲線には、偽のピークや谷を導入するスムージングを使用しません。欠測箇所は線を途切れさせます。セット全体で重要な内容と比較関係が保持されているか、カバーの主体が明確か、スタイルが統一されているかをチェックします。数字のスクロールは中間フレームと最終値をチェックし、静的カバーは完全に読み取れる必要があります。

各項目を個別に記録し、前の項目が次の項目の成功を意味すると見なさないでください。

  1. データと出典の検証。機械的な検証はその一部にすぎません。
  2. カバーと MP4 レンダリングが完了し、素材と主要動作が可視であり、メタデータと画面チェックに合格していること。
  3. Live Photo 識別子が一致し、timed metadata の時間位置が正しいこと。
  4. Apple 環境がある場合、PHLivePhoto.request によるネイティブロードの成功または具体的な失敗を記録します。純粋な Python 生成環境の場合は not_available と記録し、合格したと偽装しないでください。
  5. .pvt パッケージが完全であり、ペアリングリソースのハッシュが一致していること。
  6. フォトライブラリへのインポート、デバイスでの再生、サードパーティプラットフォームへのアップロード、ロック画面の互換性はすべてオプション項目であり、ユーザーが別途明示的にリクエストした場合にのみ操作および記録し、ファイル納品の前提条件とはしません。

macOS がない場合は、クロスプラットフォームの Python ペアリングとパッケージ化を実行します。オペレーティングシステムが原因で MP4 + カバーにフォールバックしてはいけません。メタデータの読み戻し、ビデオデコード、パッケージの整合性が確認できれば、リソースを納品可能とします。Apple ネイティブロード、iPhone インポート/再生はそれぞれ記録します。実際の依存関係が不足しており、インストールできない場合にのみ、プレビューを納品し、ブロック項目を明確にします。プラットフォームが生成できないと主張してはいけません。生成ファイルは、スマートフォンでのプレビュー、保存、再生の成功を証明するものではありません。

納品

各テーマに独立したディレクトリを作成し、直接視聴可能なプレビューと テーマ名.pvt ライブリソースパッケージを同時に提供し、delivery.json を保存します。また、data.json、元の証拠、sources.md、ローカル素材を含む編集可能な Remotion プロジェクト、素材リスト assets.json(素材を使用する場合)、cover.jpg、motion.mp4、内部 live/ ペアリングリソースとマニフェスト、qa.json を保持します。圧縮パッケージは転送専用であり、直接認識可能な Live Photo ではありません。

まず視聴可能なカバー/動的プレビューを表示し、次に .pvt リソースパッケージへのリンク、データの締切日、検証ステータスを添えます。ユーザーがスマートフォンで直接プレビューを要求した場合は、その受信経路を確認します。ファイルパッケージの生成やネイティブロードの成功だけをもって、要件が満たされたと主張してはいけません。転送インターフェースがディレクトリパッケージをサポートしていない場合は、.pvt.zip を添付し、解凍後にリソースパッケージが得られ、Live Photo をサポートするアプリで読み取る必要があることを明記します。ウェブページの LivePhotosKit プレビューとネイティブライブフォトとしての保存は2つの異なる機能であり、実装されていない機能を約束してはいけません。カバーと MP4 はプレビューとしてのみマークできます。チャットインターフェースが Apple Live Photo をネイティブに表示できない場合は、簡単に説明します。「Live Photo を直接納品する」をフォトライブラリへのインポートと解釈してはいけません。フォトライブラリの権限を要求したり、インポートをトリガーする可能性のある .pvt を自動的に開いたりしてはいけません。リクエストがない限り、ソーシャルプラットフォームに公開してはいけません。

トリガー例

  • 「LiveCanvas で Xiaomi の過去3年の時価総額の変化を作って。」
  • 「Apple と Xiaomi の過去3年の時価総額を2枚のライブフォトにして、スタイルを統一して。」
  • 「北京の昨年の年間気温をライブフォトにして、カバーデザインもして。」
  • 「このデータを動くインフォグラフィックにして、Apple ライブフォトとして書き出して。」
  • 「コーヒーカップの PNG と店舗カードを使って、瑞幸(Luckin)と Starbucks の拡大ストーリーを作って。」
  • 「列車、年ノード、走行距離の数字を使って、中国高速鉄道の実況動画を作って。」

関連スキル