ぽちログ

プログラミング歴3年目元文系大学院生のぽちと申します。 とりあえずは自分用のメモなどを残して行くつもりですが、ご要望・意見・感想などを頂けたらそれによって内容も変化していくと思います。 よろしくお願いします。

ZendFramework2のHelloWorldを試してみた

お久しぶりです。
この春からエンジニアという肩書きをもって働くことになりました。
まだ研修中なので開発はやらせてもらえないんですが…
教わるばかりではなく、ちゃんと自力で成長するための時間も設けたいと思います。


そこで今回はPHPフレームワークであるZendFramework2を試してみました。

f:id:twilightdve:20150425094318j:plain

といっても
サーバーサイドの開発はほとんど経験がなく(Node.jsくらい)、
PHPCSV形式のファイルを書き出す程度のプログラムしか書いたことがありません。
なのでPHPMySQLについても今後並行して勉強していこうと思います。

(今回時間の都合上この項目までです)
「そもそもZendFramework2ってなに?」
Wikipedia曰く、

Zend Framework (ZF) は、PHP 5 で実装されたオープンソースオブジェクト指向Webアプリケーションフレームワークであり、修正BSDライセンスで提供されている。

まったく意味がわかりません。
たぶん、PHPのアプリケーション作るときに大枠の部分を作ってくれるものなのかな??

さらにWikipedia曰く、

ZFは使い方が自由なフレームワークである。Zend Framework の全ユーザーが従うべき開発パラダイムや開発パターンというものは存在せず、MVC、Table Data Gateway、Row Data Gateway といったデザインパターンのためのコンポーネントを提供している。Zend Framework は他にもウェブアプリケーション開発で必要となる多数のコンポーネントを提供する。

MVC」「Table Data Gateway」「Row Data Gateway」という見慣れない言葉が並びます…
頭良くないので理解できなくて辛いです…

MVCっていうのは…
f:id:twilightdve:20150425094652p:plain*1

んー、要は、
モデル→データ
ビュー→ユーザインターフェース
コントローラ→挙動

って感じで、
あえて職業にわけるとそれぞれ
モデル→データ→バックエンドエンジニア
ビュー→ユーザインターフェース→デザイナー
コントローラ→挙動→フロントエンドエンジニア

という感じで分業できるようにするための構造なのかな。
わかった気がした(気のせい)。

やっぱり動かしてみないとわからないので、やってみました。
まず導入から…というところでもうすぐ目的地に到着するので、導入については次回に書いていきます。

ただ、ほぼほぼ以下のリンク通りにやれば導入できましたので参考にどうぞ。tech.nakame.me

(動いたときの画面)
f:id:twilightdve:20150425093307p:plain
(HelloWorldの画面)
f:id:twilightdve:20150425093302p:plain

Web Audio APIを使った音像定位

デモ --> Audio Reposition
※音がでますのでご注意ください

================================================

<操作方法>

  1. ページを開いたら、"NOW LOADING"という文字が消えるまで待ってください。
  2. 読み込みが終わり、3DCGのグリッド線が表示されたら、マウスを使って画面をドラッグしてください。
  3. 視点が変更され、音が聞こえる位置が変わります。

================================================

<解説>

今回は、いわゆる
「立体音響」
を、Webブラウザ上で任意の座標に配置するシステムとして制作しました。

FPSなどのゲームでは普通に使われていたりするんですかね?

今回のデモでは、3軸の原点に視聴者がいるとして、
カメラの位置に音の位置が合わせて動くように聴くことができます。

とはいえ今回のデモも単にAPIを叩いてみた程度です。
今後は、この技術を利用して見た目だけではない空間の広がりを感じられるシステムを作ってみたいなぁと、色々と妄想してます。


音像定位の詳細はこの辺を調べてみてください。

やり方も以下の丁寧な解説を見れば理解できると思います。

OS X YosemiteでTeXをコンパイルしたら画像が出なくなった件

OS X YosemiteTeX辺りにいい噂を聞かないが、新しいもの好きな自分はアップデートした。

修論のドラフトを提出しろといわれたのでTeXコンパイルしたら、画像が出てこない!

dyld: Library not loaded: /usr/X11/lib/libXt.6.dylib

OS更新前からファイルは編集していないのでPathは合っているはず…と思い、↑のエラー文を検索するとやはり同士が。


graphics - Can't compile image after upgrading to OS X Yosemite - TeX - LaTeX Stack Exchange

ここでコメントされてる、↓のコマンドをターミナルでコピペ+Enterで万事解決しました。

sudo ln -s /opt/X11 /usr/X11

これで修論が書ける。

Node.js + Express4 + Socket.io + SocketIO4Netで詰まったのでメモ

久々の投稿です。

最近は実装に論文に実験にとあたふたしてましたが、
昨日論文投稿したので少し余裕でました。

f:id:twilightdve:20140925114723p:plain

こんな感じの実験システムを作っていたわけですが。

①socket.ioのバージョンで詰んだ

