bute_lab.

bute-lab.の各記事にretweetボタンを設置 // tweetmeme

2010-03-06T23:10:40Z

最近twitterのAPIを使ったサイトを作っているので、APIを使って自作JSやphpでもいいかなと思いましたが、時間もなかったので、tweetmemeを使ってつけてみました。
http://tweetmeme.com/

tweetmemeでは、特に登録とかもいらず、単純にJavascriptを入れたい位置に読み込むだけでボタンが入ります。ただ、標準の場合には、retweet数を表示したりして領域を大きめにとられるので、下のようなパラメーターを渡すことで簡単に小さいものにも出来ます。

いろいろいじってみましたが、上のソースを入力し、ひとまず小さくしたのみで落ち着きました。
tweetmemeのヘルプページに英語ですがいろいろと説明してあります。
http://help.tweetmeme.com/2009/04/06/tweetmeme-button/

FirefoxでFlashエリアやaタグ内の点線枠を消す//CSS

2010-03-04T21:12:07Z

Firefox3.5(windows)で、ページ内にswfobjectで貼ったFlashや、aタグでくくった画像にフォーカスがあたったときに点線が出ます。
aタグ内はそんなに気になりませんでしたが、Flashでは、どこまでがFlashエリアかが一目瞭然で、いまいちだったので、この枠線の消し方をいろいろ試してみました。

下のサンプルはFlashを貼った部分のdivのID名がflashだった場合です。
念のため、:focusでないときも入れてみました。


#content,
#content:focus{
    outline:none;
}

Flash内テキストフィールドにCSSを設定する //AS3.0

2010-03-02T21:11:31Z

Flash内で使えるCSSはあまり多くはありませんが、基本的なテキストの装飾などは簡単につけることが出来ます。
下の例では、test_txtのにcolorとマウスオーバー時のtext-decorationを設定します。
CSSではtext-decorationですが、ActionScriptで書くときはtextDecorationなので気をつけます。(他にもActionscriptで使う場合に普通のCSSと異なるものがあります)


import flash.text.StyleSheet;

function setStyleSheet(txt){
    var style:StyleSheet = new StyleSheet();
        var main_a:Object = new Object();
        main_a.color = "#ff0000";
     var main_a_hover:Object = new Object();
        main_a_hover.textDecoration = "underline";
        style.setStyle("a", main_a);
        style.setStyle("a:hover", main_a_hover);            
    txt.styleSheet = style;
}


//上の関数setStyleSheetでスタイルを規定し、あとは引数でtest_txtを投げるだけで反映されます。
setStyleSheet(test_txt);

AIRでのnativeWindowの操作 //AS3.0

2010-02-15T22:29:02Z

AIR制作の時には、Flashと違って、アプリ自体のwindowの操作の制御があります。
最低限必要なのは、ドラッグして移動させることと、終了させることです。
これらはnativeWindowを使って制御します。

アプリ自体の移動は、

？？？.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
function windowMove(event:MouseEvent):void{ 
         stage.nativeWindow.startMove(); 
}

アプリの終了は、

？？？.addEventListener(MouseEvent.MOUSE_DOWN, exitWindow);
function exitWindow(event:MouseEvent):void {
     stage.nativeWindow.close();
}

だけです。
コピペのために保存しておきます。

Safariでaタグのbackgroundの画像が表示されない//CSS

2010-02-09T21:00:19Z

下のサンプルのようにCSSを設定したところ、aタグの通常の状態では背景画像が入りますが、ロールオーバー状態では画像が表示されません。
いろいろとググったところ、全角スペースの混入や@charsetを消すなど、どれを試しても相変わらずIEやFirefoxなどは問題ないのに、Safariのみうまくいきませんでした。

試しにa:hoverのbackgroundを背景色にすると、ちゃんと規定サイズの12×12pxの正方形に色がつきました。

結局は、ロールオーバー用の画像の"_"を一つとって、allow_r1.pngにしたところうまく表示されました。

Safariでは"_"の数に規定があるのか、ファイル名の長さに問題があるんでしょうか？それともSafariのバグ?
よくわかりませんが、ひとまず解決です。

