読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

nw.jsでデスクトップアプリを作る

nw.jsとNative Addonでffmpegをコントロールする。

さてどうしようかと今日は考えていた。C++とnw.jsが連携できるということはわかったが、それだけでは何も作ることができない。 それはそうなのだが夢は広がり、行き帰りの電車の中で半眠りになりながらVSTホストが作れるなだとかST/GTタイプのシーケンサーが…

nw.js上でNative Addonを動かす

io.jsでの不思議な挙動はとりあえずさておくことにした。よくよく考えると私はnw.js用のNative Addonを作りたいのだ。 試しに今まで作ったサンプルをnw.js 0.12.1で動かしてみることにした。nw.jsではnode-gypではなくnw-gypを使う。おそらくアドオンにくっ…

nw.jsでデスクトップアプリを作る(27) - 音声で映像を動かす(2)

音声データをもとに映像を動かすという試み。とりあえずはFFTしたものを表示してみることにした。FFTはdsp.jsを使用している。下の動画はその結果。 Web Audioのanalyserノードを使うつもりだったけども、リアルタイムでないと使えないようなのであきらめた…

nw.jsでデスクトップアプリを作る(26) - 音声で映像を動かす

馬の絵をアニメーションさせることができるようにはなった。これを使ってRydeenのカバー曲の動画を作ろうと思っているわけだがどうもアイデアが湧いてこない。タイムラインに沿って馬を動かすだけでは面白くなくて、やはり何かこう高度なライブラリを使って…

nw.jsでデスクトップアプリを作る(25) - Firefoxで動くようにする対応およびWindows 10 のIE11への対応

gistにアップしていたサンプルコードがなぜかFirefoxで動かなくなっていた。 three.jsのPathのシリアライズ(2) 調べるとpath座標に浮動小数表記(9.5e-5みたいな)が混じっていたのであった。pathの内容解析を行いthree.pathに変換するコードは浮動小数表記…

nw.jsでデスクトップアプリを作る(24) - シリアライズコードを最適化する(3)

シリアライズコードの最適化に取り組んでいたが、ようやくコードを書き終えた。 three.jsのPathのシリアライズ(2) さてどれくらい出力したJSONデータが削減できたかだが、2割ちょっとくらいであった。 しかしエラー処理をあまりきちっと行っていない。さら…

nw.jsでデスクトップアプリを作る(23) - シリアライズコードを最適化する(2) - 関数名(オブジェクト名)の取得とかコンストラクタのapplyとか

もうnw.jsとはほとんど関係のない内容になってきているような。 関数名(オブジェクト名)の取得は難しいと昨日書いたが、小飼弾さんのブログにそれに関してのポストがあった。ちょっと古い記事だが。 404 Blog Not Found:javascript - typeof()を再発明する…

nw.jsでデスクトップアプリを作る(22) - シリアライズコードを最適化する

シリアライズコードが一応動いたがこのままではデータ量が膨大になってしまうと思うので、最適化をすることにした。最適化というのはたとえばVector2Dなどで考えると、{"x":10,"y":10}とシリアライズするところを[10,10]としたり、配列などは要素単位でオブ…

nw.jsでデスクトップアプリを作る(21) - three.jsのPathオブジェクトをシリアライズする

というわけで昨日からTHREE.Pathのシリアライズ・デシリアライズするコードを書いていて先ほどようやくできた。 three.jsのPathのシリアライズ 使い方だが、PathオブジェクトをJSON.stringfy()を渡すだけである。それでシリアライズされるから、永続化したけ…

nw.jsでデスクトップアプリを作る(20) - three.jsオブジェクト(プリミティブ)のシリアライズ方法を考える

ここ2,3日three.jsオブジェクトのシリアライズ方法を考えていた。シリアライズという意味は以下の通りである。 オブジェクト指向プログラミングにおいて使われる用語で、ある環境において存在しているオブジェクトを、バイト列やXMLフォーマットに変換す…

nw.jsでデスクトップアプリを作る(19) - SVG pathをthree.js shapeに変換する(4)

シリアライズ・デシリアライズを実装できないかとthree.jsのコードを読んでいたらTHREE.PathにtoShapes()というメソッドがあることに気が付いた。 ここのメソッドは穴あきPathもきちんと判別してTHREE.Shapeに変換してくれるという優れものであった。なんだ…

