JavaScriptでのCSS指定

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

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

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

[Pv3D]Papervision3Dやってみた その１[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がつかえるのなら、使ったほうがいいんでね？

[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
とりあえず↑を読んで勉強します。

IETester

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

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

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

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

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

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


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

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


↓ソースコード


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

雑記

本日の雑記。

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というゲームを思い出した。

[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版作りました。
こちら