こんなことで小一時間かかりました。

//このサンプルでは、Safariでロールーバー時に画像が表示されません。

a .allow {
    width: 12px;
    height: 12px;
    background:url(../images/allow_r.png);
}

a:hover .allow {
    background:url(../images/allow_r_1.png);
}

テキストをビットマップにする //AS3.0

2010-02-08T23:20:49Z

ダイナミックテキスト(textfield)は、そのままではalphaやrotationなどが変えることが出来ません。
というよりも、変えると、パッと消えてくれます。

そこで、TextをBitmapにdrawしてしまい、textfield自体は消しておけば、あたかもそれらのalphaやrotationが変えられたような表現が出来ます。


//BitmapDataを新規生成して、bitmapにdrawする
//今回はtest_txtをBitmapにします
var myBitmap:BitmapData = new BitmapData(600, 150,true,0x333333);
myBitmap.draw(test_txt);
var bmp:Bitmap = new Bitmap(myBitmap);
bmp.x = 100;
tmp_mc.addChild(bmp);
tmp_mc.alpha = 0;
test_txt.visible = false;

traceで改行させる場合//AS2.0 AS3.0

2010-02-06T22:09:25Z

traceで出力させて、見やすいように出力ウィンドウで改行させる(空白1行を入れる)場合、AS2までなら、
trace(newline);
と打っていましたが、AS3.0だとnewlineが怒られることに今日知りました。
代わりに、
trace('');
と入力して改行させます。

実行するクラス名を配列(Array)などから指定する//AS3.0

2010-02-04T20:16:31Z

いろいろなムービークリップの中から、ランダムで配置する場合、ひとまずリンゲージで指定したクラス名を配列に入れ、それらの中から、乱数により抽出したものを new Class();のように配置させます。

今回は、その配列からnewで実行するまでです。
今回の肝は、getDefinitionByNameを使うことです。


var myShape:Array = ["class1","class2","class3"];

var ShapeNo:Number = 1;//本来は乱数などですが、今回は割愛

var class_str:String=myShape[ShapeNo];

var myClass:Class=Class(getDefinitionByName(class_str));

mc = new myClass();

iframe内のJSの関数を親HTMLから実行する //JavaScript

2010-01-11T20:31:09Z

iPhone用サイト内で、iframeを使った場合、window.orientationで画面縦横変更のトリガーがiframe内ではうまく動作しませんでした。
そこで、代わりに親htmlから縦横が変わった際にiframe内のJSを実行させることで、iframe内でも縦横によって違う動作をさせる(CSSでパーツの幅を変えるなど)ことができました。


//親html内
//iframe_idは、iframeのid名
document.getElementById("iframe_id").contentWindow.setOrientation_i(引数);

//iframe内
function setOrientation_i(dl) { 
    //処理をココへ
}

iPhoneサイトで使うJSフレームワーク // Javascript

2009-12-17T20:46:41Z

iPhoneサイトを作る際に、Flashが使えないので、Javascriptに頼ることになります。
今回は、iPhoneのiTunesなどのように、ページ遷移などをiPhoneのUIのように動くWebアプリケーションを作りたいので、下の2つのフレームワークが候補になりました。

iui
http://code.google.com/p/iui/

jqtouch(jquery拡張)
http://code.google.com/p/jqtouch/

どちらを使っても、サンプルをいじるだけで、iPhoneライクなUIや動きが表現できます。
ｊqtouchでは、サイト内でXMLをパースして表示させるのにJQueryも使うので、仲良く出来そうかなということや、日本では今のところ関係ありませんが、G1やPreなどにもそのまま対応できるらしいのが気になりました。。
ただし、今回はjqtouchのbetaというところに引け目を感じ、iuiを研究して使って見ることにしました。

iuiの詳細に関しては後々アップ予定です。

iPhone用サイトで、画像を縦横ともに画面幅いっぱいにリサイズさせる //iPhone

2009-11-29T20:41:51Z

iPhone用サイトを作る場合は、画面サイズが縦横で異なります。
画面解像度は320×480なので、コンテンツの幅が320と480の両方に対応して作ります。

