mcpField
A
arcgis-html-css

arcgis-html-css

github.com/valdesrosierデザイン・UI894 回インストール4 週間前に更新
リポジトリ

arcgis-html-css について

arcgis-html-css は、ArcGIS Online の Hub テキストカードと Map Viewer ポップアップ向けに、HTML・CSS の作成や修正を支援するスキルです。各エディターの制約を踏まえ、アクセシビリティと検証方法も扱います。

主な機能

  1. 01Hub カードまたはポップアップのプロファイル選択
  2. 02貼り付け可能な HTML・CSS 断片の作成
  3. 03制約のあるマークアップの修正・変換
  4. 04アクセシビリティと狭い画面幅の確認
  5. 05許可リスト検証と実エディター検証の区別

活用シーン

  1. 01Hub テキストカード用のマークアップ作成
  2. 02Map Viewer ポップアップ用 HTML・CSS の準備
  3. 03エディターで拒否されるマークアップの調整
  4. 04断片のアクセシビリティとモバイル幅への適合確認

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/valdesrosier/skills --skill arcgis-html-css

インストール後、Claude Code で/arcgis-html-cssを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

agents/
openai.yaml
references/
hub-text-card.md
map-viewer-popup.md

詳細

ArcGIS HTML と CSS

ArcGIS Online は、作成されたマークアップをサニタイズします。有効なブラウザー HTML と CSS でも、保存時に削除または変更されることがあり、サポートされている 2 つのエディターに共通の互換性仕様はありません。作成を始める前に、制約付きマークアップのプロファイルを選択してください。

まずプロファイルを特定する

対象が明確でない場合は、確認してください。次のどちらかを推測してはいけません。

  • Hub text card — ArcGIS Online Hub のテキストカードにある HTML ソースエディターです。references/hub-text-card.md をお読みください。
  • Map Viewer popup — ArcGIS Online Map Viewer のポップアップにあるテキストコンテンツ用の HTML/CSS エディターです。references/map-viewer-popup.md をお読みください。

これらのプロファイルを ArcGIS Enterprise Sites、Experience Builder、埋め込み、iframe、スタンドアロンの Web ページ、ArcGIS Maps SDK for JavaScript アプリケーションに適用しないでください。

ポップアップ Arcade は、別の作成環境です。出力としてポップアップ HTML/CSS が求められている場合に、Arcade を生成または組み合わせてはいけません。

フラグメントを作成する

選択したエディターに直接貼り付けられるマークアップを返してください。<html>、<head>、外部スタイルシート、ビルドツール、JavaScript、スタンドアロンアプリケーションは出力しないでください。

新しいコンテンツの場合：

  1. コンテンツ、リンク、画像、フィールドプレースホルダー、視覚的な意図を確認します。
  2. 選択したプロファイルで許可されている要素、属性、URL プロトコル、インライン CSS のみを使用します。
  3. シンプルで意味的な HTML を優先します。Hub のみ、最も明確で互換性があり、アクセシブルな解決策である場合は、サポートされている Calcite コンポーネントを使用します。
  4. ポップアップの狭い幅や、Hub のモバイル表示でも使いやすいレイアウトにします。

修正または変換の場合：

  1. サニタイザーやレンダラーによって拒否または変更される要素を特定します。
  2. 視覚的な忠実さよりも先に、意味のあるコンテンツ、リンク、画像、階層、フィールドプレースホルダーを保持します。
  3. サポートされていない構造は、最も近い互換性のある代替策に置き換えます。
  4. コンテンツを黙って削除してはいけません。重要な視覚的または動作上の妥協点は、フラグメントの後に列挙します。
  5. サポートされていないスクリプトやインタラクティブ機能が必要な依頼である場合は、その旨を明確に伝えます。

アクセシビリティを完了条件にする

  • プロファイルがサポートしている場合は、意味的な構造を使用します。
  • 見出しの順序を論理的に保ちます。
  • 装飾目的でない限り、画像に意味のある代替テキストを指定します。
  • 意味が伝わるリンクテキストを使用します。
  • 色だけで意味を伝えないでください。
  • 色を選ぶ際は、テキストとインタラクティブ状態のコントラストを確認します。
  • 狭い幅で切り詰めやはみ出しが発生する固定サイズは避けます。

明らかなアクセシビリティ上の欠陥は、依頼されたコンテンツを大きく変えてしまう場合を除き、修正してください。大きく変えてしまう場合は、その矛盾を報告します。

適切な範囲で検証する

シンプルなフラグメントでは、すべての要素、属性、URL プロトコル、インライン CSS プロパティが、選択したプロファイルのリファレンスに適合していることを確認します。アクセシビリティと狭い幅での表示も確認します。

複雑なレイアウトや、リファレンスで仕様が定まっていない動作については、アクセス可能な場合、実際のエディターで検証します。貼り付け、保存、再度開く操作を行い、保存されたマークアップを確認したうえで、狭い幅と広い幅の両方でレンダリング結果をテストします。結果は allowlist-validated または live-editor validated のいずれかとして正確に示します。テストせずに ArcGIS がマークアップを変更せず保持したと主張してはいけません。

Esri の公式ドキュメントを権威ある情報源として扱います。日付が明記された観察済みのルールは、ドキュメントの不足を補うために利用できますが、保証された仕様ではなく観察結果であると明記してください。どちらの情報源も構造をサポートしていない場合は、保守的な代替策を使用します。

完了条件

プロファイルが明確で、出力が貼り付け可能なフラグメントであり、すべての構造がそのプロファイルでサポートされ、アクセシビリティの確認を通過し、妥協点が開示され、検証レベルが明記されていること。

コメント

Markdown 対応