概要
Electronで作ったアプリからJavascriptでgoogleのAPIを使おうとするとローカルファイルを読み込んだだけではドメインの制限がかかってしまい使えません。
Electronはnodejsで書くんだからhttpサーバー立ててローカルに読み込みに行けばいいじゃないかと。
Electronは下記を参考にしました。
30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで
やったこと
アプリ内部でWebサーバー
静的ファイルをロードしたいだけなのでExpress
などは使わずnode-static
とhttp
を使ってサーバーを立てます。
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
にアクセス出来てしまう。