[日記] FITCの感想とか

2011/12/15

こんにちは。きんくまです。

先日FITCというイベントがありまして、そこに行ってきました。
>> FITC // FITC Tokyo 2011

中身は、すごいクリエイターさんたちのお話を聞くというものです。
どれも興味深くて面白かったです。

それで、なんとなく印象に残ったこととか。

■チームの紹介

今回は日本と海外のクリエイターが半々ぐらいずつ登場しました。
たまたまだったのかもしれないのですが、海外の人が自分のチームを紹介していたのが印象的でした。
日本の人は個人で黙々とやる感じかな。
これは、日本の方が匿名性を重んじるっていうせいかもしれないし、(個人情報保護とか。身近な人を写真付きで紹介するのってのは確かに抵抗あるかも)もしかしたら、そもそもああいう場で紹介するっていう文化があんまりないのかも。

でも、これは今回たまたま私がそう感じただけであって、それが他の場合に絶対にあてはまるっていうわけじゃないです。

■デモシーン

Mr.doobさんの時にデモシーンというのを紹介していました。
彼は、細かいコードのテクニックとかは一切説明してなくて、ただいくつかのデモ映像を流していました。

人によっては、面白くなかったかもしれなかったのですが、個人的には結構良かったです。
デモシーンというのは、ハードウェアとかソフトウェアとかそのプログラミングテクニックの限界に挑みつつ作品を作るものみたいです。
初めて知りました。そんで帰ってからググってみたところ、下記のページを発見。

>> Tokyo Demo Fest 2012
>> 歴史 « demoscene.jp

下のリンク先のページの歴史のところをみるとRadium Softwareさんの名前を発見!

いつの頃からか、彼のブログをずっと読んでいて、「この人すごい人だなぁ」とずーっと思っていて。まあちょっとしたファンみたいなものなんですよ。そしたら、今回そこに名前を見つけたわけですよ。
一人で、ページ見ながら興奮しちゃって、「おー、そうかこんなに前からなのか」とか言って。

過去の日記が置いてあったので、2001年(10年前!)を少し読んでみたりしてました。
プログラムのこととかが書いてあり、コードの中身はわからないのだけれど、
でも、わからないことがあるときはググって海外のドキュメント(ていうか論文?)とかを読んでいたりするという記述を見て。「なるほどー。やっぱり原本か」と思ったり。
同い年だとわかったり。面白かったです。



発表の話に戻ります。

彼がどういう意図で映像を見せたのかわからないのですが、自分は何故だかふっきれたところがありました。
たぶん、彼の意図したものと全く違うものだと思うのですが、そう感じたのです。

何にふっきれたかといいますと、ああいう事例紹介みたいな場所に行って、毎回「やっぱり作品作らないと駄目だよなー」と思ってました。
でも、最近気がついてしまったのだけど、自分は作品作りよりも、技術だったり仕組みだったりを理解したり、できるようになったりすること、それ自体が楽しいみたいなのです。
あんまりクリエイター気質がないみたいなんです。ようするに手段の目的化ってやつです。
アドベンチャーゲームのように、情報を集めて、それを試してクリアするゲームをやっているというか。
結局のところ、生産者というよりは消費者的な立場なんだなーと自覚していたところだったんです。
他の人が用意したものをなぞる(消費する?)、みたいな。

それで、「それは駄目なもの」だと思っていたんですけど、「それでもいいんじゃないか」と思うようになったのです。
それがふっきれたところ。

こういうことを考えたのです。
世の中には、アイデアを考える人と、それを実現する人がいます。
それを同時に実行できる人をクリエイターというのかもしれないし、アイデアを考えるだけでもクリエイターかもしれません。
でも自分は実現する人の立場なわけです。0からのアイデアは正直全く思いつきません。
ただし、アイデアを実現するようにアドバイスしたり、そこから少し違ったアイデアを考えることならできるわけです。

例えば、建築士が考えた図面があったとして、それを大工さんというか職人さんたちが実際の形にしていくわけです。自分は職人さんの立場なのかなと。
職人さんにも、色々なタイプがいると思います。
腕の立つ人、そうでない人。建築士のように1から設計を起こせる人もいるかもしれません。
だったら自分は腕の立つ人を目指せばいいのかなと。

