AI を使った画像解析による代替テキスト提案機能「Alt サジェスト」
Alt サジェストとは
Alt サジェストは、ウェブサイトを作成・運用していく上で悩ましい代替テキストの設定をサポートする新機能です。記事/ウェブページ入力画面等で利用するリッチテキストエディタの画像挿入ダイアログ内で機能します。
Microsoft 社が提供している Cognitive Services を利用することで画像の分析をしたり画像内のテキストの読み取ることで alt 属性値に設定すべき内容を提案します。
※ Cognitive Services を利用するための API キーが必用です。
Computer Vision API キーの取得方法
Microsoft Azure ポータル にアクセスし、『「＋」リソースの作成』→「AI + Cognitive Services」→「Computer Vision API」と遷移し、リソースを作成します。
作成したリソースの概要を表示すると、各種情報が表示されます。
- Endpoint … 作成時に選択した「場所」別のエンドポイント
- Manage Keys … API キー の確認
「Manage Keys …」リンクから遷移すると、API キーを確認できます。横にあるコピーボタンをクリックする事で、クリップボードに API キーがコピーされます。
※ Computer Vision APIの画像解析で取得するテキストは英語となりますが、追加の設定を行うことでTranslator Text APIによる自動翻訳を利用することが可能です。
Translator Text API キーの取得方法
Microsoft Azure ポータルにアクセスし、『「＋」リソースの作成』→「AI + Cognitive Services」→「”Translator Text”」で検索→「Translator Text API」と遷移し、リソースを作成します。
作成したリソースの概要を表示すると、各種情報が表示されます。
- Endpoint … 作成時に選択した「場所」別のエンドポイント
- Manage Keys … API キー の確認
「Manage Keys …」リンクから遷移すると、API キーを確認できます。横にあるコピーボタンをクリックする事で、クリップボードに API キーがコピーされます。
API キーの設定
システムメニューの「設定」→「プラグイン」を開き、「AdvancedEditor」プラグインの設定欄から、「Alt サジェスト機能」→「Computer Vision API」→「API キー」にMicrosoft Azureから取得したComputer Vision APIキーを入力します。
画像分析の2つのモード「画像解析」と「テキスト抽出 ( OCR ) 」
Alt サジェストでは「画像解析」と「テキスト抽出 ( OCR ) 」の2つのモードがあります。
画像解析モ－ド
AI が解析したテキストを提案します。 ※ 標準では英語となります。CMS 設定で翻訳設定することでテキストを自動翻訳する事が可能です。
テキスト抽出 ( OCR )
画像内のテキストを読み取ります。
例えば次の画像 ( アルファサード ロゴ ) に対して Alt サジェスト機能を利用すると下記の様な提案テキストとなります。
画像解析モ－ド
近くにロゴのアップ
テキスト抽出 ( OCR ) モード
alfasadoimprovetheWeb
代替テキスト候補を HTML に反映させる
「alt属性値欄へ反映」というボタンをクリックすると確認アラートが表示されるので、内容に問題が無ければ OK を選択してください。同ダイアログ内の「alt属性値」欄にテキストが反映されます。
