--- title: [Electron] webviewタグの使い方 tags: Electron author: satoshi-iwaki slide: false --- # 概要 Electronでwebviewタグの使い方を試すのに、簡易ブラウザーを作成してみる。 - 任意のページを開く - 入力フォームにURLを入力してEnterキー - 入力したURLを``で読込み - Developer Toolsを開く - 入力フォームに`devtools`を入力してEnterキー - ``の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 Browser Demo
``` ScreenShot_Electron_01.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/)が開くと思うので、インストーラーをダウンロードして、インストールする。 スクリーンショット 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', )`で`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)) ``` - ``タグに`plugins`属性を追加する。 ```html ` ``` ScreenShot_Electron_02.png