nw.jsが12.0 rc1になっていた。nwjcが目を引く今回のアップデート。

nw.jsが12.0 rc1になっていた。 http://nwjs.io/ リリース・ノートで目を引くのは以下のところ。 * Usage of the new 'nwjc' tool, which replaces 'nwsnaphsot' to remove the size limitation and support closure: - compile your JS file with nwjc: nwj…

nw.jsでデスクトップアプリを作る(19) - SVG pathをthree.js shapeに変換する(3)

とりあえず3Dっぽく回転してみようかなと。あとは馬をたくさん出演させることにチャレンジ。three.jsってよくできてるなぁ。やっぱり。 SVGからthree.jsのshapeへの変換(3) 目下の興味はいちからSVGから変換せずに、変換後のgeometryかshapeを保存しておいて…

nw.jsでデスクトップアプリを作る(18) - SVG pathをthree.js shapeに変換する(2)

描画がおかしくなるバグもようやく直った。 ソースコードと動くサンプル:SVGからthree.jsのshapeへの変換(2) ヒントは下記記事。 Converting SVG paths with holes to extruded shapes in three.js Converting SVG paths with holes to extruded shapes in …

nw.jsでデスクトップアプリを作る(17) - SVG pathをthree.js shapeに変換する

今日ようやくthree.jsで表示することができた。がまだ問題は残っている。 原因はまだわからない。 (コードとサンプルURL) http://bl.ocks.org/sfpgmr/6dcbf6d5f51d719bc764 実装するにあたっては下記のコードを参考&拝借している。 SVG path to Three.js …

nw.jsでデスクトップアプリを作る(16) - SVG pathをgeometryに変換する(6)

昨日のSVGアニメーションだが、FirefoxとIEでは動作しなかった。原因はSVGのお作法にしたがってなかったから。読み取りのみのプロパティに値をセットしようとしていたから。なぜかChromeは代入できたんだよねぇ。 規格を読むとpathSegListは読み取り専用なの…

nw.jsでデスクトップアプリを作る(15) - SVG pathをgeometryに変換する(5)

pathの絶対座標を相対座標に変換する問題はググるとあっけなく解決した。 Convert SVG Path to Relative Commands javascript - Convert SVG Path to Relative Commands - Stack Overflow 上記記事中のconvertToRelative()によって変換することができた。下…

nw.jsでデスクトップアプリを作る(14) - SVG pathをgeometryに変換する(4)

SVGのデータをバウンディング・ボックス単位で分割して座標補正をかける部分の続き。 各馬のpathデータのd属性の先頭にあるm(moveTo)命令のx,y座標からバウンディング・ボックスのx,y座標を引けばよいはずである。実験のためのコードは下。 これを実行すると…

nw.jsでデスクトップアプリを作る(13) - SVG pathをgeometryに変換する(3)

おととい作ったものは細部がつぶれすぎている気がするので再度トレースし直し、手動でバウンディング・ボックスを入れてみた。これを基準にセルを切り出していくことにする。切り出しはd3.jsでなんとかできそうだ。 image/svg+xml あとInkscapeではlayer = g…

nw.jsでデスクトップアプリを作る(12) - SVG pathをgeometryに変換する(2)

とりあえずSVG化が完成した。下がそうである。Inkscapeで編集後プレーンSVGで保存した中身を貼り付けた。ああ、svgタグからwidth="100%"にしてheightは削除したが。 image/svg+xml Inkscapeのデータではg要素がレイヤとなるようだ。これをどうThree.jsに持っ…

nw.jsでデスクトップアプリを作る(11) - SVG pathをgeometryに変換する(1)

ビットマップをアニメーションしているだけでも工夫次第で相当なことができそうだ。がやはり拡大・縮小がきれいにできない。馬の形をgeometryで持てば拡大・縮小がきれいにできそうだし表現の幅も広がりそうなのでInkskapeでビットマップデータをトレースし…

nw.jsでデスクトップアプリを作る(10) - ファイル保存スピードを改善する

昨日ファイル保存コードを見直した。Window.capturePage()よりもcanvas.toDataURL()を使用したほうが速かった。 canvas.toDataURL()の出力がBase64文字列ではなく、型付配列にバイナリデータで出力するオプションがあるほうが余計な変換処理がいらず速いと思…

