イナヅマTVログ » multimedia design, ActionScript,JavaScript, Lingo, PHP, Perl, SQL

2012.04.17
21:11
author: taikiken
0件のコメント

Memo, FDT 5.5 betaでmobile MXML projectの作り方

今日公開されたFDT 5.5 betaを早速ダウンロードし使い始めました。
嬉しがりでごめんなさい。
AIR for Android, AIR for iOSなどのmobileプロジェクトを新規で作るときにMXMLプロジェクトで作る方法が変わっていたのでメモ。

FDT 5.5 Beta released!
Download link
http://fdt.powerflasher.com/fdt-beta/

File > New > New FDT Project

Wizard window.

メニューアイコンも変わってた。

MXMLプロジェクトにする時は、
一番下の Use Flex Framework にチェック。

Use Flex Framework にチェックが入ってないと ActionScriptプロジェクトになります。
mobileプロジェクトはMXML使った方が何かと便利だと思います。

2012.04.17
20:40
author: taikiken
0件のコメント

Canvas始めました – 線を描いた

線(Path)を描くの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.lineWidth = 10;
context.lineCap = 'butt';
 
context.beginPath();
context.moveTo(50,30);
context.lineTo(200,30);
context.stroke();
context.closePath();

beginPath
から
closePath
の間に記述。

moveToで起点に移動してlineToで線を指定。
strokeで描く。

moveTo
x position:int, y position:int

lineTo
x position:int, y position:int

線端形状
lineCap(property):String
butt, square, round

added 2012-04-19
線端とジョイントを変えて２種類線を描いてみた。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 10;
context.lineCap = 'round';
context.lineJoin = 'bevel';//miter, round
context.beginPath();
context.moveTo(50,30);
context.lineTo(100,30);
context.lineTo(100,60);
context.stroke();
context.closePath();
//
context.lineCap = 'butt';
context.lineJoin = 'round';//miter, round
context.beginPath();
context.moveTo(50,130);
context.lineTo(100,130);
context.lineTo(100,160);
context.stroke();
context.closePath();

2012.04.17
11:38
author: taikiken
0件のコメント

Canvas始めました – 枠線だけの矩形を描く

塗りが無い枠だけの矩形を描くの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.strokeStyle = '#333333';
context.strokeRect(10, 10, 290, 240);

strokeRect
x position:int, y position:int, width:int, height:int

Option
JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.lineWidth = 10;
context.lineJoin = 'round';
context.strokeStyle = 'rgb(51, 51, 51)';
//context.strokeStyle = 'rgba(51, 51, 51, 0.5)';
context.strokeRect(10, 10, 290, 240);

lineWidth(property):int

lineJoin(property):String
round, bevel, miter

＊strokeRectで描かれる線はpathでは無い

2012.04.16
19:41
author: taikiken
0件のコメント

Canvas始めました – 文字を表示

Canvasに文字を描くの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = "#000000";
 
context.font = "italic bold 40px serif";
context.textBaseline = "top";
context.fillText('Hello world', 200, 60);

font
文字属性指定, CSS形式で良さげ。

textBaseline
top, hanging, middle, alphabetic, ideographic, bottom

fillText
fillText(text:String, x position:int, y position:int [, max length:int])

2012.04.16
11:10
author: taikiken
0件のコメント

Canvas始めました – 表示をクリア

Canvasに描いた図形をクリアするの巻。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.clearRect(0,0,canvas.width,canvas.height);

クリアする矩形をCanvasサイズで描くって感じ、って覚えとこ。
引数
x position:int, y position:int, width:int, height:int

added 2012-04-19
クリアする矩形を使えばクロップなんかもできる。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
 
context.fillStyle = '#ff0000';
context.fillRect(0,0,300,250);
context.strokeStyle = '#333333';
context.lineWidth = 10;
context.strokeRect(30,30,240,190);
context.clearRect(60,60,180,130)

2012.04.13
14:20
author: taikiken
0件のコメント

Canvas始めました – 矩形を描く

Canvasに矩形を描いてみるのメモ。

HTML

<canvas id='canvas'></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(50,30,250,100);

canvas.getContext(‘2d’) で context instanceを取得。
context instanceが描画のキモ。

fillStyle で塗り色を指定。
指定はString型、指定はhex、CSSと同じ。

fillRect 矩形(Rectangle)で描画。
引数(Argument)
x position, y position, width, height
たぶんint型で指定するんだろうけど、JavaScriptだしあんまり意味はないのかなぁ。
結果もBitmapになるし。
floatにするとどうなるんだろう。

試してみた。
floatで指定してもintの時と変わらない。
内部ではintで処理してるのかな。

2012.04.12
15:24
author: taikiken
0件のコメント

Memo, NoSQLなMongoDBをお試しインストール

NoSQLなMongoDBを試すためにインストール。
http://www.mongodb.org/

Max OS X, 10.7.3 (Lion)
MongoDB Downloadセンターよりダウンロード。
http://www.mongodb.org/downloads
最新のProduction ReleaseでOS X 64bit版を選択。
mongodb-osx-x86_64-2.0.4.tgz

