「画像の説明」
本日、 Twitter から以下のような発表がありました。
視力の弱い方にも画像の情報をお届けすることができるようにしました。この機能が多くの方々に利用され、たくさんの瞬間をより多くの方々と一緒に共有できるようになりますように。https://t.co/5q59cf8yRk pic.twitter.com/WIQNU5ANRp
— Twitter Japan (@TwitterJP) March 29, 2016
HTML における画像の ALT テキストに対応するものだと思います。非常に有意義です。
ただ、別の方向に考えてしまう人（私）は居るもので。
『説明は最長420文字まで入力可能。』隠しテキストとして使えそうだな。｜Twitter公式アプリに「画像の説明」追加できる機能 視力が弱い人に画像の情報伝えられる - ねとらぼ https://t.co/UfKnrCO7Qd
— りおかんぽす (@riocampos) March 30, 2016
そして試しにやってみました。
試しに写真に説明を追加してみる。
— りおかんぽす (@riocampos) March 30, 2016
この写真の文章がすべて説明文として入力出来た。すごい。 pic.twitter.com/s6yUUUevzt
ですがツイートしても画面に出ません。
何故だろう、と悩みました。
ちゃんと書いてありました。
視力が弱い方々がテキストを読み上げてくれるような補助技術アプリを利用いただくと、この画像の説明テキストも読み上げられるようになり、画像についての情報も得ることができます。
より多くの方に画像をお届けするために | Twitter Blogs
つまり 読み上げ のための説明テキストであって、表示されるようになっていないわけです。
でもその続きがありました。
サードパーティーのTwitterクライアントでこの機能を追加されたい場合、REST APIとTwitter Cardsでも利用いただけるようにしました。
よし。 REST API でアクセスしてみよう。
REST API で「画像の説明」を取得
REST API としての取得方法は以下の通りです。
REST API
Consuming Alt Text
Alt text is accessible to any Twitter app and is requested using the include_ext_alt_text parameter.Request
GET /1.1/statuses/show.json?id=696049944105320448&include_ext_alt_text=trueResponse
The alt text will appear as a top-level key of each
mediaobject in theextended_entitiesobject. For example:"extended_entities": { "media": [ { "id_str": "696049944105320448", ... "ext_alt_text": "A Faema Urania lever espresso machine" } ] }If alt text isn’t available for a given image, the value for the property will be null.
Alt text support for Twitter Cards and the REST API | Twitter Blogs
Twitter gem （バージョン5.16.0）でアクセス
メソッドが無くてもある程度対応出来るのが Twitter gem のありがたいところです。オプションに include_ext_alt_text: true を追加すれば、画像の説明を含むレスポンスが返ってきます。
Twitter::Entities#media メソッドは "extended_entities" の "media" の配列を返しますので、その中身を Twitter::Base#attrs（Twitter::Base#to_h） で出し、さらに :extended_entities を取り出してやれば目的の作業は終了です。
追記：2017/9/26にアルファベットでのツイート文字数が280文字に増加したことにより Twitter API が変更されました。このため、この日 以降 のツイートに対しては、上記のオプションだけでは足りず、 include_ext_alt_text: true, tweet_mode: "extended" にする必要があります。
client = Twitter::REST::Client.new(
consumer_key: "YOUR_CONSUMER_KEY",
consumer_secret: "YOUR_CONSUMER_SECRET",
access_token: "YOUR_ACCESS_TOKEN",
access_token_secret: "YOUR_ACCESS_TOKEN_SECRET",
)
client.status(715018877592150016, include_ext_alt_text: true).media.first.attrs
#=> {
:id=>715018850065055744,
:id_str=>"715018850065055744",
:indices=>[45, 68],
:media_url=>"http://pbs.twimg.com/media/CexB2xXWAAAokfz.jpg",
:media_url_https=>"https://pbs.twimg.com/media/CexB2xXWAAAokfz.jpg",
:url=>"https://t.co/s6yUUUevzt",
:display_url=>"pic.twitter.com/s6yUUUevzt",
:expanded_url=>"http://twitter.com/riocampos/status/715018877592150016/photo/1",
:type=>"photo",
:sizes=>
{:large=>{:w=>1024, :h=>768, :resize=>"fit"},
:thumb=>{:w=>150, :h=>150, :resize=>"crop"},
:medium=>{:w=>600, :h=>450, :resize=>"fit"},
:small=>{:w=>340, :h=>255, :resize=>"fit"}},
:ext_alt_text=>
"国宝 鬼切丸\n長 二尺七寸九分二厘\n作者 安綱 在銘\n銘は一見すれば國綱と見ゆるは後代「安」の周囲に囗を加刻したるものなり\n伝来 源家の重宝なり旧所有主最上家の伝によれば後三年役に源義家奥地鎮護の霊剱として宗家に請い之を携行し終にその裔最上家に伝わり徳川時代には世々将軍の上覧を恒例とせり明治に至り故ありて滋賀県令籠手田安定氏の尽力に頼り有志者相集り之を北野天満宮に奉納したるものなり"
}
client.status(715018877592150016, include_ext_alt_text: true).media.first.attrs[:ext_alt_text]
#=> "国宝 鬼切丸\n長 二尺七寸九分二厘\n作者 安綱 在銘\n銘は一見すれば國綱と見ゆるは後代「安」の周囲に囗を加刻したるものなり\n伝来 源家の重宝なり旧所有主最上家の伝によれば後三年役に源義家奥地鎮護の霊剱として宗家に請い之を携行し終にその裔最上家に伝わり徳川時代には世々将軍の上覧を恒例とせり明治に至り故ありて滋賀県令籠手田安定氏の尽力に頼り有志者相集り之を北野天満宮に奉納したるものなり"
試しに写真に説明を追加してみる。
— りおかんぽす (@riocampos) March 30, 2016
この写真の文章がすべて説明文として入力出来た。すごい。 pic.twitter.com/s6yUUUevzt
ということで取得した「画像の説明」がこちらです。
国宝 鬼切丸
長 二尺七寸九分二厘
作者 安綱 在銘
銘は一見すれば國綱と見ゆるは後代「安」の周囲に囗を加刻したるものなり
伝来 源家の重宝なり旧所有主最上家の伝によれば後三年役に源義家奥地鎮護の霊剱として宗家に請い之を携行し終にその裔最上家に伝わり徳川時代には世々将軍の上覧を恒例とせり明治に至り故ありて滋賀県令籠手田安定氏の尽力に頼り有志者相集り之を北野天満宮に奉納したるものなり
そのうち Twitter gem が更新されて client.status(tweet_id, include_ext_alt_text: true).media.map(&:ext_alt_text) とかで取得出来るようになるんじゃないかと思います。
個人的つぶやき
「画像の説明」をクライアントで気軽に見れるようになれば良いのになあ。
おまけ更新
「画像の説明」が見れるサイトを作ってみた。上記のツイートへのリンクへ行くようにしてあります↓
http://showyourtweetdescriptions.herokuapp.com/id/715018877592150016