Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WordPressコンテンツ配信の新しい在り⽅ Webサイト・コンシェルジュ(⾳声UI)の実装 〜スマートスピーカー + WordPress REST API + WordPress AIプラグイン〜

marubon
April 20, 2019

WordPressコンテンツ配信の新しい在り⽅ Webサイト・コンシェルジュ(⾳声UI)の実装 〜スマートスピーカー + WordPress REST API + WordPress AIプラグイン〜

WordCamp Haneda 2019 セッションの発表資料です。

marubon

April 20, 2019
Tweet

More Decks by marubon

Other Decks in Technology

Transcript

  1. ⾃⼰紹介 1 Copyright © 2019 まるぼん All Rights Reserved. •

    仕事 • ⼤⼿システムインテグレータにてITインフラ系業務に従事 • WordPressコミュニティ活動 • ⽻⽥ WordPress Meetupお⼿伝い • WordCamp Haneda 2019 実⾏委員 & デザイン班 サイト制作担当 • WordPress公式プラグイン開発 • SNS Count Cache (20,000+ Active Install, 91,000+ Download) 等 • 最近の興味・関⼼ • Web、AI、IoT • 趣味 • ブログ • 試⾏錯誤ライフハック (https://marubon.info) 写真 ロードバイク ギター DTM スキー まるぼん @marubon_jp
  2. 本セッションの対象者と概要、アウトライン 2 Copyright © 2019 まるぼん All Rights Reserved. •

    対象者 • ⾳声UIを通じたWordPressコンテンツの配信に興味のある⽅ • 概要 • スマートスピーカー、WordPress REST API、WordPress AIプラグイン(AI技術)を応⽤したWeb サイトの⾳声UIとその仕組み・実装⽅法の概要の紹介 • アウトライン 1. 状況の変化 2. Webサイト・コンシェルジュとは 3. DEMO 4. Webサイト・コンシェルジュの仕組みと実装⽅法 5. WordPressプラグイン x AI 6. まとめ
  3. WordPressの成⻑と進化 5 Copyright © 2019 まるぼん All Rights Reserved. ※直近7年間は、毎年2〜4%のペースで継続的に増加

    WordPressの市場シェア(全世界のWebサイト中) 32% 出典: WordPress market share https://kinsta.com/wordpress-market-share/ WordPress 5.0 : Gutenberg(新エディタ)のリリース 外部サービスと連携可能な コンテンツ・プラットフォームとして進化 WordPress 4.7 : REST API(Web API)のリリース 外部からコンテンツに アクセスする⼿段 誰もが容易にコンテンツを ⽣み出せる⼟台 ⾼い市場シェア ≒ ⼤量のコンテンツを蓄積する基盤として成⻑
  4. スマートスピーカーの普及 6 Copyright © 2019 まるぼん All Rights Reserved. Amazon

    Echo Google Home ※直近約1年で倍近い増加 (2017年 21.5%、2018年 41%) スマートスピーカーの世帯普及率(アメリカ) 41% 出典: Smart speakers hit critical mass in 2018 https://techcrunch.com/2018/12/28/smart-speakers-hit-critical-mass-in-2018/ スマートスピーカーの例 対話型の⾳声操作に対応したアシスタント機能を持つスピーカー。 内蔵されているマイクで⾳声を認識し、情報の検索や連携家電の操作が可能 出典:Wikipedia https://ja.wikipedia.org/wiki/スマートスピーカー
  5. 8 Copyright © 2019 まるぼん All Rights Reserved. スマート スピーカー

    WordPress + REST API AI技術 新しい Webコンテンツ の配信形態 WordPressの成⻑と進化 AIの⺠主化 新しいWebコンテンツの配信形態に取り組む絶好の機会 対話型の⾳声UI コンテンツ・プラットフォーム コンテンツの利活⽤技術 スマートスピーカーの普及
  6. トレンドを実現するテクノロジー • AI PaaS(サービスとしてのAIプラットフォーム) • 汎⽤AI • ⾃律⾛⾏(レベル4/5) • ⾃律モバイル・ロボット

    • 会話型AIプラットフォーム • ディープ・ニューラル・ネット(ディープ・ラーニング) • 空⾶ぶ⾃律⾛⾏⾞ • スマート・ロボット • 仮想アシスタント [参考] Gartner 先進テクノロジのハイプサイクル:2018年 9 Copyright © 2019 まるぼん All Rights Reserved. 今後10年で「AIの⺠主化」がトレンドに。 AIが⼀般に利⽤される様になり、最終的に誰もが使えるものになる。 出典: ガートナー、「先進テクノロジのハイプ・サイクル:2018年」を発表 - ⼈とマシンの境界を曖昧にする5つの先進テクノロジ・トレンドが明らかに - 2,000を超えるテクノロジから重要な知⾒を抽出 https://www.gartner.co.jp/press/pdf/pr20180822-01.pdf
  7. Webサイト・コンシェルジュ 11 Copyright © 2019 まるぼん All Rights Reserved. 最新の記事は

    ◦◦です。 ⼤⽥区コミニティ・メディア ⼤⽥区タイムズ 最新の記事を 教えて! ユーザ スマートスピーカー 【サイトURL】https://otaku-times.com/ ユーザの要望に応じてWebサイトのコンテンツを提供する ⾳声UI(⾳声対話型アシスタント)
  8. • コンテンツ利⽤者 • 「◦◦しながら」Webサイトの情報収集が可能 • 「⽬や⼿の不⾃由な⽅」でもWebサイトの情報収集が可能 • 「PCやスマホに抵抗のあるご⾼齢の⽅」でもWebサイトの情報収集が可能 • コンテンツ提供者

    • 既存コンテンツをそのまま活⽤しながら、Webサイトへの導線を拡充 • (今なら)他サイトとは異なる独⾃性としてアピール可能 Webサイト・コンシェルジュのメリット 12 Copyright © 2019 まるぼん All Rights Reserved. ⾳声UI = ⾳声を利⽤できる(⽇常の会話の延⻑) PCのキーボード打鍵やスマートフォン・タブレットの画⾯タップが不要
  9. Webサイト・コンシェルジュの機能 # 機能 概要 1 最新記事の取得 ※最も新しい記事 タイトル 2 本⽂の内容

    3 最近投稿された記事の取得 ※所定の期間内に投稿された記事 タイトルのリスト 4 指定記事の本⽂ 5 ⼈気記事(ランキング)の取得 ※PVベース(1⽇、1週間、1ヶ⽉、全期間) タイトル(ランキング含む)のリスト 6 指定記事の本⽂ 7 関連記事の取得 ※タイトル、本⽂、カテゴリ・タグ等を基にした 類似性ベース タイトルのリスト 8 指定記事の本⽂ 9 記事の検索 タイトルのリスト 10 指定記事の本⽂ 11 記事の要約 指定記事の要約 13 Copyright © 2019 まるぼん All Rights Reserved.
  10. Webサイト・コンシェルジュの機能 14 Copyright © 2019 まるぼん All Rights Reserved. 最近投稿された記事を教えて

    最近投稿された記事は次の通りです。 1件⽬ 記事タイトルA 2件⽬ 記事タイトルB 3件⽬ 記事タイトルC ・ ・ 他にご⽤件はありますか? ユーザ スマートスピーカー 3件⽬の記事の内容を教えて ご指摘の記事の内容は次の通りです。 ・ (3件⽬の記事の内容) ・ 他にご⽤件はありますか?
  11. Webサイト・コンシェルジュの機能 15 Copyright © 2019 まるぼん All Rights Reserved. 最近投稿された記事を教えて

    最近投稿された記事は次の通りです。 1件⽬ 記事タイトルA 2件⽬ 記事タイトルB 3件⽬ 記事タイトルC ・ ・ 他にご⽤件はありますか? ユーザ 週間ランキングを教えて 週間の記事ランキングは次の通りです。 ・ ・ ・ 他にご⽤件はありますか? スマートスピーカー
  12. スマートスピーカー ✕ WordPress REST API 情報のリクエスト (⾳声⼊⼒) 検索した情報の出⼒ (⾳声出⼒) 情報の検索

    (REST API経由) 情報の出⼒ (JSON形式) ユーザ スマート スピーカー WordPressサイト 18 Copyright © 2019 まるぼん All Rights Reserved.
  13. [参考] WordPress REST APIエンドポイント 20 Copyright © 2019 まるぼん All

    Rights Reserved. # Resource REST API Endpoint 1 Posts https://otaku-times.com/wp-json/wp/v2/posts 2 Post Revisions https://otaku-times.com/wp-json/wp/v2/revisions 3 Categories https://otaku-times.com/wp-json/wp/v2/categories 4 Tags https://otaku-times.com/wp-json/wp/v2/tags 5 Pages https://otaku-times.com/wp-json/wp/v2/pages 6 Comments https://otaku-times.com/wp-json/wp/v2/comments 7 Taxonomies https://otaku-times.com/wp-json/wp/v2/taxonomies 8 Media https://otaku-times.com/wp-json/wp/v2/media 9 Users https://otaku-times.com/wp-json/wp/v2/users 10 Post Types https://otaku-times.com/wp-json/wp/v2/types 11 Post Statuses https://otaku-times.com/wp-json/wp/v2/statuses 12 Settings https://otaku-times.com/wp-json/wp/v2/settings 参考: Reference | REST API Handbook | WordPress Developer Resources https://developer.wordpress.org/rest-api/reference/
  14. Alexaスキルの構成と処理の流れ ① 「ユーザ」が「Echo(Alexa対応デバイス)」に発話 ② 「Echo」はマイクで集⾳した⾳声データを「Alexa」に送信 ③ 「Alexa」は⾳声データを解析し、「エンドポイント」を呼び出して解析結果を伝える ④ 「エンドポイント」はスキルの処理を実⾏し、その結果を「Alexa」にレスポンスとして返す ⑤

    「Alexa」はレスポンスに応じた⾳声データを⽣成し、「Echo」に返信 ⑥ 「Echo」は⾳声データを再⽣し、スピーカーを通じて「ユーザ」に伝える ① ⑥ ② ⑤ ③ ④ ユーザ Echo Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 22 Copyright © 2019 まるぼん All Rights Reserved.
  15. Alexaスキルの実装⽅法 ① ⑥ ② ⑤ ③ ④ ユーザ Echo Alexa

    エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 23 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  16. [1] ⾳声インターフェイスの設計 ① ⑥ ② ⑤ ③ ④ ユーザ Echo

    Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 24 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  17. [1] ⾳声インターフェイスの設計 ‒ 対話モデル Alexa、⼤⽥区タイムズを開いて ⼤⽥区タイムズにようこそ! どのようなご⽤件でしょうか? 最近投稿された記事を教えて 最近投稿された記事は次の通りです。 1件⽬

    記事タイトルA 2件⽬ 記事タイトルB 3件⽬ 記事タイトルC ・ ・ ・ ユーザ Echo 呼び出し名 サンプル発話 25 Copyright © 2019 まるぼん All Rights Reserved.
  18. [1] ⾳声インターフェイスの設計 ‒ 対話モデル Alexaスキルの「呼び出し名」及び「どのような⾔葉(サンプル発話)を受け取るのか」 「受け取った⾔葉をどのような意図(インテント)として解釈するのか」を定義 GetTitleRecentPostsIntent (最近投稿された記事の取得) • 最近の記事

    • 最近の記事は • 最近の記事を教えて • 最近投稿された記事 • 最近投稿された記事は • 最近投稿された記事を教えて • 新着記事 • 新着記事は • 新着記事を教えて ・ ・ ・ インテント サンプル発話 Alexa開発者コンソール 26 Copyright © 2019 まるぼん All Rights Reserved.
  19. [1] ⾳声インターフェイスの設計 ‒ 処理イメージ • 最近の記事 • 最近の記事は • 最近の記事を教えて

    • 最近投稿された記事 • 最近投稿された記事は • 最近投稿された記事を教えて ・ ・ ・ Echo ⾳声解析結果(JSON形式) ⾳声データ エンドポイント スキルの処理 Alexa ⾳声認識 ユーザ { "version": "1.0", "session": { "new": false, "sessionId": "amzn1.echo-api.session.XXXXX", "application": { "applicationId": "amzn1.ask.skill.XXXXX" }, "user": { "userId": "amzn1.ask.account.XXXXX" } }, "context": { "System": { "application": { "applicationId": "amzn1.ask.skill.XXXXX" }, "user": { "userId": "amzn1.ask.account.XXXXXX” } } }, "request": { "type": "IntentRequest", "requestId": "amzn1.echo-api.request.XXXXX", "timestamp": "2018-09-19T14:55:28Z", "locale": "ja-JP", "intent": { "name": "GetTitleRecentPosts", "confirmationStatus": "NONE" } } } 27 Copyright © 2019 まるぼん All Rights Reserved. ユーザの発話を対話モデル に従い、プログラムが理解 できる形に変換
  20. [1] ⾳声インターフェイスの設計 28 Copyright © 2019 まるぼん All Rights Reserved.

    # 取得対象 インテント サンプル発話(※⼀部を抜粋) 1 最新記事のタイトル GetTitleLatestPostsIntent 最新の記事を教えて 最新記事を教えて ・・・ 2 最近投稿された記事のタイトル GetTitleRecentPostsIntent 最近の記事を教えて 最近投稿された記事を教えて ・・・ 3 ⼈気記事のタイトル GetTitlePopularPostsIntent {range} 記事ランキングを教えて {range} ランキングを教えて ・・・ 4 指定記事の関連記事タイトル GetTitleRelatedPostsIntent {index} 位の記事の関連記事を教えて {index} 件⽬の記事の関連記事を教えて ・・・ 5 検索された記事のタイトル GetTitleSearchedPostsIntent {query} を含む記事を探して {query} を含む記事を検索して ・・・ 6 指定記事の要約 GetSummarySpecifiedPostIntent {index} 件⽬の記事を要約して {index} 位の記事を要約して ・・・ 7 指定記事の本⽂ GetContentSpecifiedPostIntent {index} 件⽬の記事の内容を教えて {index} 位の記事の内容を教えて ・・・ ※{range}: ⽇間、週間、⽉間、全期間 {index}: 記事リスト中のインデックス {query}: 検索⽂字
  21. Alexaスキルの実装⽅法 ① ⑥ ② ⑤ ③ ④ ユーザ Echo Alexa

    エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 29 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  22. [2] 処理ロジックの開発 ‒ 実装が必要な処理 ① REST API経由のWordPressコンテンツデータの取得・加⼯ (HTMLタグの除去、必要なデータの抽出・加⼯等) ② Alexaへの返答内容の⽣成

    (ユーザに発話する内容) Alexa エンドポイント 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) WordPressサイト ⾳声認識・⽣成 スキルの処理 どのような処理をして、Alexaにどう返答するか 30 Copyright © 2019 まるぼん All Rights Reserved.
  23. [2] 処理ロジックの開発 ‒ コンテンツデータの取得・加⼯ 31 Copyright © 2019 まるぼん All

    Rights Reserved. # 取得対象データ インテント REST APIの概要 REST APIエンドポイント 1 最新記事の タイトル GetTitleLatestPostsIntent WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts 2 最近投稿された 記事のタイトル GetTitleRecentPostsIntent WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts 3 ⼈気記事の タイトル GetTitlePopularPostsIntent WordPress Popular Posts (プラグイン) https://otaku-times.com/wp-json/wordpress-popular-posts /v1/popular-posts?range=last7days 4 指定記事の 関連記事タイトル GetTitleRelatedPostsIntent WP Content Analyzer(仮称) (⾃作AIプラグイン) https://<プラグイン導⼊サイト>/wp-json/wp-content-analyzer /v1/similarity?site=https://otaku-times.com/&id=<元記事のpost_id> 5 検索された記事の タイトル GetTitleSearchedPostsIntent WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts?search=<検索⽂字列> 6 指定記事の要約 GetSummarySpecifiedPostIntent WP Text Summarizer(仮称) (⾃作AIプラグイン) https://<プラグイン導⼊サイト>/wp-json/wp-text-summarizer /v1/summary?site=https://otaku-times.com/&id=<元記事のpost_id> 7 指定記事の本⽂ GetContentSpecifiedPostIntent WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts
  24. [2] 処理ロジックの開発 ‒ コンテンツデータの取得・加⼯ { "id": 12390, "date": "2018-09-05T12:33:19", "date_gmt":

    "2018-09-05T03:33:19", "status": "publish", "type": "post", "link": "https://otaku-times.com/12390/", "title": { "rendered": "「ワタシの⼤森」コンテスト@⼤森・⼤井夢フェア" }, "content": { "rendered": "<h2>「ワタシの⼤森」コンテスト開催します!!!</h2>\n<p>毎年、⼤森駅周辺で開催される『⼤森・⼤井夢フェア』は今年で19回⽬を迎えます♪<br />\n今までよりもさら に楽しんでもらうべく、今年はコンテストを開催します!<br />\nあなたのとっておきの⼤森情報を教えてください!!!</p>\n<p>⼊選者には⼤森ならではの賞品を⽤意しています! </p>\n<h3>コンテスト応募⽅法</h3>\n<p>応募⽅法はカンタン!!!<br />\nTwitter , Facebook , Instagram いずれかのSNSにて、<br />\n場所(あれば写真)と説明、そして『 #OomOoi 』 のキャンペーンタグを⼊れて投稿するだけ!<br />\n(Facebookで投稿する場合、公開設定でお願いします)</p>\n<p>※投稿内容を展⽰や報告書に転載することがあります<br />\n(平成30年度 ⼤⽥の観光にぎわい創出事業補助⾦対象イベント)</p>\n<h3>コンテスト結果発表</h3>\n<p>受賞者には応募に利⽤したSNSにて連絡します。<br />\n連絡のつかない場合、次点者の繰り上げ とします。<br />\n各賞の賞品提供者が受賞者を決定します。<br />\n重複しての受賞はありません。</p>\n<h3>コンテスト表彰</h3>\n<p>各賞受賞者の表彰式は11⽉に⼤森駅周辺で⾏いま す!<br />\n表彰式にお越しになれない場合、賞品の受け渡しは事務局と調整となります。</p>\n<p>詳しい情報は<a href=\"http://oomori-cafe.com/yumefair/\">#oomooi</a>に随時アッ プします!</p>\n", "protected": false }, ・・・中略・・・ } 32 Copyright © 2019 まるぼん All Rights Reserved. HTMLタグの除去、必要なデータの抽出・加⼯等を実施
  25. [2] 処理ロジックの開発 ‒ Alexaへの返答内容の⽣成 Alexaへの返答内容を所定のJSONフォーマットで⽣成 { "body": { "version": ”1.0",

    "response": { "outputSpeech": { "type": "SSML", “ssml” : “<speak>発話対象のSSMLテキスト⽂字列</speak>" }, "card": { "type": "Simple", “title”: "カードのタイトル", “content”: ”Simpleカードの内容" }, "reprompt": { "outputSpeech": { "type": "PlainText", “text”: "ユーザ無反応時の発話対象のプレーンテキスト⽂字列" } }, "shouldEndSession": true }, "sessionAttributes": { "key": "value" } } } ※カスタムスキルのJSONインターフェースのリファレンス https://developer.amazon.com/ja/docs/custom-skills/request-and-response-json-reference.html パラメータ 説明 outputSpeech ユーザに出⼒する⾳声定義情報を含むオブジェクト card Alexaアプリに出⼒するためのカードを含むオブジェクト reprompt 再プロンプトが必要な場合に使⽤するオブジェクト Responseオブジェクト パラメータ 説明 type 出⼒する⾳声のタイプを含む⽂字列 "PlainText": 出⼒する⾳声がプレーンテキスト "SSML": 出⼒する⾳声がSSMLでマークアップされたテキスト text ユーザに出⼒する⾳声を含む⽂字列 typeが: "PlainText"の場合に使⽤ ssml ユーザに対して出⼒する、SSMLでマークアップされたテキストを含む⽂字列 typeが"SSML"の場合に使⽤ OutputSpeechオブジェクト 33 Copyright © 2019 まるぼん All Rights Reserved.
  26. [2] 処理ロジックの開発 ‒ 処理イメージ 返答内容のresponse-outputSpeechの部分が発話される Alexa エンドポイント ⾳声⽣成 スキルの処理 Echo

    ⾳声データ 返答内容(JSON形式) { "body": { "version": "1.0", "response": { "outputSpeech": { "type": "SSML", “ssml” : “<speak><s>最新記事は次の通りです。・・・</s></speak>" }, "card": { "type": "Simple", "title": "⽇間ランキング", "content": "Simpleカードの内容" }, "reprompt": { "outputSpeech": { "type": "PlainText", "text": "話す対象のプレーンテキスト⽂字列" } }, "shouldEndSession": true }, "sessionAttributes": { "key": "value" } } } ユーザ 最新記事は 次の通りです。 ・・・ 34 Copyright © 2019 まるぼん All Rights Reserved.
  27. [2] 処理ロジックの開発 ‒ ⾳声合成マークアップ⾔語(SSML) # SSMLタグ 概要 1 amazon:effect ⾳声にAmazon固有の効果を適⽤

    2 audio 応答の⾳声内でURLで指定したMP3ファイルを再⽣ 3 break 応答の⾳声内に休⽌を挿⼊ 4 emphasis タグで囲まれた単語またはフレーズを強調発⾳ 5 lang タグで囲まれた単語またはフレーズをxml:langアトリビュートで指定した⾔語で書かれている様に発話 6 p 段落を表す。タグで囲まれた単語またはフレーズの前後にx-strongの休⽌を挿⼊ 7 phoneme タグで囲まれた単語またはフレーズに⾳素/⾳声的な発⾳を指定 8 prosody タグで囲まれた単語またはフレーズの⾳声の⾳量、⾼さ、速さを変更 9 s センテンスを表す。タグで囲まれた単語またはフレーズの前後にstrongの休⽌を挿⼊ 10 say-as テキストの解釈を指定(電話番号、住所、⽇付、期間等) 11 speak SSMLドキュメントのルート要素 12 sub 指定した単語またはフレーズを別な単語またはフレーズで置換 13 voice タグで囲まれた単語またはフレーズを指定したAmazon Pollyの⾳声で発話 14 w 単語の品詞を指定し、単語の発⾳をカスタマイズ SSMLタグのマークアップにより聞き取りやすい⾳声に調整できる。 35 Copyright © 2019 まるぼん All Rights Reserved.
  28. AWS cloud [2] 処理ロジックの開発 ‒ 実⾏環境 エンドポイント スキルの処理 AWS Lambda

    Lambda Function = トリガベースの コード⾃動実⾏サービス 関数コード (処理ロジックの実体) プログラミング⾔語 • Java • Go • PowerShell • Node.js • C# • Python • Ruby エンドポイントは、処理ロジックの実⾏環境にAWS Lambdaを利⽤ 処理ロジックは、Lambda Functionとして実装し、AWS Lambdaに配置 ※エンドポイントは、他Webサービスでも実装可能だが、AWS Lambdaの利⽤が基本となっている 定義したインテント毎に どのような処理をして、 どう返答するのかを実装 36 Copyright © 2019 まるぼん All Rights Reserved.
  29. [2] 処理ロジックの開発 ‒ 関数コード 定義したインテント毎にどのような処理をして、どう返答するのかを Lambda Function( )として実装する。※Webサイト・コンシェルジュではPythonを使⽤ def lambda_handler(event,

    context): """ Route the incoming request based on type (LaunchRequest, IntentRequest, etc.) The JSON body of the request is provided in the event parameter. """ print("event.session.application.applicationId=" + event['session']['application']['applicationId']) """ Uncomment this if statement and populate with your skill's application ID to prevent someone else from configuring a skill that sends requests to this function. """ # if (event['session']['application']['applicationId'] != # 'amzn1.echo-sdk-ams.app.[unique-value-here]'): # raise ValueError('Invalid Application ID') if event['session']['new']: on_session_started({'requestId': event['request']['requestId']}, event['session']) if event['request']['type'] == 'LaunchRequest': return on_launch(event['request'], event['session']) elif event['request']['type'] == 'IntentRequest': return on_intent(event['request'], event['session']) elif event['request']['type'] == 'SessionEndedRequest': return on_session_ended(event['request'], event['session']) def on_intent(intent_request, session): """ Called when the user specifies an intent for this skill """ print('on_intent requestId=' + intent_request['requestId'] + ', sessionId=' + session['sessionId']) intent = intent_request['intent'] intent_name = intent_request['intent']['name'] # Dispatch to your skill's intent handlers if intent_name == 'GetTitleRecentPostsIntentʼ: return get_title_recent_posts(intent, session) elif intent_name == 'GetTitlePopularPostsIntentʼ: return get_title_popular_posts(intent, session) elif intent_name == 'GetTitleRelatedPostsIntentʼ: return get_title_related_posts(intent, session) elif intent_name == 'GetTitleSearchedPostsIntentʼ: return get_title_searched_posts(intent, session) elif intent_name == 'GetContentSpecifiedPostIntentʼ: return get_content_specified_post(intent, session) elif intent_name == 'GetSummarySpecifiedPostIntentʼ: return get_summary_specified_post(intent, session) elif intent_name == 'AMAZON.HelpIntentʼ: return get_welcome_response() elif intent_name == 'AMAZON.CancelIntent' or intent_name == 'AMAZON.StopIntentʼ: return handle_session_end_request() else: raise ValueError('Invalid intent') 39 Copyright © 2019 まるぼん All Rights Reserved.
  30. [3] ⾳声インターフェイスと処理ロジックの紐づけ ① ⑥ ② ⑤ ③ ④ ユーザ Echo

    Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 40 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  31. [4] Alexaスキルの有効化 ① ⑥ ② ⑤ ③ ④ ユーザ Echo

    Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 42 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  32. [再掲] Alexaスキルの実装⽅法 ① ⑥ ② ⑤ ③ ④ ユーザ Echo

    Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 44 Copyright © 2019 まるぼん All Rights Reserved. [1] ⾳声インターフェイスの設計 ・どのような⾔葉を受け取るか ・受け取った⾔葉をどう解釈するか [2] 処理ロジックの開発 ・解釈した意図に基づいて どのような処理をしてどう返答するか [3] ⾳声インターフェイスと処理ロジックの紐づけ [4] Alexaスキルの有効化
  33. • 知的なコンピュータプログラムを作る科学と技術 • ⼈⼯知能の研究には⼆つの⽴場がある。 • ⼈間の知能そのものをもつ機械を作ろうとする⽴場 • ⼈間が知能を使ってすることを機械にさせようとする⽴場 AI(⼈⼯知能)とは 46

    Copyright © 2019 まるぼん All Rights Reserved. ※出典: ⼈⼯知能学会 ⼈⼯知能のFAQ http://www.ai-gakkai.or.jp/whatsai/AIfaq.html ⼈⼯知能学会 ⼈⼯知能って何? http://www.ai-gakkai.or.jp/whatsai/AIwhats.html
  34. # 機能 REST APIの概要 REST APIエンドポイント 1 最新記事の取得 ※最も新しい記事 WordPressデフォルト

    https://otaku-times.com/wp-json/wp/v2/posts 2 最近投稿された記事の取得 ※1週間以内に投稿された記事 WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts 3 ⼈気記事(ランキング)の取得 ※PVベース(1⽇、1週間、1ヶ⽉、全期間) WordPress Popular Posts (プラグイン) https://otaku-times.com/wp-json/wordpress-popular-posts/v1/popular-posts ?range=last7days 4 関連記事の取得 ※タイトル、本⽂、カテゴリ・タグ等 を基にした類似性ベース WP Content Analyzer(仮称) (⾃作AIプラグイン) https://<プラグイン導⼊サイト>/wp-json/wp-content-analyzer/v1/similarity ?site=https://otaku-times.com/&id=<元記事のpost_id> 5 記事の検索 WordPressデフォルト https://otaku-times.com/wp-json/wp/v2/posts?search=<検索⽂字列> 6 記事の要約 WP Text Summarizer(仮称) (⾃作AIプラグイン) https://<プラグイン導⼊サイト>/wp-json/wp-text-summarizer/v1/summary ?site=https://otaku-times.com/&id=<元記事のpost_id> Webサイト・コンシェルジュでAIを応⽤している箇所(1/2) 47 Copyright © 2019 まるぼん All Rights Reserved.
  35. Webサイト・コンシェルジュでAIを応⽤している箇所(2/2) ① 「ユーザ」が「Echo(Alexa対応デバイス)」に発話 ② 「Echo」はマイクで集⾳した⾳声データを「Alexa」に送信 ③ 「Alexa」は⾳声データを解析し、「エンドポイント」を呼び出して解析結果を伝える ④ 「エンドポイント」はスキルの処理を実⾏し、その結果を「Alexa」にレスポンスとして返す ⑤

    「Alexa」はレスポンスに応じた⾳声データを⽣成し、「Echo」に返信 ⑥ 「Echo」は⾳声データを再⽣し、スピーカーを通じて「ユーザ」に伝える ① ⑥ ② ⑤ ③ ④ ユーザ Echo Alexa エンドポイント ⾳声解析結果(JSON形式) 返答内容(JSON形式) REST APIリクエスト(HTTP) コンテンツデータ(JSON形式) ⾳声 ⾳声 WordPressサイト ⾳声データ ⾳声データ ⾳声認識・⽣成 スキルの処理 WordPressプラグイン コンテンツの要約 AI コンテンツの提供 48 Copyright © 2019 まるぼん All Rights Reserved.
  36. WordPressプラグイン WP Text Summarizer(仮称) WordPressプラグイン 記事の要約 AI 指定された記事を⾃動要約するWordPressプラグイン ⾃動要約の機能をWordPress REST

    API(Web API)として提供 { "id": 224, "link": "https://example.com/explanation-wp-text-summarizer", "title" : "WordPress Text Summarizerとは", "content": [ "WP Text Summarizerは、指定された記事を⾃動要約するWordPressプラグインです。", “このプラグインは、⾃然⾔語処理の研究(技術やアルゴリズム等)を応⽤し、要約ロジックを実装しています。", “ロジックの実装にあたり様々な論⽂を読みましたが、世の中には⾯⽩い研究がたくさんあるのですね。", “このプラグインは、⾃動要約のためのWeb APIをWordPressのREST APIエンドポイントとして提供します。 ", " REST APIエンドポイントに要約対象のサイトURLとPost ID(投稿ID)をリクエストすると、要約結果をJSON形式で返しま す。 ", “プラグインの公開については検討中です。" ], "summary": [ "WP Text Summarizerは、指定された記事を⾃動要約するWordPressプラグインです。", “このプラグインは、⾃動要約のためのWeb APIをWordPressのREST APIエンドポイントとして提供します。 ", " REST APIエンドポイントに要約対象のサイトURLとpost ID(投稿ID)をリクエストすると、要約結果をJSON形式で返しま す。 " ] } REST APIエンドポイント: https://<プラグイン導⼊サイト>/wp-json/wp-text-summarizer/v1/summary?site=https://example.com/&id=224 要約結果の出⼒例: 49 Copyright © 2019 まるぼん All Rights Reserved.
  37. 51 Copyright © 2019 まるぼん All Rights Reserved. DEMO: 記事の⾃動要約の例

    "⼤⽥区唯⼀のクラフトビール⼯場から池上の地域応援ビールが届きました。", "⼤⽥区のへそに位置する池上は700年の歴史があり、⾼級志向と庶⺠志向が混在する、様々な⼈にとって、居⼼地の良い街です。", "そんな池上をイメージした、「華やかさ」と「飲みやすさ」を両⽴したビールです。", "⼤⽥区内の材料を使⽤して、区⺠に愛されるクラフトビールが造りたい!そんな熱い気持ちから⽣まれました。", "クラフトビールを製造・販売するのは「⽻⽥バル」", "⼯場の直営店として、⼤⽥区蒲⽥にお店をかまえます。クラフトビールと⾔えど、種類は様々。⽢味が強いもの。苦味があるもの。 「⽻⽥バル」では、好みに合わせて注⽂可能。またビールに合った前菜を始め、こだわりの⾷材で作られたお料理が楽しめます。", "「⽻⽥バル」のミッションは5つ!", ・・・ "すでに⼤⽥区産のホップを収穫し、仕込みをスタート!", "そして⼤⽥区のご当地ビール第1弾となるのが、この“池上ビール”です。より多くの⼈に、池上を認知してもらうことはもちろん、 興味を持って⾜を運んでくれるかもしれない。そんな愛のつまった逸品です。", "このビールには隠されたもう⼀つの地元愛が。なんとっ!池上ビールが1本売れると20円が池上地区商店街に寄付されるんです!! 池上を良くするために、⼤事に使われるそうですよ。", "⽢味のある味わいで飲みやすく、クラフトビールの良さが活きています。喉ごしすっきりと爽やかな⾹りが⿐を抜けます。", "ご当地ビールと侮るなかれ。ぜひ⼀度ご賞味ください。", "最新情報は、池上商店街連合会HPよりご確認ください。" 出典:【池上ビール】⼤⽥区唯⼀のクラフトビール⼯場から池上の地域応援ビールが届きました ‒ ⼤⽥区タイムズ https://otaku-times.com/12510/
  38. WP Text Summarizerの構成 WordPressプラグイン 記事の要約 AI PHPからPythonにて実装した要約ロジックを呼び出す構成を採⽤ PHP WordPress REST

    APIロジック Python gensim MeCab networkx 要約ロジック proc_open関数 WordPressと連携しやすいPHP 科学技術計算が得意なPython = ※gensim: トピックモデリングライブラリ scikit-learn: 機械学習ライブラリ networkx: ネットワーク/グラフ理論ライブラリ MeCab: 形態素解析ライブラリ scikit-learn wp-text-summarizer ├── includes │ ├── class-wpts-logger.php │ ├── class-wpts-rest-controller.php │ ├── collection.py │ ├── dao.py │ ├── lexrank.py │ ├── main_summary.py │ ├── normalize_neologd.py │ ├── parser.py │ ├── scdv.py │ ├── summarizer.py │ └── util.py └── wp-text-summarizer.php + 53 Copyright © 2019 まるぼん All Rights Reserved. 標準⼊出⼒
  39. 1 要約の内容 指⽰的(Indicative summary) 原⽂書を読むべきか判断するための要約 (e.g.書籍や映画の紹介) 報知的(Informative summary) 原⽂章の代わりとする要約 (e.g.ニュースの字幕)

    2 要約時の指⽰ 指⽰依存(Query focused summarization) 何らかの特定の要求に対する要約 (e.g.トピック、キーワード) 指⽰⾮依存(Generic summarization) 特定の要求に依らない要約 3 要約対象⽂書の数 単⼀⽂書(Single document summarization) ⼀つの⽂書の要約 複数⽂書(Multi-document summarization) ⼆つ以上の⽂書の要約 4 要約の作成⽅法 抽出型(Extractive) 原⽂書を⽂に分解し、要約として相応しい⽂を選び、 それらを繋げることで作る要約 ⽣成型(Abstractive) 原⽂書にない表現を含む (新しい表現を⽣成する)要約 WP Text Summarizerが対象とする⽂書要約 54 Copyright © 2019 まるぼん All Rights Reserved.
  40. ⽂の分割 ⽂の短縮 ⽂の選択 ⽂の並べ換え WP Text Summarizerの要約(抽出型)の⼿法 原⽂書(記事のHTML)からPタグ単位で分割 <p>インターネットで発信したい⼈、WordPressの開発をしたい⼈等、WordPressを 利⽤する⽬的は⼈によって異なります。</p>

    <p>WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かし て勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、 「わからないこと、⾃分で調べきれない場合に相談できる⼈をもつこと」です。</p> <p>⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に 相談できる⼈と⼀緒に作業できる環境作りを⽬指しています。</p> WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かして 勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、 「わからないこと、⾃分で調べきれない場合に相談できる⼈をもつこと」です。 ⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に相 談できる⼈と⼀緒に作業できる環境作りを⽬指しています。 WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かして 勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、 「わからないこと、⾃分で調べきれない場合に相談できる⼈をもつこと」です。 ⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に相 談できる⼈と⼀緒に作業できる環境作りを⽬指しています。 何の情報をもとに何を重要⽂と判断するのか FastText:単語のベクトル化:単語の数値化 SCDV:単語のベクトルの補正、⽂のベクトル化 LexRank:⽂の重要度ランクの計算、重要⽂の抽出 原⽂書の⽂の順番を踏襲 ⾏わない 55 Copyright © 2019 まるぼん All Rights Reserved.
  41. FastTextとは w(t) w(t-2) w(t-1) w(t+1) w(t+2) ⼊⼒層 隠れ層 出⼒層 FastTextは、ニューラルネットワークの機械学習を⽤いた

    単語の意味をベクトル表現(分散表現)に変換する⼿法 単語の意味の数値変換により下記の演算が可能となる。 ・単語同⼠の意味の近さ(類似度) ・単語同⼠の意味の⾜し算、引き算 国王 ⼥王 男性 ⼥性 は です 単語 FastTextの処理 単語ベクトル ⼊⼒ 出⼒ 例えば、以下の様な計算ができる様になる 国王 ‒ 男性 + ⼥性 = ⼥王 国王: [0.4, 0.1, 0.9, 0.4] ⼥王: [0.5, 0.2, 0.3, 0.4] 男性: [0.1, 0.0, 0.8, 0.2] ⼥性: [0.2, 0.1, 0.2, 0.3] は : [0.1, 0.2, 0.2, 0.1] です: [0.7, 0.3, 0.7, 0.8] 56 Copyright © 2019 まるぼん All Rights Reserved. ニューラルネットワーク 0.15 0.23 0.39 0.08 0.23 Word2Vec ・ ・ ある単語の周りに出現する単語を予測する学習を⾏い、 ⼊⼒層から隠れ層への重みから単語のベクトル表現を得る。 FastText 単語のベクトル表現 ・Word2Vecの発展系 ・N-gram(⽂字をN⽂字ずつ切り取ってできる単語) を⽤いた学習を⾏うことにより⾼精度なベクトル表現 が得られる。
  42. SCDV(Sparse Composite Document Vectors)とは SCDVは、単語ベクトルをもとに⽂ベクトルを作成する⼿法 (SCDVにより作成した⽂ベクトルは、他の⽅法に⽐べて精度が良い) Word-topics vector formation Sparse

    Composite Document Vector formation 国王: [0.4, 0.1, 0.9, 0.4] ⼥王: [0.5, 0.2, 0.3, 0.4] 男性: [0.1, 0.0, 0.8, 0.2] ⼥性: [0.2, 0.1, 0.2, 0.3] は : [0.1, 0.2, 0.2, 0.1] です: [0.7, 0.3, 0.7, 0.8] 単語ベクトル SCDVの処理 ⽂ベクトル ⼊⼒ 出⼒ 国王は男性です。: [0.8, 0.7, …, 0.2, 0.1] ⼥王は⼥性です。: [0.7, 0.8, …. 0.2, 0.1] ⽂ 国王は男性です。 ⼥王は⼥性です。 57 Copyright © 2019 まるぼん All Rights Reserved.
  43. LexRankとは DnSn :⽂書nの⽂n :2⽂間の類似度 LexRankは、PageRankに着想を得た要約アルゴリズム ⽂書の中の各⽂の重要度をランク付けできる ⽂ベクトル D1S1 D1S2 D1S3

    D1S10 D1S11 LexRankの処理 ⽂間の類似度 D1S1-D1S2 = 0.45 D1S1-D1S3 = 0.02 D1S10-D1S11 = 0.02 ⽂の重要度ランク D1S1 = 0.60 D1S2 = 0.84 D1S8 = 1.00 D1S11 = 0.3 ノード Webページ エッジ リンク ノードの重要性判定 の考え⽅ 1. 多くのページからリンクされているページは重要なページ 2. 重要なページからリンクされているページは重要なページ ノード ⽂ エッジ 2⽂間の類似度 ノードの重要性判定 の考え⽅ 1. 多くの⽂と類似する⽂は重要な⽂ 2. 重要な⽂と類似する⽂は重要な⽂ PageRank LexRank D1S1 D1S2 D1S3 D1S4 D1S5 D1S6 D1S7 D1S9 D1S10 D1S11 D1S8 … … … … ⼊⼒ 出⼒ 線の太さ 58 Copyright © 2019 まるぼん All Rights Reserved.
  44. FastText + SCDV + LexRank FastText SCDV LexRank ⽂書の各単語を単語ベクトルに変換する ⽂ベクトルを元に⽂書の各⽂の重要度をランク付けする

    単語ベクトルを元に⽂書の各⽂を⽂ベクトルに変換する 59 Copyright © 2019 まるぼん All Rights Reserved.
  45. [1] Gunes Erkan and Dragomir R Radev. Lexrank (2004). Graph-based

    lexical centrality sailence in text summarization. Journal of Artificial Intelligence Research. Vol. 22, pp. 457-479, 2004. [2] T. Mikolov, I. Sutskever, K. Chen, G. Corrado, and J. Dean. (2013). Distributed Representations of Words and Phrases and their Compositionality. Accepted to NIPS 2013. [3] Mikolov, T., Chen, K., Corrado, G., & Dean, J. (2013). Efficient estimation of word representations in vector space. In ICLR. [4] Piotr Bojanowski, Edouard Grave, Armand Joulin, and Tomas Mikolov. 2016. Enriching Word Vectors with Subword Information. arXiv preprint arXiv:1607.04606. [5] Mekala, D., Gupta, V., Paranjape, B., & Karnick, H. (2017). SCDV: Sparse Composite Document Vectors using soft clustering over distributional representations. In Proceedings of the 2017 Conference on Empirical Methods in Natural Language Processing (pp. 670-680). 参考⽂献 60 Copyright © 2019 まるぼん All Rights Reserved.
  46. まとめ WordPressの成⻑と進化、スマートスピーカーの普及、AIの⺠主化などの状況の 変化を踏まえると、WordPressの新たなコンテンツ配信の形態について取り組む 絶好のタイミングである。 1 Amazon Alexa、WordPress REST API、WordPress AIプラグインを応⽤した

    Webサイトの⾳声UIについて機能と仕組み、実装⽅法の概要を説明した。 2 「START! WordPressコンテンツ配信の新しい在り⽅」ということで、 スマートスピーカーを⽤いたWordPressのコンテンツ配信を検討してみては どうでしょうか。 3 62 Copyright © 2019 まるぼん All Rights Reserved.