Help us understand the problem. What is going on with this article?

[Electron] webviewタグの使い方

More than 1 year has passed since last update.

概要

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();">&lt;</button>
        <button onclick="goForward();">&gt;</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>

ScreenShot_Electron_01.png

メモ

Flash Player Pluginを有効にする

ElectronでFlash Pluginを有効にする手順は、基本的には、Using Pepper Flash Pluginに記載の通りですが、Chrome 57からchrome://plugins廃止されてページが表示されなくなったので、Chromeから抜き出すのではなく、Flash Player Pluginをインストールをする。

Flash Player Pluginのダウンロード

PPAPIプラグインがインストールされているかを確認、インストールする。

  1. システム環境設定 -> Flash Player -> 更新 -> 今すぐインストール をクリックする。
    ここページが開くと思うので、インストーラーをダウンロードして、インストールする。
    スクリーンショット 2018-05-26 9.24.45.png
    スクリーンショット 2018-05-26 9.24.51.png

  2. 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>`

ScreenShot_Electron_02.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした