<h2>はじめに</h2>

<p>合同会社EXNOA プラットフォームシステム部の知久です。</p>

<p>普段はNativeアプリチームのメンバーとして、EXNOAでサービスしているDMMGamePlayerからAPIサーバまで開発を担当しています。</p>

<p>この記事では、EXNOAで作成したElectronアプリケーションの高速化に関するノウハウについて紹介します。</p>

<p>EXNOAでは過去の5年間運用したDMMGamePlayerというWindowsまたはMacOS上で動作するアプリケーションのリプレースのため、新たにデスクトップアプリケーションを開発しています。この開発作業の間に起こった紆余曲折について紹介したいと思います。</p>

<h2>DMMGamePlayerとは</h2>

<p>DMMGamePlayerとはゲームのランチャーです。DMM Gamesでサービスしているゲームをユーザに提供するためのデスクトップアプリケーションです。</p>

<p>ユーザが購入または利用登録して遊べるようにしたゲームをインストールしたり、ゲームを起動したりします。</p>

<figure title="DMM Game Player">
<p><img alt="f:id:dmmlabotech:20201222063252p:plain" height="600" itemprop="image" src="https://image.dmm-corp.com/nyntzxvl6a6mf3yf2sgjiczfxr2w" title="" width="1200" /></p>

<figcaption>ゲームランチャー DMMGamePlayer</figcaption>
</figure>

<h2>必要な機能</h2>

<p>ゲームのランチャーに必要な要素を大雑把に定義すると</p>

<ul>
	<li>ゲームがダウンロード・インストールできること</li>
	<li>ゲームの起動ができること</li>
	<li>ログインなどの認証機能</li>
</ul>

<p>です。</p>

<p>ブラウザではユーザのファイル操作はできないため、主な機能はユーザのPC内にあるゲーム関連ファイルの操作になります。</p>

<h2>技術選択の理由</h2>

<p>WindowsでもMacOSでも動作するデスクトップアプリケーションを作るにあたっては、方法はいろいろあります。</p>

<p>スタンダードにC++による開発でも、中間コードを生成する言語（JavaとかC#）でも良いですが、私たちはElectronを選びました。 主な理由としては</p>

<ul>
	<li>WindowsとMacOSで二重管理となるコードを書きたくない</li>
	<li>アプリ作成から継続的にアップデートして配信していくフローがサポートされている</li>
	<li>部署の大半がWEBエンジニアである</li>
</ul>

<p>などです。</p>

<p>ElectronはWindowsとMacOS両方に対応してアプリを生成できるため、ひとつのコードで両方のOSに対処できます。</p>

<p>ElectronはWEB技術でデスクトップアプリケーションを作れるため、ソースコードを弄れるエンジニアがネイティブアプリケーションを開発している人に限られる、 という事態を回避することができ、WEBページと同じような感覚でアプリの画面を作成できます。</p>

<p>実際、Electronを採用したことで画面作成（HTMLとCSSで構成されているもの）をWEB側のフロントエンド開発のメンバーに任せることができたので、 アプリのメインプロセス（処理）を実装するメンバーとレンダープロセス（画面）を作るメンバーで分業もできました。</p>

<p>また、WEB開発で重宝されているReactも採用しており、多人数で開発するため型安全を考慮してTypeScriptも導入しています。</p>

<p>これらのメリットにより、以前は一人で2ヶ月かけて開発した機能が、画面とビジネスロジックの開発者で分業することによって3週間でできたこともありました。</p>

<h2>苦手な分野</h2>

<p>様々なメリットがあるElectronですが、苦手な分野もあります。それは並列処理です。</p>

<p>JavaScriptは他の言語でいうマルチスレッド処理が苦手なため、パフォーマンスが非常に悪くなってしまう処理が散見されます。</p>

<p>ゲームのランチャーの機能において並列処理は重要です。</p>

<p>ゲームを構成するファイルは何千ファイルにもなることがあり、 それらを順次処理をしていると非常にレスポンスの悪いアプリケーションになってしまい、ゲームを起動するまでに時間がかかるなど利便性の低下にも繋がります。</p>

