devidol-curve

=======

でびどる曲線！ https://butchi.github.io/devidol-curve/

事前に用意するもの

• node.js (version 8.11.1以上)

環境構築

開発に使うnpmパッケージをインストール

npm install

あるいは、

yarn

動画準備

npm run download

あるいは、

yarn download

を実行。 src/mathematica/image/ に元動画のMP4ファイルと連番PNGが書き出されます。

Mathematica

動作確認バージョン: Mathematica 11.3

動画準備をした状態で src/mathematica/devidol-curve-export-json.nb を実行。 src/mathematica/output/fourier-array.json が生成されます。

生成されたJSONファイルを docs/data/ に配置します。

注意

実際使用した動画は以下で、動画準備でダウンロードしたYouTube動画とは若干異なります。また、連番PNGはAdobe Media Encoder CC 2019を用いて640x360 12fpsで書き出しました。 https://www.nicovideo.jp/watch/1538532843

Web

ファイル構成

• README.md
  • このファイルです。
• package.json
  • 依存するnpmパッケージに関する設定ファイルです。
• webpack.config.js / webpack.config.base.js
  • webpackに関する設定ファイルです。
  • loaderやentryの設定は webpack.config.base.js にかかれています。
  • webpack.config.js は、 portfinder を使用している関係でPromiseを返すかたちになっているので注意してください。
• public
  • Web公開されるファイルの置き場所です。 (yarn build 実行までは空の状態です)
• src/scss, src/js, src/pug
  • ビルドに必要な各種ソースコードです。

開発手順

開発時に必要なタスクは、npm scriptおよびwebpack.config.jsで管理されています。 shellから以下のコマンドを実行することで、各種ビルド・タスク実行が可能です。

• npm run start / yarn start
  • 開発用ブラウザを立ち上げ、その後ソースコードに修正があれば自動ビルド・自動ブラウザ更新します
  • 基本的には、このコマンドを実行しておくだけで開発が可能なはずです。
• npm run build / yarn build
  • ファイルをビルドします。webpack-dev-serverでは、ビルドファイルはサーバー側で保持します。 そのため、ファイルとして出力するには npm run build / yarn build が必要になります。

使用言語

• HTMLテンプレート: pug
• CSSメタ言語: Sass(scss)
• Javascript: ES2015(ECMAScript 6)

対応ブラウザ

• 各種モダンブラウザ最新バージョン・IE11以上
  • 対応ブラウザを変更する場合、package.jsonのbrowserlistを修正することをお忘れなく

依存ライブラリ

npm installでインストールされるライブラリ（一部）です。 全てを理解していなくても、開発は問題なく行えますが、挙動に問題がある場合・カスタマイズしたい場合などに参照してみてください。

• Babel
• Reset CSS
• PostCSS
• webpack
• webpack-dev-server
• webpack-route-data-mapper
  • 指定したテンプレートをまとめてhtmlとして書き出し対象にする（html-webpack-pluginのラッパー）
  • オプションを組み合わせることで、jsonデータに基いてHTMLを大量生成する、といった使い方も可能。詳しくはリンク先のREADMEにて。