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

WordPressコンテンツ配信の新しい在り⽅
Webサイト・コンシェルジュ（⾳声UI）の実装
〜スマートスピーカー + WordPress REST API + WordPress AIプラグイン〜
2019/4/20 WordCamp Haneda 2019
まるぼん（@marubon_jp）

View Slide

⾃⼰紹介
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

View Slide

本セッションの対象者と概要、アウトライン
2
• 対象者
• ⾳声UIを通じたWordPressコンテンツの配信に興味のある⽅
• 概要
• スマートスピーカー、WordPress REST API、WordPress AIプラグイン（AI技術）を応⽤したWeb
サイトの⾳声UIとその仕組み・実装⽅法の概要の紹介
• アウトライン
1. 状況の変化
2. Webサイト・コンシェルジュとは
3. DEMO
4. Webサイト・コンシェルジュの仕組みと実装⽅法
5. WordPressプラグイン x AI
6. まとめ

View Slide

START！ WordPressコンテンツ配信の新しい在り⽅

View Slide

状況の変化
なぜ今、WordPressと⾳声UIなのか？
1

View Slide

WordPressの成⻑と進化
5
※直近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）のリリース
外部からコンテンツに
アクセスする⼿段
誰もが容易にコンテンツを
⽣み出せる⼟台
⾼い市場シェア ≒
⼤量のコンテンツを蓄積する基盤として成⻑

View Slide

スマートスピーカーの普及
6
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/スマートスピーカー

View Slide

AIの⺠主化
7
AI開発に応⽤可能なオープンソースのフレームワーク、ライブラリの発展
MeCab
深層学習
深層学習
トピックモデリング
形態素解析
機械学習

View Slide

8
スマート
スピーカー
WordPress
+ REST API
AI技術
新しい
Webコンテンツ
の配信形態
WordPressの成⻑と進化
AIの⺠主化
新しいWebコンテンツの配信形態に取り組む絶好の機会
対話型の⾳声UI
コンテンツ・プラットフォームコンテンツの利活⽤技術
スマートスピーカーの普及

View Slide

トレンドを実現するテクノロジー
• AI PaaS（サービスとしてのAIプラットフォーム）
• 汎⽤AI
• ⾃律⾛⾏（レベル4/5）
• ⾃律モバイル・ロボット
• 会話型AIプラットフォーム
• ディープ・ニューラル・ネット（ディープ・ラーニング）
• 空⾶ぶ⾃律⾛⾏⾞
• スマート・ロボット
• 仮想アシスタント
[参考] Gartner 先進テクノロジのハイプサイクル：2018年
9
今後10年で「AIの⺠主化」がトレンドに。
AIが⼀般に利⽤される様になり、最終的に誰もが使えるものになる。
出典：
ガートナー、「先進テクノロジのハイプ・サイクル：2018年」を発表
- ⼈とマシンの境界を曖昧にする5つの先進テクノロジ・トレンドが明らかに
- 2,000を超えるテクノロジから重要な知⾒を抽出
https://www.gartner.co.jp/press/pdf/pr20180822-01.pdf

View Slide

Webサイト・コンシェルジュとは
何ができるのか？
2

View Slide

Webサイト・コンシェルジュ
11
最新の記事は
○○です。
⼤⽥区コミニティ・メディア
⼤⽥区タイムズ
最新の記事を
教えて！
ユーザスマートスピーカー
【サイトURL】https://otaku-times.com/
ユーザの要望に応じてWebサイトのコンテンツを提供する
⾳声UI（⾳声対話型アシスタント）

View Slide

• コンテンツ利⽤者
• 「○○しながら」Webサイトの情報収集が可能
• 「⽬や⼿の不⾃由な⽅」でもWebサイトの情報収集が可能
• 「PCやスマホに抵抗のあるご⾼齢の⽅」でもWebサイトの情報収集が可能
• コンテンツ提供者
• 既存コンテンツをそのまま活⽤しながら、Webサイトへの導線を拡充
• （今なら）他サイトとは異なる独⾃性としてアピール可能
Webサイト・コンシェルジュのメリット
12
⾳声UI = ⾳声を利⽤できる（⽇常の会話の延⻑）
PCのキーボード打鍵やスマートフォン・タブレットの画⾯タップが不要

View Slide

Webサイト・コンシェルジュの機能
# 機能概要
1 最新記事の取得
※最も新しい記事
タイトル
2 本⽂の内容
3 最近投稿された記事の取得
※所定の期間内に投稿された記事
タイトルのリスト
4 指定記事の本⽂
5 ⼈気記事（ランキング）の取得
※PVベース（1⽇、1週間、1ヶ⽉、全期間)
タイトル（ランキング含む）のリスト
7 関連記事の取得
※タイトル、本⽂、カテゴリ・タグ等を基にした
類似性ベース
タイトルのリスト
9 記事の検索タイトルのリスト
11 記事の要約指定記事の要約
13