表示の際の幅はmeta内のviewportで設定しますが、画面閲覧中に縦横を切り替えた場合の画像サイズの切替を行いたくていろいろ調べました。
下のサンプルでは、SitePoint内の記事を参考に、div#mainimage内のimg1.jpgの幅を、縦の場合は320×160、横の場合、480×240で表示します。
その他レイアウト等もCSS内に同様に記述することで、縦横で分岐することが出来ます。
今回のキーポイントは、iPhoneの表示角度を利用するときに使う、window.orientationです。window.orientationchangeで、縦横切替の際のトリガーになります。

参考記事
Sitepoint : New Articles, Fresh Thinking for Web Developers and Designers
http://articles.sitepoint.com/print/iphone-development-12-tips

FuseKitでBlurさせる // Flash

2009-10-29T22:18:44Z

今更ですが、AS2でブラー処理させる機会があり、忘れかけていたので、久しぶりのAS2.0のエントリーです。
座標やalphaなどの一般的なFuseと使い方は変わりません。

下のサンプルは、mcにX,Y軸両軸方向に0.5秒でじわーっとブラーをかけるサンプルです。


var f:Fuse = new Fuse();
    f.push({Blur_blur:20, seconds:.5, ease:"easeOutQuad", trigger:true});
    f.target = mc;
    f.start();

※ActionScript2.0ですよ！

AIRのアプリをウィンドウ内でドラッグできるようにする // Flash

2009-10-28T20:23:46Z

AIRのアプリを書き出す際に、「AIR-アプリケーションとインストーラーの設定」で「ウィンドウスタイル」をカスタムクローム(透明)を選ぶと制作したもののみで、余計なウィンドウにくるまれなくなります。
と同時に、そのままの場合はドラッグして移動させることもままならなくなるので、下のように記述します。
基本ですが、コピペのために記録しておきます。


btn.addEventListener(MouseEvent.MOUSE_DOWN, windowMove);
btn.buttonMode = true;

function windowMove(Evt:MouseEvent):void {
    stage.nativeWindow.startMove(); 
}

AIRに関する他の記事はコチラ

Live HTTP Headers // Firefox addon

2009-09-30T20:07:06Z

Flash制作の際に、ローカルで動くものであれば、traceを使い、いろいろな値を出力させて確認しながら制作しますが、phpやjsなどと連携させる場合、なかなか見ることが出来ません。
そこで、アップされたサイト内のflashの動きの動向を見る際には、このFirefoxのアドオンのLive HTTP Headersを使い、HTMLヘッダを監視すると便利です。
外に読みに行く画像パスやエラーなどについても返してくれます。

ダウンロードはコチラから
Live HTTP Headers - Firefox addon

ExternalInterfaceを使って、FlashからCSSのbackgroundを変える //AS3 & JS & CSS

2009-09-24T20:16:00Z

Flash内からHTML内の背景色を変更したい場合に、ActionScript3.0とJavaScript、CSSの連係プレーで実装します。
FlashからJavaScriptへは、AS2でもよく使ったExternalInterfaceを使い、JavaScriptからCSSへは、document.getElementByIdを使ってdivのID名を探し、.className="クラス名"でクラス名を設定します。

下のサンプルでは、#idname内のbackgroundを3色の中から変更できる仕様です。


//Flash内AS3.0
import flash.external.ExternalInterface;

colorID = no;    
var result:uint = ExternalInterface.call("callJS", no);


//JavaScript
function callJS(str) {       
   switch(str){
        case 1: document.getElementById("idname").className = "color1";break;
        case 2:    document.getElementById("idname").className = "color2";break;
        case 3:    document.getElementById("idname").className = "color3";break;
   }   
    return str; 
}



//CSS
.color1{
    width:100px;
    height:200px;
    background:#ff6600;
}

.color2{
    width:100px;
    height:200px;
    background:#ffffff;
}

.color3{
    width:100px;
    height:200px;
    background:#333333;
}

最近忙しさのせいにして、ブログのアップを怠っています。反省して、来月からまた頑張ります。