bute_lab.

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

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

<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

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

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

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


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


Flash内で使えるCSSはあまり多くはありませんが、基本的なテキストの装飾などは簡単につけることが出来ます。
下の例では、test_txtの<a>に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制作の時には、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();
}

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

下のサンプルのように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);
}

ダイナミックテキスト(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で出力させて、見やすいように出力ウィンドウで改行させる(空白1行を入れる)場合、AS2までなら、
trace(newline);
と打っていましたが、AS3.0だとnewlineが怒られることに今日知りました。
代わりに、
trace('');
と入力して改行させます。

いろいろなムービークリップの中から、ランダムで配置する場合、ひとまずリンゲージで指定したクラス名を配列に入れ、それらの中から、乱数により抽出したものを 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();

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>

<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<script type="text/javascript">
window.addEventListener('load', setOrientation, false); 
window.addEventListener('orientationchange', setOrientation, false);

function setOrientation() { 
     var orient = Math.abs(window.orientation) === 90 ? 'landscape' : 'portrait'; 
     var cl = document.body.className; 
     cl = cl.replace(/portrait|landscape/, orient); 
     document.body.className = cl; 
}
</script>   

<style>
body.portrait #main_image img{
    width:320px;
    height:160px;
}
body.landscape #main_image img{
    width:480px;
    height:240px;
}
</style>
</head>

<body class="portrait">
<div id="main_image">
  <img src="img1.jpg" width="320" height="160" />
  </div>
</body>

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

今更ですが、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ですよ！