Successfully reported this slideshow.

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

2

Share

1 of 23
1 of 23

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

2

Share

Download to read offline

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

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

More Related Content

Viewers also liked

Related Books

Free with a 14 day trial from Scribd

See all

アクセシビリティを考えた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

Editor's Notes

  • 単純なビジネスの最適化向き
  • ×