Vue + Electron で Discordの連携アプリを作ろう！！その1 (開発環境とRich Presence)

#今回作るもの
開発環境
electron起動時にdiscordにRich Presence (Activity)を表示させる

#事前に用意するもの
1. [Discord for desktop](https://discordapp.com/) # これがないと始まらない。

2. Discord アカウント # これもないと始まらない
3. [Discord Developer Portal](https://discordapp.com/developers/applications/) でアプリケーションを追加してClient ID をメモっておこう
4. [node.js](https://nodejs.org/ja/) # 推奨されてるやつ入れとけばいいよ
5. 適当なテキストエディタ # 私は[VScode](https://code.visualstudio.com/)使ってるよ

---
とりあえずリポジトリ置いとくね
https://github.com/6sRyuSK/discord-rpc-vue-electron

#準備編　その1

Vue-Cli 3 をインストール

```bash
$ npm i -g @vue/cli
```
Vueプロジェクトを作成

```bash
$ vue create discord-rpc-vue-electron

# 以下のように設定していきます。
Vue CLI v3.10.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: (Use arrow keys)
  Use Yarn
> Use NPM
# ここでpackage managerを何にするか聞かれます。
# Yarn は別途でインストールする必要があります。
# NPMでも構いませんが私はYarnを使用しました。
```

```bash
$ cd discord-rpc-vue-electron
$ yarn serve
```

http://localhost:8080
いつものアレが出てきます。

ここで初めてwebページを作った方はいったんTwitterに

> 
今作ってるwebページです!!!!!
http://localhost:8080


このようにツイートすると場が和み得点UPです!

##その2

```bash
$ vue add electron-builder
```
electron-builderをインストールします。
ここでelectronのバージョンを何にするか聞かれますが、
今回は`6.0.0`(投稿時最新版)にしました。

```bash
$ yarn electron:serve
```
ここで正常に動作するか確認しましょう。

この時点で`src/background.js`が作られています。
これがelectronのメインプロセスになります。

---
ですがこのままだとファイルがごっちゃになって分かりにくいので
ディレクトリを移動させましょう。
`src/electron/background.js`
に移動させました。自分でフォルダを作ってください。

またメインプロセスのPathを設定してあげないといけません。

```js:vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/electron/background.js'
    }
  }
}

```
このようなファイルを`package.json`と同じ階層に作りましょう。
ファイルの名前は`vue.config.js`にしましょう。

##その3

```bash
$ yarn add discord-rpc # or $ npm i --save discord-rpc
```
ここでdiscord-rpcのライブラリをインストールします。

ここでも`vue.config.js`に記述することがあります。

```js:vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/electron/background.js',
      // electron上で使用するnode_moduleを記述する。
      externals: ['discord-rpc']
    }
  }
}

```
このように設定しておきましょう!

これで準備編完了です

# 実装編 (Rich Presence編)
実装編です
さっそくdiscord-rpcをさわっていきましょ
ファイル作ります。

```javascript:/src/electron/discordRPC/index.js
import RPC from 'discord-rpc'

const clientId = '' //ここでclientIDを定義します
const scopes = ['rpc', 'rpc.api']

const client = new RPC.Client({ transport: 'ipc' })
export const login = () => {
  client.on('ready', () => {
    console.log('Logged in as', client.application.name)
    console.log('Authed for user', client.user.username)
    client.setActivity({
      details: 'testing Discord-rpc'
    })
  })
  // Log in to RPC with client id
  client.login({ clientId, scopes })
}

```
3行目に[discord developer portal](https://discordapp.com/developers/applications) で作成したアプリのclientIDを入力してください。

---

```javascript:src/electron/background.js
import * as discordRPC from './discordRPC'

function created () {
  discordRPC.login()
}
```

`background.js`のどこにでもいいのでこのような行を追加しましょう。

```js:src/electron/background.js
function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

  win.on('closed', () => {
    win = null
  })
  created()
}
```
このように`createWindow`の一番最後に`created()`を追加します。

セーブするのを忘れずに
discord(Desktop)を起動している状態で

```bash
$ yarn electron:serve
```

discordで認証画面が出ると思うので、認証しましょう。
そうすると無事にdiscord activityが表示されていると思います。

#参考にしたあれこれ
[electron-vue の electron のバージョンが古いとお悩みのあなたへ](https://qiita.com/TR246/items/7cf21281c171af84cc13)

[Discord Developer Portal DOC](https://discordapp.com/developers/docs/topics/rpc)

[Vue CLI Plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/)
# まとめ
今回は開発環境構築から入ったので内容は薄めですね。
その2ではVueのほうを触っていきたいと思います。
入力した情報をactivityのdetailやstateに反映させる感じ。

一通りdiscord RPCの機能を使ってみたいなーって感じで続いていけばいいですかね。

Twitter [@6sRyuSk](https://twitter.com/6sRyuSk)