アクセシビリティ(略して「a11y」)は、Web 開発と e コマースの重要な部分として急速に普及しています。以前は、alt テキストやカラーブラインド対応の配色などのアクセシビリティ支援は、開発者や企業にとって優先順位が低いものでした。しかし現在では、ヨーロッパやアメリカのアクセシビリティ法制化により、ウェブサイトのアクセシビリティ対応がこれまで以上に重要になっています。
しかし、ウェブサイトの全ての画像に alt テキストを作成するにはどうすればよいでしょうか?数千枚(または数百万枚)の画像がある場合、手作業で各画像を確認して alt テキストを書くのは膨大な時間がかかります。さらに毎日新しい画像が追加されると、終わりのない作業になってしまいます。
そこで SceneXplain の出番です。アクセシビリティのための強い味方です!画像をアップロードするだけで、自分で言葉を考える必要なく alt テキストを取得できます。
数十枚程度の画像なら、これは頭を休ませる良い方法です。ただし、クリックやドラッグは自分でする必要があります。頭は楽になりますが、指は楽になりません。数千枚の画像がある場合は?今のうちに腱鞘炎の予約を入れておいた方がいいでしょう。
全てを自動化できる方法があればいいのに。そうすれば頭も指も、もっと面白いことに集中できるのに。
そこで SceneXplain の API の出番です。数千枚の画像を処理し、バッチで SceneXplain に送信して結果を CSV ファイルに出力するスクリプトを書くことができます(もう少しコーディングすれば、ワークフローに直接統合することもできます)。
ご存知の通り、幸せの中には API が含まれているのですから。
tagAPI とは何か?
実際の使い方を見る前に、まず API とは何かを見てみましょう。オックスフォード英語辞典では API を以下のように定義しています:

しかし、みんなが大好きな AI である GPT-4 は API を以下のように定義しています:

動画での説明をご希望の場合:
簡単に言えば、Python(または他の言語)プログラムを書いて SceneXplain の API を通じて通信し、alt タグ付けのプロセス全体を自動化できます。それを実現する Python スニペットがあります。
使用方法は以下の通りです:
- requests ライブラリをインストールします:
pip install requests
- SceneXplain の API ページでシークレットキーを生成し、クリップボードにコピーします。
- 以下の Python コードにペーストします。
....
と書かれている箇所に画像 URL をコピーします。- コードを実行します!
import requests
import json
# generate token on SceneXplain's API page
YOUR_GENERATED_SECRET = "your_generated_secret_here"
data = {
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..." # change to image URL
}
]
}
headers = {
"x-api-key": f"token {YOUR_GENERATED_SECRET}",
"content-type": "application/json",
}
response = requests.post("https://api.scenex.jina.ai/v1/describe", headers=headers, json=data)
print(response.json())
(後ほど cURL と JavaScript のコードスニペットも追加します)
tag実際の API:ノートブックでの SceneXplain
実際の動作を確認するために、ノートブックでコードをライブで使用してみましょう。実際のデータでリアルタイムに何が起こっているかを見ることができ、Python コードを自分で確認して試すこともできます。

このノートブックは、上記の単純な Python スニペット以上のことを行います。サンプルデータセットをダウンロードし、結果を CSV ファイルにエクスポートすることもできます。
tagノートブックの先へ:実際の API 使用
もちろん、SceneXplain の API を使用する際は Python に限定されません。HTTP ライブラリを持つ言語であれば、どれでも問題なく動作するはずです。
上記のコードスニペットを JavaScript で書くと以下のようになります:
const body = {
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..."
}
]
};
const YOUR_GENERATED_SECRET = 'your_generated_secret_here';
fetch('https://api.scenex.jina.ai/v1/describe', {
headers: {
'x-api-key': `token ${YOUR_GENERATED_SECRET}`,
'content-type': 'application/json'
},
body: JSON.stringify(body),
method: 'POST'
}).then(async (resp) => {
if (resp.ok) {
const data = await resp.json();
console.log(data);
}
});
そして、cURL コマンドとして書くと:
curl "https://api.scenex.jina.ai/v1/describe" \
-H "x-api-key: token $YOUR_GENERATED_SECRET" \
-H "content-type: application/json" \
--data '{
"data": [
{
"task_id": "alt_text",
"languages": [
"en"
],
"image": "..."
}
]
}'
tagSceneXplain の API で画像のアクセシビリティを向上させる
まずは SceneXplain の API ページにアクセスして仕組みを理解し、シークレットキーを生成してください。その後、提供されているノートブックを活用するか、独自のコードを作成してアクセシビリティの改善を始めましょう!
