強火で進め

このブログではプログラム関連の記事を中心に書いてます。

NSURLで取得出来るURL(URI)のパラメータ一覧

NSURLのどのメソッドでどの要素が取れるんだっけ?となりがちなのでメモしとく。

プログラム。

	NSURL *url = [NSURL URLWithString:@"http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test"];
	NSLog(@"absoluteString : %@", [url absoluteString]);
	NSLog(@"absoluteURL : %@", [url absoluteURL]);
	NSLog(@"baseURL : %@", [url baseURL]);
	NSLog(@"fragment : %@", [url fragment]);
	NSLog(@"host : %@", [url host]);
	NSLog(@"lastPathComponent : %@", [url lastPathComponent]);
	NSLog(@"parameterString : %@", [url parameterString]);
	NSLog(@"password : %@", [url password]);
	NSLog(@"path : %@", [url path]);
	NSLog(@"pathComponents : %@", [url pathComponents]);
	NSLog(@"pathExtension : %@", [url pathExtension]);
	NSLog(@"port : %@", [url port]);
	NSLog(@"query : %@", [url query]);
	NSLog(@"relativePath : %@", [url relativePath]);
	NSLog(@"relativeString : %@", [url relativeString]);
	NSLog(@"resourceSpecifier : %@", [url resourceSpecifier]);
	NSLog(@"scheme : %@", [url scheme]);
	NSLog(@"standardizedURL : %@", [url standardizedURL]);
	NSLog(@"user : %@", [url user]);

出力結果。

2011-04-22 01:21:05.355 Test[1737:207] absoluteString : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:21:05.357 Test[1737:207] absoluteURL : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:21:05.358 Test[1737:207] baseURL : (null)
2011-04-22 01:21:05.358 Test[1737:207] fragment : test
2011-04-22 01:21:05.358 Test[1737:207] host : www.example.com
2011-04-22 01:21:05.359 Test[1737:207] lastPathComponent : index.html
2011-04-22 01:21:05.451 Test[1737:207] parameterString : (null)
2011-04-22 01:21:05.473 Test[1737:207] password : password
2011-04-22 01:21:05.474 Test[1737:207] path : /hoge/fuga/index.html
2011-04-22 01:21:05.474 Test[1737:207] pathComponents : (
    "/",
    hoge,
    fuga,
    "index.html"
)
2011-04-22 01:21:05.475 Test[1737:207] pathExtension : html
2011-04-22 01:21:05.475 Test[1737:207] port : 8080
2011-04-22 01:21:05.495 Test[1737:207] query : a=1&b=2
2011-04-22 01:21:05.496 Test[1737:207] relativePath : /hoge/fuga/index.html
2011-04-22 01:21:05.496 Test[1737:207] relativeString : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:21:05.497 Test[1737:207] resourceSpecifier : //user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:21:05.498 Test[1737:207] scheme : http
2011-04-22 01:21:05.541 Test[1737:207] standardizedURL : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:21:05.542 Test[1737:207] user : user

Base URLを使用した場合のプログラム。

	NSURL *baseUrl = [NSURL URLWithString:@"http://user:password@www.example.com:8080"];
	NSURL *url = [NSURL URLWithString:@"hoge/fuga/index.html?a=1&b=2#test" relativeToURL:baseUrl];
	NSLog(@"absoluteString : %@", [url absoluteString]);
	NSLog(@"absoluteURL : %@", [url absoluteURL]);
	NSLog(@"baseURL : %@", [url baseURL]);
	NSLog(@"fragment : %@", [url fragment]);
	NSLog(@"host : %@", [url host]);
	NSLog(@"lastPathComponent : %@", [url lastPathComponent]);
	NSLog(@"parameterString : %@", [url parameterString]);
	NSLog(@"password : %@", [url password]);
	NSLog(@"path : %@", [url path]);
	NSLog(@"pathComponents : %@", [url pathComponents]);
	NSLog(@"pathExtension : %@", [url pathExtension]);
	NSLog(@"port : %@", [url port]);
	NSLog(@"query : %@", [url query]);
	NSLog(@"relativePath : %@", [url relativePath]);
	NSLog(@"relativeString : %@", [url relativeString]);
	NSLog(@"resourceSpecifier : %@", [url resourceSpecifier]);
	NSLog(@"scheme : %@", [url scheme]);
	NSLog(@"standardizedURL : %@", [url standardizedURL]);
	NSLog(@"user : %@", [url user]);

出力結果。

2011-04-22 01:26:38.274 Test[1904:207] absoluteString : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:26:38.307 Test[1904:207] absoluteURL : http://user:password@www.example.com:8080/hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:26:38.309 Test[1904:207] baseURL : http://user:password@www.example.com:8080
2011-04-22 01:26:38.310 Test[1904:207] fragment : test
2011-04-22 01:26:38.312 Test[1904:207] host : www.example.com
2011-04-22 01:26:38.313 Test[1904:207] lastPathComponent : index.html
2011-04-22 01:26:38.315 Test[1904:207] parameterString : (null)
2011-04-22 01:26:38.316 Test[1904:207] password : password
2011-04-22 01:26:38.323 Test[1904:207] path : /hoge/fuga/index.html
2011-04-22 01:26:38.325 Test[1904:207] pathComponents : (
    "/",
    hoge,
    fuga,
    "index.html"
)
2011-04-22 01:26:38.338 Test[1904:207] pathExtension : html
2011-04-22 01:26:38.340 Test[1904:207] port : 8080
2011-04-22 01:26:38.341 Test[1904:207] query : a=1&b=2
2011-04-22 01:26:38.343 Test[1904:207] relativePath : hoge/fuga/index.html
2011-04-22 01:26:38.344 Test[1904:207] relativeString : hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:26:38.345 Test[1904:207] resourceSpecifier : hoge/fuga/index.html?a=1&b=2#test
2011-04-22 01:26:38.347 Test[1904:207] scheme : http
2011-04-22 01:26:38.348 Test[1904:207] standardizedURL : hoge/fuga/index.html?a=1&b=2#test -- http://user:password@www.example.com:8080
2011-04-22 01:26:38.350 Test[1904:207] user : user

