「常に最前面で透過度とuserAgentが変更できる」ブラウザを、Electronで作ってみた

いなば

2016.10.03

こんにちは、フロントエンドエンジニアのいなばです。

コーディングのときの、「デザインとピッタリ合っているか」確認する作業って面倒ですよね。最近はHeliumとMaptureという便利なデスクトップアプリを組み合わせてコーディングをしています。

先日、モバイルサイトのコーディングをする際に、HeliumがuserAgentを変更できなかったので、『Electron』を、透過とuserAgentの変更ができるブラウザにするべく試行錯誤してみました。

今回の記事では、その過程と方法をご紹介します。

１画面でもピクセルパーフェクトを効率化したい

先日、弊社フロントエンドエンジニアのほりでーが、こんな感じで（↓）コーディングをしているのを見かけて、超便利そうだったので真似してみることにしました。

Web制作でデザインカンプを徹底再現する為の便利なアプリ

1画面でHTMLをプレビューしつつ、カンプとの差異を見ながらコーディングができてしまうのでモニターがなくてもはかどりそうです。

記事でも紹介されていますが、『Helium』『Mapture』という2つのアプリで実現しています。

Helium

スクリーンショット 2016-09-18 18.06.39

透過度と常に最前面配置、マウスイベントの無効化ができるブラウザ

http://heliumfloats.com/

Mapture

スクリーンショット 2016-09-18 18.07.57

画面の任意の範囲のキャプチャを撮り、透過度と常に最前面配置ができる

http://anatoo.jp/mapture/

モバイルサイトも透過ブラウザでコーディングしたい

Heliumはとても便利で、PCサイト~レスポンシブサイトのコーディングで大活躍してくれるのですが、

userAgentを変更することができない
デベロッパーツールを開くことができない

という2点が実行可能だったらもっと便利なのでは？　と思いました。

Electronならできそう

Electronのドキュメントを眺めてみると、どうやら求めている要件をすべて満たせそうでした。

ウィンドウの透過
最前面固定
マウスイベント無効化
userAgentを変更
デベロッパーツールを開く

というわけで、以前からElectronは気になっていたこともあり、触ってみることに。

Electronを触ってみよう

スクリーンショット 2016-09-18 18.05.21
http://electron.atom.io/

https://github.com/electron/electron-quick-start#to-use
単純に動かすだけならここにある通りにコマンドを実行すればすぐに動きます。

ChromiumからElectronを眺める
Electronのアーキテクチャに関してはこの記事がとても丁寧に解説されて参考になりました。

それではここからは、今回Electronをカスタマイズした内容の一部を、簡単にご紹介します。

ウィンドウの透過＆最前面固定

ウィンドウの透過と最前面固定をするために必須な設定は、下記の3つになります。

（１）alwaysOnTopをtrueにする
これで、ウィンドウが常に画面の最前面に固定されるようになります

（２）transparentをtrueにする
（３）hasShadowをfalseにする
transparentをtrueにするだけで透明にはなるのですが、リサイズした際などにウィンドウの影が復活してしまったので、hasShadowもfalseにしました。

index.js

const electron = require('electron');
const BrowserWindow = electron.BrowserWindow;
let mainWindow;

app.on('ready', () => {
  createWindow();
});

function createWindow() {
  let settings = {
    transparent: true,
    hasShadow: false,
    alwaysOnTop: true
  };
  mainWindow = new BrowserWindow(settings));
  /* 省略 */
}

この状態だと、ウィンドウは透過されますが、表示している中身のHTMLは透過されません。中身のHTMLの透過度は、cssから設定することで透過するブラウザを実現することができます。

マウスイベントの無効化

ElectronのBrowserWindowクラスから、「setIgnoreMouseEvents関数」を呼び出します。

http://electron.atom.io/docs/api/browser-window/#winsetignoremouseeventsignore

今回のデモでは、任意のメニューが実行されたタイミングと、Electronアプリのアイコンをクリックされた（アクティブになった）ときに マウスイベント無効化の制御を変更できるようにしてみました。

index.js (Electronアプリがアクティブになった際にマウスイベント無効化を解除の例）

app.on('activate', () => {
  if (mainWindow === null) {
    createWindow();
  } else {
    mainWindow.setIgnoreMouseEvents(false);
  }
});

メニューを追加する

アプリケーションメニューの追加は、「Menu」クラスから設定することができます。

index.js (アプリケーションメニューからElectronアプリのマウスイベント無効化を設定する例）

const electron = require('electron');
const Menu = electron.Menu;

/* 省略 */

app.on('ready', () => {
  createWindow();
  const menu = Menu.buildFromTemplate([
    {
      label: 'IgnoreMouseEvents',
      accelerator: 'Command+T',
      type: 'checkbox',
      checked: false,
      click: (e) => {
        mainWindow.setIgnoreMouseEvents(e.checked);
      }
    }
  ]);
  Menu.setApplicationMenu(menu);
});

/* 省略 */