脱兎.dat http://dat.plastica-romantica.com Mon, 30 Jan 2012 16:43:08 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 TitaniumのWebViewでProcessing.jsを使ってみる。 http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/TclbshUjNqk/log677.html http://dat.plastica-romantica.com/log677.html#comments Mon, 30 Jan 2012 14:58:21 +0000 imaimiami http://dat.plastica-romantica.com/?p=677

タイトルの通りTitaniumのWebView内でprocessing.jsを動かしてみました。
Titanium側からevalJSを使ってprocessingのloopを操作 しています。
それだけですが、思ってたより全然簡単で驚きました。簡単なリズムゲームとか作ったら楽しそう。
webViewでやった方が簡単だから…的記事時々見かけるのなんでかなんとなくわかった気がする。

processingに慣れてないなら普通にjavascriptでやった方がいい気もします。僕は慣れてない方の人です。おいおい！って。

雑なコードは以下。

app.js

Ti.UI.setBackgroundColor('#000');
var tt = {}
tt.ui = {};
tt.ui.createProcessingView = function() {
	var win = Ti.UI.createWindow();
	var web = Ti.UI.createWebView({top:0,right:0,bottom:0,left:0});
	web.url = '/src/processing.html';
	win.add(web);
	
	var controller = Ti.UI.createView({
		bottom: 0,
		width: Ti.Platform.displayCaps.platformWidth,
		height: 50,
		layout: "horizontal"
	});
	var labelSetting = {
		width: controller.width/2,
		textAlign: "center",
		backgroundColor: "#FFF",
		font: {fontSize:16, fontWeight:'bold', fontFamily:'Helvetica'},
		height: controller.height,
		text: "start"
	};
	var startLabel = Ti.UI.createLabel(labelSetting);
	startLabel.text = "start";
	controller.add(startLabel);
	var stopLabel = Ti.UI.createLabel(labelSetting);
	stopLabel.text = "stop";
	controller.add(stopLabel);
	win.add(controller);
	
	startLabel.addEventListener("click", function() {
		web.evalJS("startSketch()");
	});
	stopLabel.addEventListener("click", function() {
		web.evalJS("stopSketch()");
	});
	
	return win;
}

var wwin = tt.ui.createProcessingView();
wwin.open();

processing.html

<!DOCTYPE html>
<html>
<head>
	<title>Hello Web</title>
 	<script src="processing-1.3.6.min.js"></script>
 	<style>
 		* { margin:0; padding:0; }
		html, body { width:100%; height:100%; }
		canvas { display:block; }
 	</style>
</head>
<body>
<canvas id="sketch"></canvas>
<script type="application/javascript">
	function sketchProc(processing) {
		var Ps = processing;
		var width = window.innerWidth;
		var height = window.innerHeight;
		Ps.setup = function(){
			Ps.size(width, height);
			Ps.smooth();
		};
		Ps.draw = function() {
			Ps.background(100);
			Ps.fill(200);
			Ps.noStroke();
			for(var i=0; i<100; i++){
				var c = Ps.random(10, 15);
				Ps.ellipse(Ps.random(width), Ps.random(height), c, c);
			}
		};
	}
	
	var canvas = document.getElementById("sketch");
	var processingInstance = new Processing(canvas, sketchProc);

	function startSketch() {
		processingInstance.loop();
	}
	
	function stopSketch() {
		processingInstance.noLoop();
	}
</script>
</body>
</html>
目が悪くなりそうなcanvasなのはお許しをば。
テキトーに書き換えて実行しましょ。 


]]> http://dat.plastica-romantica.com/log677.html/feed 0 http://dat.plastica-romantica.com/log677.html わらったない http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/d6Yp9Euxh50/log675.html http://dat.plastica-romantica.com/log675.html#comments Sun, 29 Jan 2012 17:34:36 +0000 imaimiami http://dat.plastica-romantica.com/?p=675 ネットで見かける「笑った」って、笑ってないですよね。

