PowerCMS™
[ブログ] PowerCMS 6 でのアップデートまとめ を追加しました。
[よくあるご質問] フォーム投稿の自動返信メールに連番の受付番号を付与することはできますか? を追加しました。
[ブログ] PowerCMS サポートの実績 (2022年10月) を追加しました。
[新着情報] 【オンライン】11月24日(木) ステークホルダーとの信頼関係を構築できるサイトづくりとは? ~サイトでのBCP対策から情報配信のコツを一挙公開~ を追加しました。
ホーム > PowerCMS > ドキュメント > スタンダード版 > リッチテキストエディタ >

リッチテキストエディタへのアイテム挿入に関する機能を拡張する

アドオン・プラグイン

Computer Vision を利用した Alt サジェスト機能

AI を使った画像解析による代替テキスト提案機能「Alt サジェスト」

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 キー の確認

Computer Vision API キーの取得

「Manage Keys …」リンクから遷移すると、API キーを確認できます。横にあるコピーボタンをクリックする事で、クリップボードに API キーがコピーされます。

API キーを取得

※ Computer Vision APIの画像解析で取得するテキストは英語となりますが、追加の設定を行うことでTranslator Text APIによる自動翻訳を利用することが可能です。

Translator Text API キーの取得方法

Microsoft Azure ポータルにアクセスし、『「+」リソースの作成』→「AI + Cognitive Services」→「”Translator Text”」で検索→「Translator Text API」と遷移し、リソースを作成します。

Translator Text API キーの取得

作成したリソースの概要を表示すると、各種情報が表示されます。

  • Endpoint … 作成時に選択した「場所」別のエンドポイント
  • Manage Keys … API キー の確認

Translator Text API キーの情報が表示されている

「Manage Keys …」リンクから遷移すると、API キーを確認できます。横にあるコピーボタンをクリックする事で、クリップボードに API キーがコピーされます。

API キーを取得

API キーの設定

システムメニューの「設定」→「プラグイン」を開き、「AdvancedEditor」プラグインの設定欄から、「Alt サジェスト機能」→「Computer Vision API」→「API キー」にMicrosoft Azureから取得したComputer Vision APIキーを入力します。

取得した API キーを設定する

画像分析の2つのモード「画像解析」と「テキスト抽出 ( OCR ) 」

Alt サジェストでは「画像解析」と「テキスト抽出 ( OCR ) 」の2つのモードがあります。

画像解析モ-ド

AI が解析したテキストを提案します。 ※ 標準では英語となります。CMS 設定で翻訳設定することでテキストを自動翻訳する事が可能です。

テキスト抽出 ( OCR )

画像内のテキストを読み取ります。

例えば次の画像 ( アルファサード ロゴ ) に対して Alt サジェスト機能を利用すると下記の様な提案テキストとなります。

アルファサードの会社ロゴを Alt サジェストに読み込ませる

画像解析モ-ド

近くにロゴのアップ

画像解析モードでの解析結果

テキスト抽出 ( OCR ) モード

alfasadoimprovetheWeb

テキスト抽出モードでの解析結果

代替テキスト候補を HTML に反映させる

「alt属性値欄へ反映」というボタンをクリックすると確認アラートが表示されるので、内容に問題が無ければ OK を選択してください。同ダイアログ内の「alt属性値」欄にテキストが反映されます。


お問い合わせ

お問い合わせフォームがご利用できない場合は、以下のメールアドレスからも受け付けております。
contact@alfasado.jp

製品資料ダウンロード

パンフレットデータ、提案用資料などがダウンロードできます。