Electronでアプリ内部にWebサーバーを立てる

More than 3 years have passed since last update.


概要

Electronで作ったアプリからJavascriptでgoogleのAPIを使おうとするとローカルファイルを読み込んだだけではドメインの制限がかかってしまい使えません。

Electronはnodejsで書くんだからhttpサーバー立ててローカルに読み込みに行けばいいじゃないかと。

Electronは下記を参考にしました。

30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで


やったこと


アプリ内部でWebサーバー

静的ファイルをロードしたいだけなのでExpressなどは使わずnode-statichttpを使ってサーバーを立てます。


mian.js

"use strict";

var nodeStatic = require('node-static');
var file = new nodeStatic.Server(__dirname + '/html');

require('http').createServer(function (request, response) {
request.addListener('end', function () {
file.serve(request, response);
}).resume();
}).listen(7170);//ポートは空いていそうなところで。

var app = require('app');

var mainWindow = null;

app.on('window-all-closed', () => app.quit());
app.on('ready', () => {
mainWindow = new BrowserWindow({
width: 480,
height: 600,
resizable: false,
alwaysOnTop: true,
movable: false
});

//ローカルで立てたサーバーにアクセス
mainWindow.loadURL('http://localhost:7170/index.html');

// ウィンドウが閉じられたらアプリも終了
mainWindow.on('closed', () => mainWindow = null );

});



googleAPIでの設定

Google Developers ConsoleでAPI Manager->認証情報->OAuth 2.0 クライアント ID

で「承認済みの JavaScript 生成元」にhttp://localhost:7170を追加。


問題点

Webサーバーを立てているだけなので、ブラウザを使ってhttp://localhost:7170にアクセス出来てしまう。