Edited at

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

More than 3 years have passed since last update.


はじめに

ElectronにおけるFlash利用のための情報が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をインストールしなければならないという手間があります。ですが、Pepper Flash pluginを使うことで初めからElectronアプリケーション内でFlash利用可能な環境を提供することができます。

今回は、刀剣乱舞というフラッシュゲームを例にしてFlash Player表示のために必要なことを手順を追いながら説明をまとめます。

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

image

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


おおまかな導入手順

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

:raising_hand: ブラウザのChromeをインストールしている人はすでに持っています。使ってない人はインストールしましょう。

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


  2. ディレクトリにアクセスする

    Macを使用していればこのようなかんじ。

    image


  3. 自分のElectronアプリケーションのディレクトリにPepper Flash pluginのフォルダをコピペする。

    (ディレクトリへのパスを使う方法もあるらしいけどしてません)

    image


  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


  5. webviewタグでpluginsをHTMLに書く

    index.htmlに書いた入力内容。

    <webview id="mainWebView" src="http://www.dmm.com/netgame/social/-/gadgets/=/app_id=825012/" plugins></webview>


image


動作確認

無事にFlash Playerがはじめからインストールされている状態でアプリケーションを起動することができました!

image


さいごに

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


参考