<p>&nbsp;</p>

<figure title="Electon の処理はrendererプロセスとmainプロセスで分かれているものの、処理はシングルスレッドで直列的です。">
<p><img alt="f:id:dmmlabotech:20201222063525p:plain" height="147" itemprop="image" src="https://image.dmm-corp.com/7rabz3yaa8q9t8f77ivj5s4je5pa" title="" width="641" /></p>

<figcaption>Electon の処理はrendererプロセスとmainプロセスで分かれているものの、処理はシングルスレッドで直列的です。</figcaption>
</figure>

<h2>Electronの中にGo</h2>

<p>Electronでもメインプロセスの処理で並列処理を行いたいと考えた私は、nodejsのNative Addonを利用してパフォーマンスアップを図ることにしました。</p>

<p>Native Addonとは一言でいうとdllです。nodejsはDLLのバイナリファイルをランタイムで呼び出して、その関数を利用することができます。</p>

<p>一般的にdllファイルはCまたはC++を利用して作るのですが、それだと「部署の大半がWEBエンジニアである」という問題をクリアできません。</p>

<p>CやC++は、WEB開発者はほとんど使わないので学習コストがかかります。できれば学習コスト0でいきなり開発に入りたいものです。</p>

<p>そこで、dllの作成にGo言語を採用しました。Go言語は言わずと知れたWebアプリケーションの作成で利用されている汎用言語でパフォーマンスが良く、言語の特徴であるgoroutineは強力に並列処理の実装をサポートします。また、Go言語はCGOというライブラリを利用してCと互換性のあるAPIを実装することができ、build時にbuildmodeオプションを付けることによってdllバイナリを生成することができます。</p>

<p>&nbsp;</p>

<figure title="Electon の処理はrendererプロセスとmainプロセスで分かれているものの、処理はシングルスレッドで直列的です。">
<table border="1" cellpadding="1" cellspacing="1" style="width:500px;">
	<tbody>
		<tr>
			<td><code>go build -buildmode=c-shared -o mylibrary.dll</code></td>
		</tr>
	</tbody>
</table>

<figcaption>&nbsp;Go言語でdllを出力するbuildmodeオプション</figcaption>
</figure>

<p>&nbsp;</p>

<p>dllを作成して、メインプロセスの処理の一部をdllが行い、レンダープロセス（画面）は今までどおりTypeScriptで行うようにしました。</p>

<p>dllをMacOSで呼ぶにはElectronアプリ本体と同じ署名を持っていないとダメだとか、dllはasarの外に置く必要があるとか、Electronにdllを組み込むには悪戦苦闘しましたが、最終的には Electron でバックグラウンドにGoを利用したアプリができあがりました。</p>

<p>&nbsp;</p>

<p><strong>dllにある関数をtypescriptから呼び出せるように定義する</strong></p>

<pre>
<code>import * as ffi from 'ffi-napi';



const f: any = ffi.Library(dllPath, {

    Init: ['void', ['string']],

    LogInfo: ['void', ['string']],

    LogError: ['void', ['string']],

    StartGrpc: ['void', ['int']],

    StopGrpc: ['void', []],

    SetUser: ['void', ['string', 'string', 'string', 'string', 'string', 'string', 'string']],

    FileDownload: ['string', ['string', 'string']],

    FileDownloadBulk: ['string', ['string']],

});</code></pre>

<p>&nbsp;</p>

<p><strong>Goのdllのエントリーポイント定義部分の一部</strong></p>

<pre>
<code>package main



import "C"



func main() {

}



//export FileDownload

func FileDownload(url, localPath *C.char) *C.char {

    result := fileDownload(C.GoString(url), C.GoString(localPath))

    return C.CString(result)

}</code></pre>

<p>&nbsp;</p>

