[Electron]Pepper Flash pluginを使ってFlash Playerを動作させる

#はじめに
ElectronにおけるFlash利用のための情報が[using-pepper-flash-plugin.md](https://github.com/atom/electron/blob/master/docs/tutorial/using-pepper-flash-plugin.md)に記載されています。それを参考にして、実際にElectronでFlashの読み込みをするための工程を記録します。
**※OS X・Linuxでの解説になっています**

#ざっくり概要
:tired_face: ElectronではFlashがインストールされていないからニコニコ動画や艦これで使われているFlash Playerが動作しない！（動画見れない・ゲームできない）
:imp: じゃあElectronのアプリケーションでFlash Player使うにはどうしたらいいんだよ！！
:raising_hand: Pepper Flash pluginをつかうといいよ！！

#Pepper Flash pluginとは
Flashを使ったコンテンツはWeb上にたくさんありますし、例えばニコニコ動画や艦これなどで使われていますよね。このようなFlashはElectronアプリケーションに最初からインストールされていないので、ユーザーが新しくElectronアプリケーションを使う場合はその都度ユーザー自身がFlash Playerをインストールしなければならないという手間があります。ですが、<b>Pepper Flash plugin</b>を使うことで初めからElectronアプリケーション内でFlash利用可能な環境を提供することができます。

今回は、[刀剣乱舞](http://www.dmm.com/netgame/feature/tohken.html)というフラッシュゲームを例にしてFlash Player表示のために必要なことを手順を追いながら説明をまとめます。

ちなみにElectronアプリケーションでPepper Flash pluginを導入せずにFlashを扱っているページに遷移させると・・・

![image](https://qiita-image-store.s3.amazonaws.com/0/11432/0a7b4b11-69a0-6160-5320-8dd994aea5ef.png)

こんな感じにCouldn't load pluginと出てしまいます。これが本来のElectronをなにもいじっていない状態です。

#おおまかな導入手順
:imp: ElectronでFlashつかうならPepper Flash pluginてのを使えばいいんだろぉ！！じゃあそれはどこにいけば手にはいるんだよ！！

:raising_hand: ブラウザの[Chrome](https://www.google.com/chrome/browser/desktop/index.html)をインストールしている人はすでに持っています。使ってない人はインストールしましょう。

Chromeをインストールしたら・・・

1. まずはPepper Flash pluginのロケーションを確認する
そのためにOS X・LinuxではChromeブラウザ内で `chrome://plugins`と指定すれば、自分のPCでPepper Flash pluginの場所が見つかる。（Windowsはわかりませんごめんなさい）自分の環境では、**`/Applications/Google Chrome.app/Contents/Versions/47.0.2526.106/Google Chrome Framework.framework/Internet Plug-Ins/PepperFlash/PepperFlashPlayer.plugin`**にあった。
![image](https://qiita-image-store.s3.amazonaws.com/0/11432/0c330871-c2c5-310e-65cd-36ee2d1320a7.png)

2. ディレクトリにアクセスする
Macを使用していればこのようなかんじ。
![image](https://qiita-image-store.s3.amazonaws.com/0/11432/87ffafbc-864c-02ef-31da-9e6eaf614b62.png)

3. 自分のElectronアプリケーションのディレクトリにPepper Flash pluginのフォルダをコピペする。
（ディレクトリへのパスを使う方法もあるらしいけどしてません）
![image](https://qiita-image-store.s3.amazonaws.com/0/11432/4b213c2f-b99c-dede-6a8c-605b8dca533e.png)

4. main.js（最初に起動されるJavaScriptファイル）にメソッド書く
`app.commandLine.appendSwitch`メソッドで`--ppapi-flash-pathとppapi-flash-version`をapp readyイベント前に入力する。
 入力内容
```app.commandLine.appendSwitch('ppapi-flash-path', __dirname + '/PepperFlash/PepperFlashPlayer.plugin');
    app.commandLine.appendSwitch('ppapi-flash-version', '19.0.0.245');```
![image](https://qiita-image-store.s3.amazonaws.com/0/11432/5e3bddbd-5f19-741b-36c7-1ad7f355a97c.png)

5. webviewタグでpluginsをHTMLに書く
index.htmlに書いた入力内容。
```    <webview id="mainWebView" src="http://www.dmm.com/netgame/social/-/gadgets/=/app_id=825012/" plugins></webview>
```

![image](https://qiita-image-store.s3.amazonaws.com/0/11432/45a6e9bd-01d1-95ab-2108-772c41260030.png)



#動作確認
無事にFlash Playerがはじめからインストールされている状態でアプリケーションを起動することができました！
![image](https://qiita-image-store.s3.amazonaws.com/0/11432/5e9b1cb6-8fc9-f106-e862-8c9131834f9d.png)


#さいごに
今回は刀剣乱舞を例にしてElectronアプリケーション内でPepper Flash pluginを使うことでFlash Playerの読み込みをさせることに成功しました。こんどはJSONとってきてごにょごにょしたいなぁ。

#参考
- [using-pepper-flash-plugin.md](https://github.com/atom/electron/blob/master/docs/tutorial/using-pepper-flash-plugin.md)
- [ElectronでSWFを扱おうとして失敗した話(未解決)](http://qiita.com/nyamogera/items/460e22bcf62834d1f26c)
- [Electronでアプリケーションを作ってみよう](http://qiita.com/Quramy/items/a4be32769366cfe55778)
- [30分で出来る、JavaScript (Electron) でデスクトップアプリを作って配布するまで](http://qiita.com/nyanchu/items/15d514d9b9f87e5c0a29) 
- [日本語訳 Electron(旧atom-shell) Quick start](http://qiita.com/kitfactory/items/cc153cdfaf3d9fd70044)
- [ChromiumからElectronを眺める](http://qiita.com/seihmd/items/8caf3af3b7a612b3c628)