#今回作るもの
開発環境
electron起動時にdiscordにRich Presence (Activity)を表示させる
#事前に用意するもの
-
Discord for desktop # これがないと始まらない。
-
Discord アカウント # これもないと始まらない
-
Discord Developer Portal でアプリケーションを追加してClient ID をメモっておこう
-
node.js # 推奨されてるやつ入れとけばいいよ
-
適当なテキストエディタ # 私はVScode使ってるよ
とりあえずリポジトリ置いとくね
https://github.com/6sRyuSK/discord-rpc-vue-electron
#準備編 その1
Vue-Cli 3 をインストール
$ npm i -g @vue/cli
Vueプロジェクトを作成
$ 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を使用しました。
$ cd discord-rpc-vue-electron
$ yarn serve
http://localhost:8080
いつものアレが出てきます。
ここで初めてwebページを作った方はいったんTwitterに
今作ってるwebページです!!!!!
http://localhost:8080
このようにツイートすると場が和み得点UPです!
##その2
$ vue add electron-builder
electron-builderをインストールします。
ここでelectronのバージョンを何にするか聞かれますが、
今回は6.0.0(投稿時最新版)にしました。
$ yarn electron:serve
ここで正常に動作するか確認しましょう。
この時点でsrc/background.jsが作られています。
これがelectronのメインプロセスになります。
ですがこのままだとファイルがごっちゃになって分かりにくいので
ディレクトリを移動させましょう。
src/electron/background.js
に移動させました。自分でフォルダを作ってください。
またメインプロセスのPathを設定してあげないといけません。
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/electron/background.js'
}
}
}
このようなファイルをpackage.jsonと同じ階層に作りましょう。
ファイルの名前はvue.config.jsにしましょう。
##その3
$ yarn add discord-rpc # or $ npm i --save discord-rpc
ここでdiscord-rpcのライブラリをインストールします。
ここでもvue.config.jsに記述することがあります。
module.exports = {
pluginOptions: {
electronBuilder: {
mainProcessFile: 'src/electron/background.js',
// electron上で使用するnode_moduleを記述する。
externals: ['discord-rpc']
}
}
}
このように設定しておきましょう!
これで準備編完了です
実装編 (Rich Presence編)
実装編です
さっそくdiscord-rpcをさわっていきましょ
ファイル作ります。
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 で作成したアプリのclientIDを入力してください。
import * as discordRPC from './discordRPC'
function created () {
discordRPC.login()
}
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)を起動している状態で
$ yarn electron:serve
discordで認証画面が出ると思うので、認証しましょう。
そうすると無事にdiscord activityが表示されていると思います。
#参考にしたあれこれ
electron-vue の electron のバージョンが古いとお悩みのあなたへ
Vue CLI Plugin Electron Builder
まとめ
今回は開発環境構築から入ったので内容は薄めですね。
その2ではVueのほうを触っていきたいと思います。
入力した情報をactivityのdetailやstateに反映させる感じ。
一通りdiscord RPCの機能を使ってみたいなーって感じで続いていけばいいですかね。
Twitter @6sRyuSk