Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
アクセシビリティを考えた
alt属性を
自動生成してみよう!
松本 典子
Noriko Matsumoto
株式会社オルターブース デザインアーキテクト
2017 / 09 / 13 Webっちゃ vol.20
Microsoft Cognit...
自己紹介
2
 株式会社オルタブース
デザインアーキテクト
 香蘭女子短期大学 非常勤講師
 Microsoft MVP for Microsoft Azure
 Web系勉強会「Webっちゃ」主催
松本 典子(まつもと のりこ)
デザ...
本日お話すること
 Microsoft Cognitive Servicesとは?
 ノンコーディングで Cognitive Servicesを
使う方法
– Microsoft Flow
– Logic Apps
 DEMO&ディスカッ...
本日のゴール
 Cognitive Service Computer Vision API、
Logic Apps / Microsoft Flowがどういう
サービスか知ってもらう
 適切なalt属性とは?を自動生成した文章
から考えてみ...
アクセシビリティから考える
alt属性
5
alt属性を正しく設置するメリット
 目の不自由な人が画像のalt属性の値をス
クリーンリーダーで読み上げたり、点字に
変換して認識することができる
 画像にalt属性をつけて値に記述すること
で、テキスト情報として抽出できるように
なり、...
alt属性の例
7
http://jis8341.net/jirei_sample/jirei_chapter_01.html
Cognitive Servicesとは
8
Cognitive Servicesとは
AI技術を使って「モノ・コトを認識させる」
マイクロソフトが提供している認知の技術
9
Computer Vision API
Face API
Content Moderator
Emotion AP...
Cognitive Servicesとは
10
Recommendations API
知識
Academic Knowledge API
Knowledge Exploration
Service
QnA Maker API
Entity L...
Computer Vision API
11https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/
ノンコーディングで
Cognitive Servicesを使う
12
便利なサービスを活用しよう
13
Microsoft Flow Logic Apps
プロセスとワークフローの作成から各種の SaaS や
エンタープライズ アプリケーションとの統合まで
を簡単に行える " 構成第一 " の統合サービス
サービスコネクタをつなぐだけ
14
Microsoft Flow
15https://flow.microsoft.com/ja-jp/
Microsoft Flow
 オフィスの従業員、
ビジネス ユーザー向け
 Microsoftアカウントで利用可
– 個人アカウントは「Freeプラン」のみ
 開発:ブラウザー上とモバイル アプリ、
UI のみ
 セキュリティ:標準的...
Logic Apps
17https://azure.microsoft.com/ja-jp/services/logic-apps/
Logic Apps
 IT プロフェッショナル、
開発者向け
 Azureサブスクリプション必須
 開発:ブラウザー上のほか、Visual Studio、
コードビューが利用可能
 セキュリティ:Azure によるセキュリティ
保証
...
LogicAppsのサービス数
19
サービス数
161
2017/9/13 現在
alt属性を自動生成する仕組み
Com puter Vision A PI
Analyze im age
Microsoft
TranslatorDropbox画像をアップロード
Slack Slack に画像と
alt 属性を出力
20
DEMO&ディスカッション
これら画像、どういうalt属性にしますか?
21
お知らせ
22
Azure LogicApps / Microsoft Flow について情報をまとめて提供する
ためのFacebookグループです。LogicApps / Flow に興味がある、コー
ドを書かない開発に興味がある、などなどお...
ブログ書いてます。ご興味のある方はぜひに!
23
ご静聴ありがとうございました!
http://zuvuyalink.net/nrjlog/Blog
Upcoming SlideShare
Loading in …5
×

アクセシビリティを考えたalt属性を自動生成してみよう!

1,041 views

Published on

2017/9/14の「webっちゃvol.20」の発表資料です。Microsoft Cognitive ServisesをLogicAppsを利用しノンコーディングで利用・Web制作に活かしてみた話。

Published in: Technology
  • Be the first to comment

