Electron で AWS Management Console をデスクトップアプリ化してみた

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

AWS Management Console をデスクトップアプリ化

Electron は HTML / CSS / Javascript を使ってクロスプラットフォームに対応したデスクトップアプリを作ることができる、先日バージョン 1.0 がリリースされたばかりのプラットフォームです。Web アプリ開発者が慣れ親しんだ環境でデスクトップアプリを開発することができます。

@IT に寄稿した記事にも詳しく書いていますので、こちらもご参照ください。

ブラウザで開くような感覚で、デスクトップアプリを作ることができるのが特徴です。デスクトップアプリを一から作るのも大変面白いですが、Web アプリをそのままデスクトップアプリにすることもできてしまいます。

そこで今回は AWS Management Console をそのままデスクトップアプリにしてみました。

アプリの開発

まずはディレクトリを作成し、

$ mkdir aws-mc && cd aws-mc

package.json を作りましょう。

{
  "name"    : "aws-mc",
  "version" : "1.0.0",
  "main"    : "main.js"
}

main.js はウインドウを1画面出すだけです。

// electronモジュールを読み込み
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
 
// 新しいウィンドウ(Webページ)を生成
let mainWindow
function createWindow () {
  // BrowserWindowインスタンスを生成
  mainWindow = new BrowserWindow({width: 1280, height: 800})
  // index.htmlを表示
  mainWindow.loadURL('file://' + __dirname + '/index.html')
  // ウィンドウを閉じたら参照を破棄
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
 
// アプリの準備が整ったらウィンドウを表示
app.on('ready', createWindow)
 
// 全てのウィンドウを閉じたらアプリを終了
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html で、Innner HTML として表示します。ログイン URL はアカウントによって変わるので、もし試す場合は適宜変更してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>AWS Management Console</title>
</head>
<body>
  <webview id="mainWebview" src="https://xxxxxxxxxxxx.signin.aws.amazon.com/console" autosize="on"></webview>
  <style>
  webview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  </style>
</body>
</html>

実行してみる

electron-prebuilt を npm でインストールします。

$ npm install electron-prebuilt -g

あとは electron コマンドを実行すると、デバッグできます。

$ electron .

ログイン画面が出てきました。ログインします。

electron-aws-ma-01

ようこそ、AWS Management Console へ!

electron-aws-ma-02

利用は自己責任で

可能性を示す目的で、AWS Management Console をデスクトップアプリ化してみました。これで、例えばブラウザを再起動しないといけない事態が発生したとしても AWS Management Console を使い続けられますね!

しかしながら、Electron 公式では「Web ページ表示するときはブラウザ使ってね」と述べられています。これは、Electron が XSS をはじめとしたセキュリティ対策を行っていないためです。

また、Chronium ベースとはいえ、ブラウザとは異なる挙動が発生する可能性もあります。あくまで自己責任で使うようにしてください。

参考