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

1. アクセシビリティを考えた
alt属性を
自動生成してみよう！
松本 典子
Noriko Matsumoto
株式会社オルターブース デザインアーキテクト
2017 / 09 / 13 Webっちゃ vol.20
Microsoft Cognitive ServicesをWeb制作に活かしてみた話

2. 自己紹介
2
 株式会社オルタブース
デザインアーキテクト
 香蘭女子短期大学 非常勤講師
 Microsoft MVP for Microsoft Azure
 Web系勉強会「Webっちゃ」主催
松本 典子（まつもと のりこ）
デザインに関する業務全般やってます。
（UI設計・Webデザイン・DTP…）
@nori790822
https://www.facebook.com/noriji822

3. 本日お話すること
 Microsoft Cognitive Servicesとは？
 ノンコーディングで Cognitive Servicesを
使う方法
– Microsoft Flow
– Logic Apps
 DEMO&ディスカッション
3

4. 本日のゴール
 Cognitive Service Computer Vision API、
Logic Apps / Microsoft Flowがどういう
サービスか知ってもらう
 適切なalt属性とは？を自動生成した文章
から考えてみる
4

5. アクセシビリティから考える
alt属性
5

6. alt属性を正しく設置するメリット
 目の不自由な人が画像のalt属性の値をス
クリーンリーダーで読み上げたり、点字に
変換して認識することができる
 画像にalt属性をつけて値に記述すること
で、テキスト情報として抽出できるように
なり、テキスト検索や音声化など、コンテ
ンツを様々な方法で再利用できる
6

7. alt属性の例
7
http://jis8341.net/jirei_sample/jirei_chapter_01.html

8. Cognitive Servicesとは
8

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. 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. Computer Vision API
11https://azure.microsoft.com/ja-jp/services/cognitive-services/computer-vision/

12. ノンコーディングで
Cognitive Servicesを使う
12

13. 便利なサービスを活用しよう
13
Microsoft Flow Logic Apps
プロセスとワークフローの作成から各種の SaaS や
エンタープライズ アプリケーションとの統合まで
を簡単に行える " 構成第一 " の統合サービス

14. サービスコネクタをつなぐだけ
14

15. Microsoft Flow
15https://flow.microsoft.com/ja-jp/

16. Microsoft Flow
 オフィスの従業員、
ビジネス ユーザー向け
 Microsoftアカウントで利用可
– 個人アカウントは「Freeプラン」のみ
 開発：ブラウザー上とモバイル アプリ、
UI のみ
 セキュリティ：標準的な実務慣行
– データの主権性の確保、機密性の高い保存
データの暗号化など
16

17. Logic Apps
17https://azure.microsoft.com/ja-jp/services/logic-apps/

18. Logic Apps
 IT プロフェッショナル、
開発者向け
 Azureサブスクリプション必須
 開発：ブラウザー上のほか、Visual Studio、
コードビューが利用可能
 セキュリティ：Azure によるセキュリティ
保証
– Azure セキュリティ、Security Center、監査
ログなど
18

19. LogicAppsのサービス数
19
サービス数
161
2017/9/13 現在

20. alt属性を自動生成する仕組み
Com puter Vision A PI
Analyze im age
Microsoft
TranslatorDropbox画像をアップロード
Slack Slack に画像と
alt 属性を出力
20

21. DEMO＆ディスカッション
これら画像、どういうalt属性にしますか？
21

22. お知らせ
22
Azure LogicApps / Microsoft Flow について情報をまとめて提供する
ためのFacebookグループです。LogicApps / Flow に興味がある、コー
ドを書かない開発に興味がある、などなどお気軽に申請してください！
https://www.facebook.com/groups/logicflowja/

23. ブログ書いてます。ご興味のある方はぜひに！
23
ご静聴ありがとうございました！
http://zuvuyalink.net/nrjlog/Blog