2009年5月27日水曜日

JavaScriptでのCSS指定

この間jQuery使ってたら、IEでだけエラーが出た。
「またか」と思いつつ原因を探してたらこちらのページを見つけました。

tableのtrタグを非表示にしたり、表示したりするのに「css("display", "none")」と「css("display", "table-row")」を使ってたのが原因っぽいです。
こういう時は「css("display", "none")」「css("display", "")」を使えばいいそうです。
あえて未指定にすることで各ブラウザの初期値になるらしい。

これは覚えてて損はないかも。

2009年5月26日火曜日

[Pv3D]Papervision3Dやってみた その1[AS3.0]

今回は球を表示させるだけの簡単なプログラム。
カメラを動かさないとなんだがなんだが3Dな感じがしませんね。

実行結果
ソースコードはすごい短いです。

package {
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.view.BasicView;

[SWF(backgroundColor="#ffffff")]
public class lets3d extends BasicView {
public function lets3d() {
var ball:Sphere = new Sphere(null, 500, 50, 50);
scene.addChild(ball);
startRendering();
}
}
}

今回はこちらを参考にさせてもらいました。
ソースコードが短いのは6行目の"extends BasicView"をしてるおかげみたいです。Pv3Dの便利機能の1つと考えていいんでしょうか。

BasicViewを使わない方もいらっしゃいます。鮭さんとかそうですね。
勉強がてら自分も"extends BasicView"をしないで挑戦してみました。

というわけで、まず動作を理解するためにBasicView.asの中身を見てみます。

package org.papervision3d.view
{
import org.papervision3d.cameras.SpringCamera3D;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.cameras.CameraType;
import org.papervision3d.cameras.DebugCamera3D;
import org.papervision3d.core.view.IView;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
/* @author Ralph Hauwert
* 中略 */
public class BasicView extends AbstractView implements IView
{
/* 中略 */
public function BasicView(viewportWidth:Number = 640, viewportHeight:Number = 480, scaleToStage:Boolean = true, interactive:Boolean = false, cameraType:String = "Target")
{
super();

scene = new Scene3D();
viewport = new Viewport3D(viewportWidth, viewportHeight, scaleToStage, interactive);
addChild(viewport);
renderer = new BasicRenderEngine();

switch(cameraType)
{
case CameraType.DEBUG:
_camera = new DebugCamera3D(viewport);
break;
case CameraType.TARGET:
_camera = new Camera3D(60);
_camera.target = DisplayObject3D.ZERO;
break;
case CameraType.SPRING:
_camera = new SpringCamera3D();
_camera.target = DisplayObject3D.ZERO;
break;
case CameraType.FREE:
default:
_camera = new Camera3D(60);
break;
}

cameraAsCamera3D.update(viewport.sizeRectangle);
}

/**
* Exposes the camera as a Camera3D
*/
public function get cameraAsCamera3D():Camera3D
{
return _camera as Camera3D;
}
/* 略 */
}
}

これも"extends AbstractView"となっているので、AbstractView.asの中身も覗いてみます。

package org.papervision3d.view
{
import flash.display.Sprite;
import flash.events.Event;

import org.papervision3d.core.proto.CameraObject3D;
import org.papervision3d.core.view.IView;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;

/**
* @Author Ralph Hauwert
*/
public class AbstractView extends Sprite implements IView
{
protected var _camera:CameraObject3D;
protected var _height:Number;
protected var _width:Number;

public var scene:Scene3D;
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;

public function AbstractView()
{
super();
}

public function startRendering():void
{
addEventListener(Event.ENTER_FRAME, onRenderTick);
viewport.containerSprite.cacheAsBitmap = false;
}

/* 中略 */
protected function onRenderTick(event:Event = null):void
{
renderer.renderScene(scene, _camera, viewport);
}

/* 略 */
}
}

今回使わなかった部分は略しました。
ところでこれって勝手に載せていいんですかね?問題はないと思うけど。

上2つを参考に最初のプログラムを書きなおします。

package {
import flash.display.Sprite;
import flash.events.Event;
import org.papervision3d.cameras.Camera3D;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Sphere;
import org.papervision3d.render.BasicRenderEngine;
import org.papervision3d.scenes.Scene3D;
import org.papervision3d.view.Viewport3D;

[SWF(backgroundColor="#ffffff")]
public class lets3d2 extends Sprite {
public var scene:Scene3D;
public var camera:Camera3D;
public var viewport:Viewport3D;
public var renderer:BasicRenderEngine;

public function lets3d2() {
scene = new Scene3D();
camera = new Camera3D(60);
viewport = new Viewport3D(0, 0, true, true);
renderer = new BasicRenderEngine();
addChild(viewport);

camera.target = DisplayObject3D.ZERO;
camera.update(viewport.sizeRectangle);

var ball:Sphere = new Sphere(null, 500, 50, 50);
scene.addChild(ball);

addEventListener(Event.ENTER_FRAME, renderTick);
viewport.containerSprite.cacheAsBitmap = false;
}

protected function renderTick(event:Event = null):void {
renderer.renderScene(scene, camera, viewport);
}
}
}