何かのきっかけで、アイデアを考えることが好きになるかもしれないのですが、
それまでは技術を磨いてみようと思ったのでした。

LINEで送る
Pocket

[iOS] App Store Rewind 2011 ベスト iPad Appに載りました

2011/12/15

こんにちは。きんくまです。

iTunesにApp Store Rewind 2011っていうのがあるみたいです。
今年のアプリを振り返るみたいな感じでしょうか。

rewind2011_1

そこのiPadのSports部門に、私がプログラムを担当したアプリが載りました。
やったー。

rewind2011_2

これはバスケットボールのやつなのですが、シリーズのサッカーのやつも、
前にカテゴリで1位になったりしたのでした。(総合じゃないのだけれどねw。でも気にしない!)

どうもありがとうございました。

LINEで送る
Pocket

[開発] プロキシCocProxyのMacでの使い方メモ

2011/12/15

こんにちは。きんくまです。

CocProxyのMacでの使い方のメモです。

主な情報源はこちらのページにあります。どうもです。
>> OSXにCocProxy(置換プロキシ)を設定してみる | 技術部 | TAC部Log
>>Cocproxyを入れてみた – ぺーぺーエンジニアのおぼえがき

前も調べて使ったのだけれど、すぐ忘れちゃうからメモです。

■何するもの?
本番サーバー上に変更したいファイルがある。
変更したいファイルは、すでに次のバージョンを開発してあり、手元にある。
この手元にあるもので、本番サーバーをテストしてみたい。
でも、本番サーバーにあるからファイルを勝手に書き換えたら大変なことになる!

そこでプロキシの出番ですよ、奥様。
プロキシの設定をローカルの特定の場所に指定して、そこに次のバージョンのファイルを置いておき、
ブラウザの設定を変えると、あら不思議。
本番サーバー上のデータがローカルのものと置き換わってるヨ。
だから、次のバージョンのもので本番でテストできるね。

ようするに実際のところ、本番サーバーへ特定のファイルをリクエストしたときに、
ブラウザはサーバーからではなく、ローカルのデータをひっぱってきているってことですね。
だから、本番サーバーのデータは一切変更してなくて、自分のマシン上だけでその変更を確認できるっていうやつです。

■やりかた
CocProxyをダウンロード

適当なディレクトリの中にproxy.rbを置いて、そのディレクトリに新規でfilesというフォルダを作成。
ディレクトリ構成はこんな感じ

cocproxy1

アプリのterminalを起動。

cd さっきのディレクトリパス(filesの親ディレクトリ)
ruby proxy.rb

そしたら、何か起動したっぽくなる。
ちなみにやめるときは、Command + dを押す。

ChromeのExtentionを入れる。
>> Switchy!

設定はこんな感じで。

cocproxy2

そしたら、ブラウザのURL欄の右側にある地球マークのところからさきほど設定した
オプションを選ぶ。

cocproxy3

これで準備完了です。

あとは、一番始めに作ったfilesフォルダの中に、例の次のバージョンのファイルをいれておけば、
あとは、そっちの方からブラウザのデータを読み取ってくれます。

やめたくなったら、terminalでCommand +dを押して、CocProxyを終了。
Switchyのアイコンを押して、Direct Connectionを選べばよいです。

LINEで送る
Pocket

[JavaScript] ratween CSS3 トランジションをするjQuery pluginを作りました

2011/12/13

こんにちは。きんくまです。

ratweenという名前のjQueryプラグインを作りました。
このプラグインは要素にCSS3トランジションを適用します。

>>デモページ

>>githubからダウンロード

これはiOSのwebkitブラウザで非常に便利なプラグインです。
なぜなら、通常のCSSを適用するよりもCSS3 transitionの方が速いからです。

下のページ達は、とても役にたちました。
ありがとうございます!

>> Plugins/Authoring – jQuery JavaScript Library
>> Detecting and generating CSS animations in JavaScript ✩ Mozilla Hacks – the Web developer blog
>> CSS transitions – MDN
>> Visualize and manipulate CSS transition functions

