Mac上でelectronをビルドしCentOSでFullscreen表示するまで

まえがき

electron を CentOS 上で Fullscreen 表示する、つまりサイネージ用として使い物になるかを確認するための作業をここにメモしておきます。

結果として、 Fullscreen は可能でしたが、画面のチラツキがあり、最終的に CentOS 上で electron の Fullscreen はやめることにしました。

VirtualBox をインストールする

Oracle VM VirtualBox Downloads Oracle Technology Network Oracle

こちらから VirtualBox をインストールします。

インストール作業は基本的に次へ次へで OK です。

VirtualBox 上に仮想マシンを作成する

新規ボタンをクリックし、ウィザードを起動します。

仮想マシンの作成

名前: CentOS 7.0
タイプ: Linux
バージョン: Red Hat (64-bit)

仮想メモリは 2GB ぐらいにしました。

仮想ハードディスクを作成するを選択し、作成をクリックします。

ハードディスクのファイルタイプは、 VDI を選択します。

物理ハードディスクにあるストレージは、可変サイズを選択します。

ファイルの場所とサイズは、 8GB にしました。

CentOS のダウンロードとインストール

CentOS Project

より、 CentOS をダウンロードします。

ダウンロードするタイプは、 DVD ISO です。

VirtualBox の画面の右のペインから、ストレージの IDE セカンダリマスターの部分をクリックします。

ここでダウンロードした CentOS のファイルを選択します。

CentOS を設定・起動する

VirtualBox の Start ボタンより CentOS を起動します。

Install CentOS 7 をクリックします。

インストールの概要で、ソフトウェアの選択をクリックします。

GNOME Desktop と GNOME アプリケーション にチェックを入れます。

あとは、ネットワークとホスト名、のところで Ethernet をオンにしておきましょう。

ここまでやって、インストール開始、をクリックし CentOS をインストールします。

インストール中、ユーザー作成ができるのでやってきましょう。

インストール後にログインすると、 GUI がある状態の CentOS が起動すると思います。

via: [仮想化ソフトウェアVirtualBoxにCentOS7.0をインストールする方法を紹介

株式会社エンライズコーポレーション](http://www.enrise-corp.co.jp/2185)

Mac 上で CentOS 用に electron をビルドする

Mac 上で Linux ビルドするには、以下のパッケージが必要になるので brew 経由でインストールしておきましょう。

Multi Platform Build · electron-userland/electron-builder Wiki

To build app for Linux on macOS:

$ brew install gnu-tar graphicsmagick xz

また、ぼくは electorn のビルドには electron-builder を使っているので、 target を AppImage にしてビルドします。

Options · electron-userland/electron-builder Wiki

ぼくは以下のようにしています。

"build": {
  "productName": "",
  "appId": "",
  "files": [
    "dist/",
    "node_modules/",
    "assets/",
    "app.html",
    "main.js",
    "main.js.map",
    "package.json"
  ],
  "dmg": {
    "contents": [
      {
        "x": 130,
        "y": 220
      },
      {
        "x": 410,
        "y": 220,
        "type": "link",
        "path": "/Applications"
      }
    ]
  },
  "win": {
    "target": [
      "nsis"
    ]
  },
  "linux": {
    "target": [
      "AppImage"
    ]
  },
  "directories": {
    "buildResources": "resources",
    "output": "release"
  }
},

ちなみに AppImage は [AppImage

Linux apps that run anywhere](http://appimage.org/) にあるように、 Linux 向けのアプリケーションを簡単に作れるアーキテクチャのようです。

Mac と CentOS とでファイルを渡せるように共有フォルダの設定をする

Guest Additions をインストールする

VirtualBox の仮想マシンのメニューから Devices → Install Guest Additions CD Images を選択します。

次に、挿入したイメージをマウントします。

$ mkdir /mnt/cdrom

$ mount -r /dev/cdrom /mnt/cdrom

マウントしたら、 VBoxLinuxAdditions.run を実行します。

$ cd /mnt/cdrom/

$ ./VBoxLinuxAdditions.run

エラーが出てしまったので、必要なものをインストールしておきます。

$ yum install gcc

$ yum install perl

$ yum install kernel-devel-$(uname -r) -y

再度インストールを実行します。

$ ./VBoxLinuxAdditions.run

ここまででフォルダ共有の下準備は完了です。

Mac と CentOS のフォルダを共有する

VirtualBox の仮想マシンの設定 → 共有フォルダから Mac のフォルダを追加します。

このとき、自動マウントと永続化するにチェックを入れます。

CentOS 側でシェアしたいフォルダを作成しマウントします。

$ mkdir /mnt/share

$ mount -t vboxsf share /mnt/share

ここまでやって、やっと Mac 側と CentOS 側でファイルを渡すことができるようになりました。

via:

VirtualBoxの共有フォルダ設定 – MacとCentOSでファイル共有

macにVirtualBoxをインストールしてCentOSを起動してホストとssh接続、最後に共有ディレクトリの設定まで

CentOS（Linux）上で electron を fullscreen 表示するには

fullscreen は Mac だととても簡単にできるのですが、 Windows ・ Linux だとちょっとややこしかったです。

const bw = new BrowserWindow({
  left: 0,
  top: 0,
  transparent: false,
  show: false,
  frame: false,
  resizable: true,
  kiosk: true,
  'always-on-top': true
});

// 画面の最大化
bw.maximize();
// 画面をリサイズできないようにする
bw.setResizable(false);