アクセシビリティを考えたalt属性を自動生成してみよう!

  1. 1. アクセシビリティを考えた alt属性を 自動生成してみよう! 松本 典子 Noriko Matsumoto 株式会社オルターブース デザインアーキテクト 2017 / 09 / 13 Webっちゃ vol.20 Microsoft Cognitive ServicesをWeb制作に活かしてみた話
  2. 2. 自己紹介 2  株式会社オルタブース デザインアーキテクト  香蘭女子短期大学 非常勤講師  Microsoft MVP for Microsoft Azure  Web系勉強会「Webっちゃ」主催 松本 典子(まつもと のりこ) デザインに関する業務全般やってます。 (UI設計・Webデザイン・DTP…) @nori790822 https://www.facebook.com/noriji822
  3. 3. 本日お話すること  Microsoft Cognitive Servicesとは?  ノンコーディングで Cognitive Servicesを 使う方法 – Microsoft Flow – Logic Apps  DEMO&ディスカッション 3
  4. 4. 本日のゴール  Cognitive Service Computer Vision API、 Logic Apps / Microsoft Flowがどういう サービスか知ってもらう  適切なalt属性とは?を自動生成した文章 から考えてみる 4
  5. 5. アクセシビリティから考える alt属性 5
  6. 6. alt属性を正しく設置するメリット  目の不自由な人が画像のalt属性の値をス クリーンリーダーで読み上げたり、点字に 変換して認識することができる  画像にalt属性をつけて値に記述すること で、テキスト情報として抽出できるように なり、テキスト検索や音声化など、コンテ ンツを様々な方法で再利用できる 6
  7. 7. alt属性の例 7 http://jis8341.net/jirei_sample/jirei_chapter_01.html
  8. 8. Cognitive Servicesとは 8
  9. 9. Cognitive Servicesとは AI技術を使って「モノ・コトを認識させる」 マイクロソフトが提供している認知の技術 9 Computer Vision API Face API Content Moderator Emotion API Video API Custom Vision Service Video Indexer 視覚 音声 Translator Speech API Speaker Recognition API Bing Speech API Custom Speech Service Language Understanding Intelligent Service 言語 Text Analytics API Bing Spell Check API Translator Text API Web Language Model API Linguistic Analysis API
  10. 10. Cognitive Servicesとは 10 Recommendations API 知識 Academic Knowledge API Knowledge Exploration Service QnA Maker API Entity Linking Intelligence Service API Custom Decision Service 検索 Recommendations API Bing Image Search API Bing News Search API Bing Video Search API Bing Web Search API Bing Custom Search Bing Entity Search API
  11. 11. Computer Vision API 11https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/
  12. 12. ノンコーディングで Cognitive Servicesを使う 12
  13. 13. 便利なサービスを活用しよう 13 Microsoft Flow Logic Apps プロセスとワークフローの作成から各種の SaaS や エンタープライズ アプリケーションとの統合まで を簡単に行える " 構成第一 " の統合サービス
  14. 14. サービスコネクタをつなぐだけ 14
  15. 15. Microsoft Flow 15https://flow.microsoft.com/ja-jp/
  16. 16. Microsoft Flow  オフィスの従業員、 ビジネス ユーザー向け  Microsoftアカウントで利用可 – 個人アカウントは「Freeプラン」のみ  開発:ブラウザー上とモバイル アプリ、 UI のみ  セキュリティ:標準的な実務慣行 – データの主権性の確保、機密性の高い保存 データの暗号化など 16
  17. 17. Logic Apps 17https://azure.microsoft.com/ja-jp/services/logic-apps/
  18. 18. Logic Apps  IT プロフェッショナル、 開発者向け  Azureサブスクリプション必須  開発:ブラウザー上のほか、Visual Studio、 コードビューが利用可能  セキュリティ:Azure によるセキュリティ 保証 – Azure セキュリティ、Security Center、監査 ログなど 18
  19. 19. LogicAppsのサービス数 19 サービス数 161 2017/9/13 現在
  20. 20. alt属性を自動生成する仕組み Com puter Vision A PI Analyze im age Microsoft TranslatorDropbox画像をアップロード Slack Slack に画像と alt 属性を出力 20
  21. 21. DEMO&ディスカッション これら画像、どういうalt属性にしますか? 21
  22. 22. お知らせ 22 Azure LogicApps / Microsoft Flow について情報をまとめて提供する ためのFacebookグループです。LogicApps / Flow に興味がある、コー ドを書かない開発に興味がある、などなどお気軽に申請してください! https://www.facebook.com/groups/logicflowja/
  23. 23. ブログ書いてます。ご興味のある方はぜひに! 23 ご静聴ありがとうございました! http://zuvuyalink.net/nrjlog/Blog

×