electronでビューアーをつくる(1)

Pocket
LINEで送る

こんにちは!

みなさんマジック・ザ・ギャザリングというトレーディングカードゲームをご存知でしょうか?(ウィキペディア)

1993年に発売された世界初のトレーディングカードゲーム(TCG)である。公式にはマジック、のように略され、他にもギャザなどと呼ばれる。このほか、「もっともよく遊ばれているTCG」などでもギネス世界記録に認定している。

僕は中高生のときにすごくはまってました。テンペストからウルザブロックあたりまでやってましたね。それ以降はカードを処分してやめていたのですが、2.3年前くらいからまた興味がでてきて毎日のようにネットでマジック・ザ・ギャザリングの情報を見るようになりました。

調べる確認するサイトは主に下記2つです。

公式ウェブサイトでは、最新のカードを画像つき(今だとモダンホライズン)で発表したり、プロによるデッキの解説記事(ほぼ毎日更新。例えばこのページ)がのってます。MTG Wikはカードやデッキごとに詳しい解説がついてます。また関連情報も豊富です。

デッキ解説記事はこんな感じ(カード名をホバーすると、カード画像が表示されます。これはすごく便利!)

スクリーンショット 2019-06-04 10.52.13

 

僕は更新されたデッキ解説記事を見て、気になるカードがあったらWikiで調べるようにしてます。ただ、気になるカードがでてくるたびに、Wiki内でそのカード名を検索して探すという作業が結構面倒くさいなぁと思ってました。

そこで、カードをホバーすると、そのwikiページが表示されるビューアーを作りたいなと思って、今回はelectronで作成しようと思いました。

IMG_9958

まずはelecttronで公式ページを表示できるところまで作成しようかと思います。

 

1. まずはelectronをインストールします。

mkdir mtg-viewer
cd mtg-viewer/
npm init
npm install --save-dev electron

package.jsonが作成されます。

{
 "name": "mtg-viewer",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "electron": "^5.0.2"
 }
}

2. index.jsを作成します。

const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
 // ブラウザの高さ、横幅を指定
 win = new BrowserWindow({width: 800, height: 600});
 // 表示したいページを指定する
 win.loadURL('https://mtg-jp.com/reading/iwashowdeck/0032564/')
 win.on('closed', () => { win = null; });
}

// electron起動でwindow作成
app.on('ready', createWindow);
// windowを削除すると、アプリ停止させる
app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') app.quit();
});

3. 起動する

electron .

スクリーンショット 2019-06-04 11.48.50

サイト情報が表示されるようになりました。簡単ですね。

次にネットワーク情報を取得できるようにしてみたいと思います。デバッグコマンドをONにしてネットワークのデバッグができるようにします。

4. カードをホバーした場合にのみリクエストURLをコンソール上で表示するようにする

const {app, BrowserWindow} = require('electron');
let win;

function createWindow() {
 // ブラウザの高さ、横幅を指定
 win = new BrowserWindow({width: 800, height: 600});
 // 表示したいページを指定する
 win.loadURL('https://mtg-jp.com/reading/iwashowdeck/0032564/')
 win.on('closed', () => { win = null; });

 try {
 win.webContents.debugger.attach('1.1')
 } catch (err) {
 console.log('Debugger attach failed : ', err)
 }

// デタッチされた場合にコンソール出力する
 win.webContents.debugger.on('detach', (event, reason) => {
 console.log('Debugger detached due to : ', reason)
 })

 // 計測イベントが発生するたびに呼ばれる
 win.webContents.debugger.on('message', (event, method, params) => {
 if (method === 'Network.requestWillBeSent') {
 // カード情報をホバーした場合のURLをコンソール上で表示
 if (params.request.url.match(/https:\/\/mtg\-jp\.com\/\?_action\=getImage&jpn\=/)) {
 console.log(params.request.url)
 }
 }
 })

 // ネットワークのキャプチャを有効にする
 win.webContents.debugger.sendCommand('Network.enable')
}

app.on('ready', createWindow);
// windowを削除すると、アプリ停止させる
app.on('window-all-closed', () => {
 if (process.platform !== 'darwin') app.quit();
});

5. カード名をホバーすると、そのカードのリクエストが表示されるようになりました。

 

スクリーンショット 2019-06-04 11.59.04

 

次回はこのリクエストをもとにWiki内の対応するページを別ペインで表示できるようにしたいと思います。

Pocket
LINEで送る