WinのResolume上でTwitterのタイムラインを表示させる (Spout, Processing)
VJどんな感じにすればいいかいろいろやってみているYadex205です。
以前、別のブログで「Windows7でProcessingとResolume Avenueとを連携させる」話を雑に書いていたのですが、 雑な管理でブログごと消し飛ばしてしまいました。
で、Win8.1でやろうとしてソフトの相性が悪くてうまくできてなかったのですが、Win10になって復活したので、 備忘録兼ねてもう一度簡単にまとめます。
本題
Resolumeは、AvenueとArenaという二つのVJソフトを手掛けているオランダの会社で、僕はAvenueを使ってます。前の記事に書いた通りライセンスふっ飛ばしたので体験版モードですが。
サークルのライブで友達がDJしている隣でVJしていた時、せっかくハッシュタグ用意してTLが盛り上がっているのだから、スクリーンにそのツイートを乗っけれたら面白いんじゃないかと思ったのが始まりです。ちょっと違うけどテレビ番組でもハッシュタグ拾ってリアルタイムに表示するやつとかあるじゃないですか。
ただし、Resolumeには(というかVJソフトで普通では)Twitterのタイムラインやツイートを表示する機能はデフォルトでは入っていません。ので、こちらで用意する必要があります。今回は、一つのクリップとしてツイートをリアルタイムに表示できるようにします。
なお今回は Resolume Avenue 4.2.1 でやってます。Arenaの場合やほかのバージョンの場合は適宜置き換えてください。
注意 1. この記事はWindowsが対象です。MacはSyphonがあるから羨ましいよ!! 2. 僕は、この後に出てくるProcessingについて初心者です
Processing
Processingは、Java言語でビジュアルな表現を可能にする環境(?)です。普通のJavaとは違って少し決まりごとがありますが、Javaやオブジェクト指向言語の練習でよく用いられるイメージがあります。ビジュアルパフォーマンス等にも十分生かせますよね。
さて、ここでTwitterとの関係なのですが、Twitter4JというJavaで書かれたTwitterAPIの有名なライブラリがあります。今回はこのTwitter4Jを使ってProcessingでプログラムを書き、描画ウィンドウ上に特定のタイムラインのツイートを表示する仕様です。
ただ、今回この記事ではコードを割愛させていただきます、、すみません。 一番大事なところですが、手元にあるコードがガバガバすぎてお見せできません、もうちょっとましにしてからGistか何かで公開しますね。。
Processing のプロジェクトディレクトリに code
というディレクトリを作成し、Twitter4Jの各種jarファイルをその中に入れて、それからいろいろやります。。なお出来たものが以下の画像のようになります。
Spout
Processingでツイートを表示させるところまでは良いのですが、ではどうやってResolumeのクリップとして取り込めるでしょうか。MacOSXだとSyphonっていう神機能があって、アプリケーション間でそれぞれが描画しているものをやり取りできますが、Windowsだともちろんありません。
そこで登場するのがSpoutです。本当にWindows版Syphonと言えると思います。アプリケーションはSyphonより限定されるとは思いますが、これもアプリケーション間で描画しているものを送ったり受け取ったりできるようにするものです。
まず、Spoutがインストールされたディレクトリ C:\Program Files (x86)\Spout2\
に移動すると、その中の FFGL
というディレクトリに SpoutReceiver2.dll
が
入ってると思います。これを C:\Program Files (x86)\Resolume Avenue 4.2.1\plugins\vfx
ディレクトリにコピーします。 その後Avenueを起動したときに、
Sources
欄のFFGL Sources
にSpoutReceiver2
が入っていたら成功です。
次に確認のために、本当にSpout経由でAvenueで映像が取得できるか確かめます。Spoutディレクトリの中の DEMO
というディレクトリの中に SpoutSender.exe
という実行ファイルがあります。これをクリックしたら、Spoutのロゴがテクスチャとして張り付けられてる立方体がくるくる回る画面が出ると思います。その次にResolumeで
Sources欄から先ほどの SpoutReceiver2
をクリップ欄に入れ、選択します。すると下部のプロパティ画面のClipセクションのパラメータ一覧に Select
が出現すると思います。
このSelect
ボタンを押すと、Spout経由で描画内容を転送しようとしているSenderの一覧が表示されます。この中で Spout DX9 Sender
があると思うのでそれを選びます。
うまくいけば、SpoutSender.exeを起動したときに出てきた描画内容とまったく同じものが、AvenueのOutput Monitorにも描画されてるはずです。
ProcessingとAvenueで連携
さて、先ほどのProcessingで描画している内容を、SpoutのSenderになるようにします。 具体的には、先ほどのProcessingのプロジェクトにファイルをいくつか追加し、書いたコードに数行追加するだけです。
まず作成したProcessingのプロジェクトのディレクトリ内の code
ディレクトリに、 Spoutディレクトリの PROCESSING\x64\SpoutSender\code
の中身をコピーします。なお使ってるProcessingが32bit版なら、Win32
ディレクトリ
に入ってるものをコピーしてください。
次に、Processingのプロジェクトディレクトリに、PROCESSING\x64\SpoutSender
内にあるJSpout.java
とspout.pde
をコピーします。
なので、ファイル配置は以下のようになりますね。
(Processingのプロジェクトディレクトリ) |- code |- JSpout.class |- JSpout.dll |- JSpout.java |- spout.pde |- 作成したProcessingファイル.pde
最後に、作成したプログラムファイルにSenderとして機能するためのコードを追加します。
まず、setup()
関数の前に
Spout spout;
と書き、変数を宣言します。この時点ではまだ初期化されていません。
次に、setup()
関数内の終わりに
spout = new Spout(); // Spoutクラスのインスタンスを作成 spout.initSender("Spout Processing", width, height); // Senderを初期化。
を追加します。spout.initSender()
の第1引数には、Senderの識別用の名前を指定します。第2, 3引数のwidthとheightは、setup()
関数中でsize()
関数を実行した際に値が割り当てられるやつです、放置して大丈夫です。
次にdraw()
関数内の終わりに
spout.sendTexture();
を追加します。これで描画内容をSendすることができます。
最後に、exit()
関数内に
spout.closeSender();
super.exit();
を追加します。終了処理ですね。
以上の作業を終えてから、Run
をクリックしてプログラムを走らせてみてください。正常に動いてProcessingの描画画面が出たのを確認したら、AvenueのSpoutReceiver2
のClipのプロパティ画面で、先ほどと同じようにSender一覧から選択する画面をだして見てください。spout.initSender()
の第1引数で指定した名前が入っていたらそれをSelectしてみてください。
これでProcessingで描画したツイートがAvenueのクリップとして描画できたら、勝ちです。いかがでしょうか?
おわりに
Resolume Avenue/Arena上でTwitterの特定のタイムラインのツイートを表示する方法について、ProcessingとSpoutを使った方法を軽く紹介しました。 プログラムを書かなくてはいけないことや、導入方法が面倒ではありますが、ある意味VJソフトの拡張を作るような気分で楽しいのではないでしょうか。
なお、Spoutは現在、Max, OpenFrameworks, Unity, VirtualDJなどにも対応しているらしいです。ちょっと前より対応ソフトがすごい増えてて、作られてる方本当にすごいと思います。 なので、ProcessingとResolumeだけじゃなくて、OpenFrameworksとMaxとかもできるはずです。
今回使ったものや環境
現状報告・VJで出ます 01
タイトルが思いつかなかったので現状報告です。ゼミかよ。
Yadex205です。今週大変だったことと来週大変になることを書きます。
卒研計画発表
理系学部4年生の避けて通れない道、卒論のための計画発表会が今日終わりました。 結果がどうなっているかはわかりませんが、とりあえず終わって一息つけてます。
発表のための資料などを夏休み後半をほとんど(少し盛ってる)使って書き、 直前ではスライド作ったり発表練習をしたりしていました。もうパソコン見たくないって思うくらい。
とりあえず、小休止おいてからまた研究の作業とかも進めていって、ちゃんと結果を残せるように頑張ります。
初めてVJ出演します
話がゴロっと変わって、なんと来週初めてVJをすることになります。 VJってなによって方はWikipediaをご参照ください。
詳細をいうと、10/10土曜日に、武蔵小杉のアルファクロスというお店で行われる musabeat 04 にてVJを一部担当します。 今日の発表会がおわったばっかりでまだ緊張が来てないですが、たぶんすぐ緊張が来ます。出演される方はこの界隈だと有名な方ばかりです、すごいです。 今はvimeo.comでfreeのvj loopを探してみたり、いくつか(といってもまだ1個)自作で素材を作ったりしています。ちゃんと対策と練習してから行きます。
先日に僕の大学の友人がとあるアニクラで初DJをしたときに、その友人と繋がりのあるクラブ界隈の方とお話ができ、 自分が大学のサークルでVJやってたことを話したら出演の話をいただいた、という次第です。本当に驚きましたしうれしかったです。
ですが、お誘いを受けた直後にResolume Avenue(VJソフト)のライセンスを誤ってふっ飛ばすとかいうことをやらかしました。 Resolumeは体験版モードだとロゴが時々写りこむ仕様なんですよ。確認したらそれでもOKとのことだったので事なきを得た感じですが、 次回はちゃんと気を付けようと思います。。。ちなみにVJソフトの自作も考え(笑)、Node.js(厳密にはio.js)とElectronでせっせと何か 作ってたんですが、やっぱ動画処理のところがウェブ技術だけだと難易度あがりますね、たぶん間に合いません。ちなみにSeriously.jsが面白そうです。
おわりに
10/10、関係者のみなさま、どうぞよろしくお願いいたします。
大学院に受かりました。
Yadex205です。ちょうど台風ですけどめげずに学校にきました。
院進学
おかげさまで電気通信大学の大学院に受かることができました!引き続き、インターネットやネットワークにかかわる研究を進めていきたいと思います。これからもよろしくお願いいたします。
なにしよう
受かってほっとしたので何か作ろう、というわけにもいかず、研究計画発表が夏休み終わりに待ち構えてるので、とにかく作業を進めていかなくてはいけません。がんばります。
それが終わったら、以下のことは必ずやろうと思います。
- バイトはじめる
- 以来されてる動画を作る
- VJの練習とか
- 某Twitterライブラリの改変
p.s.
僕が所属していた音楽サークルのライブ、労害枠でどうか出させてください(切実
【Android】 ListPreferenceのentryValuesにinteger-arrayは使えない?
結局ブログ放置気味なので、本当に備忘録みたくちょこまかと記事更新していこうと思って第一弾がこれです。
AndroidのPreference(設定画面のパーツのクラス?)の中にListPreferenceという、多数の項目からラジオボタンで選択するタイプのものがありますが、それの項目設定で少し詰みました。
<?xml version="1.0" encoding="utf-8"?> <PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android"> <ListPreference android:key="pref_list" android:title="@string/pref_list_title" android:dialogTitle="@string/pref_list_title" android:entries="@array/pref_list_entries" android:entryValues="@array/pref_list_entryValues"/> </PreferenceScreen>
ここで、@array/pref_list_entryValues
はinteger-array
です。この状態で設定項目を選択するとNullPointerException
がおきます。
。。。結局は下のStackoverflowの質問で解決しました。回答者は「Arrayなアイテムしか受け付けない」と書いてますね。
なので上記のandroid:entryValues
に入れる配列もstring-array
に変更したところエラーは起きなくなってます。
ちなみに何がNull
なのかはよく分かりませんが、どうやらListPreferenceクラスの中で選択アイテムを格納する配列があり、それがNullになってるのかな。。?
JavaScriptだけでアプリ作る環境を作るのに苦労した話
こんにちは、Yadex205です。 自分のツイッターのプロファイル文に「ツイッタークライアント作ってます」的な事を 書いてるんですが(リリースすらしてないけど)、いままでそのベストな開発環境を 見つけられないままズルズル引きずってました。(純JSなアプリ)
今まで試したこと
初めはWindows Store App向けのつもりで作ってたのでVisualStudioでJSアプリを 作っていましたが、VisualStudioの導入が必須になり、Emacsキーバインドは 導入できないしgitとの連携も面倒臭そうなので、直接ブラウザ上での開発に 以降しようと思いました。
ところがTwitterとの通信で、CORS(Cross-Origin Resource Sharing)の壁に遮られます。 Ajaxを使った別ドメインのリソースへのアクセスをもうちょっと安全にしたもの(ちょっと違う) なんですが、TwitterはこのCORSに対応してない、つまり
純粋なJavaScriptと現状のブラウザだけでTwitterアプリは開発できない
んですよ。困った。なのでブラウザのCORSを無効化してしまえばいい話だと気づいたので、 いろいろ探してみました。
結果分かった事として、Chrome系(Blink)のブラウザは起動時に
$ chrome --disable-web-secutiry
というオプションをつけると、ウェブセキュリティーの機能の一つとみなされてる為でしょうか、 CORSが無効化されるので、VisualStudioで開発していた時のように通信に支障がでなくなります。
ただ自分は体質上の理由でGoogle製のものに触ると爆発してしまうので、なんとかFirefoxでもできないかと いろいろ探して見たところ、最近のバージョンのFirefoxではCORSを無効化するオプションが無効化(?)。
終わった。
Cordova の導入
Apacheから、Android、iPhone、Windowsなどのたくさんのプラットフォームで動かせるアプリを HTML5で作れる「Cordova」というものがリリースされています。 最近のVisualStudio2013にはプロジェクト作成の際に、Cordovaを使ったプロジェクトが作れるようになってます。 自分はそこでCordovaの存在を知ったのですが、今回自分のCentOS環境にそれを整えてみようかなと思いました。
今回は導入方法は書かないので、英語でかかれてますが公式ドキュメントの方を参考に、 やりたい人はやってみてください。
結論
Chromeの--disable-web-secutiry使うのが一番サクサクだと思うよショボーン(AA略
ちなみにCordovaで使うシミュレーターは、FirefoxOSが一番快適だと思います。Androidエミュの遅さは 皆さんご存知だと思いますし、あとiPhoneアプリはMacじゃないと、Win系アプリはWinじゃないと ビルドできません。
なんかいい環境ないんですかねぇ・・。
— グッフォーのHELLO61のペンキ (@yadex205) 2015, 5月 13
デスクトップ用途にCentOS7をカスタマイズしてく手順
こんばんは、Yadex205です。 最近、よくCentOS7で開発環境を整えるようになりました。 その際に「作業用BGM欲しい」って欲を抑えきれなかったりして、 開発環境だけじゃなく結局普段使いできるようにしたいと思うように(?)。
ということで、CentOS7で普段使いできるようにカスタマイズしていきたいと思います。 なお、選んでるパッケージは宗教上の理由で偏りがあります。ご了承ください。
そもそもなんでCentOS
- 安定性が評判。
- Fedoraも良いんだけどアップデートしたら動かなくなるとか結構不安定。
- Debian系列のaptだったりrootが隠されてる(?)構造だったりが嫌い。
- 特にUbuntuを使ったら何か負けた気分になる。
- OpenBSDでデスクトップ環境整えようと格闘していたのが馬鹿らしくなった()
まず基本的な環境を整える
CentOS7をインストールしたら、まずは既存パッケージたちの更新を。
$ sudo yum update $ reboot
そして、インストール時に言語を日本語に設定した場合、 ホームディレクトリにあるフォルダたちの名前が日本語になっていてすごい不便なので、 英語に戻します。
$ LANG=C xdg-user-dirs-gtk-update
これでダイアログが出てきますが、「Don't ask me this agein」にチェックをつけてから、「Update Names」をクリックします。
もしダイアログが出なかった場合は、一度設定アプリを開いて言語を英語にしてから再度ログインするとダイアログが表示されます。
リポジトリの追加
これから必要なパッケージをYumを使って追加していきますが、始めから登録されているリポジトリだけではカバーしきれないので、いくつか追加します。
具体的に追加するのは
- EPEL
- Nux
- Adobe Release
です
$ sudo yum install epel-release $ sudo rpm -Uvh http://li.nux.ro/download/nux/dextop/el7/x86_64/nux-dextop-release-0-1.el7.nux.noarch.rpm $ sudo rpm --import http://li.nux.ro/download/nux/RPM-GPG-KEY-nux.ro $ sudo rpm -Uvh http://linuxdownload.adobe.com/adobe-release/adobe-release-x86_64-1.0-1.noarch.rpm
日本語IMEの追加
ここではibus-anthy
を追加します。まず以下のコマンドでパッケージを追加します。
$ sudo yum install ibus-anthy
ここで一旦ログアウトし、再度ログインします。そして設定アプリから言語メニューを開き、入力リソースに ibus-anthy
を追加します。
「日本語」を選択すると「日本語(Anthy)」という項目が出てくるはずなので、それを追加し、後はキーバインドを好きなように変えてください。
最新版Firefoxを入れる (ついでにFlashも使えるように)
現在(2015.05.08 金)だと、リポジトリから入手できるFirefoxのバージョンが31、公式の最新版のバージョンが37と、何となく気にくわないので最新版を入れます。
注意: この方法ではプリインストールされているFirefoxをアンインストールします。(Yumで再インストール可能)
まず、競合すると邪魔なのでYumを使ってプリインストールされているFirefoxをremoveします。(他にも良い方法はあると思いますが。。)
$ sudo yum remove firefox
次に公式からTarballをダウンロードします。後は以下のとおりです。
$ cd path/to/firefox/tarball $ tar xf firefox-xx.x.x.tar.bz2 $ sudo mv firefox /opt $ sudo ln -s /opt/firefox/firefox /usr/local/bin/firefox
これでターミナルでfirefox
とコマンドを入力すれば、最新版が立ち上がるはずです。
そしてGNOMEのランチャーからも起動できるようにします。具体的には/usr/share/applications
フォルダにfirefox.desktop
というファイルを作って配置します。
配置時にはroot権限が必要になるので適宜sudoしてください。
[Desktop Entry] Name=Firefox Exec=/usr/local/bin/firefox %u Terminal=false X-MultipleArgs=false Type=Application Icon=/opt/firefox/browser/icons/mozicon128.png StartupWMClass=Firefox StartupNotify=true MimeType=text/html;text/xml;application/xhtml+xml;application/xml;application/vnd.mozilla.xul+xml;application/rss+xml;application/rdf+xml;image/gif;image/jpeg;image/png;x-scheme-handler/http;x-scheme-handler/https;x-scheme-handler/ftp;x-scheme- handler/chrome;video/webm; Categories=GNOME;GTK;Network;WebBrowser;
これでGNOMEのランチャーでfirefoxを立ち上げることができます。
ここで、LinuxでのFirefoxとWinやMacでのFirefoxでは地味に挙動が異なる点があると思います。個人的に不便だと思ったのは
- URLバーをクリックしても全体が選択されない
- BackSpaceキーで前のページに戻らない
- マウスの中ボタンを押しても自動スクロールができない
です。これらも変更していきます。
まず、urlバーにabout:config
と入力し進みます。警告画面が表示される筈ですが、気にせずさらに進んでください。
そしてプロパティを以下の様に変更します
browser.urlbar.clickSelectsAll = true browser.backspace_action = 0 general.autoScroll = true
これで上記の事柄は改善できる筈です。
$ sudo yum install flash-plugin $ sudo ln -s /usr/lib64/mozilla/plugins/libflashplayer.so /usr/lib/mozilla/plugins/
NTFSパーティションへのアクセス
時々、Windowsのパーティションにあるファイルを見たい時があると思いますが、このままだとNTFSのパーティションは操作はおろか見ることもできません。
なのでntfs-3g
というパッケージを追加します。
$ sudo yum install ntfs-3g
音楽プレーヤー
一番大事な(?)音楽プレーヤーを追加します。具体的にはRhythmbox
というGNOME標準のプレーヤーを追加します。
ただし、プレーヤーを追加しただけではMP3やAACと言った、よく使われるのにフリーじゃないコーデック達が入っていないので、それらも追加します。
sudo yum install rhythmbox gstreamer gstreamer1 gstreamer1-plugins-bad gstreamer1-plugins-ugly
これでitunesで取り込んだ様な楽曲もRhythmboxで再生できる筈です。開発環境でもグッドモーニングアメリカ聞ける~~~。
最後に
ほとんどの人が音楽とネット動画は視聴するだろうと思ったので、とりあえずAdobeFlashと音楽プレーヤーが使える所まで紹介しました。 後はGIMPやInkscape, Audacity, Blenderなどのクリエイティブなソフトを追加したり、Emacsにelispを追加しまくってオレオレエディタ環境を構築したり、Dropboxを使えるようにしたり、いろいろだと思います。
かなり適当に書きましたが、ご参考になれば幸いです。