Socket.IOがver0.9からver1.0になり、
SocketIO4Net(C#用のSocket.ioのクライアントライブラリ)の更新が

"This project will no longer be maintained."
(SocketIO4Net.Client - Home)

socket.io 0.9の時に終わってしまったため通信できなくなった様です。

なのでNode.jsのプロジェクトを作る時に、以下のコマンド"@"を使ったバージョン指定でのインストールを行わなければならない。

npm install socket.io@0.9

②Express4の使い方で詰んだ
以前までExpress3を使っていた(この頃はまだよくわからず使ってたが)ので、4にバージョンアップしてわからなくなった。

express4でexpress-generatorを使ってプロジェクトを作成すると以下の様なディレクトリになる。

MyExpressServer(プロジェクト名)
-bin
--www
-node_modules
--body-parser
--cookie-parser
--debug
--ejs
--express
--morgan
--serve-favicon
--socket.io
-public
--images
--javascripts
--stylesheets
-routes
--index.js
--users.js
-views
--index.ejs
--error.ejs
-package.json
-app.js

これのやり方はこれの
Express - Moving to version 4

これ

$ npm install -g express
$ npm install -g express-generator

$ express -e MyExpressServer
$ cd MyExpressServer && npm install
$ npm install socket.io@0.9 //C#との連携じゃない場合は@0.9はいらない


詰まった所は、以前まではapp.jsの中に以下のコード(サーバを構築する処理)を書いていた。

//ポート設定
app.set('port', process.env.PORT || 3258);

var server = http.Server(app);
//appにsetしたport番号とhostのip adress, error時に呼び出される関数
server.listen(app.get('port'), "localhost", function (err) {
	if (err) throw err;
	console.log('Listening on ' + server.address().address + ':' + server.address().port);
});

これはexpress4ではbin/wwwに記述する事になった様です。

app.jsでレンダリングするページのディレクトリやらなんやら設定して、wwwでそれを

var app = require('../app');

で読み込みます。

サーバを起動する際には、package.jsonの中にscriptが書かれいる"start"コマンドを使います。
つまり

npm start // node ./bin/wwwが実行される

と入力すればサーバが起動する。


③ejsのレンダリングでハマった

publicの中にあるjavascriptsやstylesheetsフォルダ、これを最初は以下の様にしていたんだけど。

public
-main.js
-class
--myClass.js // 仮名
--etc...
-lib
--three.min.js
--etc...

指定したページ(http://localhost:3000/)を開いても、
読み込んでくれるファイルと読み込まないファイルがある。

試しにjavascriptsとstylesheetsフォルダにディレクトリの階層構造を作らずファイルを入れたら正確に読み込んだ。

これに関しては原因がイマイチわかっていない。

今後暇があれば原因探してみる。

では以上。

【javascript】PNGのピクセルデータを編集し、新規作成する【進捗】

先日に引き続いて、研究用の開発になります。

前回のものは、
PNGのピクセルから取得したRGBAのデータを基にCanvas要素に再描画
②マウス座標に対応したピクセルのRGBAデータを参照するプログラム
でした。
(※現在、諸事情により使用しているサーバーがダウンしてます。)

今回は、
Canvas要素から得たピクセルデータを新たなPNGファイルとして作成するプログラム
を作成しました。

Create PNG

f:id:twilightdve:20140817011940p:plain
(※サーバーダウンにより今回はfc2にアップロードしました)

このプログラムはもう、丸パクリと言ってもいいでしょう…

先人の偉業(PNG生成

ここで使われているコードをほぼコピペ(ちょっといぢった)でやってます。

必要になったら中身ちゃんと見に行くけど…とりあえず作るのが大事!だよね!

これを応用すれば以下の様に色の情報を組み替えたり、
アルファ値に好きな値を設定したりもできます。

f:id:twilightdve:20140817012714p:plain
(上がオリジナルで、下がR値をG値と入れ替えた画像)

あ、アルファチャンネルに透明度以外のデータを入れる場合、
次に作るシステムではアルファ値を表示上は全て255にする必要があるな…
課題が見つかりました。

では、おやすみなさい。

【Canvas】PNG画像のRGB+Alphaを抽出する【JavaScript】

こんにちは。ぽちです。

今回は、研究開発の一貫でPNG画像の中身を覗く必要があったので、javascriptcanvasで覗くシステムを作ってみました。
まだ開発途中ですが、とりあえずキリが良いので。

PNG Color Picker

【今回やったこと】
① inputエレメントでpng画像をアップロード
pngを表示するimgエレメントを作る
canvas上に再描画し、pixelの配列を取得する
(③' Retinaディスプレイを使用しているとボケてしまったので、多少小細工※参考URL)
canvasのoffset座標に対応したpixelのR, G, B, Alpha値をconsoleに出力

f:id:twilightdve:20140815235108p:plain

ソースコードの説明は…時間がないので質問があれば答えます。
たぶんそんな難しくないです。

【参考URL】

【メモ】WebAudioAPIのnoteOnは使えない。start(time)を使おう。

【今回の結果】
http://www2.itc.kansai-u.ac.jp/~k544790/YuyaYoshida'sHP/Developings/WebAudioPlayer/index.html

【経過】
javascriptで音声処理をしたいと思い、まずはAudio Fileを読み込む所から取りかかる。

ググると…

  1. http://www.html5rocks.com/ja/tutorials/webaudio/intro/
  2. http://dev.classmethod.jp/etc/web-audio-api/

こんな感じのわかりやすいページが。

これだけコピペしたら動くのかな?と思い実行してみたは良いが…動かない。

どうやらcontext.createBufferSource()で作成したAudioBufferSourceNodeには、
既に"noteOn(time)"なる関数はない様子。

http://stackoverflow.com/questions/17394630/audiobuffersourcenode-start-vs-noteon

console.log(source)すればわかるが、AudioBufferSourceNodeのprototypeには、startかstopしかない。

上記のURLに、"As of today NoteOn does not work in Google Chrome, so you must use start(). (2014-07-24)"とある様に、Chromeではもう使えないらしい。

つまりnoteOnをstart、noteOffをstopに書き換えてやればサンプルはそのまま動く。

他には特に問題はなし。
後はBufferLoader.jsをダウンロードして読み込んで置くのを忘れない様にね。