いずれの場合も parameterString の結果が (null) なのが気になって調べた所、RFC 1808によると「object parameters」と呼ばれるものみたいです。

使用する時の形式はこんな感じ。

;type=a

以下の様に複数指定する事も可能です。

;hoge=1;fuga=2

ということでこんなプログラムで確認。

	NSURL *url = [NSURL URLWithString:@"http://www.example.com/index.html;xxx=333?a=1&b=2#test"];
	NSLog(@"parameterString : %@", [url parameterString]);

出力結果はこちら。ちゃんと xxx=333 の部分が取得出来ました。

2011-04-22 01:29:46.366 Test[1948:207] parameterString : xxx=333

iPad向けに最適化されたJavaScript製の2Dゲーム「Infector!」


こちらで実際に試せます。

最適化手法はこちらに記載されています。必見な内容です!!

HTML5/JavaScript platform game optimised for iPad | Seb Lee-Delisle
http://sebleedelisle.com/2011/04/html5javascript-platform-game-optimised-for-ipad/

iPhone/iPadのSafariで高速に画像を描画する方法


こちらのブログで紹介されていた最適化方法をテストしてみました。

HTML5/JavaScript platform game optimised for iPad | Seb Lee-Delisle
http://sebleedelisle.com/2011/04/html5javascript-platform-game-optimised-for-ipad/

最適化の方法はHTMLのエレメントに -webkit-transform:translateZ(0px) を設定するというもの。こうするとGPUで処理が行われる為、フレームレートが倍になったとの事です。

スタイルを以下の様に設定したものと、設定していないものを準備しました。

        	* {
            	-webkit-transform:translateZ(0px);
        	}

プログラムはバナナの画像を100個描画して右上から左下にスクロールさせています。

※画面をタップするともう片方のサンプルへと切り替わります。

2つを比較すると最適化しているものの方が目視でもハッキリと分かるくらいに差が付きました。

キャラクターアニメーションの方法


今回のサンプル
サンプルの全ファイル
今回は enchant.js に付属の action-skelton フォルダのサンプルを使います。

このサンプルはクマが左から右へ移動するサンプルですがアニメーションは付いていません。こちらにアニメーションを付ける方法を解説します。

enchant.js でのアニメーションの仕組み

enchant.js ではこの様な縦横のサイズが60x30の画像が有った場合に

Sprite を20x30で作成( var bear = new Sprite(20, 30); )すると60x30の元画像は
以下の様に20x30に分割されます。

そして、frameの値が増える毎に左から右に使われる画像が移動して行きます。一番右まで移動した後は最初の位置に戻ります。

アニメーションのプログラムを追加

サンプルフォルダに有る game.js を開いて下さい。中身はこの様に成っているかと思います。

enchant();

window.onload = function() {
    var game = new Game(320, 320);
    game.preload('bear.gif');
    game.onload = function() {
        var bear = new Sprite(20, 30);
        bear.image = game.assets['bear.gif'];
        bear.addEventListener('enterframe', function() {
            this.x += 3;
        });
        game.rootScene.addChild(bear);
    };
    game.start();
};

アニメーションは移動の処理を行なっているのと同じ enterframe イベントで行うのが良いでしょう。
このイベントで this(ここでは bear に対応) の frame の値を加算させ、アニメーションさせましょう

以下の様に this.x += 3; の次の行に this.frame++; を追加しましょう。

        bear.addEventListener('enterframe', function() {
            this.x += 3;
            this.frame++;
        });

変更後のプログラムを動作させると確かにアニメーションはするのですがアニメーションが速すぎるかと思います。

現在の様に毎フレームアニメーションを切り替える方法では速すぎなので何回かに1回だけ frame を加算する(アニメーションを進める)様に変更します。プログラムはこの様に成ります。

        bear.animeWaitMax = 3;		// アニメーションのWait値
        bear.animeWaitCount = 0;	// アニメーションのWait値のカウント
        bear.addEventListener('enterframe', function() {
            this.x += 3;
            if (this.animeWaitCount >= this.animeWaitMax) {
            	this.animeWaitCount = 0;
            	this.frame++;
            } else {
            	this.animeWaitCount++;
            }
        });

animeWaitMax が何回に1回 frame を加算する(アニメーションを進める)かを指定します。今回は3と成っているので3フレームに1回アニメーションが進みます。

丁度良い感じのアニメーションに成ったかと思います。キャラクターの移動速度により、最適なアニメーションの速度は異なります。
あくまで今回の値はこの移動速度に合うアニメーション速度となります。その為、実際にゲームを作成する時にはキャラクターの移動速度に応じてWaitの値は調整する様にして下さい。

関連情報

nakamura001 @ ウィキ - トップページ/JavaScriptゲーム/ライブラリ/enchant.js/サンプル
http://www32.atwiki.jp/nakamura001/pages/149.html