Edited at

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

More than 3 years have passed since last update.


はじめに

この記事を見て、簡単にできるもんだなぁ、と思い、Electronを利用してSalesforce1をネイティブのデスクトップアプリにできるか試してみました。

ElectronでReact/Salesforceなデスクトップアプリを作ってみた - SkyVisualEditor Blog

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


Electronアプリを作成する


Electronをインストールする

npm で electron をインストール。

$ npm install electron-prebuilt -g


Electronアプリを実装する

適当なフォルダを作成し、package.jsonを作成。

$ npm init -y

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


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ファイルを作成。


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を実行してみる

これで一応アプリは完成したので、実行。

$ npm start

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


動作確認


Salesforce Classic での動作確認

Salesforce Classic にログインすると、正しく画面表示されました。なんとなく動きそうです。


Lightning Experience での動作確認

Lightning Experience に切り替えてログインすると、スプラッシュ画面のまま先に進みませんでした。


Salesforce1 での動作確認


User-Agentを偽装する

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

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


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/2/11追記)動作しました!

コメントいただいた方法を試したところ、すんなりと画面を開くことができました。ありがとうございます!


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 を開いたところです。


Salesforce1

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


まとめ

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

対象アプリ
表示可否

Salesforce Classic

Lightning Experience

Salesforce1

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


捕捉

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