LINEで送る
Pocket

[Android] クレードルやドックに置いたときに出るダイアログのリストに、自分のアプリを含める方法

2011/12/10

こんにちは。きんくまです。

長いエントリタイトルです。
解決できなくて、すごく時間がかかりました。
何ができなかったかといいますと、クレードルやドックに置いたときに出るダイアログのリストに、自分のアプリを含める方法がわからなかったのです。

ネット上を日本語、英語と探しまくりまして、試しては駄目の繰り返しでしたが、
ついに発見!

そのヒントとなるページはこちらです。作者様ありがとうございます。
Custom CAR DOCK application in Android

インテントを使って、こんな感じにすればよいです。

AndroidManifest.xml

            <intent-filter >
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
                <category android:name="android.intent.category.DESK_DOCK" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>

このポイントはcategory.DESK_DOCK と category.DEFAULT を一緒に使うことです。
片方だけ書いてもうまく動きません。
片方だけ試していて、できないー!っとなっていました。

スクリーンショットです。
DeskDockTestアプリはテスト用のアプリです。
その他はデフォルトで出てくるアプリです。

LINEで送る
Pocket

[Javascript] モバイル開発でJSログ出力が便利になる jQueryプラグインのmieloggerを作りました

2011/12/3

こんにちは。きんくまです。

mieloggerという名前のjQueryプラグインを作りました。

これは、文字列をブラウザー上に表示できるようにするものです。
日本語の「見える」とlogger「ログするもの」を合わせた名前です。

これはモバイルアプリ(iOSとかAndroidとか)でWebブラウザを使うときに、非常に便利なものです。
なぜなら、これらのデバイスはconsole.logを出力しても見えないからです。
でも、ブラウザーでログが見えたらいいですよね。

update 2011/12/10

>> デモ
>> mieloggerをダウンロード

使い方

最初に、jQuery と mielogger.jsを取り込みます。

	<script src="jquery-1.6.2.min.js"></script>
	<script src="mielogger.js"></script>

次に、mieloggerを初期化します。

var logger = $().mielogger();

最後に、好きな文字列をlogの関数を使って書き込みます。

logger.mlog('Hello mielogger');

さきほどmieloggerのインスタンスを使いましたが、こういう書き方もできます。

$().mlog("It's OK");

オプション設定

初期化するときに、オプション設定をすることが可能です。
いくつかのパラメータがあります。

width : ログ表示領域の幅
height : ログ表示領域の高さ
maxlow : ログの最大の行数。mieloggerはその高さ以上に行数をもつことが可能です。
align : ログ表示領域の配置を変えます
‘TL’ 左上
‘TR’ 右上
‘BL’ 左下
‘BR’ 右下

例1: 幅300px, 高さ100px

$().mielogger({width:300,height:100});

例2: 幅450px, 最大行数100

$().mielogger({width:450,maxlow:100});

例3: 位置揃え 左下

$().mielogger({align:'BL'});

楽しいログ生活を楽しんでください

LINEで送る
Pocket

[JavaScript] Javascript で非同期処理のライブラリ

2011/12/1

こんにちは、きんくまです。
JSの非同期処理のライブラリを書きました。

これです。