View Slide

14
最近投稿された記事を教えて
最近投稿された記事は次の通りです。
1件⽬記事タイトルA
2件⽬記事タイトルB
3件⽬記事タイトルC
・
・
他にご⽤件はありますか？
ユーザスマートスピーカー
3件⽬の記事の内容を教えて
ご指摘の記事の内容は次の通りです。
・
（3件⽬の記事の内容）
・

View Slide

15
・
・
ユーザ
週間ランキングを教えて
週間の記事ランキングは次の通りです。
・
・
・
スマートスピーカー

View Slide

DEMO

View Slide

Webサイト・コンシェルジュの
仕組みと実装⽅法
どのように実装しているのか？
3

View Slide

スマートスピーカー ✕ WordPress REST API
情報のリクエスト
（⾳声⼊⼒）
検索した情報の出⼒
（⾳声出⼒）
情報の検索
（REST API経由）
情報の出⼒
（JSON形式）
ユーザ
スマート
スピーカー
WordPressサイト
18

View Slide

WordPress REST API
記事データの取得例： https://otaku-times.com/wp-json/wp/v2/posts
WordPressコンテンツの取得・操作を⾏うためのWeb API
※WordPress 4.7からコアに統合され、標準で提供されている。
19

View Slide

[参考] WordPress REST APIエンドポイント
20
# 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/

View Slide

スマートスピーカー
Amazon Echo
Amazon謹製のAlexa対応デバイス
Alexaスキル
Alexa対応デバイスで利⽤できる追加機能
※サードパーティや個⼈が開発・公開できる。
21

View Slide

Alexaスキルの構成と処理の流れ
① 「ユーザ」が「Echo（Alexa対応デバイス）」に発話
② 「Echo」はマイクで集⾳した⾳声データを「Alexa」に送信
③ 「Alexa」は⾳声データを解析し、「エンドポイント」を呼び出して解析結果を伝える
④ 「エンドポイント」はスキルの処理を実⾏し、その結果を「Alexa」にレスポンスとして返す
⑤ 「Alexa」はレスポンスに応じた⾳声データを⽣成し、「Echo」に返信
⑥ 「Echo」は⾳声データを再⽣し、スピーカーを通じて「ユーザ」に伝える
①
⑥
②
⑤
③
④
ユーザ Echo Alexa エンドポイント
⾳声解析結果（JSON形式）
返答内容（JSON形式）
REST APIリクエスト（HTTP）
コンテンツデータ（JSON形式）
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
⾳声認識・⽣成スキルの処理
WordPressプラグイン
コンテンツの要約
AI
コンテンツの提供
22

View Slide

Alexaスキルの実装⽅法
①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
23
[1] ⾳声インターフェイスの設計
・どのような⾔葉を受け取るか
・受け取った⾔葉をどう解釈するか
[2] 処理ロジックの開発
・解釈した意図に基づいて
どのような処理をしてどう返答するか
[3] ⾳声インターフェイスと処理ロジックの紐づけ
[4] Alexaスキルの有効化

View Slide

①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
24

View Slide

[1] ⾳声インターフェイスの設計 ‒ 対話モデル
Alexa、⼤⽥区タイムズを開いて
⼤⽥区タイムズにようこそ！
どのようなご⽤件でしょうか？
・
・
・
ユーザ Echo
呼び出し名
サンプル発話
25

View Slide

[1] ⾳声インターフェイスの設計 ‒ 対話モデル
Alexaスキルの「呼び出し名」及び「どのような⾔葉（サンプル発話）を受け取るのか」
「受け取った⾔葉をどのような意図（インテント）として解釈するのか」を定義
GetTitleRecentPostsIntent
（最近投稿された記事の取得）
• 最近の記事
• 最近の記事は
• 最近の記事を教えて
• 最近投稿された記事
• 最近投稿された記事は
• 最近投稿された記事を教えて
• 新着記事
• 新着記事は
• 新着記事を教えて
・
・
・
インテント
サンプル発話
Alexa開発者コンソール
26

View Slide

[1] ⾳声インターフェイスの設計 ‒ 処理イメージ
• 最近の記事
• 最近の記事は
• 最近の記事を教えて
• 最近投稿された記事
• 最近投稿された記事は
• 最近投稿された記事を教えて
・
・
・
Echo
⾳声データ
エンドポイント
スキルの処理
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",
"conﬁrmationStatus": "NONE"
}
}
}
27
ユーザの発話を対話モデル
に従い、プログラムが理解
できる形に変換

View Slide

