S.F. Page

Programming,Music,etc...

nw.jsでデスクトップ・アプリを作る (4)- Youtubeアップロード機能の実装

アップロード機能を実装中である。

f:id:sfpgmr:20150211183347p:plain

機能的なマイルストーンは音声と動画をマージしたものをYoutubeにアップロードするところまでとしている。詳細は以下の通りである。

  • 音声ファイルを選ぶ
  • 動画ファイルもしくは静止画ビットマップを選ぶ
  • ffmpegのパラメータ設定をする
  • YouTubeのパラメータ設定をする
  • アップロードボタンを押すとffmpegでエンコードしたものをYouTubeにアップロードする

今はパラメータ設定を行うためのUIをECTBootstrapKnockoutを使って作っているところである。UI作りは苦手で、もう嫌でしょうがないのだが、ライブラリのおかげで何とかモチベーションが萎えずに作れている。各ライブラリをどのように使い分けているかというと

  • ECT ... HTMLコード量を減らすために使用。タグを繰り返し書かなくてはいけないところとか定型的なところは、テンプレート・条件分岐・ループを使うとコード量を少なくすることができるので。ただcoffeeで書かないといけないところがちょっと面倒。coffeeも面白そうだけどそこまで手を出す気は今のところない。
  • Bootstrap ... 標準機能を使ってUIデザインのことは何も考えずに済ますために使用。これのおかげで比較的まともなUIがつくれそうな気がする。
  • Knockout ... MVVMライブラリ。UIで面倒なのはデータとUIを連動させるところ。もっとも私が嫌いなところ。その部分をはしょるために使用。AngulerJSのほうがメジャーだけどこちらのほうが簡単だし、AngulerJSほどの機能はいらないので。ただMVVMの概念を理解しているかというと甚だ怪しい。

である。

どうしようかなと少し考えたのはファイル選択ダイアログの部分。ブラウザだとファイルの正確なパスを取得することができないけれど、nw.jsはどうかなとリファレンスをチェックすると<input type="file">タグは独自拡張がなされており、valueでフルパスを取得できるようになっていた。

File dialogs · nwjs/nw.js Wiki · GitHub

このようにnw.jsはネイティブ・アプリを作りための拡張がそこかしこに施されている。たとえばnw.guiによるWindowの拡張とかね。

Window · nwjs/nw.js Wiki · GitHub

今回のマイルストーンを達成したら次はWebGL/canvasで動画生成する部分を作ることにする。