#アジアニ に出演しました! & JavaScriptでVJソフト自作しました
台風3つが同時に日本に攻めてきてますが、 昨日、渋谷clubasiaで3フロア同時にアニソンがかかる #アジアニ というパーティーがあり、 メインフロアのVJとして参加させていただきました!!
#アジアニ
シンガポールからのゲスト、ほとんどDJブースにいない方、お笑い芸人、そしてアニソン歌手まで、 多彩な方々がDJ、ライブをされて会場が死ぬほど盛り上がってる中VJさせていただけたのは本当に光栄と言いますか。。。
たくさんのお客さんを前に少し高いブースでVJできたことが本当にたのしかったです。
自分のVJですが、結局モーショングラフィックス系しか流さず、 OP等の映像は一緒にメインフロアでVJされたあっちんさんやちゃーさんに押し付ける形になってしまいました。 が、あくまでこれが自分の得意分野であるし、結果として得意分野を分担し合った連携VJができて良かったです。(個人的にはですが。。)
一点だけ、HOT LIMITが流れた時に
これを出しました、ありがとうデリケア。なお、お客さんの反応は見ることができず。。
結果として、今までやってきたVJの中で一番楽しかったし満足することができました。 出演されたDJ、VJさん、asiaのスタッフさん、#アジアニ の主催者さん、お越しいただいたお客さん、本当にありがとうございました!
自作VJソフト
以前より金欠を理由にVJソフトは買わずに作ってきましたが、今回も例に漏れず自作VJソフトを実戦投入しました。 ただし、以前のようにvvvvでパッチングするのではなく、JavaScriptでゴリゴリコードを書きました。
JSと言っても、要するにNode.js + Electronなのですが、本当にJSしか書いてないです(強いて言えばWebGLのシェーダーが別言語なくらい)。 なおGitリポジトリ https://github.com/yadex205/berkut で公開しています。随時更新していきます。
ということで、まだまだ未完成なのですが、今回VJソフトを作るのに使った主な技術などを紹介してみます。
WebChimera
Node.jsにlibvlcをバインディングしたnpmパッケージ。 つまりNode.js上でVLCメディアプレーヤーが再生できるメディアを再生することができる魔法のようなライブラリです。 再生と言ってもピンとこないかもしれませんが、要するに1フレームのピクセルごとの色情報を配列として取得することができます。
[13,34,62,35,74,215 ...]
みたいな感じです(どんな感じだ)。
なお実際に使う場合は、すでにビルド済みの wcjs-prebuilt パッケージを使うのが無難です。
また、Electronで使う場合には(こちらがメインですが)、
wcjs-renderer パッケージを使うことで HTMLのCanvas に動画を描画することができます。
WebGL
最新のウェブブラウザでは、Canvasタグ上でその場で3Dモデルをレンダーすることができちゃうんですが、それを実現するのがWebGLという仕組みです。OpenGLをそのままブラウザに移植したイメージ、かもです。
前述のwcjs-rendererはWebGLを使って動画のフレームを描画しています。
今回の自作VJソフトはwcjs-rendererを改造し、複数の動画のフレームを任意の合成方法(加算、乗算など)で重ねられるようにしました。
node-ffi
だそうです。今回はこれのNode.js版である node-ffi を使って、Windows限定ですが kernel32の関数を呼び出しています。
VJソフトってコントローラーや動画リストとかが表示されているウィンドウと、ミキシングされた動画を出力するウィンドウが2つ普通ありますよね。 もちろん今回もそのようにしたのですが、Electronではウィンドウ同士は別プロセスになります。 つまり、コントローラーウィンドウの方でミキシングしたフレームを出力ウィンドウに渡そうとする場合、プロセス間通信が必要になり、フレーム情報がシリアライズされるのですが、これがとても無駄に重たい処理になります。
願わくば、コントローラーウィンドウが保持しているフレーム情報が格納されているメモリのアドレス(ポインタ)を出力ウィンドウに教えることが出来れば。でも原則、プロセスごとに割り当てられるメモリのアドレスは仮装的なもので、他のプロセスが保持するポインタを直接見ることはできません。
ところが、WindowsのAPIでReadProcessMemoryという関数があり、他のプロセスのポインタが示す内容を見ることができます。これを呼び出すためにnode-ffiが必要でした。
他にもNeDBというドキュメント型データベースを使ってサムネイルの管理をしたり、ビューとデータのバインディングにVue.jsを使ったり、UIにはBootstrapを使ったり、さらにメディアファイルのインクリメンタルサーチを便利にするためにJS版migemoを使ったり、、色々使ってます。
眠たくなったのでこの辺にします、おやすみなさい。。。
NTEmacs 24.5 で Cask を使えるようにする
最近趣味のプログラミングがそこまで捗ってないというか環境構築楽しいで止まってる気がする。。。
で、その環境構築で、Windowsのプログラミング環境どうしようって結局Emacsを入れようとしていて沼にはまった話です。 備忘録程度なので雑に書いています。
Cask
Caskだけで調べるとHomebrewの方のCaskがヒットしちゃったりするのですが、そんなことはどうでも良く。
Caskは、emacs向けの依存マネージャー(?)といった機能を担当します。Node.jsのnpmだったり、
Rubyの'bundle'のような感じです。
ここでCaskの使用方法ですが、~/.emacs.d/以下にCaskという名前のファイルを生成し、
そこに自分のEmacs環境で使いたいパッケージを書き、そのディレクトリで
$ cask install
することで、一連のパッケージを一斉にダウンロードすることができます。
あとはinit.elでCask関係のEmacs lisp達をロードすることで、ダウンロードしたパッケージが使えるようになります。
なお、CaskにはPython 2.7が必要です。3.xには対応してないらしいので注意してください。
Caskがパッケージを拾いに行けない
さて本題ですが、これは今のところWindowsだけに起こっているのですが、GNU公式から拾ってきたEmacs (24.5)だと
Caskの通信が成功しません。Windows版Emacs (NTEmacs)だけSSL/TLS通信に必要な GnuTls というライブラリが
インクルードされずにビルドされているらしいです。
と言うことでいろいろ検索した結果、以下のページに方法が書いてありました。
how to enable GnuTLS for Emacs 24 on Windows
要約すると、「Win向けにGnuTlsをインクルードしたDLLがここにあるから拾って、 Emacsのディレクトリにぶちこんで」との事でした。
一応自分の環境ではこれでcaskが正常に動作しています。
IEEE UEC学生ブランチ LT Vol.1 にてお話ししました。
本日、大学の方でIEEE UEC学生ブランチ主催のLTイベントがあったので、 「Vプログラミング言語」というお題でお話しさせて頂きました。
要旨
- 学部1年の後期に「基礎プログラミングおよび演習」という科目がある
- 突然C言語を触る
- プログラミングビギナーの鬼門
- もっと楽しくプログラミングの世界に入れないか
- そこで「ビジュアルプログラミング言語だ!!!」
- 自分の「描いた」プログラムでプロジェクションマッピングまでできちゃうよ。
補足
導入・インストールについて
LTの方では僕が使ってる「vvvv」を主体に紹介しました。他にもスライドに書いた通り Touch DesignerやQuartz Composer等あります。
それぞれに使い勝手や特徴や得意分野があって個性が出ているのですが、実はどれも インストールして使えるようにするまでにやや手間がかかると個人的に思っています。 発表の時に「うんそんなの全然楽ちんだよ!」って言ってしまったのはテンパってたからです・・・。
vvvvの場合には必要ファイルが入ってるzipを公式ページからダウンロードしてきて展開しますが、 その中にインストール用のバイナリ(exe)が入っていますので、そちらを先にクリックしてインストール作業をしてください。 それをしないとvvvvが立ち上がりません。また、「パック」と呼ばれるいわゆるライブラリの導入に癖があります。
Touch Designerは公式で日本語のページが(確か)無い上、ライセンス管理が徹底しているので、無償で使うことはできますが 手順をきちんと守ってソフト上でライセンス認証をする必要があります。
Quartz Composerはインストール作業そのものは簡単なのですが、ダウンロード元がAppleのデベロッパー向けページだったりするので 分かりにくいかもしれません。
Max/MSPは有償です。その分作業は楽ですが値段がネックです。
PureDataは一応WinとMac用にはバイナリが用意されているようですが、Linux版はどうやってダウンロードするのでしょうか。。
Ubuntuとかだったらapt-getで入るのかな・・・。
「プログラム入門としての内容なのにスパゲティーパッチ見せたの逆効果じゃん?」
と友人から指摘を受けました。今作ってるVJ環境のを見せたのは複雑すぎたのでまずかったかもです・・・。 vvvvでは、ノード数15個くらいで2つの映像をミキシングするパッチとか組めるほどの素晴らしい環境なので、 ぜひそういうものからチャレンジして頂ければと思います。
まとめ
vvvvはいいぞ
是非、ビジュアルプログラミング言語というものに触れてみてはいかがでしょうか。 文字のプログラミング未経験者から上級者まで幅広くハマれると思います。
本日はこのような場を設けていただき本当にありがとうございました。学生ブランチの方々に感謝申し上げます。
アニソンVJとかでmigemoはかなり有効だと思う
以前Twitterの方で
VJで日本語なファイル名の動画を快適にサーチする方法としてmigemoって割とありなんじゃないか。
— Yadex205 (@yadex205) 2016年5月17日
と書いたことがあって、その後
— ꒰ぶいじぇーよし꒱ (@vjyoshi) 2016年5月17日
というリプライを頂いたりしたので、真面目に migemo をVJで有効活用することを考えてみました。
待って migemo って何。
普通、日本語のテキストの中で検索を行う時は、ひらがな・カタカナ・漢字を入力しますよね。
日本語のテキストが含まれています
という文章があって、日本語 という文字が含まれているか確認したい場合は
日本語
って文字で検索をかけます。当たり前ですね。
ところが、 migemo を使うと、
nihongo
という文字で検索をかけると、なんと 日本語 がヒットするようになります。
内部で何を行っているのか
migemo は入力されたローマ字をクエリとして、
QUERY: nihongo PATTERN: (ﾆﾎﾝｺﾞ|ニホンゴ|日本(語|極道史|合成ゴム)|にほんご|ｎｉｈｏｎｇｏ|nihongo)
上記の PATTERN に見られるような正規表現を、辞書データを元に生成してくれるツールです。
なので、 migemo 自体が検索を行う訳ではないのですが、様々な検索系のツールと組み合わせることで
非常に強力な検索環境が整います。
C/Migemo の入手と基本動作
Rubyで書かれたオリジナルの migemo は2004年ごろに開発が停止しています (公式サイト)。
現在は C言語で書き直されたC/Migemo が開発されており(公式サイト)、こちらを入手しましょう。
Windows
公式サイトからバイナリを入手することができます。
Mac
Homebrew を用いてインストールすることができます。
$ brew install cmigemo
cmigemo はコマンドラインツールなので、Windowsならコマンドプロンプト、Macならターミナル(homebrew使ってるからもう動かしてますね)で使います。
そして大事なのが、起動時に辞書ファイルをオプションで指定しないと、期待した動作をしません。
Windowsの場合はダウンロードしたアーカイブを展開した中に、Macの場合は
/usr/local/share/migemo/utf-8/migemo-dict
に配置されているので、-d オプションとともにパスを指定しましょう。
そしてQUERYというプロンプトが表示されます。お好きなローマ字を入力してみて、どのような正規表現が出力されるか試してみてください。
で、なんでアニソンVJで migemo が使えそうだと
自分は今までアニソンVJをしていないので、次回のパーティーには試験的に始めてみようと考えています。 しかし、動画ディレクトリを見ていると、アニメごとにディレクトリが細かく分かれていて、目とマウスで追っかけていくのが案外しんどいなと思いました。 どうせなら動画のディレクトリ以下を、アニメのタイトル等で検索をかけてしまった方が早いですね。
そしてどうせなら、日本語のアニメタイトルでもローマ字で検索をかけることが可能ならなおさら快適ですよね。
それだけです(爆)
最後に
そしてこのような記事を書いていて申し訳ないのですが、具体的なソリューションがまだ見つかっていません。 見つけ次第、あるいは最悪作りしだい、記事にしたいと思います...
追記 (2016/05/24)
Macのターミナルで、以下の用に遊べます。
$ find [検索したいフォルダ] | grep -E $(cmigemo -d /usr/local/share/migemo/utf-8/migemo-dict -w [検索したいローマ字])
例えば
$ find ~/Dropbox | grep -E $(cmigemo -d /usr/local/share/migemo/utf-8/migemo-dict -w mentaru) /Users/(ユーザー名)/Dropbox/Twitter/メンタルリセット.png /Users/(ユーザー名)/Dropbox/Twitter/メンタルリセット修造.png /Users/(ユーザー名)/Dropbox/Twitter/メンタルリセット修造.xcf
EmacsでRubyのコードを補完するrobeがうまく動かなかった原因はプロキシ
備忘録です。
症状
Rails プロジェクトで emacs を起動し、
M-x robe-start ↩︎ No ruby console running. Launch automatically?(yes or no) yes ↩︎ Rails environment: development ↩︎
して、プロンプトに従って robe を有効にしていくも、最後に
Server doesn't respond
ってエラーが出て、robe が有効にならない。
調査
そこで、*Messages* バッファを確認したところ
(略) Using a proxy for http... Contacting host: (プロキシ) robe-request: Server doesn't respond
ってログがありました。そこで環境変数 no_proxy に
127.0.0.1localhost
を記載して同じことをやってみたら、エラーが出ませんでした。
念のため再度 *Messages* を確認すると
(略) Using a proxy for http... Contacting host: 127.0.0.1:62100
ローカルへのプロキシの使用が回避できていますね。
結論
プロキシ環境下で、Emacsのrobeを使う時には、
no_proxy環境変数を設定して、ローカルへのプロキシの使用を回避しましょう。
多分、robe 以外にも同じことが原因で症状起きてることありそう。。
Wordpressの自作テーマを作るためのお手軽ローカル環境が欲しい
やはり投稿間隔が空きますね。Yadex205です。
最近、Rubyを使う技術系のバイト始めました。 お陰様で今まで触れてこなかった技術的な内容がどんどん入ってきてて、楽しい反面理解がもう少しで追いつかなくなりそうです。
それとは関係ないのですが、某案件でウェブサイトを作ることになって、その時に悩んだことをとりあえずまとめてみます。
WordPressでサイトを作る
今まで僕が作ってきたサイトって完全に静的ページだけで構成されており、
CMSを使ってるぽくってもJekyllで無理矢理運用(しかもGithub Pages上)したりしていました。
今回は、大学のとある団体のウェブサイトを担当することになったのですが、
- 定期的に行われる活動の報告を掲載する。
→ またJekyllで行けるか〜〜〜? - 大学のドメインを使いたいので大学が提供しているサーバーを使わざるを得ない。
→ WordPressのっけるしかないじゃん〜〜〜。
ということで、WordPressを使ってウェブサイトを作ることになりました。 WordPress童貞はこれにて卒業になります。 そもそも以前、とあるサイトをJekyllとGithub Pagesで運用しているうちに更新作業がとても辛くなった経験があるので、 そろそろウェブサイトの制作作業とコンテンツの更新作業を分担する(記事更新は他の方が担当する)頃合いかなと思い、 今回の決断に至りました。
関係ないですが、ドメインが関係なかったとしてもTumblrは絶対に使わなかったと思います。あれはテーマの開発が面倒というか融通が利かないというか。。。
WordPressのテーマを制作する環境を整える
僕がウェブサイトを作る際には決まって
を導入しており、ECTのようなJSテンプレートエンジンとかSassのようなCSSコンパイラー(?)による処理を
ソースファイルが更新されたら自動で行い、プロジェクト内のとあるディレクトリに整頓して配置するようにしていました。
また、どこからでもデザインを行えるようGitのリモートリポジトリをGitHubやGitLabに作り、
$ git clone (省略)/project.git $ cd project $ npm install
すれば制作環境が他のマシンでもすぐ行えるようにしていました。
ところが。
WordPressはそれ自体を動かすのが面倒そう
WordPressを動かす方法を検索すると、LAMPという用語が飛び交っていておいおいという気持ちになります。
これだと全部のマシンでApache/NginxとMySQLとPHPを入れなくてはいけないのか。。。
そんなことをしなくても、上記の記事のようにPHPのビルトインサーバーを使えば、ApacheやNginxを用意したり、
Webサーバー上でPHPをCGIとして動かすためのphp-fpmを導入したりしなくても済みます。
もちろん本番環境では使えませんが、このように何かの開発を行うには持ってこいの機能ですね。
で、MySQLは入れなきゃいけないの?
WordPressは様々なデータを溜め込むのにデータベースが必須ですが、普通はMySQL(最近だとMariaDBも?)にしか対応していません。 MySQLとか、調べただけでも環境構築面倒そうですよね・・・。
そこで、SQLiteという手軽なデータベースを導入します。Androidアプリケーションに標準でsqliteを使った機能が付いているくらい手軽です。
主にアプリケーションに埋め込まれて利用されるもので、サーバーを立ち上げるとかアカウントを作るとかいう作業がいらなくなります。
ただし上述の通りWordPressはSQLiteには対応していないので、上記の記事の著者様が作られたsqlite-integrationというプラグインを組み込むことで
利用可能になり、WordPressのinstall.phpを使ってインストールする際にデータベースの質問がされなくなります。
どうせならサイトの設定も自動化したい
以上で、'PHP'がインストールされていればひとまずWordPressが動く環境が整います。ですが、WordPress起動時にサイト名や管理者アカウントの設定が必要になります。 どうせならgulpとかシェルスクリプトで簡単に整えたいですよね。
WP-CLIというそのまんまなソフトウェアがあります。これをWordPressのインストールされているディレクトリで実行することで、サイトや管理者の設定はもちろん、
プラグインのインストールやテーマの変更などもこれ一つで行うことができます。
設定スクリプトを作りました
今まで書いた内容を雑にまとめたようなシェルスクリプトを、それこそ冒頭で述べた今回のウェブサイト制作の際に作っていたので、 汚いのですがGistとして公開しました。
お手軽WordPress環境構築スクリプト · GitHub
$ cd project_root $ mkdir bin && cd bin $ curl https://gist.githubusercontent.com/yadex205/c42e7ee8f08dbc30872f9a1f78261d23/raw/36f0467885b242c01d04ec1aa7ea47371f0cd061/init.sh -O $ chmod +x init.sh $ ./init.sh -u [サイトURL] -t [サイトタイトル] -n [管理者アカウント名] -p [管理者パスワード] -e [管理者email]
のような感じです。なおオプションをしていしない場合、適当なデフォルト値が設定されます。
最後に
ちなみに、上記のスクリプトをGulpのタスクから呼べるようにし、さらにnpmのpackage.jsonのpostinstallスクリプトとしてそのタスクを動くよう書いてやると、
npm initした際に一緒にWordPressもインストールしてくれます。僕はいまそうやってます。
ということでWordPressテーマを作るのに手軽な環境を整える個人的な方法をずらずらと書き、その処理を行うスクリプトも公開しました。
僕は今からPHPと格闘してきます。。。
卒業目前なので近況報告
花粉症つらい、とありきたりなイントロ。Yadex205です。
3月上旬までヘビーな案件が多かったんですが、全て片付いたのでとりあえず近況報告、いわば生存報告です。
学会発表
2月の頭にも卒研発表がありましたが、3月入って先週はとある学会で自分の研究の現在の進捗を発表してきました。 発表時間長めなので余裕ぶっこいてスローペースで話していたら時間ギリギリになる失態、次回は気を付けます。 あとは、一緒に発表した友人と「他の方の研究聞いててワクワクできてめっちゃ良いな俺らのちょっと現実的過ぎるね」とか。
ちなみに発表の時に使ったPCが僕が普段VJで使ってる奴で、ステッカーべたべたに貼ってるんでめっちゃ目立ってました。 恥ずかしい。違うこれはパワポでVJしただけなんだ・・・。
そんな感じで、学校関係の行事といえば、大学の卒業式と大学院の入学式だけがスケジュール帳に書かれている状態で、 すごい今は落ち着いています。
サークル卒業コンサート
学会発表の前の週というドチャクソ多忙な時期にですが、所属していたサークルの卒コンでドラムたたいたりVJしたりしました。 やった内容書くと
- ニコル君のDJの隣でVJ
- Hi-STANDARDのコピーバンドのドラム
- 放課後ティータイムのコピーバンドの律ちゃん
VJは、事前に流す曲を見て動画用意したってのもあるけどアニメOP等しっかり出せたので良かったです。 出演前の打ち合わせで「ここでこうやってオタクの理性飛ばしたいね」みたいな話もしたり。 結果として理性飛んだ人がいろいろ出たから良かったです。
あと今回からRoland V-4がアンロックされたので使ってみたけど、画面n分割ぐりぐりやるの楽しい。 ちなみに例のVJ環境は、12/25のギグテクの時に作ったものがちゃんと動いたのでそれを使いました。 3段レイヤーのみ。クロスフェードなんてなかった。
ハイスタは相変わらずめちゃくちゃ楽しかったです。当日になって「Stay Gold 2回やろうぜ」とかアホな調子でやったけど、やれてよかった。 見てくれた人もめっちゃモッシュしてたりしてて見てて楽しかった。
HTTはとにかく安定してたたけるように努力。。そういえばボーカルが天使に触れたよ歌ってる途中涙ぐんでた。
VJ環境について
例のvvvv使った自作VJなんちゃらですが、今1から作り直してます。というのも、FileStream (DX11.Texture Vlc)を使って、DX9系ノードを 無くそうとしてます。たぶんこのほうがFPSも落ちないかもと期待。 ただ、以前DX9版のVLCノード使ったときに突然先頭にシークしたりと不安定な動きが多かったので、DX11版でも大丈夫かチェックします。
あと今回からパッチをGithubに上げようと思っているので、もうしばらくしてコミットがある程度積み重なったらリポジトリ公開しようと思います。 そうしないと自分を追いやれない()
今後の予定
GIG&TAKE 1st. Anniversary
次の出演は 3/25(金)に、1周年を迎えるGIG&TAKEでVJします! (Tweetvite)
今までVJやってて最近特に自分に変化がないので、変化を見せられるよう頑張りたいと思います。 おそらくV-4を持ち込むと思いますが、変わった点が機材だけ、という風にはならないように・・・。
あとはせっかくTouchOSCのアプリ買ったのでそれも使ってみたいと思います。(実装が間に合えば
サイト更新
自分のサイト、Github PagesにPushしてから一度も更新してないので、そろそろサイトをTumblrで作り直そうかなという感じです。
ここ最近ウェブ関係の技術から離れていたので少しリハビリが必要な感じがあると思います。。