28
# 取得対象インテントサンプル発話（※⼀部を抜粋）
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}: 検索⽂字

View Slide

Alexaスキルの実装⽅法
①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
29

View Slide

[2] 処理ロジックの開発 ‒ 実装が必要な処理
① REST API経由のWordPressコンテンツデータの取得・加⼯
（HTMLタグの除去、必要なデータの抽出・加⼯等）
② Alexaへの返答内容の⽣成
（ユーザに発話する内容）
Alexa エンドポイント
WordPressサイト
どのような処理をして、Alexaにどう返答するか
30

View Slide

[2] 処理ロジックの開発 ‒ コンテンツデータの取得・加⼯
31
# 取得対象データインテント 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（仮称）
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

View Slide

[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": "「ワタシの⼤森」コンテスト開催します！！！\n毎年、⼤森駅周辺で開催される『⼤森・⼤井夢フェア』は今年で19回⽬を迎えます♪
\n今までよりもさら
に楽しんでもらうべく、今年はコンテストを開催します！
\nあなたのとっておきの⼤森情報を教えてください！！！\n⼊選者には⼤森ならではの賞品を⽤意しています！
\nコンテスト応募⽅法\n応募⽅法はカンタン！！！
\nTwitter , Facebook , Instagram いずれかのSNSにて、
\n場所(あれば写真)と説明、そして『 #OomOoi 』
のキャンペーンタグを⼊れて投稿するだけ！
\n(Facebookで投稿する場合、公開設定でお願いします)\n※投稿内容を展⽰や報告書に転載することがあります
\n（平成30年度
⼤⽥の観光にぎわい創出事業補助⾦対象イベント）\nコンテスト結果発表\n受賞者には応募に利⽤したSNSにて連絡します。
\n連絡のつかない場合、次点者の繰り上げ
とします。
\n各賞の賞品提供者が受賞者を決定します。
\n重複しての受賞はありません。\nコンテスト表彰\n各賞受賞者の表彰式は11⽉に⼤森駅周辺で⾏いま
す！
\n表彰式にお越しになれない場合、賞品の受け渡しは事務局と調整となります。\n詳しい情報は#oomooiに随時アッ
プします！\n",
"protected": false
},
・・・中略・・・
}
32
HTMLタグの除去、必要なデータの抽出・加⼯等を実施

View Slide

