remotion-maps について
remotion-maps は、Remotion のシーンで使う地図技法を選び、適用するためのスキルです。静止画像、Mapbox、MapLibre、MapTiler、CesiumJS など、独立した手法を紹介します。
主な機能
- 01ショットごとに地図技法を一つ選択
- 02静止地図画像へのアニメーション追加
- 03Mapbox のスタイル、地球表示、3D 建物
- 04API キー不要の MapLibre
- 05MapTiler の地理注釈と CesiumJS のフライスルー
活用シーン
- 01Remotion のショットへの地図追加
- 02Mapbox での地球表示の作成
- 03MapTiler による地理注釈の描画
- 04CesiumJS による地形フライスルーの作成
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ remotion-dev/ claude-code-plugin --skill remotion-mapsインストール後、Claude Code で/remotion-mapsを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
agents/openai.yamlassets/remotion-icon.svgtechniques/cesium/TECHNIQUE.mdtechniques/cesium/assets/cesium-path.jsoncity-path.jsonflight-path.tssample-river.geojsontechniques/cesium/references/3d-data-sources.md3d-flyover-architecture.md3d-troubleshooting.mdtechniques/cesium/scripts/prep-cesium-path.mjstechniques/mapbox/TECHNIQUE.mdtechniques/mapbox/references/render-stability.mdtechniques/maplibre/TECHNIQUE.mdtechniques/maplibre/references/render-stability.mdtechniques/maptiler/TECHNIQUE.mdtechniques/maptiler/assets/MapTilerVectorElement.tstokens.tstechniques/maptiler/assets/sample-data/country-meta.jsonyarlung-flow.jsontechniques/maptiler/references/map-data-sources.mdmap-explainer-architecture.mdmap-geo-prep.mdrender-stability.mdtechniques/maptiler/scripts/prep-geo.mjstechniques/static-map/TECHNIQUE.md詳細
Remotion Maps
意図するショットに合った手法を1つだけ選び、その手法のTECHNIQUE.mdだけを読み込んでください。
各手法のディレクトリはそれぞれ独立しているため、ほかの手法に影響を与えずに削除できます。
静的マップ
- 衛星画像を取得して
<Img>タグに配置し、その上にアニメーションを重ねる必要があります
Mapbox
- Mapboxのキーが必要です
- デフォルトでより洗練されたスタイルを利用できます
- ズームアウトすると、マップを丸い地球儀として表示できます
- エッフェル塔などの魅力的な3D建物が含まれます
MapLibre
- APIキーは不要で、完全無料です
- 3D建物は含まれていません
MapTiler
- MapTilerを使用します
- 地理的な地物(境界、河川、ラベル)の上に注釈を描画できます
CesiumJS
- 地形や山岳地帯を飛行して巡る映像を作成できます
- 「フライトシミュレーター」の視点
コメント
Markdown 対応