「frame」の検索結果

SharedArrayBufferなどに必要なクロスオリジン分離を点検。セキュリティヘッダーと外部リソースの互換性を調べ、ブラウザーでの成立を確認するスキル。

• SharedArrayBufferの利用要件確認
• COEP導入前の外部リソース調査
• ポップアップや埋め込みへの影響確認

パンくずリストのHTML構造と現在地の指定を点検し、サイトの階層を画面読み上げでも理解できるよう、適切な要素とARIA属性を整えるスキル。

• パンくずの読み上げ対応を点検したいとき
• 共通部品が出力するHTMLの確認
• 構造化データと表示内容の整合確認

本番配信するCSSの空白やコメントを削ってファイルを小さくするために、圧縮の適用状況やビルド設定を点検し、画面幅ごとの表示も確認するスキル。

• 本番CSSの圧縮状況の確認
• ビルド工程に圧縮を追加したいとき
• PostCSSの出力を見直したいとき

ブラウザーに届くHTMLの文字コード宣言を点検し、UTF-8の指定漏れや配置の問題を見つけ、日本語や特殊文字の文字化けを防ぐために修正するスキル。

• 日本語や特殊文字の文字化け調査
• 公開前の文字コード宣言の確認
• 共通テンプレートのHTML出力点検

公開前のHTMLに残る開発用コメント、デバッグコード、ログ、仮の要素を点検して除去します。必要なコメントを残しながら、機密情報の露出も確認するスキルです。

• 本番公開前にHTMLを整理したいとき
• コメント内の機密情報を点検したいとき
• デバッグログや仮の要素の削除

存在しないページに訪れた人を検索や主要ページへ案内する、独自の404ページを作成・点検するスキル。表示内容に加え、HTTPステータスの正しさも確認します。

• 独自の404ページを作りたいとき
• リンク切れ時の検索・案内の整備
• 存在しないページの200応答の確認

フォームのエラーや完了通知、リアルタイム更新が読み上げでも伝わるよう、実際に表示されるHTMLの属性、表示時間、閉じる操作を点検するスキル。

• フォームエラーの読み上げ確認
• 完了通知の表示時間を見直したいとき
• リアルタイム通知の点検

補足説明を表示するツールチップを、キーボードや画面読み上げでも使えるよう点検し、HTML属性、表示・終了操作、コントラストを見直すスキル。

• ツールチップのキーボード操作の点検
• 補足説明の読み上げを確認したいとき
• 表示操作とEscapeキー終了の点検

広告ブロッカーで止まるリンクや外部リソースをHTMLとJavaScriptから点検し、遷移の不具合や読み込み失敗に対する修正案を示すスキル。

• 広告ブロッカー使用時のリンク不具合調査
• 外部スクリプトや画像の読み込み確認
• 追跡用リダイレクトの見直し

折りたたみ式のアコーディオンをキーボードや読み上げで利用できるよう、ボタンと開閉状態の属性、見出し構造、実際に出力されたHTMLを点検・修正するスキル。

• 折りたたみ部分のキーボード操作確認
• 読み上げで開閉状態を伝えたいとき
• 共通のアコーディオン部品の見直し

ターミナル内で操作する画面をOpenTUIで作るスキル。基本API・React・Solidから実装方法を選び、部品配置、入力処理、アニメーション、テストを支援します。

• ReactやSolidでTUIを作りたいとき
• 入力フォームや選択メニューの実装
• 端末サイズに応じた画面配置

目標の作成と継続的な取り組みを支援し、約束した行動や進捗、目標の変化を整理します。期限や他の目標との競合も踏まえ、状況に合った支援につなげます。

• 分野に合った目標を作りたいとき
• 進捗と約束した行動の確認
• 競合する目標や優先順位の見直し

xAIのGrokで画像の生成・編集・合成や短い動画制作を進めるために、指示文の組み立て、参照画像の使い分け、生成結果の取得方法を案内するスキル。

• 画像のスタイルや一部を変えたいとき
• 複数の画像を合成したいとき
• 参照画像から商品動画を作りたいとき

GSAPで複数のアニメーションの順序や重なりを組み立てるスキル。開始時刻や区切りの名前を指定し、入れ子の構成と再生・停止・逆再生まで扱います。

• 複数の要素を順番に動かしたいとき
• 動きの重なりを細かく調整
• ラベルで演出の区切りを整理

音声付きの短い動画を文章や参照画像から作り、会話で変更点を伝えて編集します。物の追加・削除、照明や画面内の文字の変更、秒数に沿った演出の指定を支援します。

• 文章から音声付き短編動画を作りたいとき
• 参照画像で人物や商品の役割を指定したいとき
• 会話で物や照明、文字を調整したいとき

Three.jsで基本図形から独自の立体、文字や点群を作るスキル。頂点の編集、形状の結合、同じ形を多数描く処理を通じて、形作りと描画負荷の調整を支援します。

• 基本立体や曲線に沿う形状の制作
• 独自のメッシュを作成・変形したいとき
• 立体文字や点群、ワイヤーフレーム表示

Remotion動画に、ツールキット付属の背景や比較画面、独自の場面転換を組み込む作業を支援します。30fpsでの時間配分や描画時の実装規約も扱います。

• グリッチや光漏れで場面を切り替える
• 2本の動画を並べて比較したいとき
• 解説者の小窓やロゴを重ねたいとき

動画やポッドキャスト、ゲーム向けに、ElevenLabsでナレーション・効果音・音楽を生成し、声の調整や音声クローン、Remotionとの同期も扱います。

• 動画やポッドキャストの音声制作
• 説明文から効果音を作りたいとき
• 歌声なしのBGMを作りたいとき

d3.jsで独自のグラフや関係図、地図を作り、拡大・移動や詳細表示を加えるスキル。データに応じた描画から画面サイズへの対応、配色や操作性の調整まで扱います。

• 独自の配置や配色のグラフ制作
• 関係図や地図を作りたいとき
• 詳細表示や拡大・アニメーションの追加

文章で伝えた企画から、ナレーション・画像・音楽を生成して解説動画にまとめるスキル。人物が話す映像も加え、音声に尺を合わせてRemotionで書き出します。

• 音声付きの商品紹介動画を作りたいとき
• スプリントの成果報告を動画にしたいとき
• 人物が話す映像を場面に添えたいとき

一人が話す既存動画に、発言に同期する字幕や人物の背後に回り込む文字演出を加えます。35種類のスタイルから選び、文字起こしから人物の切り抜き、合成までローカルで進めます。

• 解説動画に読みやすい字幕を付けたいとき
• 強調語を人物の背後に表示したいとき
• SNS動画にテーマ付き字幕を加えたいとき

Remotion Studioの操作デモを利用者が録画できるよう画面と撮影範囲を準備します。録画後はカーソル編集情報を保って取り込み、公開先への保存まで進めます。

• Studioの操作デモを録画したいとき
• タイムラインの実演を撮影したいとき
• カーソル情報付きで録画を取り込みたいとき

Remotion Studioで操作中のReact描画を記録し、不要な再描画や時間のかかる処理を調べます。変更前後を同じ条件で測り、改善を数値で確かめます。

• Studioの不要な再描画を調べたいとき
• 画面更新が遅い原因を特定したいとき
• タイムライン位置と描画の関係を調べたいとき

Remotionを使った動画生成アプリの開発を支援します。入力フォームからの動画出力や編集画面を想定し、プレビューの埋め込みと動画の生成方式の選択を案内します。

• 入力フォームから動画を生成したいとき
• 動画編集アプリの開発
• Reactアプリへのプレビュー埋め込み