nw.jsでデスクトップアプリを作る(9) - アニメーション部分を実装するの続き

アプリから作成した動画をアップロードしてみた。 まあとりあえずテストとしては成功だが、映像表現としては最低レベルである。馬の疾走するタイミングはRydeenのテンポに合わせてみたつもりだが合っているような合っていないような。。 以下はThree.jsの動…

nw.jsでデスクトップ・アプリを作る (8)- アニメーション部分を実装する

馬のアニメーションを作り始めた。 http://bl.ocks.org/sfpgmr/9788400c632f51830e53 上はThree.jsで元画像を分割して表示してみたもの。みた感じ2Dだが、カメラの画角と位置を調整することでz座標が0の時にx,yが実ピクセル座標で表示するようにしている。 …

nw.jsでデスクトップ・アプリを作る (7)- アニメーション部分を実装する

いよいよアニメーション部分に取り掛かろうとしている。 前にも書いたように私が作っているRydeenのカバー曲に合うアニメーションということで、エドワード・マイブリッジの馬の連続写真をこねくり回そうとしている。 エドワード・マイブリッジ - 馬の連続写…

nw.jsでcryptoを使用するときは変数名に注意する。

nw.jsでcryptoを使って暗号化されたファイルを復号化しようとした時のこと。下記のようなコードを書いていた。 そうするとcrypto.createDecipher()のところで、そんなメソッドはないと怒られる。調べると「crypto」という名前はnw.jsで予約されており、変数…

nw.jsでデスクトップ・アプリを作る (6)- YouTubeアップロード機能の実装 - 途中経過とクライアント・シークレットの隠ぺいについて

エンコード~アップロードがようやくできた。 ようやくエンコード~アップロードまでを実装することができた。アプリとしてはまだ道半ばではあるが。 ffmpegとYouTubeに必要なパラメータを入力してアップロードボタンを押すとffmpegでエンコード後アップロー…

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

亀のように遅いが、実装は進んでいる。ffmpegでエンコードするパラメータを設定・変更できるようにして、あとはYouTubeパラメータを設定できるようにすると当面の目標は達成だ。 しかしなぜか漢字が日本のものではなくなっていたりする。なぜだろう。 この辺…

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

アップロード機能を実装中である。 機能的なマイルストーンは音声と動画をマージしたものをYoutubeにアップロードするところまでとしている。詳細は以下の通りである。 音声ファイルを選ぶ 動画ファイルもしくは静止画ビットマップを選ぶ ffmpegのパラメータ…

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

昨日はYouTubeにアップロードする機能を実装していた。 自前で書こうかなと思ったけどもひょっとするとnpmにすでにあるのではということで探した。Google謹製のライブラリとかあるけども、nw.jsでうまく動かなかったのだ。でもそれは不具合のあったバージョ…

NW.js v0.12.0-alpha2 の不具合?

1/12にnw.jsのV0.12.0-alpha2がリリースされた。リリース・ノートを引用すると I'm pleased to release NW.js v0.12.0-alpha2. This version fixes 3 issues reported for v0.12.0-alpha1 (thanks to reporters!): * Fix: -webkit-app-region: drag; stopped…

nw.jsでデスクトップ・アプリを作る(2) - Google OAuth認証コードを書く

Windows 10 Tech Previewでちと横道にそれてしまったがnw.jsでのデスクトップアプリ作成を再開している。何を作りたいのかというとWebGLでレンダリングしたものをYouTube動画としてアップロードするというものである。 アップロードするためにはOAuth認証を…

nw.jsでデスクトップ・アプリを作る(1)

nw.jsでデスクトップ・アプリを作ろうとしている。どのようなものかというと 予めマスタリング済みのWAVファイルを用意しておく。 Canvasに対して30fpsで描画する。描画はWebGL(three.js)で行う。 それを30fpsでサンプリングし、pngファイルとして保存する…

nw.jsをいじり始める。

YouTube Data APIをいじるのにd3.js + BootstrapでUIを作っているけれども、UIデザインが苦手な私でも使えているので結構気にいっている。これをデスクトップアプリのUI作りにも使えたらなぁ。。と考えてたら下のようなものを見つけた。 nwjs/nw.js · GitHub…