ElectronでSalesforce1をネイティブアプリ化できるか？

# はじめに
この記事を見て、簡単にできるもんだなぁ、と思い、Electronを利用してSalesforce1をネイティブのデスクトップアプリにできるか試してみました。
[ElectronでReact/Salesforceなデスクトップアプリを作ってみた - SkyVisualEditor Blog](http://info.skyvisualeditor.com/blog/2016/160208_001566.php)

~~結果から言うとうまく行かなかったので、残念な報告を読みたくない方はここから先は読む必要はないです。~~

# Electronアプリを作成する

## Electronをインストールする
npm で electron をインストール。

```bash
$ npm install electron-prebuilt -g
```

## Electronアプリを実装する
適当なフォルダを作成し、package.jsonを作成。

```bash
$ npm init -y
```

package.json を エディタで開き、 `"start": "electron .",` を追記して、electron を起動するように変更。 

```js:package.json
{
  "name": "electron-salesforce",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
```

アプリの本体となるJavaScriptファイルを作成。

```js:index.js
var app = require('app');
var BrowserWindow = require('browser-window');

var startUrl = 'https://login.salesforce.com/';

var mainWindow = null;
app.on('window-all-closed', function() {
    app.quit();
});

app.on('ready', function() {
        var mainWindow = new BrowserWindow({ width: 800, height: 600});
        mainWindow.loadUrl(startUrl);
        mainWindow.on('closed', function() {
                mainWindow = null;
        });
});
```

## Electronを実行してみる
これで一応アプリは完成したので、実行。

```bash
$ npm start
```

こんな感じで Salesforce のログイン画面を表示できました。

![スクリーンショット 2016-02-09 23.42.46.png](https://qiita-image-store.s3.amazonaws.com/0/33258/e550d7d8-6e6b-b01d-3a0c-3a08129e09ef.png)

# 動作確認
## Salesforce Classic での動作確認
Salesforce Classic にログインすると、正しく画面表示されました。なんとなく動きそうです。
![スクリーンショット 2016-02-09 23.51.47.png](https://qiita-image-store.s3.amazonaws.com/0/33258/16f7e5a1-bdc6-d788-9aeb-4085615e5b35.png)

## Lightning Experience での動作確認
Lightning Experience に切り替えてログインすると、スプラッシュ画面のまま先に進みませんでした。
![スクリーンショット 2016-02-09 23.49.35.png](https://qiita-image-store.s3.amazonaws.com/0/33258/336a33e2-b7f4-cfbc-0d92-1f060fcb3207.png)

## Salesforce1 での動作確認
### User-Agentを偽装する
Salesforce1 に切り替えてみます。Salesforce1 にログインするためには、裏技が利用できなくなったので User-Agent を偽装する必要があります。

Electron で User-Agent を偽装するには、`loadUrl` をコールする際の第2引数で User-Agent を与えてやればよいので、下記のように修正。偽装する User-Agent は iOS9 の Safari にしています。

```js:index.js
var app = require('app');
var BrowserWindow = require('browser-window');

var startUrl = 'https://login.salesforce.com/';
var userAgent = 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13A344 Safari/601.1';

require('crash-reporter').start();
var mainWindow = null;
app.on('window-all-closed', function() {
    app.quit();
});

app.on('ready', function() {
        var mainWindow = new BrowserWindow({ width: 800, height: 600});
        mainWindow.loadUrl(startUrl, { userAgent: userAgent });
        mainWindow.on('closed', function() {
                mainWindow = null;
        });
});
```

### Salesforce1 での動作確認
User-Agent を追加してログインすると、Salesforce1 のスプラッシュ画面は表示されますが、Lightning Experience と同様動かなくしました。
![スクリーンショット 2016-02-10 0.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/33258/bd51ce5c-055c-58fd-4e40-e3fb4e041f7f.png)

# (2016/2/11追記)動作しました！
コメントいただいた方法を試したところ、すんなりと画面を開くことができました。ありがとうございます！

```js:index.js
...
-    var mainWindow = new BrowserWindow({ width: 800, height: 600});
+    var mainWindow = new BrowserWindow({ width: 800, height: 600, nodeIntegration: false });
...
```

## Lightning Experience
Electron で Lightning Experience を開いたところです。

![スクリーンショット 2016-02-10 23.44.36.png](https://qiita-image-store.s3.amazonaws.com/0/33258/b1482cfb-dd43-9288-ee22-ac7f9a260edb.png)

## Salesforce1
Electron で Salesforce1 を開いたところです。

![スクリーンショット 2016-02-10 23.47.07.png](https://qiita-image-store.s3.amazonaws.com/0/33258/cfb3791d-ab3c-ce4b-cb0d-2fa111296006.png)

# まとめ
今回はElectronを利用して、SalesforceがWebViewで表示できるか検証してみました。結果をまとめると、下記のようになりました。

| 対象アプリ             | 表示可否      |
|:---------------------|:------------:|
| Salesforce Classic   | ◯            |
| Lightning Experience | ~~✕~~ ◯      |
| Salesforce1          | ~~✕~~ ◯      |

~~なかなかWebViewで動かすのは難しいようです。~~

# 捕捉
Electron初心者なので、こうやれば回避できるの常識だろ、とか知りそうな気もしていますので、これ試してみたら？とかありましたら、よろしくお願いします。