解凍し適当なフォルダに移動させた。

ターミナル

DB dataフォルダ作成

sudo mkdir -p /data/db/
sudo chown `id -u` /data/db

MongoDBのデータフォルダは/data/db。

MongoDB起動

cd mongodb-osx-x86_64-2.0.4/bin
./mongod

動作確認
ターミナルの別ウインドウ

cd mongodb-osx-x86_64-2.0.4/bin
./mongo
 
> db.foo.save( { a : 1 } )
> db.foo.find()
{ "_id" : ObjectId("4f867144bda27fd7d5cf1919"), "a" : 1 }

MongoDB停止(shutdown)

cd mongodb-osx-x86_64-2.0.4/bin
./mongo
 
> use admin
> db.shutdownServer()
 
> exit
bye

Document
日本語ドキュメント
 Quickstart OS X
チュートリアル
 マニュアル
 FAQ

gihyo: RubyistのためのMongoDB入門（1）

2012.04.11
22:41
author: taikiken
1件のコメント

FDT5, AIR 3.2でコンパイル・エラーが出てdebugできない

Memo, Flex SDKのAIR SDKを3.2へアップデートで作った Flex SDK 4.6 + AIR 3.2 を使用したFDT5 mobile projectでエラーが発生しdebugできません。

エラーメッセージ。
“An internal error occurred during: “Compile”.
java.lang.NullPointerException”

project自体は生成された初期状態のものをそのまま使っています。

SDKを4.5系にするとちゃんとdebug可能です。
4.6にするとAIRのバージョンに関係なくエラーになってしまいます。
コンパイル自体はできているようでswfファイルは作られます。
ただアラート・ウインドウが開いてしまい、デバッグ・シミュレーターは起動しません。

設定で行ったことは以下の２点です。

■app.xmlのapplicationバージョンを3.2へ変更。

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/3.2">

■FDT Compiler arguments に1行追加。
-swf-version=15

Facebookで愚痴ったところ有川さんから「FDTのエラーっすかね。結構残念なエラー」とのこと。
Flash Builder 4.5だと同じSDKを使っても普通にコンパイルできるのでFDT5の問題の様子。

どうもFDT5のバグらしい

http://bugs.powerflasher.com/jira/browse/FDT-2505

FDT-2505は正に同じ現象。
FDT 5.5でFixとのこと。

えっ！FDT 5.5!!

対症療法が別のところで見つかりました。
http://bugs.powerflasher.com/jira/browse/FDT-2472
flex-sdk-description.xml を書き換えろとのこと。
FDT5用にSDKを複製し書き換えました。

元：

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex 4.6.0</name>
<version>4.6.0</version>
<build>23201</build>
</flex-sdk-description>

変更：

<?xml version="1.0"?>
<flex-sdk-description>
<name>Flex 4.5.0</name>
<version>4.5.0</version>
<build>23201</build>
</flex-sdk-description>

4.6を4.5に変更しろってことです。

エラーは出なくなった
まぁ、見事にエラーは出なくなりました。
これで1日使ってしまいました。

＊おまけ
FDT5だとFlex SDKにAIR SDKをマージするのはGUIで可能になってました。
エライ！FDT5。

でも、なんだかなぁ〜。

＊おまけのおまけ
FDT5+AIR 3.2でアプリ作れてるみたいなんだけど、エラーが出る人と出ない人がいるのかなぁ？

＊おまけのおまけのおまけ
FDT5.5はまもなく登場らしいです。
とっととバグを修正しやがれでございます。

update 2012-04-17
FDT 5.5 beta が登場しました。
FDT 5からは無償アップグレードだそうです。

FDT 5.5でFixになってると噂のAIR 3.2をコンパイルしてみました。
おっ！コンパイルできる。

正式版が楽しみっす。

2012.04.11
02:48
author: taikiken
0件のコメント

Canvas始めました – Canvasの幅と高さは属性で指定しましょうね

canvasの幅と高さの指定する話。

windowいっぱいに全面にcannvasを表示させたい時、CSSで width: 100%; と指定すると楽だと思ったら、scaleがかかって変形されてしまいました。

<canvas style="width:100%;"></canvas>

このような指定のcanvasに描画される矩形は変形（スケール）してしまいます。
不思議な感じだけどなんかtableのような振る舞いなんかなぁ。

JavaScriptでwindow.resizeを監視して幅と高さをcanvasのwidth, height属性(attributes)に指定しないといけません。
しょうがない、ちゃんとJS書いておきましょ。

【教訓】
canvasのサイズをCSSで指定してはいけない

2012.04.10
16:47
author: taikiken
0件のコメント

Studio SketchPad, Processingを気軽に試せるオンライン・エディタ

Studio SketchPad
Processingのコードを気軽に試せるオンライン・エディタです。
Wonderflやjsdo.itみたいなものかも。

The Gallary
これまで投稿されたコード・サンプルを見ることができます。

コードのShareができたり、公開コードをもとに改造することも可能です。

このエディタdrawポイントをステップ・バイ・ステップで確認できたりなかなかの凄腕です。

2024年4月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30