Author Archives: neralt

node.js express node app.jsでなぜ起動できないか

expressモジュールのexpressコマンドでテンプレートを作った場合に、なぜ「node app.js」コマンドで動かないのか。それは、express4の場合、bin/wwwというファイルを起動することでこのアプリケーションが動くようになっているからである。

package.jsonの中にはこう書かれている。つまり、bin/wwwを最初に起動するという指示がされている。(なお、このままでもherokuで動くので書き換える必要はない。)

“scripts”: {
“start”: “node ./bin/www”
},

ではwwwファイルは何をしているのか?最初に次のjsが記されている。このjsはつまり、アプリケーションのルートディレクトリ内のapp.jsをrequireしている。

var app = require(‘../app’);

requireされる先のapp.jsファイルには何が書かれているか。重要なのは最後に書かれている次の一文である。

module.exports = app;

exportは簡単にいうとreturnに近い。ここではapp.jsがrequireされたときに最後の部分でappを返すのである。これがどこに返されるか?元のbin/wwwを再度見てみる。

var app = require(‘../app’);

つまり、appという変数に、app.jsの中で様々処理を行ったappインスタンスを入れている。

そしてその後、wwwファイル内ではappに対して、大きく次の3つの処理をしている。httpサーバーを作成し、app(これはexpressアプリケーションだ)と結びつけ、そして、できたサーバーにポートを指定している。

var http = require(‘http’);

var server = http.createServer(app);

server.listen(port);

まとめ

なぜアプリケーションのルートディレクトリにあるapp.jsをいつもどおりにnode app.jsと動かしても正常な動きをしないのか。つまり、サーバーを作って、htmlをレンダリングして…という一連の動作が起きないのか。それはこのアプリケーションがwwwを起動することが前提の作りになっているからである。そしてwwwはapp.jsの中で作られるexpressアプリケーションにhttpサーバーを関連付けている。

今後の開発は基本的にapp.jsを更新していけばいい。ただしapp.jsに全てを書くのではなくて、app.jsではリクエストに対する処理をrouteの中にあるjsを起動することを指定する。そしてそのjsがjadeファイルをrenderすることでクライアント側にhtmlファイルを返す。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 2 人中 1 人がこの 投稿 は役に立ったと言っています。

保護中: 草稿

このコンテンツはパスワードで保護されています。閲覧するには以下にパスワードを入力してください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

ノンプログラマーのためのNode.js+Heroku+SourceTree

記事の対象者

  • 上記「Node.jsの教科書」を読み進めている人
  • Node.js + Eclipse + Nodeclipse + Heroku
  • Git はなんとなくわかるができればSource Tree を使いたい

http://qiita.com/hkusu/items/e46de8c446840c50aefe

Node.js + Eclipse + Nodeclipse の準備

参考リンク:http://qiita.com/suesan/items/7f2c4863feb87a623517

基本的には教科書にしたがって実行すればよいです。ただし注意点してほしいのはつ次の手順は行ってはいけない模様。「Help → Eclipse Market → Nodeclipse 1.01を入れる」はダメ。これは別物で、後述するトラブルにつながる。正しくは「Help → Install New Software → http://dl.bintray.com/nodeclipse/nodeclipse/を指定」

Nodeclipse 1.01 を入れてしまうと「build.gradle」というファイルが自動でプロジェクト内に生成されるが、このファイルが原因で Heroku へのPush ができなくなる。なので、あくまで上記手順を実施すること。

フォルダ内のファイルの準備

参考:

スクリーンショット 2016-04-27 10.37.41

Eclipse でプロジェクトを作成すると上記のファイルが自動的に生成される。基本的にはこれを活用することができる。ただしいくつか変更と、ファイルの追加が必要。

変更

IPアドレスとポートの指定を上記のように変更する。

ファイルの追加

Procfileを作成し、フォルダに追加する。Sublime Text 2 を使っているのであれば、File → New で新しいタブを開き、以下のように記述し、save → ファイル名を「Procfile(拡張子はつけない)」としてフォルダ内に配置する。

内容は次のようにする。hello-world-server.js の部分に最初に実行するファイル名をけば良い。

注意

私の環境では、Textファイルの拡張子を削除しただけではProcfileとして認識されなかった。また同フォルダ内にある package.json をコピーして拡張子を削除しても認識されなかった。Sublime Text等、エディターを使ってファイルを作るのがベストだと思われる。

