VCIにコメントを送るわんコメプラグインを作ってみる

現在バーチャルキャストの公式わんコメプラグインでは、
「ニコ生」と「YouTube」のみの対応となっています。

そこで今回はプラットフォーム関係なくYoutubeLiveに偽装するプラグインを作ってみました。
Node.jsについての理解がほとんどないのでふわふわした内容になります、ごめんなさい

**ギフトには対応していません**
**対応させたい場合は各自で処理を追加してください**

**3/23追記 ニコ生とyoutube以外のサイトだけ送信する処理に変更し、公式プラグインと共存できるようにしました**


# やり方
**①必要なものをダウンロードする**
**②中身を書き換えていく**
**③ライブラリのインストール**

**わんコメ導入済みの前提で進めます**
配信者のためのコメントアプリ「わんコメ」https://onecomme.com

# ①必要なものをダウンロードする
まず、わんコメプラグインはNode.jsが必要なのでダウンロードしインストールする
https://nodejs.org/ja/

次にわんコメサンプルプラグインのダウンロードをする
https://github.com/OneComme/OneCommeFilterSamplePlugin
（わからない方はplugin.jsの内容をコピーしてメモ帳に貼ってください）

# ②中身を書き換えていく
先ほどダウンロードまたはコピーしたスクリプトの内容を書き換えます
今回はOSC通信にnode-oscを使うのでまず一番上に
```ruby:書き方1
const osc = require("node-osc");
```
と書き足してください
後で記述したライブラリをインストールするので覚えておきましょう！
<br>次に上から書き換えていきます
```ruby:書き方2
module.exports = {
  name: 'わんコメバチャキャスフィルター', 
  uid: 'com.onecomme.plugin-filter-vcas2', 
  version: '1',
  author: 'YourName',
  permissions: ['filter.comment'], 
  defaultState: {},
```
のように書き換えてください
uidはプラグイン固有のIDなので他のプラグインと被らないような名前にしてください
<br>次にfilterCommentの処理を消し書き換えます
もともと書いてあったものを消しこの状態にします
```ruby:書き方3
  filterComment(comment, service, userData) {
  }
};
```

<br>消した部分に処理を追加していきます
```ruby:書き方4
  filterComment(comment, service, userData) {
    if (comment.service !== "niconama" && comment.service !== "youtube") {
    sendComment(comment.data.name, comment.data.comment, comment.data.displayName);
    }
    return comment
  }
};
  ```
  ここでcomment.dataの中からそれぞれの情報を取り出してsendComment呼び出し時にコメントデータを渡します
  ここで渡すデータはカスタマイズできるので詳しくはこちらを見てください
  https://developer.virtualcast.jp/vci-docs/manual/osc/onecomme_osc/youtube_comment.html

  <br>次に渡されたデータをOSCで送信する部分を書きましょう
  ```ruby:書き方5
  function sendComment(name, comment, displayName) {
    const client = new osc.Client("127.0.0.1", 19100);
    const formatComment = {
        name:String(name),
        hasGift:false,
        comment:String(comment),
        displayName:String(displayName)
    };
    const jsonData = JSON.stringify(formatComment);
    const jsonUtf8 = Buffer.from(jsonData, "utf-8");
    const message = new osc.Message("/vc-official/onecomme/youtube/comment", jsonUtf8);

    client.send(message, () => {
        client.close();
    });

}
```
ここでバーチャルキャストの指定しているポート19100を指定し送信します
送るデータはそれぞれ型が決まっているので追加する場合は要注意です
<br>また送るデータはutf-8にエンコードする必要があります
<br>アドレスは"/vc-official/onecomme/youtube/comment"にすることでYouTubeのコメントとして偽装しています

<br>ここまでできたら「plugin.js」として保存しましょう

# 全体像
```ruby:plugin.js
const osc = require("node-osc");

module.exports = {
  name: 'わんコメバチャキャスフィルター', 
  uid: 'com.onecomme.plugin-filter-vcas2', 
  version: '1',
  author: '@Yuri_Matsuo_V',
  permissions: ['filter.comment'], 
  defaultState: {},

  filterComment(comment, service, userData) {
    if (comment.service !== "niconama" && comment.service !== "youtube") {
    sendComment(comment.data.name, comment.data.comment, comment.data.displayName);
    }
    return comment
  }
};

function sendComment(name, comment, displayName) {
    const client = new osc.Client("127.0.0.1", 19100);
    const formatComment = {
        name:String(name),
        hasGift:false,
        comment:String(comment),
        displayName:String(displayName)
    };
    const jsonData = JSON.stringify(formatComment);
    const jsonUtf8 = Buffer.from(jsonData, "utf-8");
    const message = new osc.Message("/vc-official/onecomme/youtube/comment", jsonUtf8);

    client.send(message, () => {
        client.close();
    });

}
```

# ③ライブラリのインストール
最後にわんコメを起動し右上の「・・・」から「プラグイン」を選択
「プラグインフォルダ」をクリックしエクスプローラーが開かれたら
フォルダーを新規作成し先ほど作成した「plugin.js」をその中に入れます
<br>次に必要なライブラリをインストールします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/4043122/b3e69f6e-dc28-42c9-b510-64a542e23ab9.png)
エクスプローラー上部のアドレス部分に「cmd」と入力しEnterを押します
するとコマンドプロンプトが起動するので
```ruby:cmd
npm install node-osc
```
と入力しEnterを押すと必要なファイルがプラグインフォルダ内にインストールされます
「plugin.js」と同じ場所に「node_modules」というフォルダができていれば完了です。

# おわりに
このやり方は公式が対応するまでのつなぎでのやり方なのでVCIを作る際は公式のドキュメントに合わせて作るようにしましょう
<br>またプリセットにある公式のコメント窓VCIやアイコン落下VCIには対応していません
この2つはアイコンのURL情報も送らないと行けないので現時点では対応しないものとします
<br>私の公開しているコメント窓VCIでは対応しているのでそちらを使うか自作してみてください
https://virtualcast.jp/products/455a6982d3b060b6ef57d09381f715ccb08499b1d257a784b14940f819ac5180