[Electron] webviewタグの使い方

# 概要
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
```

# 実装
```json:package.json
{
  "name": "BrowserDemo",
  "version": "1.0.0",
  "description": "Browser demo",
  "main": "app.js",
  "scripts": {
    "start": "electron app.js"
  },
  "devDependencies": {
    "electron": "^2.0.2"
  }
}
```

```javascript: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()
  }
})
```

```css: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%;
}
```

```html: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>
```

<img width="912" alt="ScreenShot_Electron_01.png" src="https://qiita-image-store.s3.amazonaws.com/0/168061/474e1ab4-8f46-e79c-03dc-2bbc20ae71f5.png">

# メモ

## Flash Player Pluginを有効にする

ElectronでFlash Pluginを有効にする手順は、基本的には、[Using Pepper Flash Plugin](https://electronjs.org/docs/tutorial/using-pepper-flash-plugin)に記載の通りですが、Chrome 57から`chrome://plugins`が[廃止されて](https://productforums.google.com/forum/#!msg/chrome/1NGbts8-IFo/zFylS8HCBQAJ)ページが表示されなくなったので、Chromeから抜き出すのではなく、Flash Player Pluginをインストールをする。

### Flash Player Pluginのダウンロード

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

1. システム環境設定 -> Flash Player -> 更新 -> 今すぐインストール をクリックする。
※[ここページ](https://get3.adobe.com/jp/flashplayer/update/ppapiosx/)が開くと思うので、インストーラーをダウンロードして、インストールする。
<img width="780" alt="スクリーンショット 2018-05-26 9.24.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/168061/735870f7-680a-bd17-ab03-b7e7ced7eef3.png">
<img width="780" alt="スクリーンショット 2018-05-26 9.24.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/168061/b3199eb3-bc68-ea8a-366d-36d675e268e0.png">

2. Flash Player Pluginをインストールすれば、デフォルトではPPAPIプラグインは以下にインストールされるので、コピーする。
`/Library/Internet Plug-Ins/PepperFlashPlayer/PepperFlashPlayer.plugin`

### PPAPIプラグインのパスを設定する
- `app.commandLine.appendSwitch（'ppapi-flash-path', <plugin path>）`で`PepperFlashPlayer.plugin`のパスを指定する。

```javascript
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`属性を追加する。

```html
<webview id="browser" src="https://www.adobe.com/software/flash/about/" autosize plugins></webview>`
```

<img width="912" alt="ScreenShot_Electron_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/168061/23e553ba-1651-75b7-6155-9c760acdb88d.png">