if(!window.kinkuma){
	window.kinkuma = {}
}
(function(pkg){
	/**
	 * Command - base class
	 */
	pkg.Command = function(){
		this.delegate;
	};
	pkg.Command.prototype = {
		execute:function(){
		},
		onComplete:function(){
			if(this.delegate){
				this.delegate();
			}
		}
	}
	
	/**
	 * FuncCommand - function command
	 * @param func Object - function reference you want to run
	 */
	pkg.FuncCommand = function(func){
		this.targetFunction = func;
	};
	pkg.FuncCommand.prototype = new pkg.Command();
	pkg.FuncCommand.prototype.execute = function(){
		this.targetFunction();
		this.onComplete();
	};
	
	/**
	 * WaitCommand - timer command
	 * @param waitTime Numer - it's not milliseconds but second
	 */
	pkg.WaitCommand = function(waitTime){
		this.waitTime = waitTime;
		this.timerId;
	};
	pkg.WaitCommand.prototype = new pkg.Command();
	pkg.WaitCommand.prototype.execute = function(){
		var self = this;
		this.timerId = setTimeout(function(){self.onComplete();}, this.waitTime * 1000);
	};
	
	/**
	 * ParallelCommand - run all commands together
	 */
	pkg.ParallelCommand = function(){
		this.commands = [];
		this.count;
	};
	pkg.ParallelCommand.prototype = new pkg.Command();
	pkg.ParallelCommand.prototype.execute = function(){
		if(this.commands.length == 0){
			this.commands = [];
			this.onComplete();
		}else{
			this.count = 0;
			var i, len;
			len = this.commands.length;
			var command;
			var self = this;
			for(i = 0; i < len; i++){
				command = this.commands[i];
				command.delegate = function(){self.commandComplete()};
				command.execute();
			}
		}
	};
	pkg.ParallelCommand.prototype.add = function(command){
		this.commands.push(command);
	};
	pkg.ParallelCommand.prototype.commandComplete = function(){
		this.count++;
		if(this.count == this.commands.length){
			this.onComplete();
		}
	};

	/**
	 * SerialCommand - serial run command
	 */
	pkg.SerialCommand = function(){
		this.commands = [];
		this.currentCommand;
	};
	pkg.SerialCommand.prototype = new pkg.Command();
	pkg.SerialCommand.prototype.execute = function(){
		if(this.commands.length == 0){
			this.onComplete();
		}else{
			this.currentCommand = this.commands.shift();
			var self = this;
			this.currentCommand.delegate = function(){self.commandComplete();};
			this.currentCommand.execute();
		}
	};
	pkg.SerialCommand.prototype.add = function(command){
		this.commands.push(command);
	}
	pkg.SerialCommand.prototype.commandComplete = function(){
		this.currentCommand = null;
		this.execute();
	};
})(kinkuma);

使い方

このtraceは使い方で使うための関数で深い意味はないです。

function trace(message){
	console.log(message);
}

では、ここから開始。

WaitCommand
タイマークラスです。

var mywait = new kinkuma.WaitCommand(1.0);
mywait.execute();

終了したときのコールバックを設定できます。

var mywait2 = new kinkuma.WaitCommand(2.0);
mywait2.delegate = function(){
	trace('mywait2 finished');
};
mywait2.execute();

FuncCommand

関数のコマンドです。コンストラクタの引数に動かしたい関数を参照を代入します。

var myfunc = new kinkuma.FuncCommand(function(){
	trace('myfunc done');
});
myfunc.execute();

コールバックを設定できます。

var myfunc2 = new kinkuma.FuncCommand(function(){
	trace('myfunc2 done');
});
myfunc2.delegate = function(){
	trace('myfunc2 complete');
};
myfunc2.execute();

ParallelCommand
コマンドをたくさんいれて、同時に実行します。

var k = kinkuma;
var para = new k.ParallelCommand();
para.add(new k.WaitCommand(1.0));
para.add(new k.FuncCommand(function(){trace('para func1');}));
para.delegate = function(){ trace('finish para');};
para.execute(); 

SerialCommand
順番にコマンドを実行していきます。

var k = kinkuma;
var sc = new k.SerialCommand();
sc.add(new k.WaitCommand(0.5));
sc.add(new k.FuncCommand(function(){trace('seri func1');}));
sc.add(new k.WaitCommand(3.0));
sc.delegate = function(){trace('finish serial');};
sc.execute(); 

Parallel と Serial を同時に使う
ParallelCommand と SerialCommand を混ぜて同時に実行することが可能です。

var k = kinkuma;
var p = new k.ParallelCommand();
p.add(new k.FuncCommand(function(){
	trace('para func1');
}));
p.add(new k.FuncCommand(function(){
	trace('para func2');
}));
var s = new k.SerialCommand();
s.add(new k.WaitCommand(1.0));
s.add(p);
s.delegate = function(){
	trace('mix finish!');
};
s.execute();

このライブラリは、下のActionScript3のライブラリを参考に作りました。ありがとうございますです。
>> Commands (@fladdict)
>> Progression (@nium)

ではでは。

LINEで送る
Pocket

ページトップへ戻る