最初のに比べるとソースコードは長くなりました。
実行結果はこちら

見事同じものができました。

結論:
BasicViewがつかえるのなら、使ったほうがいいんでね?

2009年5月25日月曜日

[Pv3D]Papervision3Dをやろうかな

Papervision3Dって名前長いですね。
というわけでこれからは「Pv3D」とでも略そうかと思ふ。

とりあえずGoogle Codeからswcファイルをダウンロードして、Flex Builderで開発環境そろえました。

ちなみに、Papervision3D 2.0(Great White)です。
なんか2.0は結構違うらしいので、どうせ覚えるのなら新しいほうがいいかな、と。

http://rainyday.jp/blog/flash/pv3d/75.html
http://sakeprog.cocolog-nifty.com/sake/2008/05/papervision3d_c48d.html
http://labs.anthill.jp/2008/04/as30greatwhitepapervision3d_20.html
とりあえず↑を読んで勉強します。

2009年5月19日火曜日

IETester

Webページの制作をすると、ブラウザチェックなるものが必要になります。

自分は前までMultiple IEを使っていたんですが、
IE8にアップデートしてから動かなくなったので、今はIETesterを使っています。

なかなか使いやすいのでお勧めです。

2009年5月17日日曜日

[Flex][AIR]ポケベル暗号変換Ver.0.1

そろそろ更新しないとまずいと感じたので更新します。

今回は30分で書けるような楽なプログラムです。


ひらがなをポケベル暗号(?)っていうのに変換します。
なんか唐突に思いついたので作ってみました。
ちなみに私はポケベル触ったことすらありません。

変換できない文字は「?」になります。
見た目をもっとポケベルっぽくするといい感じなるかも。
↓Adobe AIRファイル


↓ソースコード


ソースコードを記事に書くと記事が縦に長くなってしまうので今回はSkyDriveのほうに上げました。
だれか他のいいやり方教えてください。

2009年5月4日月曜日

雑記

本日の雑記。

GWだし、明日ちょっと自転車で普段行かないとこ言ってみようと思う。
ところでBloggerって写真と動画以外のものってアップできないんですかね?
ちょっと不便。

適当に気になった記事とか便利だと思ったもの。
http://pxtoem.com/
pxをemに変換したい時に。

http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/
画像を使わないでCSSだけで吹きだしを表現できるらしい。エラスティックレイアウトだと利点がありそう。

http://kujirahand.com/tools/tougarasi/
ソースコードをhtmlで表示したい時に。
15パズルVer.0.1のときはこちらを使わせてもらいました。

http://www.4gamer.net/games/023/G002373/20090421011/
>■ゲスト:岩垂徳行 井上喜久子 伊瀬茉莉也
3番目の人グランディア関係あったっけ?ちなみに現在初代をPSPでプレイ中。

http://hatimaki.blog110.fc2.com/blog-entry-1018.html
>恋人になると彼女がプレイヤーの呼び方をボイスで呼んでくれる
>EVSでは無く、苗字、名前、あだ名のボイスは大量に用意されている

なんかバーチャコールSというゲームを思い出した。

2009年5月3日日曜日

[Flex][AIR]15パズルVer.0.15



前回の続きです。

Ver.0.1にエフェクトを追加しました。連打しまくるとおかしくなるかも?
それと、ピース(Piece)の綴りを間違えていたのを修正しました。
白く塗りつぶしていた最後のピースを横のほうに表示させるようにしました。
イメージとしては、おもちゃの「できるんです」をイメージ。


次回あたりに大きい画像を縮小して表示させるようにする予定。