その他のファイルの内容

その他のファイルの内容については、さしあたって変更しなくても動く模様。package.json には様々な設定を書くようだ。特にモジュール(ライブラリ)を使っている場合には注意。ただし、今回はEclipse で作成したデフォルトのプロジェクトを実行することだけに注力する。

Heroku のアカウントをとる

これは普通にできると思います。

Heroku Toolbelt をいれる

指示に従ってHeroku Toolbeltをダウンロードしてインストールする。アプリケーションやアドオンをマネージしたりスケールするために使用する。

次にMacならターミナルで以下のコマンドを実行していく。heroku コマンドと gitを使うためにこの承認が必要。Heroku で使ったメールアドレスとパスワードで認証してください。

Source Tree を使ってHerokuにデプロイする

Git と Source Tree に関しては上記の本が学習に最適で、私もこれを使って理解できた。Git はプログラムを書く以上必須になるので、学習をおすすめしたい。

ここから、プロジェクトのあるフォルダを指定して、その場所をローカルリポジトリとする。cd はターミナルのコマンドラインで、指定したディレクトリ(フォルダ)へ移動する。このさいパスを指定するのが簡単になる方法がある。Mac でoption + command + c でフォルダをコピーすると、そのフォルダへの「パス」が取得できる。これをcommand + v でターミナルにペーストすればよい。上記の「プロジェクトのディレクトリへのパス」の場所に指定すれば良い。

giti init で今いるディレクトリをローカルリポジトリにする。

Herokuにアプリを作る。これが自分のソースコードを受け取るところ

(createの後ろに任意の文字列を付けることでURLを好きなものにできる)

これをした瞬間にherokuにリモートリポジトリができると同時に、ローカルのリポジトリとも関連付けが起きる。この時点でクラウド上のHerokuにneraltというアプリができた。中身はまだ空。

デプロイ ステージに追加、コミット、プッシュ

次にロカールリポジトリを Heroku アプリのためのリモートリポジトリにデプロイする。デプロイとはウェブアプリケーションを本番環境に配置すること。Heroku ではHeroku のリモートリポジトリに Push することでデプロイできる。つまり、基本的には Git の操作である。

=====以下ソースツリーでも可能

git add . //ステージに追加

git commit -m “コメント内容” //コミット

git push heroku master //プッシュ

=====

ソースツリーからは、まずディレクトリを「開く」コマンドで開くことで、ソースツリーに既存のリポジトリを追加できる。

これでエラーがでなければ、Push = デプロイ成功。

成功すれば、heroku open でブラウザ上で開くことができる。

ejs等のモジュールを使ったプロジェクトのデプロイ

モジュールを使う場合のポイントは、package.json内の「dependencies=必要なモジュール」の欄に必要なモジュール、ここではejsが記録されていないといけない。

これは手書きでやらなくても以下のコマンドでモジュールをカレントディレクトリに作成するとともに、package.jsonに記入までしてくれる。プロジェクトまでカレントディレクトリを移動して、

npm install ejs –save

expressを活用する場合はこちら

node.js express node app.jsでなぜ起動できないか

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

P_3_2_1_01.pde 文字

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

新しいMax for Liveのパッチ、Connection Kit の使い方

https://www.ableton.com/ja/packs/connection-kit/

Arduinoやoscと容易に連携できるAbleton公式のMax for Liveパッチが公開されました。早速使いましたのでレビューします。

Max for Liveとは何か

そもそもmax for Liveを知らない人もいるかもしれませんので説明します。max for Live はableton Liveの最上位版suiteを購入すると付属するプラグインで、maxというビジュアルプログラミングソフトウェアをLiveに使いやすいようにパッケージ化したものです。ですのでmax for Liveの中身はほとんど完全にmaxです。

ではMaxとは何か

ではmaxとはなんでしょうか。maxは次の画像のように、オブジェクトといわれるブロックをケーブルでつなぎながらプログラミングし、音や映像を扱うソフトです。基本的にはミュージシャンには必要がないとは思います。今はほとんどのことがvstで可能だからです。しかし、どうしてもableton LIVE単体では実現不可能な機能がある場合に、maxを使ってその機能を作ることができます。