<figure title="Electronのmainプロセスからdllを呼び出すことによって処理が並列になります。">
<p><img alt="f:id:dmmlabotech:20201222063836p:plain" height="227" itemprop="image" src="https://image.dmm-corp.com/opp87gn7lcluumwtc7xl2h2o05ay" title="" width="641" /></p>

<figcaption>Electronのmainプロセスからdllを呼び出すことによって処理が並列になります。</figcaption>
</figure>

<h2>並列処理の効果</h2>

<p>ElectronアプリにGo言語で作ったdllを入れました。これにより並列処理ができるようになり、重たいバックグラウンド処理も軽量化することができました。</p>

<p>&nbsp;</p>

<center><img alt="f:id:dmmlabotech:20201222063857p:plain" height="376" itemprop="image" src="https://image.dmm-corp.com/cirv8me5dop5qnbkkvygr8aeu2ri" title="" width="603" /></center>

<p>この図は、実際にサービスされているあるゲームのダウンロードにかかる時間を計測したものです。</p>

<p>TypeScriptのみでゲームを構成するファイル全てを逐次ダウンロードしたものと、TypeScriptからダウンロードを並列処理するdllの処理を呼び出したものの比較です。</p>

<p>dll側のダウンロードはTypescriptからdllを呼び出しているので呼び出しのオーバヘッドがあるにもかかわらず複数のファイルを一斉にダウンロードする場合、dllの方が大きくTypeScriptの処理を上回っていました。</p>

<h2>まとめ</h2>

<p>今回の記事ではElectronにGoで作ったdllを組み込んで並列処理を行えるようにした高速化を紹介しました。</p>

<p>ElectronにGoのdllが利用できる利点は大きく、現在リリースされているバージョンのアプリでは他のアプリで利用したGoのライブラリも組み込まれています。</p>

<p>もちろんGoでできたサーバと共通のライブラリを利用して開発をすることも可能なので、今後は実行速度によるパフォーマンスだけでなくアプリの開発の速度の高速化にも寄与してくれそうです。</p>

<p>&nbsp;</p>

<p>ることによってdllバイナリを生成することができます。</p>

<p>&nbsp;</p>

<table border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td>
			<p><code>go build -buildmode=c-shared -o mylibrary.dll</code></p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;Go言語でdllを出力するbuildmodeオプション</p>

<p>&nbsp;</p>


Go言語でElectronアプリケーションの高速化を実現した話

facebook

twitter

DMM TV

DMMブックス

DMM pictures

DMM GAMES

DMMオンクレ

DMMスクラッチ

DMMくじ

DMMオンラインサロン

DMMいろいろレンタル

DMM DVD／CDレンタル

DMM通販

DMMオンラインクリニック

デジタルコミック事業

DMMチャットブースト

DMM英会話

DMMかりゆし水族館

ベルリング

ハッシャダイソーシャル

ヤンキーインターン

シント=トロイデンVV

DMM地方創生

DMM.make AKIBA

DMM.make 3Dプリント

Seamoon Protcol by DM2C Studio

ONE DAY DESIGN

DMM WEBCAMP

DMMぱちタウン

DMM競輪

Algoage

DMM EV CHARGE

DMMポイントクラブ

社会課題

エンターテインメント

動画

電子書籍

アニメ

ゲーム

アプリゲーム

コミュニティ

オンラインサロン

PCゲーム

オンラインイベント

ビジネスソリューション

教育

英会話

水族館

救急車両

消防車両

モノづくり施設

サッカー

スポーツ

地方創生

Web3

研究開発

アプリ

ブロックチェーン

プラットフォーム

横断開発

インフラ

アミューズメント

同人

サーバサイド

バックエンド

フロントエンド

ネットワーク

セキュリティ

配信基盤

ペイメント

Android

データベース

ビッグデータ

フルスタック

データ分析

機械学習

プロトタイピング

グラフィックデザイン

3DCG

モーショングラフィック

プロダクトデザイン

コピーライティング

サービスデザイン

コンテンツ管理・制作

ブランディング

マーケティング

企画

編集

営業

プロモーション

Go言語でElectronアプリケーションの高速化を実現した話

シェア