Automatic Alternative Text
ユーザーが代替テキストを入力していない場合に、Microsoft Azure Cognitive Services Computer Vision APIを使用して画像の代替テキストを自動生成します。
auto_alter
インストール
composer require 'drupal/auto_alter:^2.0'
概要
Automatic Alternative TextモジュールはMicrosoft Azure Cognitive Servicesと連携し、Drupal内の画像に対してAIを活用した代替テキスト生成機能を提供します。コンテンツ編集者が代替テキストを入力せずに画像をアップロードまたは保存すると、モジュールは自動的にAzureのComputer Vision APIにクエリを送信し、画像を分析して説明文を生成します。
このモジュールはエンティティ保存時に透過的に動作し、すべての画像フィールドを検査して、空の代替テキストフィールドにAI生成の説明文を自動入力します。また、画像アップロード直後に代替テキストを提案するオプション機能も提供しており、編集者は保存前にAI生成テキストを確認・修正できます。
生成された説明文にはAzure APIからの信頼度スコアが含まれ、オプションでステータスメッセージを通じてユーザーに表示できます。1MBを超える画像の場合、モジュールは自動的にスケーリングした派生画像を作成し、APIリクエストを最適化して帯域幅の使用量を削減します。
コンパニオンサブモジュール(Automatic Alternative Text Translation)は、Azureから返される英語の説明文をAzure Translator Text APIを使用してサイトの現在の言語に翻訳する機能を追加します。
Features
- エンティティ保存時にMicrosoft Azure Computer Vision APIを使用した代替テキストの自動生成
- 画像アップロード時の代替テキスト即時提案オプション
- すべてのコンテンツエンティティタイプのすべての画像フィールドをサポート
- APIリクエスト最適化のため1MBを超えるファイルの自動画像スケーリング
- 生成された代替テキストと信頼度パーセンテージを表示するステータスメッセージ
- インライン画像の代替テキスト生成のためのCKEditor画像ダイアログとの統合
- 設定時に認証情報を検証する組み込みAPI検証機能
- API通信問題の包括的なエラーログ
- 生成された英語の説明文を他言語に翻訳するサブモジュール
Use Cases
アクセシビリティコンプライアンスの向上
WCAGアクセシビリティ基準への準拠が求められる組織は、このモジュールを使用してすべての画像に意味のある代替テキストを確保できます。コンテンツ編集者が代替テキストの追加を忘れたり、説明文を書く時間がない場合でも、モジュールが適切なテキストを自動生成し、サイト全体のアクセシビリティコンプライアンスの維持を支援します。
大量コンテンツサイト
編集者が毎日多くの画像をアップロードするニュースサイト、ECプラットフォーム、その他のコンテンツ量の多いサイトは、代替テキストの自動生成の恩恵を受けます。編集者はゼロから説明文を書く代わりに提案を確認・改善でき、コンテンツ作成時間を大幅に短縮できます。
多言語サイト
複数言語の視聴者にサービスを提供するサイトは、メインモジュールと翻訳サブモジュールを組み合わせて代替テキストを自動生成・翻訳できます。Computer Vision APIは画像を分析して英語の説明文を返し、それが訪問者の言語(ドイツ語、フランス語、スペイン語など)に翻訳されます。
レガシーコンテンツの移行
代替テキストのないシステムからコンテンツを移行する場合や、大規模な画像ライブラリをインポートする場合、このモジュールは説明文のない画像の代替テキストを自動入力し、手動介入なしで移行コンテンツのアクセシビリティを向上させます。
CKEditorインライン画像
CKEditorを使用してWYSIWYGコンテンツに直接画像を挿入するコンテンツ編集者は、画像ダイアログの「Get suggestion」ボタンをクリックしてエディターを離れることなく代替テキストを生成でき、コンテンツ作成ワークフローを効率化します。
Tips
- 代替テキスト自動生成に依存する前に、設定フォームの組み込み検証を使用してAzure API設定をテストしてください
- 初期セットアップ時に「Show status message to user」を有効にして、モジュールが動作していることを確認し、信頼度スコアを確認してください
- 「Make suggestion」オプションを使用して、編集者が保存前にAI生成の説明文を確認・改善できるようにしてください
- 特に高トラフィックサイトでは、予期しないコストを避けるためにAzure APIの使用量を監視してください
- モジュールは画像を1440x1440にスケーリングしJPGに変換する「auto_alter_help」画像スタイルを作成します - これは1MBを超えるファイルに自動的に使用されます
- サイトが非英語の視聴者にサービスを提供している場合は翻訳サブモジュールを検討してください - オーバーヘッドは最小限でローカライズされた代替テキストを確保できます
Technical Details
Admin Pages 2
/admin/config/media/auto_alter
代替テキスト自動生成のためのMicrosoft Azure Computer Vision API連携を設定します。このページでAzure API認証情報を入力し、代替テキスト生成時のモジュールの動作を制御できます。
/admin/config/media/auto_alter/translate
AI生成の英語説明文を他言語に翻訳するためのMicrosoft Azure Translator Text APIを設定します。この設定ページはauto_alter_translateサブモジュールによって提供されます。
権限 1
Hooks 3
hook_entity_presave
保存操作中にコンテンツエンティティのすべての画像フィールドを検査します。代替テキストのない画像に対して、Azure APIを呼び出して代替テキストを自動生成・設定します。
hook_form_alter
画像アップロード時に代替テキストの提案を提供するようにエンティティフォームを変更します。また、インライン画像挿入用のCKEditor画像ダイアログに「Get suggestion」ボタンを追加します。
hook_modules_installed
モジュールが最初にインストールされた時にリマインダーメッセージを表示し、管理者にAzure API認証情報の設定を促します。
Troubleshooting 6
/admin/config/media/auto_alterに移動し、Azure Computer Vision APIキーとエンドポイントURLを入力してください。まずAzure PortalでComputer Visionリソースを作成する必要があります。
Azure Portalから完全なAPIキーをコピーしたことを確認してください。他のAzureサービスではなく、Computer VisionリソースのキーWを使用していることを確認してください。
エンドポイントURLが完全で正確であることを確認してください。リージョン、APIバージョン、describe操作が含まれている必要があります。例:https://westeurope.api.cognitive.microsoft.com/vision/v1.0/describe?maxCandidates=1
1) 設定ページの検証でAPI認証情報が正しいことを確認。2) Drupalログでエラーメッセージを確認。3) 画像フィールドの設定で「代替テキスト」フィールドが有効になっていることを確認。
auto_alter_translateサブモジュールが有効になっていること、「Enable translation」チェックボックスがオンになっていること、有効なAzure Translator API認証情報が設定されていることを確認してください。ソース言語とターゲット言語は異なる必要があります。
モジュールは「auto_alter_help」画像スタイルを使用して1MBを超える画像を自動的にスケーリングします。問題が続く場合は、最大アップロードサイズを減らすか、アップロード前に画像を最適化することを検討してください。
Security Notes 4
- APIキーはDrupal設定に保存されます - 設定エクスポートファイルに適切なアクセス制御を確保してください
- モジュールは代替テキストを保存する前にDrupalのXSSフィルターを使用してAPIレスポンスをサニタイズします
- 画像データは処理のためにMicrosoft Azureサーバーに送信されます - コンプライアンス要件についてAzureのデータ処理ポリシーを確認してください
- 「administer Automatic Alternative Text」権限は信頼できる管理者にのみ付与してください