具体的には私は映像をMIDI情報でコントロールしたいと思って学習し始めました。

スクリーンショット 2016-03-22 9.14.04

Arduinoとは

Arduinoはこの箱のなかにある青い基盤です。この基盤はパソコンとUSBケーブルでつながります。そしてこの基盤にはモーターやセンサーやツマミをつなげることができます。結果としてArduinoを介してLiveは外の世界の信号を受け取ったり、または進行を基盤に送ることでモーターを回したりライトを光らせたりすることができます。

CedEs-UWwAAXwR6

Arduinoやその他の安価なデバイスが出る以前は、こういったテクノロジーを専門家以外が扱うことはハードルが高かったのですが、Arduinoの出現によって私のようなミュージシャンにもセンサーやモーターを扱うことが容易になりました。次の写真のようなアマゾンの箱に詰め込められたコントローラーを作りました。
CedEs-YW4AAdAXR

Max for Live Connection Kit とは何か

では本題のLive Connection Kitです。次の動画を見てください。シンセサイザーのLFOを先ほどご紹介したArduinoの電子工作でつくったamazon箱コントローラーで制御しています。そしてLFOに連動する形でProcessingという映像をプログラムするソフトで創った映像を動かしています。そのためにはOSCというプロトコルを使っています。

こういった様々なハードウェアやシステムをコントロールするためにConnection Kitを使っています。

具体的には次のパッチを使っています。

Arduino

まずはArduinoパッチ。Amazon箱コントローラーからの信号を受け取るためのパッチです。Portを自分が使用しているArduinoに合わせて、A0やA1といったArduinoインプットからの信号をMapボタンをおしてLiveの各デバイスに結びつけてあげます。ここではA0をシンセのフィルターに、A1をLFOの周波数に結びつけてコントロールしています。

スクリーンショット 2016-03-26 15.55.32

OSC Send

次にOSC Sendです。ここではシンセのLFOの周波数つまみの値をOSCに変換してPort 12000に送っています。この信号はProcessingという動的に映像をするソフトで受け取って丸の大きさや色をコントロールしています。
スクリーンショット 2016-03-26 15.56.02

以下の画像はProcessingのコードとコントロールされる映像です。OSCについては次の記事も参考にしてください。http://neralt.com/max-processing-osc-relation/

スクリーンショット 2016-03-26 15.56.17

ミュージシャンがプログラミングする意味はあるか

正直にいってプログラミングは純粋なミュージシャンにはハードルが高く、例えばMaxを使って市販のVSTにはない音楽性をもったシンセやドラムを制作するのは不可能に近いと思います。Maxを使って一からシンセを作らなくとも、Max for Liveで公開されているパッチを使えば、音楽的なものは全て手に入るといっても過言ではありません。

しかしVSTではできないことがいくつかあります。そういったことを達成するためにプログラムをする意味があります。

今回公開されたパッチもそうです。こういった電子機器や映像との連携はLIVEだけではできません。Max for Liveがあってはじめて達成できます。今回はわざわざ作らなくとも、連携が非常に容易にできるようになりました。一から作るとなるとかなり大変なものですが。

今まではこれを専門のチームにわかれて行ってきたと思います。映像は映像、音楽は音楽、電子デバイスは電子デバイスと、専門家がチームを組んで行ってきました。その理由の一つは、 各技術的なハードルが高いために、一人ですべてをこなすことが非常に難しかったということがあげられるはずです。またコストも高く、専門的なソフトウェアやツールは高額でした。

しかし昨今、明らかにコストと敷居が下がりました。そんなことはメディアアートをやってる方からすれば当たり前だ、ということになると思いますが、私のようなテクノロジーの末端にいる人間にも実感できるレベルの動きが起きています。abletonという音楽専門のソフトウェアメーカーがarudionoやlittle bitという電子工作キットと連携する今回のようなパッケージを出してきたことも象徴的です。メディアをまたいだアートの実現可能性が圧倒的に高まっているのです。

このような現状に後押しをされ、ミュージャンが直接プログラムを書くことで実現できる可能性はいくつかあると思います。 