「ワロタ」とか「www」とかネット上の笑いの表現は東京オリンピックあたりから存在してたみたいに浸透しちゃってるけど、これらって別に「私はパソコンの前で笑ってますよ」ってことを伝えようとしているわけじゃないですよね？

衆人環視の中、しかめっ面で「笑った」っていう6バイトの情報をネットの海に吐き捨ててる人なんてザラにいると思うし、むしろ笑えない状況だからこそ、笑いたい欲求を「笑った」っていう文字情報にして発散してるって場合もありますよね。そこで「面白い」と書かずに「笑った」って書く。強引かもだけど、それはきっと「笑いたい」だったりするんじゃない、って。

まぁ、もちろん実際笑ってるから「笑った」って書いてる人もいるだろうし、もしかしたら僕以外の人間はみなそうで、笑ってないのに「笑った」とか書いてるひねくれ者は僕だけかもしれないね。実際わかんない。個室トイレの中で皆逆立ちしてるの知らないのあなただけかもしれない。

話それちゃったけど、「笑った」に限らずネット上の文字って変なエネルギーありますよね。
キーボード、タッチパネルを通してエネルギーを込めるのですよ。「よろしくお願いします！」って。

 こういうのって全世界共通？平安時代から？
少なくとも日本人なら「マジワロス」の音の響きには何か惹かれるものがある気がするね。


]]> http://dat.plastica-romantica.com/log675.html/feed 0 http://dat.plastica-romantica.com/log675.html 超欲張りじゃん http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/gL9b2vwQZtU/log672.html http://dat.plastica-romantica.com/log672.html#comments Sat, 28 Jan 2012 15:28:26 +0000 imaimiami http://dat.plastica-romantica.com/?p=672

超欲張りじゃんと思って、迷わず手に取りました。＠LAWSON
残念ながらダイスキです。こういうの。
 
 でもこのロゴなんて読むんだろ。Cは読むの？デザイン？
とかどーでもいいこと気になっちゃって調べたら「ビタミンレモン乳酸菌飲料」 が正式名称でした。
潔いね。男前だね。
「ピルクル-ビタミンレモン味-」って名前の方が売れそうじゃんとかちょっと思ったけど。

話題のステマじゃないですよ。
お金じゃなくて、お金払ってビタミンCもらって書いてます。


]]> http://dat.plastica-romantica.com/log672.html/feed 0 http://dat.plastica-romantica.com/log672.html safariでWebGLを有効にするのはまだ面倒。2012/01 http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/COj6YztbicI/log668.html http://dat.plastica-romantica.com/log668.html#comments Sat, 28 Jan 2012 06:12:36 +0000 imaimiami http://dat.plastica-romantica.com/?p=668 面倒っていうほどじゃないんだけど。

processing.jsで3dを描く、ちょっとだけ。 | 脱兎.dat

先日、WebGL使った記事書いてみたんだけど、対応してないブラウザに配慮が足りてなかった。

そもそもcanvasタグに対応してないブラウザのためにcanvasタグを飾ってメッセージを入れてあげなきゃなんない。
以下の記事が参考になる。

HTML5 Canvas & Processing JS
http://joeycadle.com/blog/article/1/2012/22/01/html5-canvas-and-processing-js#comments 

Chromeに誘導しちゃうのね。

それでもなんなのこの記事わけわかんない！って言われたから
うちのSafari見てみたらcanvasタグが空き地になってた。
canvasタグには対応しているけどWebGLが有効になってないの原因?

safariでWebGLを有効にする方法。(2012/01現在)

1.メニュー「環境設定 > 詳細」より「メニューバーに”開発”メニューを表示」をオンに。
2.メニュー「開発」より「WebGLを有効にする」をオンに。

