LoginSignup
43
46

More than 5 years have passed since last update.

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

Last updated at Posted at 2016-03-07

概要

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にアクセス出来てしまう。

43
46
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43
46