私が今やりたいと思っているのは直接的に楽譜情報と映像がリンクする、もしくは映像からのフィードバックが楽譜情報に反映されるようなライブパフォーマンスです。こういったシステムを作るには結局、どのような楽譜情報に対して映像をコントロールするのか、ミュージャン本人が理解していないと実現が難しいのではないでしょうか。両者を一人でコントロールする方がよりイメージしたものができそうだなと思っています。他にもセンサーの活用も演奏者本人がコントロールすることで広がる可能性があると思います。

テクノロジー的には大したレベルではなくとも、音と映像の連携をコントロールすることで、また面白いものが出てきそうです。

ではまた!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 4 人中 4 人がこの 投稿 は役に立ったと言っています。

Processing 日本語、文字、文字コード、2byte文字等の整理

2byte文字 漢字、全角ひらがな

1byte文字 英語、アルファベット

1byte=8bit 8桁の2進数

2byte=16bit 16桁の2進数

binary(a) はaの文字コードが65なので2進数だと 1000001 に変換される。

65は2進数で1000001

2進数表記の文字列=日本語、英語

16進数表記の文字列=FFFFFFで白、等に使う。文字には使わない。

フォントブック

ttfの使い方。ランチパッドでfont bookをみつける。欲しいフォントを見つけたら右クリックでファインダーに表示。

 

Processingで日本語使う

二段階のステップがある

  1. エディターで日本語打ち込めるように設定する
  2. text()関数で使用するフォントを、日本語に指定する

環境設定でエディターの日本語表示の設定

スクリーンショット_2016-03-25_12_57_16

text()ファンクションで使用するフォントを日本語に指定する

Geomerativeライブラリの使い方

http://freeartbureau.org/fab_activity/geomerative-tutorial-part-1/

このチュートリアルがよい。

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

Processingの参考書

Processingの参考書、簡単順に並べてみました。全てを所持してはいません。

  • 全くの初心者でもOK。
  • 安い。
  • 開発者が書いている。
  • ただし、ある程度プログラムを書いたことがある人であればネットで検索しても見つかる内容かも。

  • かなり分厚く、基礎を固めるには向いている。
  • 開発者が書いている。
  • でかい、高い。
  • 非常に厳密、網羅的なので、これを一冊終わらせるというよりは、辞書的に使うほうがよいかも。
  • 少なくとも日本語でかなりの情報が手に入るので、価値はある。

  • いわゆる動きのあるProcessingっぽいコードがどうなっているのかわかる。
  • ある程度他の言語が書ける人はこれがちょうど良さそう。

  • 特に重力や引力、といったパラメーターをどうProcessingに盛り込むかが書かれている。
  • vectorを多用。
  • ライフゲーム的なものもある。
  • アルゴリズムを学ぶのに良い。
  • ただし、作例は白黒メインで、非常に地味。あくまでアルゴリズムを学ぶ用。

  • でかい、分厚い、高い。
  • 作例が非常にかっこいい。
  • ただし基本的なことに関しては説明はないので、ある程度コードが読める、自分で調べられるレベルになってないときびしい。
  • とにかくでかい。

 

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

時間経過と文字と大きさ P_3_1_1_01

millis() 実行してから今までの時間をms単位で示している。1000msで1秒。

void drawの後半、以下のコードで、キーボードを最後に押した時の時間と、現在の時間差を計算してフォントサイズに使っている。

次のサンプルは、キーを押す度に「現在の時間」から「1個前の時間PMillis」を差し引いてPMillisに再代入している。そしてPMillisをフォントサイズに活用している。時間が開けば開くほどフォントは大きくなる。

文字列と配列

入力した文字はtextTypedに普通に文字列として追加されている。フォントサイズはfontSizesになんと配列で追加されている。なので毎フレームごとに、textTypedのi番目の文字をfontSizesの配列の[i]番目に入っているサイズで描画している。

以下はtextTypedという文字列の最後にkeyの中に含まれる文字列を追加している。

以下は、fontSizesという配列の、最後尾にnewFontSizeを追加する。

以下は、textTypedという文字列の、i番目を一文字取り出して、letterに入れています。charは1文字だけを入れることができるクラスです。基本的にはStringと文字数以外は変わらないと思います。

ただし、charに文字列を指定する場合には以下に注意してください。

文字列textTypedから0番目からはじめて(textTyped.length-1)個を返す。例えば3文字からなる文字列にこれをおこなえば、o番目の文字から2個返すので、先頭から2文字が返される。

以下引用

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

processing文字を書く