以上。
いちいち、有効にしてくださいね。ってcanvas外に書くのもcoolじゃないし
設定取得する方法とかないのかな。ま、早めにデフォルト有効になることを願ってます。


]]> http://dat.plastica-romantica.com/log668.html/feed 0 http://dat.plastica-romantica.com/log668.html 必然とブログが書きたくなる１つの方法 http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/h9V8fv7ebJc/log658.html http://dat.plastica-romantica.com/log658.html#comments Thu, 26 Jan 2012 14:13:29 +0000 imaimiami http://dat.plastica-romantica.com/?p=658 「深夜に残念なタイトルの記事をポストする」

たったこれだけです。
あなたは次の日の日中気になって仕方なくなります。

「ああ、こうしている間もマスタベーションなんて言葉がブログのトップにでかでかと居座ってる。早く次の投稿しないと！」

自らを追い込むアスリートのようなストイックさが時として必要になります。
以上、皆様が戦略的なブログライフを送れることを願っております。

P.S. 深夜のラブレターにはくれぐれもお気をつけを。


]]> http://dat.plastica-romantica.com/log658.html/feed 0 http://dat.plastica-romantica.com/log658.html 射幸性ってマスタベーションの時のあれでしょ？ http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/xkqZ6Y_B-8A/log656.html http://dat.plastica-romantica.com/log656.html#comments Wed, 25 Jan 2012 17:17:24 +0000 imaimiami http://dat.plastica-romantica.com/?p=656 「射幸性」って字面からして、これはきっと男性がマスタベーションの時に感じる一種独特な幸福感のことだろう。ならば、「射幸心を煽るゲーム」なんてものがあろうならそれはきっとエロスにドロッドロにまみれてて、規制規制規制だ−ってどこかの誰かが叫んじゃっても、まぁそれも致し方ないことだよと、

誰かが言ってました。
僕にも 自分をよく見せたい願望というものが人並みにありますので誰かに言ってもらいました。誰かの正体は闇の中ですが、射幸心の意味はWikipediaにあります。

「射幸心」って言葉とはモバイルゲーム関係のニュースで出くわしたわけですが、この自分をよく見せたい願望というのにもモバイルゲームやってたらよく出くわします。
お金を払ってアイテムを買って、アバターにえくぼとかつけるわけですよ。エヘン。
アバターにえくぼに限らずモバイルゲームって欲と蜜月ですよね。ちょっと前まで「ゲーム」って単語から連想できてたそれらよりはエロスじゃないにしてもドロドロはしてる気がします。

敵を倒す(殺すと書くのは忍びない)、成長する、成長を実感する(数値でタイムリーに)、つながる、ほめられる、 運ぶ、戦う、増える、そして食べられる(悪乗り)とか、どこを切り取っても隙がない。全部仮想体験出来ちゃう、結構簡単に。特に最近、お金で大抵解決出来てしまうのとか、解決すること自体だけじゃなくて「お金で」ってとこまで含めて実現したい欲求なんじゃないのかなと考えてしまいます。札束で人の頬を叩いてみたい的欲求が仮想世界で渦巻いているんじゃなかろうか、これはなかなか凄まじいよね、と。たぶん皮肉とかじゃなく、なんだろう、リアルな家族ものの小劇場演劇観てる感覚？え、いや、そんなとこまで見せちゃうの、っていう。日本人的裏ゲーミフィケーションみたいな。(ゲーミフィケーションって言ってみたかっただけ）もちろん健全な仕組みにすべきところは修正して、うまく説明できないドロドロ感がうまい具合になったゲームが出てくればいいなと思います。基本的に僕は「ゲームって要するに未来だぜ」みたいな残念な思考の持ち主ではあります。

ちなみに、今日のこれ、なんだか本気でよくわかんない文章になっちゃったのは、実はブログに「ゲーム性」を持たせているからです。この記事の中に動物が五匹隠れていますいぬ。君は何匹見つけられるかなねこ。三匹のこぶた。

 


]]> http://dat.plastica-romantica.com/log656.html/feed 0 http://dat.plastica-romantica.com/log656.html 三日坊主じゃなきゃダメなんですか？ http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/_raxOFgONy4/log650.html http://dat.plastica-romantica.com/log650.html#comments Tue, 24 Jan 2012 15:15:19 +0000 imaimiami http://dat.plastica-romantica.com/?p=650 四日坊主ならいいんですか？むしろ、四日坊主ならいいんじゃないですか。上出来じゃないですか。

