Frame Playerを使おうとしてハマった箇所と対応メモ


背景動画をモバイルでも自動再生したいとの要望があり、[Frame Player](http://vagnersantana.com/frame-player/)というパラパラ漫画の仕組みで静止画（のバイナリデータ）を動画風に見せるプラグインを利用しました。
なお、こちらは音声の再生には対応しておりませんのでご注意ください。

基本的な使い方は検索すればいくつか記事がヒットするのでそちらを参考にしていただくとして、ここでは実際に使おうとしてハマった箇所と対応の備忘録になります。

## FFMPEGって何？でハマった
Frame Playerの使い方を検索すると、ほとんどの記事でFFMPEGを使って動画ファイルを静止画に変換すると書かれていますが、そもそもFFMPEGって何？？どうやってインストールするの？？という状態でした。

私はMacを使っているので、Macを使ったFFMPEGのインストールはこちらを参考にしました。
▷[macでffmpegを導入してmovファイルをgifファイルへ変換するところまで](https://qiita.com/Ryosuke-Hujisawa/items/6a1c47d31ac299dc1c46)

ただし、こちらには```Homebrew```を使ってインストールするとあり、未インストールだった自分はまず```Homebrew```のインストールから…。
ツールを使うためのツールをインストールするためのツールが必要…と、この時点で心が折れそうでしたが、気を取り直して[Homebrew公式サイト](https://brew.sh/index_ja.html)の冒頭にある通りにスクリプトを実行して```Homebrew```をインストールしました。

次に当初の目的であるFFMPEGをインストールするので

```
brew install ffmpeg
```

で最新版をインストールします。

これで動画→静止画の変換が可能になったので次の手順へ進めます。
次の手順はこちらのページが分かりやすいです。
▷[スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法①](https://qiita.com/vivayashi/items/a978d39d7454c57f6227#%E3%81%95%E3%81%82%E3%81%84%E3%81%93%E3%81%86%E3%81%8B)

ちなみに、Adobe CCを使っている方ならMedia Encoderを使って動画からjpgに変換することも出来ます。
ただし、```連番（ゼロパディングなし）.jpg```というファイル名でなければ上手く動かないのでご注意ください。

## JSONファイルへ変換できずハマった

めでたくFFMPEGによって動画から大量の静止画（jpgファイル）を生成できたのもつかの間で、次はそのjpgを一つのJSONファイルにまとめる箇所でハマりました。

[Frame Player](http://vagnersantana.com/frame-player/)の公式サイトによると、nodeを使う方法とPHPを使う方法があり、コマンドを見ると

```
# Option 1: Node.js
$ cd converter/nodejs
$ node app.js frameStart frameEnd folder/to/imgs/ json/video.json

# Option 2: PHP
$ cd converter/php
$ php to_data_uri.php frameStart frameEnd folder/to/imgs/ json/video.json
```

と書かれています。

ふむふむ、```cd converter/nodejs```もしくは```cd converter/php```は分かります。
コンバーターを置いているディレクトリへ移動するのですね。

確かに、Frame Playerをダウンロードすると
```frame-player-master/converter/nodejs```
もしくは
```frame-player-master/converter/php```
があるので、いずれかへ```cd```でディレクトリ移動します。

ハマったのは次でした。

```
$ node app.js frameStart frameEnd folder/to/imgs/ json/video.json
```

とあります。

はて、```folder/to/imgs/```がjpgを含むディレクトリで```json/video.json```がjpgから生成したJSONファイル名と出力先ディレクトリであろうことは何となく分かりましたが、```frameStart```と```frameEnd```はそのままの記述で良いのか、ファイル名を指定するのか、指定する場合は拡張子を含むのか…が分からず何度かトライアンドエラーを繰り返す羽目に…。

結論ですが、最終的に

```
php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/ json/video.json
```

このようなコードになりました。
（なお、nodeでの実行を試みていましたが上手く行かずPHPを使うことにしました。）


順に説明しますと

```
php to_data_uri.php 
```

まではそのままで、続く```1 100```というのはjpgのファイル名です。
FFMPEGを使って動画ファイルからjpgを生成する際に```連番.jpg```というファイル名になると思うので、スタートのファイル名と終わりのファイル名（※拡張子なし）を半角スペース区切りで指定します。

```
php to_data_uri.php 1 100
```

続く

```
/Users/hoge/frame-player-master/videos/
```

には先ほど指定したjpgファイルが収められているディレクトリを指定します。
ドラッグ＆ドロップで絶対パス指定する方が確実だし簡単かなと思います。

```
php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/
```

そして末尾に

```
json/video.json
```

と書きます。

これは生成したJSONファイルの```出力ディレクトリ/ファイル名.jspn```になります。
この書き方だと```converter/php```内に```json```ディレクトリが生成されます。
ファイル名は```video```でなくても良いのですが、こちらは拡張子有りで書かないとダメなのでご注意ください。

最終的にはこれで実行出来ました。

```
php to_data_uri.php 1 100 /Users/hoge/frame-player-master/videos/ json/video.json
```

これでjsonファイルが生成されました。

あとはHTMLでjsonファイルを読み込み、jsで指定すれば動画風になったパラパラ漫画が実現出来ます。
その辺のコードは[公式サイト](http://vagnersantana.com/frame-player/)をご参照ください。

Android端末でも動画のように見えるので、どうしても背景動画を使いたいorインライン再生したいという場合はご検討ください。
ただし、あまり長い動画だとJSONファイル容量が大変なことになります（最初30MBを超えました…）
また、正確には動画ではないので音声には対応しておりません。

***

下記のページを参考にさせていただきました。ありがとうございます。

▼スマブラ(スマートフォンのブラウザ)上で動画をインライン再生させる方法①
https://qiita.com/vivayashi/items/a978d39d7454c57f6227

▼macでffmpegを導入してmovファイルをgifファイルへ変換するところまで
https://qiita.com/Ryosuke-Hujisawa/items/6a1c47d31ac299dc1c46