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.

「デスクトップマスコット Liplisとバックエンドシステム Clalis」 プロ生勉強会 第39回@DMM.comラボ

3,269 views

Published on

2016/2/13 プロ生勉強会 第39会 で発表した資料です。
Liplis、Clalisの紹介や仕組みの話です。

Published in: Software
  • Be the first to comment

「デスクトップマスコット Liplisとバックエンドシステム Clalis」 プロ生勉強会 第39回@DMM.comラボ

  1. 1. デスクトップマスコット Liplis と バックエンドシステム Clalis 2016/2/13
  2. 2. 自己紹介 さちん • Twitter @LPSTYLE_SACHIN • アルミ製造会社のユー子でSEやってます • 静岡から来ました • できる言語 シゴト VB、Java、Javascript 趣味 C#、Java、Swift、Javascript、PHP • デスクトップマスコットLiplisを開発しています リリです! ルルですの! \看板娘たちもよろしくです!/
  3. 3. マスコットアプリ文化祭 出品作品 その1 • Liplis 東北ずん子ver Android iOS Web Windows
  4. 4. マスコットアプリ文化祭 出品作品 その2 • Liplis Emotion Checker https://mascot-apps-contest.azurewebsites.net/Works/31 Windows Web
  5. 5. 本題 目次とポイント •デスクトップマスコット Liplisとは? • Liplisの仕組みを紹介! • ソースも公開しているので使ってみて! •デスクトップマスコットを簡単作成! • これを使えばマスコットアプリ文化祭にアプリが出せる!? •バックエンドシステムClalisとは? • 公開APIもあるよ!使ってみて!
  6. 6. デスクトップマスコット Liplisとは?
  7. 7. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  8. 8. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  9. 9. Liplisとは? 色々な環境で動くデスクトップマスコット Android iOS Web Windows
  10. 10. Liplisとは? Web上のおもしろい話題をおしゃべり! ニュース ツイート RSS ニコ動 まとめサイト
  11. 11. Liplisとは? 文章の内容に応じて表情が変化 たのしいです! なにそれおいしいの? 冷静になりましょう zzz かなしいです! きらいです・・・ 不安です・・・ 好きです! 安心です 気持ちいいです! きもちわるい・・・ 気になります! なんと! びっくりです! えっへん! 許せません! 呆れちゃいます はずかしいです!
  12. 12. Liplisとは? キャラクターごとの口調でおしゃべり カタコト? えせ関西弁 !すでのな のじゃ!
  13. 13. Liplisとは? 会話もできちゃいます! ・Docomoの雑談APIを使っています。 ・雑談APIの出力に口調変換とメタ感情付与をしています。
  14. 14. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  15. 15. Liplisの設計方針 LIttle Pretty Lite Interface Systemを目指す! • ちっちゃかわいいデスクトップマスコット! • 出来る限り処理を軽くする! • データの送受信は極力行わず、必要なデータはClalisに要求して受信 • 特にスマホの環境では、バッテリー消費を少なくするよう意識する
  16. 16. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  17. 17. データ取得の仕組み① LiplisClalisWeb ①おしゃべり データ要求 ②データ収集 処理 ③ニュースなど 取得 ⑤おしゃべり データを返す ④感情データ付与 口調変換
  18. 18. データ取得の仕組み② ■ニュース文章 九州の平地も積雪観測、暴風雪など警戒呼び掛け ■Clalisの変換後文章 九州の,0,0;平地も,2,3;積雪観測、,10,1;暴風雪な ど,3,-3;警戒,5,-3;呼び掛けです,0,0; 文章を口調変換したうえで、メタ感情データを付与しています。
  19. 19. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  20. 20. おしゃべり描画の仕組み① 口パク、目パチの表現の ための6つの立ち絵 口閉 + 開目 口開 + 開目 口閉 + 半目 口開 + 半目 口閉 + 半目 口開 + 半目
  21. 21. おしゃべり描画の仕組み② 6パターンの画像を アニメーションさせると こんな感じです。
  22. 22. おしゃべり描画の仕組み③ 九州の,0,0 平地も,2,3 積雪観測、,10,1 呼び掛けです,0,0暴風雪など,3,-3 警戒,5,-3 感情値 2 レベル3 →好き 感情値 10 レベル1 →誇り(ドヤァ) 感情値 3 レベル-3 →不安 感情値 5 レベル-3 →マイナスの驚き 受信データの文字を送りながら、対応する感情の立ち絵を表示します。 併せて、口パクを行い、目パチをそれっぽいタイミングで入れています。 これでおしゃべりしているように見えているはず! ※感情の詳細については、3章でお話します。
  23. 23. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  24. 24. 口調変換について① • 変換前/変換後のルールを作成 • 作成したルールに基いて文章を変換 • 文法的なルールではなく、置換のルール • 正規表現が使えます
  25. 25. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  26. 26. 文章への感情付与について① • 単語や文節の雰囲気を解析するために感情辞書を使用 • 単語ごとに「感情値」と「レベル」を設定 国語辞典、Wikipedia、はてなキーワード、Web 検索などから得た日本語の単語が対象 • 「Plutchikの感情の輪」をベースにした、 プラスの感情とマイナスの感情を定義 ※ Plutchikの感情の輪は4組しか無いですが、拡張して定義しています。 学術的な根拠などはありません! 図はWikipediaより引用
  27. 27. 文章への感情付与について② • 10組のプラスとマイナスの感情を定義
  28. 28. 文章への感情付与について③ •例えば「かわいい」に対する感情値とレベル Admiration(好意)のレベル+3 →「好き」感情を表している。 約150万語の名詞、形容詞、 動詞の単語に対して定義
  29. 29. 文章に感情を付与するときの処理の様子測 Liplisの仕組み 文章への感情付与について④ 九州の平地も積雪観測、暴風雪など警戒呼び掛け データ取得 形態素解析・文節分解 平地も,2,3 積雪観測、,10,1 呼び掛けです,0,0暴風雪など,3,-3 警戒,5,-3 平地も 積雪観測 呼び掛けです暴風雪など 警戒 感情値付与 感情辞書 九州の 九州の,0,0
  30. 30. 感情辞書について • 感情辞書の作り方についてもお話したかったですが、時間内におさまらな いため、カットしています。 • また別の機会にお話できればと思います!
  31. 31. デスクトップマスコット Liplisとは? •Liplisとは? •Liplisの設計方針 •データ取得の仕組み •おしゃべり描画処理の様子 •口調変換について •文章への感情付与について •音声おしゃべりについて
  32. 32. 音声おしゃべりについて① • Liplis Windows版、Android版で音声おしゃべりが可能。 • Window版では、VoiceRoidと連携して音声おしゃべりします。 • ずん子ちゃんバージョンでは本物がおしゃべり! • Android版では、TTS(TextToSpeech)を使用します。 • 日本語のTTSのエンジンのインストールが必要 (AndroidにもVoiceRoidがあれば良かったのですが・・・)
  33. 33. 音声おしゃべりについて② • VoiceRoidにSendMessageでWindowメッセージを送信し、 操作している。 ウインドウメッセージ
  34. 34. 音声おしゃべりについて③ Windows版 ソース VoiceRoidのテキストボックスに メッセージ送信 VoiceRoidの再生ボタンに メッセージ送信 ※ この部分の実装は、民安TALKのソースをMITにライセンスに基いて使用させて頂いています。
  35. 35. 音声おしゃべりについて④ Windows版 • Liplisのライブラリーを使えば超かんたんに連携可能です。 • たった4行! string windowName = "VOICEROID+ 東北ずん子 EX"; string exePath = "C:Program Files (x86)AHSVOICEROID+ZunkoEXVOICEROID.exe"; LpsVoiceRoid lvr = new LpsVoiceRoid(new msgVoiceRoid(windowName, exePath)); lvr.addMessage(“うまるーん”);
  36. 36. 補足 ライブラリ入手方法 • GitHubからダウンロード https://github.com/LipliStyle/Liplis-Windows • バイナリ http://liplis.mine.nu/File/LiplisCommon.zip 使用法のまとめや、リファレンスなどありません!すみません… プロジェクトの.netバージョンに合ったDLLを参照して頂けると、 先ほどのLpsVoiceRoidも含め、使用することができます。
  37. 37. 音声おしゃべりについて⑤ Android版 • Androidは最初から超簡単。OS付属のTextToSpeechを使用 public class LiplisWidget extends AppWidgetProvider implements TextToSpeech.OnInitListener{ private TextToSpeech tts; public void onCreate(Bundle savedInstanceState) { tts = new TextToSpeech(this, this); } public void onInit(int status) { if (TextToSpeech.SUCCESS == status) { Locale locale = Locale.ENGLISH; if (tts.isLanguageAvailable(locale) >= TextToSpeech.LANG_AVAILABLE) { tts.setLanguage(locale); } else { } } } private void speechText() { tts.speak(“にゃんぱすー”, TextToSpeech.QUEUE_FLUSH, null); } インスタンス化 TextToSpeechの 実装メソッド 言語設定の おまじない しゃべる 宣言 コレを implements
  38. 38. デスクトップマスコット Liplisとは? まとめ • Liplisの特徴は以下のとおり! • 面白いWebの情報をおしゃべり • 感情のこもった表情豊かなおしゃべり • 音声おしゃべりも可能 • 会話もできる! • ソースも公開しているので、使えそうな機能を 流用して頂くことが可能です。
  39. 39. デスクトップマスコットを簡単作成!
  40. 40. NoralisEditorについて • NoralisEditorを使えば、簡単スキン作成!
  41. 41. NoralisEditor 設定手順① 基本情報の設定
  42. 42. NoralisEditor 設定手順② 固定文章の設定
  43. 43. NoralisEditor 設定手順③ 口調変換ルール設定
  44. 44. NoralisEditor 設定手順④ アイコンの設定
  45. 45. NoralisEditor 設定手順⑤ 立ち絵の設定
  46. 46. NoralisEditor 設定手順⑤ 立ち絵の設定
  47. 47. NoralisEditor 是非使ってみてください! • ノンプログラミングでデスクトップマスコット作成! 以下からダウンロードできます。ツール内にヘルプもあります。 http://liplis.mine.nu/LiplisWiki/webroot/?NoralisEditor • WEB版もあります! http://liplis.mine.nu/NoralisEditorWeb/easymode.aspx • NoralisEditorを使えば、 マスコットアプリ文化祭に作品を出せる!
  48. 48. 簡単とは言いましたが、簡単にするのが難しい点 • 立ち絵をたくさん用意する必要あり 立ち絵 ノーマル1 + 20感情 + お休み1 さらに各表情差分 結構たくさん必要です・・・ • 口調変換ルールの設定は結構大変 うまく変換するには、ある程度正規表現を使える必要がある テストを繰り返し、変な変換は修正する必要あり →昨今の技術でなんとか簡単にできないか検討中です
  49. 49. バックエンドシステム Clalisとは?
  50. 50. バックエンドシステム Clalisとは? •Clalisとは? •Clalisのシステム構成 •Clalis 公開APIの使い方 •意外と簡単?Webサービス作成
  51. 51. バックエンドシステム Clalisとは? •Clalisとは? •Clalisのシステム構成 •Clalis 公開APIの使い方 •意外と簡単?Webサービス作成
  52. 52. Clalisとは?① Clalisについて • Liplis関連システムのコア処理を行なうシステム • 主に、日本語文章解析の機能を持つ • WebAPIとして実装している • 公開APIもある クライアント Clalis WebApi インターネット
  53. 53. Clalisとは?② バックエンドのメリット • メリット • クライアント側の通信量、処理量を減らせる • バッテリー消費量を抑えられる • クライアント側ではできない重い処理も回せる • 大きい辞書データなども扱える • デメリット • お金がかかる (サーバー、通信費、電気代etc・・・) • 精神的な負荷がかかる (今日もClalisちゃん元気かな・・・?)
  54. 54. Clalisとは?③ 提供している機能 •Liplisのおしゃべりデータ生成 •Liplisの会話応答 •NoralisEditor Android Apkビルド処理 •形態素解析 •感情付与 •口調変換 •口調変換+感情付与 •Web日本語抽出 公開API
  55. 55. バックエンドシステム Clalisとは? •Clalisとは? •Clalisのシステム構成 •Clalis 公開APIの使い方 •意外と簡単?Webサービス作成
  56. 56. Clalisの構成② システム構成 仮想LB (NLB) SQL Server2014 STD Windows Server 2008 R2 Windows Server 2008 R2 データ収集 プログラム 学習 プログラム メインデータベース ユーザー クライアント フロントDB1 フロントWEB1 フロントエンドサーバー 1号機 SQL Server2014 STD Windows Server 2008 R2 IIS 7.5 Hyper-V Windows Server 2008 R2 Windows Server 2008 R2 フロントDB2 フロントWEB2 フロントエンドサーバー 2号機 SQL Server2014 STD Windows Server 2008 R2 IIS 7.5 Hyper-V Windows Server 2008 R2 Windows Server 2008 R2 Windows Server 2008 R2 予備機&遊び用 データ収集&解析用 負荷に併せてスケールアウト可能 Replication Replication 負荷分散
  57. 57. バックエンドシステム Clalisとは? •Clalisとは? •Clalisのシステム構成 •Clalis 公開APIの使い方 •意外と簡単?Webサービス作成
  58. 58. Clalis 公開APIの使い方① 概要 • Clalisの機能を使うためのサンプルを公開しています C# https://github.com/LipliStyle/ClalisSampleForCSharp Java https://github.com/LipliStyle/ClalisSampleForJava JavaScript https://github.com/LipliStyle/ClalisSampleForJavaScript • HTTP通信なので、プラットフォームに依存することな く、使用することができる
  59. 59. Clalis 公開APIの使い方② C#の例 パラメータの 設定 POST JSONを Stringにコンバート • C#からClalisを呼び出す時のサンプル
  60. 60. Clalis 公開APIの使い方③ エンドポイント • 形態素解析 http://liplis.mine.nu/Clalis/v41/Json/ClalisMecab.aspx • 感情付与 http://liplis.mine.nu/Clalis/v41/Json/ClalisEmotional.aspx • 口調変換 http://liplis.mine.nu/Clalis/v41/Json/ClalisTone.aspx • 感情付与+口調変換 http://liplis.mine.nu/Clalis/v41/Json/ClalisToneEmotional.aspx • Web日本語抽出 http://liplis.mine.nu/Clalis/v30/Soap/Clalis.asmx/clalisWebExtractJp • 詳しくは、LipliStyleのClalisAPIの定義のページを見てみて下さい http://liplis.mine.nu/lipliswiki/webroot/?What%20Is%20Clalis
  61. 61. バックエンドシステム Clalisとは? •Clalisとは? •Clalisのシステム構成 •Clalis 公開APIの使い方 •意外と簡単?Webサービス作成
  62. 62. 意外と簡単?Webサービス作成 •VisualStudioとWindowsOSがあればOK VisualStudioでプロジェクトを作って、IISに公開するだけ! •セキュリティには気を使おう! 公開サーバーが悪用されるかも・・・? バックエンドシステムを作るには・・・?
  63. 63. 意外と簡単?Webサービス作成 • Webフォームを作って、以下のコードを書くだけ! protected void Page_Load(object sender, EventArgs e) { Response.ContentType = "text/javascript"; Response.Output.Write(“{“word”:“はろーわーるど"}"); Response.End(); } Responseに出力する中身をどうするかは システムの仕様に従う。 アイデア次第で、 おもしろいWebサービスが作れるかも!?
  64. 64. まとめ • バックエンドを置くと、色々メリットがあります。 重い処理が回せる、クライアント側の負荷低減等 • しかし覚悟も必要! • Clalisの公開APIを使うと、色々できます 形態素解析、メタ感情付与、口調変換、Web日本語抽出etc… • Webサービスを作るのは簡単です! アイデアを具現化することはすぐにできる!
  65. 65. ありがとうございました!
  66. 66. 補足 URLなど① LiplisWebサイト Liplisにご興味を持って頂けましたら、サイトをチェックしてみてください。 http://liplis.mine.nu/LiplisWiki/webroot/?LipliStyle GitHub LiplisのソースコードやClalisを使うためのサンプルはこちらからどうぞ https://github.com/LipliStyle?tab=repositories Liplisライブラリ スライド内でVoiceRoid連携の機能の紹介で出てきたLiplisのライブラリです。 http://liplis.mine.nu/File/LiplisCommon.zip NoralisEditor 簡単 デスクトップマスコット作成で出てきたツールです。 http://liplis.mine.nu/LiplisWiki/webroot/?NoralisEditor
  67. 67. 補足 URLなど② Liplis Liplisにご興味を持って頂けましたら、サイトをチェックしてみてください。 Windows http://liplis.mine.nu/File/LiplisWindows4.6.0.zip Android https://play.google.com/store/apps/details?id=little.cute.renew iOS https://itunes.apple.com/jp/app/liplis-chitchakawaii-desukutoppumasukotto/id993402365?mt=8 Liplis エモーションチェッカー アプリ版 http://liplis.mine.nu/LiplisWiki/webroot/?LiplisEmotionChecker Web版 http://liplis.mine.nu/LiplisEmotionCheckerWeb/index.aspx
  68. 68. 連絡先など 質問などありましたら、こちらにご連絡下さい! LipliStyle さちん liplistyle@gmail.com

×