内なる自分がそそのかします。

ちょっとググッてみたら三日坊主の語源には諸説あるらしいんですが、
基本的に坊主はお坊さんのことみたい。ん、あたりまえ？
なんとなく三日坊主は飴持ったワルガキのイメージでした。

「母ちゃんが3日続けろって言ったから続けただけだい！4日なんて言ってないやい！」
いや、ほんとなんとなくで。

このエントリが新年5つめ。
そろそろだな。そろそろな感じがする。
栄養ドリンクのCMなら上司の五日坊主が「頑張り過ぎんなよ」って肩叩くシーン。

いや、もう上出来じゃないですか。


]]> http://dat.plastica-romantica.com/log650.html/feed 0 http://dat.plastica-romantica.com/log650.html マジで、わだち助かる、マジでわだち http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/w607x_9IxBg/log647.html http://dat.plastica-romantica.com/log647.html#comments Mon, 23 Jan 2012 17:05:20 +0000 imaimiami http://dat.plastica-romantica.com/?p=647

とか、唱えながら帰宅した@imaimiamiです。

雪ですね。常時Crocs(ジョージ・クロックス)で過ごす怠惰な自分には雪道は難易度高いです。轍に助けられました。

わだちマジでラブ、ラブマジでわだち。

ただね、帰宅してからカバンの奥底に眠る返却しそびれたレンタルDVDの存在に気づいたんです。今日期限ですよ。明日の開店までにボックスに叩きこめばセーフ。よりによって雪の日に。昨日美容院で読んだメンズノンノの12年に1度の運気ってなんだったんでしょう。読んでたのはメンズノンノ演義だったのでしょうか。表紙の瑛太指さしてこんなにしてくださいって横暴振りかざせる猛者にのみ当てはまる占いなのでしょうか。

何にしろ、明日の朝も雪道と格闘しなければならないはずです。
マジでわだち助けて、わりとマジで。


]]> http://dat.plastica-romantica.com/log647.html/feed 0 http://dat.plastica-romantica.com/log647.html titanium mobile 入門にあたって参考になったURL http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/_zoZSmOPkcg/log619.html http://dat.plastica-romantica.com/log619.html#comments Sun, 22 Jan 2012 14:06:05 +0000 imaimiami http://dat.plastica-romantica.com/?p=619 titaniumいじってます。
iPhoneとandroidアプリをjavascriptで書ける開発環境です。軟弱者なんでとりあえず簡単なのないかなとphoneGap試した後、titaniumに辿り着きました。

phoneGapについて

自分はphoneGapの中身をjQueryMobileで作って、実行速度、固定タブあたりに不満を感じ、titaniumに移りました。
最近はjQmobiとか出てきたりjQueryMobileアップデートしてるようなので、また試してみたいなとも思ってます。

スマフォのHTML5環境向けに作られたjQueryライクな軽量フレームワーク・jQ.Mobiの日本語サンプル作った – かちびと. net
http://kachibito.net/software/jq-mobi.html

はじめてのtitanium

とりあえずざっと理解するためには以下のサイトがめちゃ役に立ちました。全体的に目を通せば何が出来るかわかると思います。

titanium-mobile-doc-ja – Appcelerator Titanium Mobileに関するドキュメントを日本語でまとめていくプロジェクト – Google Project Hosting
http://code.google.com/p/titanium-mobile-doc-ja/