文字入力の基本は以下

フォント

フォントについては詳細がまだ理解できていません。さしあってこうなっているのではないかという仮説。

createFontで行くバージョン

パソコンに入っているフォントならいける。

loadFontを使うバージョン

フォント用のファイルを、スケッチが保存されているフォル下に作成し、そのファイルを参照することでフォントを使用する。createFontとの違いがよくわからない。

スクリーンショット 2016-03-23 11.33.58

スクリーンショット 2016-03-23 11.34.12

すると.vlwというファイルがスケッチのフォルダ下にできる。これをloadFontでロードし、textFontで指定して使用する。

以下引用。

keyCode ,CODED

keyCode,CODEDで取れるのは次のキーのみ。これ以外のキーはkey=でとる。逆に言うとこれらのキーは、番号が番号が全て共通で65535になってしまっているので、UPとか指定しないと条件分岐できない。

UP, DOWN, LEFT, RIGHT,ALT, CONTROL,  SHIFT.

key>32

CODEDではないキーのうち、SPACEが31なので、それ以上で指定すると、基本的なアルファベットと数字のみが選択できる模様。ちなみにdeleteは8,エンターは10なのでこういったキーボードを除外している。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。

max for live を使ってableton LiveのmidiでProcessingをトリガーする

  1. Max for Live(以下m4l)のmax Midi effectを作成する。
  2. maxからudpsednオブジェクトを使って、Oscを出す。
  3. processingでoscP5というライブラリとその関連オブジェクトを使って、Oscを受信する。
  4. 受信したOSCを元に映像をトリガーする。

OSCを使ったmaxとprocessingの連携に関しては次の記事をまず読んでください。

max processing osc 連携

(1〜2) M4Lの中のパッチ

noteinオブジェクトを使ってnote numberを抜き取る

スクリーンショット 2016-03-22 8.53.39

noteinオブジェクトにMIDIを入力すると、3つの要素に分解して各outletから出力します。このoutletのうち、一番左からnote numberがでます。これを使用します。

この出力を、numberオブジェクトに入力すると数字が見えるのでわかりやすいでしょう。さらにこれを以下のように見た目(Appearance)の中のformatからMIDIに設定するとよりわかりやすくみえます。これは単に見た目が変わっただけで、あくまでデータの内容は数字であって(G#3)といった文字列になっているわけではありません。

スクリーンショット 2016-03-22 8.53.01

LIVEの指定のトラックにMIDIクリップを作成して、MIDIを出す

M4LをさしているトラックにMIDIクリップを作成してMIDIを出力してください。いつもどおりの作曲の時にやっている方法でやるだけです。

スクリーンショット 2016-03-22 9.21.12

udpsendオブジェクトを使ってデーター送る

スクリーンショット 2016-03-22 9.14.04

「udpsend IPアドレス ポート番号」をつくり、データを送ります。ここでは同じパソコン内の通信ですのでIPアドレスの場所には「localhost」とし、ポート番号はなんでもいいのですが「12000」としました。

ちゃんと送れているかUDP TesterでReceiverのPortを12000にして確認してください。出し方は以下画像。ここではしっかり68が受信できています。

スクリーンショット 2016-03-18 8.42.57

識別しやすいようにメッセージを加える

スクリーンショット 2016-03-22 9.37.12

processing側で受信した際に、一体どんなデータが来たのかわかるように、識別用のラベル(メッセージ)を加えます。OSCにおいては「/任意の文字列」というものを加えることでメッセージとして認識されます。

そのために、データの冒頭に文字列を加えるにはprependオブジェクトを使用します。「prepend 文字列」という形式で作成します。またこの追加する文字列は「set 文字列」というメッセージをinletに入力することで、変更できます。「set anymessage」というメッセージオブジェクトがそれです。

これで「/midi1 60」という形式のデータを送れるようになりました。

3〜4 Processing側で受信し描写

次のコードをプロセシング側に作成。これで受信したMIDI note numberを画面に表示してくれます。

今後の発展

m4lのからのデータをOSCを介してprocessingで受け取ることができるようになったので、あとはMIDIデータのうち、どのデータをどのように抽出するか、そしてprocessing側でどう映像に活用するか、という処理だけになります。

ではまた!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 1 人中 1 人がこの 投稿 は役に立ったと言っています。