S.F. Page

Programming,Music,etc...

GigaCapsule Viewerを作る

YMO Giga CapsuleのビューワをElectronで作ってみている(10)

スライダーの改良版ができたので、自作のカバー曲(Rydeen)のトラックを使ってミキシングテストをしてみた。元曲のトラックを使いたいところだが、それはNGなのでしょうがない。 デスクトップだけど10点マルチタッチディスプレイを持っているので、最大…

YMO Giga CapsuleのビューワをElectronで作ってみている(9)

d3.svg.brushを使ったスライダーはやはりマルチタッチ時の動作がおかしいので、自前で作り直すことにした。d3.svg.axisとd3.behavior.dragを使えばなんとかなるだろう。 d3.jsを久しぶりにいじってみて、やっぱりこのライブラリの設計は素晴らしいなと思う。…

YMO Giga CapsuleのビューワをElectronで作ってみている(8)

昨日からRemix部分を作り始めている。今のところはフェーダーが7個並んでいるだけというさみしい画面である。 このRemix機能というのは「Behind The Mask」「Rydeen」「Solid State Survivor」「Technopolis」「Tong Poo」の5曲のうちから1曲選んで、その曲…

YMO Giga CapsuleのビューワをElectronで作ってみている(7)

タイトル部分は一応できたので、次はいよいよビューワ部分に着手し始めることにした。とりあえず下はメインメニュー。 TechnodelicフォントというフリーのWebフォントを使ってみた。色合いもテクノデリック風にしてみた。そういえば今思い出したが、テクノデ…

YMO Giga CapsuleのビューワをElectronで作ってみている(6)

ちゅうことで、Jingle Y.M.O.をBGMにアニメーションする部分を作ってみた。 スクリーンショット バイナリ Release Jingle Y.M.O.を再生する部分を追加 · sfpgmr/gigacapsule · GitHub タイミングを合わせてd3.jsでSVGアニメーションをしている。内容は稚拙な…

YMO Giga CapsuleのビューワをElectronで作ってみている(5)

意味不明だと思うが、とりあえずJingle YMOの動画の作りかけスクリーンショット。 Jingle YMOのBGMに合わせて絵や文字を動かすつもりだ。d3.js+SVGでね。音はWeb Audioで。 久しぶりにWeb Audioをいじるのでまずはチュートリアル的なサイトを参考にopusファ…

YMO Giga CapsuleのビューワをElectronで作ってみている(4)

とりあえず動画やオーディオを再生できるようになった。そしてビルドも意外に簡単にできることを知った。Electronなかなか良いな。 続いてJingle YMOをBGMに、d3.jsでアニメーションを作ろうかなと思っている。これはGiga CapsuleのDVDにも入っているもので…

YMO Giga CapsuleのビューワをElectronで作ってみている。(3)

とりあえず動画とオーディオの再生ができるようになったので、まだまだ完成には程遠いがelectron-packagerを使用してビルドしてみた。 Release とりあえず動きそうなバージョン · sfpgmr/gigacapsule · GitHub ビルドは結構簡単にできるが、アプリが持つ機能…

YMO Giga CapsuleのビューワをElectronで作ってみようかなと思う。(2)

まあぼちぼちと作っている。 メディアがPCに挿入していないと動かないようなつくりにして、メディアを持っていることを動作要件にしたいので、ドライブをチェックしようとしたが意外に簡単にはできない。方法についてはQiitaに書いた。 qiita.com あとは動画…

Giga CapsuleのビューワをElectronで作ってみようかなと思う。

YMO Giga CapsuleはとりあえずXP仮想マシンで再生することができたが、できればWindows 10でも楽しみたい。とりあえずAIFFファイルやMOVファイルを再生できるようにしてコンテンツは見ることはできているけど、ちょっと面倒である。なので簡単なビューワをEl…