次に実機にインストール出来る人は公式デモのKitchenSinkをインストールして電車の中とかで触ってみればいいと思います。
インストールできなくてもローカルに保存しておけば今後お世話になるはずです。

appcelerator/KitchenSink – GitHub
https://github.com/appcelerator/KitchenSink

モバイルアプリは場所問わず実際に触りながら考えまとめられるから良いですね。風呂でUI考えられたりね。

やってみよう、そのまえに

やや、これは楽しそう、作ってみようと思ったら、まず逸る気持ちを抑えて「titanium シングルコンテキスト」でググってみましょう。僕はこれで軽く衝撃を受けました。以下のサイトがわかりやすいですが、KitchenSinkのような構造がオススメされているわけではないようです。特に自分の場合、androidでのパフォーマンスはシングルコンテキストじゃないと納得できない状態でした。まぁ、このへんは自分の書き方にも寄るのでしょうけどね。精進。

[Titanium] window.urlは推奨されないプログラミング手法らしい – もぎゃろぐ
http://blog.mogya.com/2011/08/window-url-is-not-recommended.html

titanium でシングルコンテキストな書き方にチャレンジ – インターネット時代のキャリアプランとは？
http://d.hatena.ne.jp/h5y1m141/20110930/p1

で、シングルコンテキストに心奪われたならばtweetaniumのソースを眺めてみると良いと思います。
シングルコンテキストの書き方以外にも大いに参考になります。特に独自タブ周りでしょうか。
androidの環境依存のタブはださダサ可愛いので、独自実装したくなります。そんな時は以下ソースのApplicationWindow.jsが参考になるでしょう。

appcelerator-titans/tweetanium – GitHub
https://github.com/appcelerator-titans/tweetanium

さいごに

あとは公式リファレンスとか見ながらガシガシ作れる気がします。気がするだけかもしれないのでググッても良いと思います。日本語情報も結構あります。日本にユーザー多いってどこかで見かけたけどそうなのかな。
あと、同じコードでマルチデバイス対応は無理です。具体的な完成イメージがあるならば尚更。当然かもしれませんが、titaniumでプロトタイピングやるならiPhone、androidどちらかでやるべきだと思います。(こだわりなければiPhone)UIまで含めると両対応させるのは想像以上に時間とられます。

Appcelerator Developer Center – API for (version 1.0)
http://developer.appcelerator.com/apidoc/mobile/1.0/

以上、
自分もようやくスタートな感じなんで頑張ります。


]]> http://dat.plastica-romantica.com/log619.html/feed 0 http://dat.plastica-romantica.com/log619.html processing.jsで3dを描く、ちょっとだけ。 http://feedproxy.google.com/~r/plastica-romantica/DmoE/~3/NOfu24_MCTs/log570.html http://dat.plastica-romantica.com/log570.html#comments Sat, 21 Jan 2012 10:06:46 +0000 imaimiami http://dat.plastica-romantica.com/?p=570 ちょっと確認したいことあって書いてみたのだけど、当初の目的には使えなそう。残念。

chromeでしか確認してませんぜ。

Please upgrade your browser to something newer, like Google Chrome

ソースは以下。

<script type="text/javascript" src="processing-1.3.6.min.js"></script>
<script type="text/processing" data-processing-target="pjs">
void setup() {
	size(540, 200, OPENGL);
	frameRate(50);
	noStroke();
	fill(153, 0, 0);
	smooth();
}
void draw() {
	background(0);
	ambientLight(63, 31, 31); 
	lights();
	for(int i = 1; i < 5;  i++){
		pushMatrix();
		translate(i * width/5, height/2, 0);
		rotateX(mouseX * 0.05);
		rotateY(mouseY * 0.05);
		box(45);
		popMatrix();
	}
}
</script>
<canvas id="pjs"></canvas>

今年はprocessingもちゃんと使ってみよう。


]]> http://dat.plastica-romantica.com/log570.html/feed 0 http://dat.plastica-romantica.com/log570.html