[2] 処理ロジックの開発 ‒ Alexaへの返答内容の⽣成
Alexaへの返答内容を所定のJSONフォーマットで⽣成
{
"body": {
"version": ”1.0",
"response": {
"outputSpeech": {
"type": "SSML",
“ssml” : “発話対象のSSMLテキスト⽂字列"
},
"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

View Slide

[2] 処理ロジックの開発 ‒ 処理イメージ
返答内容のresponse-outputSpeechの部分が発話される
Alexa エンドポイント
⾳声⽣成スキルの処理
Echo
⾳声データ
{
"body": {
"version": "1.0",
"response": {
"outputSpeech": {
"type": "SSML",
“ssml” : “最新記事は次の通りです。・・・"
},
"card": {
"type": "Simple",
"title": "⽇間ランキング",
"content": "Simpleカードの内容"
},
"reprompt": {
"outputSpeech": {
"type": "PlainText",
"text": "話す対象のプレーンテキスト⽂字列"
}
},
"shouldEndSession": true
},
"sessionAttributes": {
"key": "value"
}
}
}
ユーザ
最新記事は
次の通りです。
・・・
34

View Slide

[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

View Slide

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

View Slide

[2] 処理ロジックの開発 ‒ 実⾏環境
Lambda関数は、Lambda Management Consoleにて設定
37

View Slide

[2] 処理ロジックの開発 ‒ 関数コード
38

View Slide

[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 conﬁguring 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

View Slide

①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
40

View Slide

Alexa開発者コンソールにてエンドポイントのARNを設定
41

View Slide

①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
42

View Slide

Alexaアプリ（iOS/Android）にて有効化
43

View Slide

[再掲] Alexaスキルの実装⽅法
①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
44

View Slide

WordPressプラグイン x AI
WordPressプラグインへのAIの応⽤例
（記事の要約と実装⽅法）
4

View Slide

• 知的なコンピュータプログラムを作る科学と技術
• ⼈⼯知能の研究には⼆つの⽴場がある。
• ⼈間の知能そのものをもつ機械を作ろうとする⽴場
• ⼈間が知能を使ってすることを機械にさせようとする⽴場
AI（⼈⼯知能）とは
46
※出典: ⼈⼯知能学会⼈⼯知能のFAQ
http://www.ai-gakkai.or.jp/whatsai/AIfaq.html
⼈⼯知能学会⼈⼯知能って何？
http://www.ai-gakkai.or.jp/whatsai/AIwhats.html

View Slide

# 機能 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（仮称）
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（仮称）
https://<プラグイン導⼊サイト>/wp-json/wp-text-summarizer/v1/summary
?site=https://otaku-times.com/&id=<元記事のpost_id>
Webサイト・コンシェルジュでAIを応⽤している箇所（1/2）
47

View Slide

Webサイト・コンシェルジュでAIを応⽤している箇所（2/2）
① 「ユーザ」が「Echo（Alexa対応デバイス）」に発話
② 「Echo」はマイクで集⾳した⾳声データを「Alexa」に送信
③ 「Alexa」は⾳声データを解析し、「エンドポイント」を呼び出して解析結果を伝える
④ 「エンドポイント」はスキルの処理を実⾏し、その結果を「Alexa」にレスポンスとして返す
⑤ 「Alexa」はレスポンスに応じた⾳声データを⽣成し、「Echo」に返信
⑥ 「Echo」は⾳声データを再⽣し、スピーカーを通じて「ユーザ」に伝える
①
⑥
②
⑤
③
④
⾳声
⾳声
WordPressサイト
⾳声データ
⾳声データ
AI
48

View Slide

WordPressプラグイン WP Text Summarizer（仮称）
記事の要約
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

View Slide

DEMO

View Slide

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

View Slide

AIの実装を可能にするフレームワーク・ライブラリ
52
科学技術計算分野のフレームワーク・ライブラリは、Python向けが多い
MeCab
深層学習
深層学習
トピックモデリング
形態素解析
機械学習

View Slide

WP Text Summarizerの構成
記事の要約
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
標準⼊出⼒

View Slide

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

View Slide

⽂の分割
⽂の短縮
⽂の選択
⽂の並べ換え
WP Text Summarizerの要約（抽出型）の⼿法
原⽂書（記事のHTML）からPタグ単位で分割
インターネットで発信したい⼈、WordPressの開発をしたい⼈等、WordPressを
利⽤する⽬的は⼈によって異なります。
WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かし
て勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、
「わからないこと、⾃分で調べきれない場合に相談できる⼈をもつこと」です。
⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に
相談できる⼈と⼀緒に作業できる環境作りを⽬指しています。
WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かして
勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、
⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に相
談できる⼈と⼀緒に作業できる環境作りを⽬指しています。
WordPressの利⽤⽬的にかかわらず、習熟する上で⼤切なのは、「⾃分で⼿を動かして
勉強する機会を作ること」、「正しい情報を⼊⼿できるチャンネルを増やすこと」、
⽻⽥ WordPress Meetupでは、初⼼者から上級者まで、気軽に参加できて、気軽に相
談できる⼈と⼀緒に作業できる環境作りを⽬指しています。
何の情報をもとに何を重要⽂と判断するのか
FastText：単語のベクトル化：単語の数値化
SCDV：単語のベクトルの補正、⽂のベクトル化
LexRank：⽂の重要度ランクの計算、重要⽂の抽出
原⽂書の⽂の順番を踏襲
⾏わない
55

View Slide

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
ニューラルネットワーク
0.15
0.23
0.39
0.08
0.23
Word2Vec
・
・
ある単語の周りに出現する単語を予測する学習を⾏い、
⼊⼒層から隠れ層への重みから単語のベクトル表現を得る。
FastText
単語のベクトル表現
・Word2Vecの発展系
・N-gram（⽂字をN⽂字ずつ切り取ってできる単語）
を⽤いた学習を⾏うことにより⾼精度なベクトル表現
が得られる。

View Slide

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

View Slide

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

View Slide

FastText + SCDV + LexRank
FastText
SCDV
LexRank
⽂書の各単語を単語ベクトルに変換する
⽂ベクトルを元に⽂書の各⽂の重要度をランク付けする
単語ベクトルを元に⽂書の各⽂を⽂ベクトルに変換する
59

View Slide

[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

View Slide

まとめ
4

View Slide

まとめ
WordPressの成⻑と進化、スマートスピーカーの普及、AIの⺠主化などの状況の
変化を踏まえると、WordPressの新たなコンテンツ配信の形態について取り組む
絶好のタイミングである。
1
Amazon Alexa、WordPress REST API、WordPress AIプラグインを応⽤した
Webサイトの⾳声UIについて機能と仕組み、実装⽅法の概要を説明した。
2
「START！ WordPressコンテンツ配信の新しい在り⽅」ということで、
スマートスピーカーを⽤いたWordPressのコンテンツ配信を検討してみては
どうでしょうか。
3
62

View Slide

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

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

marubon

More Decks by marubon

Other Decks in Technology

Featured

Transcript

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

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

marubon

More Decks by marubon

Other Decks in Technology

Featured

Transcript

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

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