サービス

技能：エンジニア

技能：デザイナー

技能：ビジネス職

技能：バックオフィス

ジャンル

<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アプリケーションの高速化を実現した話

シェア