ソースコード
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" nativeDragEnter="onDragEnter(event);" nativeDragDrop="onDragDrop(event);" width="600" height="500" viewSourceURL="srcview/index.html">
<mx:MenuBar labelField="@label" itemClick="useFile(event)" width="100%" id="myMenu">
<mx:dataProvider>
<mx:XMLList>
<Menu label="操作">
<MenuItem label="スタート" />
</Menu>
</mx:XMLList>
</mx:dataProvider>
</mx:MenuBar>
<mx:Image id="myImage" width="100%" height="100%" />
<mx:Move id="myMove" easingFunction="Back.easeInOut" duration="350" />
<mx:Script>
<![CDATA[
import mx.effects.easing.*;
import mx.controls.Alert;
import mx.events.MenuEvent;

// 画像のロード判定用
private var loadEnd:Boolean = false;
private var file_ary:Array;
// 1ピースの幅
private var pieceWidth:Number;
// 1ピースの高さ
private var pieceHeight:Number;
// 空ピースの番号
private var empty:uint;
// 完成確認用配列
private var order:Array = new Array();
private var base:Image;
// シャッフルしたかどうか
private var random:Boolean = false;

// メニュー用の関数
private function useFile(e:MenuEvent):void {
if(e.label == "スタート") {
shuffle();
}
}

// ドラッグ&ドロップでロード
private function onDragEnter(event:NativeDragEvent):void {
trace("entered");
var cb:Clipboard = event.clipboard;
if(cb.hasFormat(ClipboardFormats.FILE_LIST_FORMAT)) {
// ドロップを許可
NativeDragManager.acceptDragDrop(this);
}
}

private function onDragDrop(event:NativeDragEvent):void {
if(loadEnd) {
for(var i:uint = 0; i <= 15; i++) {
myImage.removeChild(myImage.getChildByName(String(i)));
}
myImage.removeChild(myImage.getChildByName(String(16)));
}

var cb:Clipboard = event.clipboard;
file_ary = cb.getData(ClipboardFormats.FILE_LIST_FORMAT) as Array;
trace("ファイル名:" + File(file_ary[0]).name);

LoaderRequest();
}

private function LoaderRequest():void {
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, LoadCompleted);
var request:URLRequest = new URLRequest(File(file_ary[0]).url);
loader.load(request);
}

private function LoadCompleted(event:Event):void {
// 画像はBitmapでロード
var bitmapImage:Bitmap = Bitmap(event.target.loader.content);
empty = 15;
pieceWidth = bitmapImage.width / 4;
pieceHeight = bitmapImage.height / 4;

// ピース並べ
for(var i:uint = 0; i < 15; i++) {
// ピースと同じ大きさのビットマップをつくる
var newPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth, pieceHeight));
// ロードした画像から新しく作ったビットマップにコピー
newPieceBitmap.bitmapData.copyPixels(bitmapImage.bitmapData, new Rectangle((i % 4) * pieceWidth, Math.floor(i / 4) * pieceHeight, pieceWidth, pieceHeight), new Point(0, 0));

// ピースの描画
var newPiece:Sprite = new Sprite();
newPiece.addChild(newPieceBitmap);
base = new Image();
base.addChild(newPiece);
base.width = pieceWidth;
base.height = pieceHeight;
base.x = (i % 4) * (pieceWidth + 3) + 20;
base.y = Math.floor(i / 4) * (pieceHeight + 3) + 30;
base.name = String(i);
base.addEventListener(MouseEvent.CLICK, click);
myImage.addChild(base);
}
// 空ピースは白い長方形
var emptyPiece:Sprite = new Sprite();
emptyPiece.graphics.beginFill(0xffffff);
emptyPiece.graphics.drawRect(0, 0, pieceWidth, pieceHeight);
emptyPiece.graphics.endFill();
base = new Image();
base.addChild(emptyPiece);
base.width = pieceWidth;
base.height = pieceHeight;
base.x = 3 * (pieceWidth + 3) + 20;
base.y = 3 * (pieceHeight + 3) + 30;
base.name = String(15);
myImage.addChild(base);

var lastPieceBitmap:Bitmap = new Bitmap(new BitmapData(pieceWidth, pieceHeight));
lastPieceBitmap.bitmapData.copyPixels(bitmapImage.bitmapData, new Rectangle(3 * pieceWidth, 3 * pieceHeight, pieceWidth, pieceHeight), new Point(0, 0));
var lastPiece:Sprite = new Sprite();
lastPiece.addChild(lastPieceBitmap);
base = new Image();
base.addChild(lastPiece);
base.width = pieceWidth;
base.height = pieceHeight;
base.x = 4 * (pieceWidth + 3) + 20;
base.y = 3 * (pieceHeight + 3) + 30;
base.name = String(16);
myImage.addChild(base);

// 完成判定のためIndexをセット
for(var j:uint = 0; j < 17; j++) {
myImage.setChildIndex(myImage.getChildByName(String(j)), j);
}

