概要
Electronでwebviewタグの使い方を試すのに、簡易ブラウザーを作成してみる。
- 任意のページを開く
- 入力フォームにURLを入力してEnterキー
- 入力したURLを
<webview>で読込み - Developer Toolsを開く
- 入力フォームに
devtoolsを入力してEnterキー -
<webview>のDeveloper Toolsを開く - ナビゲーション
-
<ボタンで戻る、>ボタンで進む、Reloadボタンで再読込み - Flash Player Pluginを有効にする
環境
- macOS High Sierra 10.13.4
- Electron v2.0.2
ファイル構成
package.json
app.js
index.html
style.css
plugin/PepperFlashPlayer.plugin
実装
package.json
{
"name": "BrowserDemo",
"version": "1.0.0",
"description": "Browser demo",
"main": "app.js",
"scripts": {
"start": "electron app.js"
},
"devDependencies": {
"electron": "^2.0.2"
}
}
app.js
const path = require('path')
const url = require('url')
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
let mainWindow
let pluginName
switch (process.platform) {
case 'win32':
pluginName = 'pepflashplayer.dll'
break
case 'darwin':
pluginName = 'PepperFlashPlayer.plugin'
break
case 'linux':
pluginName = 'libpepflashplayer.so'
break
}
function createWindow () {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
}
})
mainWindow.on('closed', () => {
mainWindow = null
})
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, 'plugin', pluginName))
app.on('ready', () => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
}
})
style.css
html {
width: 100%;
height: 100%;
}
body {
margin: 0; padding:0;
height: 100%;
}
#header-container {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 40px;
background-color: #EFF0EE;
}
#address-bar {
position: fixed;
padding: 5px;
width: -webkit-calc(100% - 130px);
max-height: 30px;
background-color: #EFF0EE;
color: #000000;
display: block;
white-space: nowrap;
}
#address-bar input {
width: -webkit-fill-available;
min-height: 20px;
font-size: 14px;
}
#address-bar button {
min-height: 20px;
font-size: 14px;
}
#browser-container {
margin-top: 40px;
position: bottom;
height: 100%;
}
#browser {
height: 100%;
width: 100%;
}
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Browser Demo</title>
<link rel="stylesheet" href="style.css">
<script>
onload = () => {
const didNavigete = (event) => {
document.getElementById('url').value = event.url
}
const webview = document.querySelector('webview')
webview.addEventListener('did-navigate', didNavigete)
}
goBack = () => {
const webview = document.querySelector('webview')
webview.goBack()
}
goForward = () => {
const webview = document.querySelector('webview')
webview.goForward()
}
reload = () => {
const webview = document.querySelector('webview')
webview.reload()
}
load = () => {
const webview = document.querySelector('webview')
const url = document.getElementById('url').value
if (url == 'devtools') {
openDevTools()
}
webview.loadURL(url)
}
go = () => {
if (window.event.keyCode == 13) {
load()
}
}
openDevTools = () => {
const webview = document.querySelector('webview')
webview.openDevTools()
}
</script>
</head>
<body>
<div id="header-container">
<div id="address-bar">
<button onclick="goBack();"><</button>
<button onclick="goForward();">></button>
<button onclick="reload();">Reload</button>
<input type="text" id="url" value="" onkeydown="go();"></input>
</div>
</div>
<div id="browser-container">
<webview id="browser" src="https://electronjs.org/" plugins></webview>
</div>
</body>
</html>
メモ
Flash Player Pluginを有効にする
ElectronでFlash Pluginを有効にする手順は、基本的には、Using Pepper Flash Pluginに記載の通りですが、Chrome 57からchrome://pluginsが廃止されてページが表示されなくなったので、Chromeから抜き出すのではなく、Flash Player Pluginをインストールをする。
Flash Player Pluginのダウンロード
PPAPIプラグインがインストールされているかを確認、インストールする。
- システム環境設定 -> Flash Player -> 更新 -> 今すぐインストール をクリックする。
※ここページが開くと思うので、インストーラーをダウンロードして、インストールする。
- Flash Player Pluginをインストールすれば、デフォルトではPPAPIプラグインは以下にインストールされるので、コピーする。
/Library/Internet Plug-Ins/PepperFlashPlayer/PepperFlashPlayer.plugin
PPAPIプラグインのパスを設定する
-
app.commandLine.appendSwitch（'ppapi-flash-path', <plugin path>）でPepperFlashPlayer.pluginのパスを指定する。
const app = electron.app
let pluginName
switch (process.platform) {
case 'win32':
pluginName = 'pepflashplayer.dll'
break
case 'darwin':
pluginName = 'PepperFlashPlayer.plugin'
break
case 'linux':
pluginName = 'libpepflashplayer.so'
break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, 'plugin', pluginName))
-
<webview>タグにplugins属性を追加する。
<webview id="browser" src="https://www.adobe.com/software/flash/about/" autosize plugins></webview>`