// ピクチャの大きさに合わせてウィンドウの大きさを変更
nativeWindow.width = bitmapImage.width + pieceWidth + 60;
nativeWindow.height = bitmapImage.height + 105;
loadEnd = true;
}

// ランダムシャッフル
private function shuffle():void {
var count:uint = 8888;
var pieceNumber:uint;
random = true;

for(var i:uint = 0; i < count; i++)
{
pieceNumber = Math.floor(Math.random() * 15);
if(checkMove(pieceNumber))
{
pieceMove(pieceNumber, random);
}
}
}

// ピースクリック時の処理
private function click(event:MouseEvent):void {
//ピースの番号
var pieceNumber:int = event.currentTarget.name;
trace("click:" + pieceNumber);
if(checkMove(pieceNumber)) {
pieceMove(pieceNumber, false);
}
}

// ピースが動かせるかチェック
private function checkMove(pieceNumber:int):Boolean {
var result:Boolean = false;

if((pieceNumber == (empty - 4)) || (pieceNumber == (empty + 4)))
result = true;
else if(((pieceNumber % 4) != 0) && ((pieceNumber - 1) == empty))
result = true;
else if(((pieceNumber % 4) != 3) && ((pieceNumber + 1) == empty))
result = true;

return result;
}

// ピース移動
private function pieceMove(pieceNumber:int, random:Boolean):void {
var oldEmpty:int = empty;
empty = pieceNumber;
if(!random) {
moveEffect(pieceNumber, oldEmpty);
} else {
myImage.getChildByName(String(oldEmpty)).x = (pieceWidth + 3) * (pieceNumber % 4) + 20;
myImage.getChildByName(String(oldEmpty)).y = (pieceHeight + 3) * Math.floor(pieceNumber / 4) + 30;
myImage.getChildByName(String(pieceNumber)).x = (pieceWidth + 3) * (oldEmpty % 4) + 20;
myImage.getChildByName(String(pieceNumber)).y = (pieceHeight + 3) * Math.floor(oldEmpty / 4) + 30;
}
myImage.getChildByName(String(oldEmpty)).name = String(pieceNumber);
myImage.getChildByName(String(pieceNumber)).name = String(oldEmpty);
indexExchange(pieceNumber);
}

private function moveEffect(fromNumber:int, toNumber:int):void {
myMove.target = myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(fromNumber))));
if(fromNumber == 16) {
myMove.duration = 800;
myMove.xFrom = (pieceWidth + 3) * 4 + 20;
myMove.yFrom = (pieceHeight + 3) * 3 + 30;
} else {
myMove.xFrom = (pieceWidth + 3) * (fromNumber % 4) + 20;
myMove.yFrom = (pieceHeight + 3) * Math.floor(fromNumber / 4) + 30;
}
myMove.xTo = (pieceWidth + 3) * (toNumber % 4) + 20;
myMove.yTo = (pieceHeight + 3) * Math.floor(toNumber / 4) + 30;
myMove.play();
if(fromNumber != 16) {
myMove.target = myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(toNumber))));
myMove.xFrom = (pieceWidth + 3) * (toNumber % 4) + 20;
myMove.yFrom = (pieceHeight + 3) * Math.floor(toNumber / 4) + 30;
myMove.xTo = (pieceWidth + 3) * (fromNumber % 4) + 20;
myMove.yTo = (pieceHeight + 3) * Math.floor(fromNumber / 4) + 30;
myMove.play();
}
}

// Index交換用関数
private function indexExchange(index:int):void {
var indexTemp:int;

indexTemp = myImage.getChildIndex(myImage.getChildByName(String(index)));
myImage.setChildIndex(myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(index)))), myImage.getChildIndex(myImage.getChildByName(String(empty))));
myImage.setChildIndex(myImage.getChildAt(myImage.getChildIndex(myImage.getChildByName(String(empty)))), indexTemp);
// ピース合わせ確認
checkComplete();
}

// 完成判定関数
private function checkComplete():void {
var complete:Boolean = true;
for(var i:uint = 0; i < 15; i++) {
if(!(i == myImage.getChildIndex(myImage.getChildByName(String(i))))) {
// 不一致があった場合
complete = false;
}
}
// 全て一致した場合
if(complete) {
trace("Complete!");
var alert:Alert = Alert.show("complete");
alert.isPopUp = false;
alert.cacheAsBitmap = true;
moveEffect(16, 15);
}
}
]]>
</mx:Script>
</mx:WindowedApplication>
↓前回のに上書きしてしまった。



------------------------------------------
2009/9/20 追記
Flex版作りました。
こちら