ちょいと作ってみました。

iPhoneのSafariでブラウジングしていて、ホームページを「ホーム画面に追加」とすることで、いわゆる「デスクトップにある好きなサイトのショートカット」みたいな感じのことができます。iPhoneのホーム画面にクリップできるわけですね。

通常、それはサイトのスクリーンショットが縮小されたものになるのですが、こちらで画像を用意することも出来ます。ということで簡単な作り方を以下に。

・57px*57px のpng画像をつくる。
・名前を「apple-touch-icon.png」にする。
・サイトのrootにアップロードする。

以上です。

角丸とかハイライトとかはiPhoneが勝手にしてくれるので、ぺらぺらの普通の画像でいいです。シャドウとかぜんぶ勝手に入ります。ちなみに上記の元画像はこんな感じ。

こんなぺらぺらが角丸とかなって上の画像みたくなるからステキ！

ということで、iPhoneやらiPod touchやらもっている方は、Readをホーム画面に追加して確認してみてください。暇があればつきさやとか夜明けの味用のアイコンも作りたいなー。なー。

たまにはFlashの記事でも。

先日、Yahooにのせるバナーの制作をしていたんですが、これのレギュレーションが思っていた以上に厳しくて参った。as3どころか、as2でもあれこれやってると死亡する率高いのね。

Yahooでは、死亡しないバナーのために事前にツールを公開しており、とりあえずはそこでチェックしていくことから始まります。

「Abbey」

これが噂のチェックツール。作ったバナーをここにあげて、チェッキングするわけです。

注意しなければならない点は、

・FlashPlayer ver.6で書き出す。
・当然、テキストやMCにフィルタが使えない。
・as3は使えない。
・それどころか、as2でも一部のscriptが使えない。
・Tweenerとかライブラリは使えない。
・1フレーム30kb以内などの制約があるので、1フレ目は軽めにする。
・要は、1フレだけあって、あとはscriptで動かしてるようなバナーだと死亡するかも。

とか、か。

つーか、いい加減、ver8あたりで作りたいんですけど、後ろを見すぎて未来が見えてないんじゃないの！IE6にいまだに対応しなくちゃいけない点も嫌ですね。早くそういうものから解放されたグローバルなところに行きたいです。

先日やろうとしたこと。

flashを背景にしいて、上で何やかんややろうと思ってた。

方法論としては、まずflashを作る。
んで、下記を追加する。
<param name=”wmode” value=”transparent” />
<embed wmode=”transparent”>
これでflashの上に要素を置いても、flashがちゃんと下にくるようになった。

というわけで、今度は上におきたいdiv要素を作り、配置する。
置き方は、marginをマイナスにしようが、position:absoluteしようがどっちでもいい。
僕はmarginマイナスにしてみた。positionの挙動が、あまり好きじゃないんです。
absoluteとrelativeを使いこなさなくちゃいけないのが面倒で…。

さて、これで基本的にはオッケーです。
divんなかにすきなの詰めて遊べばいいと思います。

ところがどっこい、僕はそのdiv要素に、背景画像をしこうと思ってた。
これがうまくいかないんですよねー。
cssでbackgroud:url(img.jpg);とかやっても出てこない。
唯一、IE6だけ出てくる。Firefox、Webkit、IE7とかのモダンブラウザは全死亡。さすがIE6は格が違った。

どうしようかしばらく試行錯誤してみたんですが、どうも、これは仕様のよう。
backgroundプロパティで示されるものは、どうやら一番奥にいってしまうみたい。

仕方ないから、僕はflashの中でその背景を表示させることで回避しました。
flashに無駄なデータとレイヤーが出来るんで邪魔なんですが、仕方ない…。

あんまりいないと思いますけど、flashの上にdivを重ねようって時にはご注意を。
divの背景は、flashの上にはのりません。一番下にいきます。

すごい初心者なこと。
ProgressionのaddCommandは、ふつうにやると直列処理なのだけど、
たまには同時にコマンドしてよお願いだよぷろぐれっしょん、と思うこともあるので、メモ。

やり方は超簡単。

addCommand(
//並列処理
[
new AddChild(なんたら),
new AddChild(なんたら2)
],
//直列処理
new AddChild（なんたら3)
);

ってやるだけ。うわーい。こんだけだー。
他にもこんな方法もあります。

addCommand(
//並列処理
new ParallelList(0,
new AddChild(なんたら),
new AddChild(なんたら2)
),
//直列処理
new AddChild（なんたら3)
);

パラレルリストをnewする方ですね。
こちらは最初の引数に null とか0を入れないと動かないみたい？

まあ、とりあえずこれで並列処理ができるようになりました。
さて、またがしがし作っていきたいとこです。

Progression 勉強メモ。

あいだがだいぶ空きましたが、引き続き。
まじめに勉強するなら、やっぱり、実践しないといけないと思ってて、
そのために一つサイトのデザインを作ってました。
で、デザインはとりあえず出来たので、勉強再開です。

今回やったことは、フルFlashサイトなので、stage100%にするということ。

あ、僕はAS超初心者であるうえに、AS3.0の理解度も超低いです。
グローバル変数を説明することも出来ません。たはー。
ではいきましょう。

まずフルFlashなので、ヘッダーとフッターたちは、常に一番上と下にあってほしいです。
見た人がウィンドウをリサイズしても、自動的に移動するようになっていてほしい。
つまり、リサイズ処理ですね。
これを分からないなりに苦心して考えました。

まずヘッダー。
これは一番上に常にあるも何も、初期値にしときゃ勝手にそこにあるので放置。
何はともあれインスタンスを作成。

var headerBG:HeaderBG = new HeaderBG();

なお、基本的なやり方は、特集：Flashのフレームワーク「Progression3」を始めてみよう！にのっとってます。
名前の付け方というか、なんというか。

んで、フッターですか。

var footerBG:FooterBG = new FooterBG();

で、あとはコマンドでaddChildしてやりゃヘッダーフッターは生まれますね。
ここまではいい。
けど、フッターを一番下に表示させるにはどうしたらいいだろう？
フッターは30pxの高さで作られているので、一番下というのは、つまり、
(ステージの高さ-30px)で常に表示されていればいいということになる。
そうすれば、いつリサイズされても、それは常にウィンドウの高さ-30pxの位置にある。
ということは、こうかな？

protected override function _onLoad():void {
//インスタンスの作成
// 実行したいコマンドを登録します。
addCommand(
new Prop(headerBG, { x:0, y:0} ),
new AddChild(progression.container, headerBG),
new Prop(footerBG, { x:0, y:progression.container.stage.stageHeight-30} ),
new AddChild(progression.container, footerBG),

おお。出来た。
しかし、これではリサイズをすると変わってしまう。
AS2.0的に言うと、onClipEvent(load)で位置を指定したようなもんですね。
ロードされたその時はいいけれど、リサイズ後の処理はまったく考えていない。
なので、AS2.0的なonClipEvent(enterFrame)な処理をしなければいけません。

で、しかしAS3.0をまったく理解してない僕はどうすればいいのかさっぱりだった。
だから、グーグル先生に聞いた！

すばらしい人がいるもんですね。
Progression3はじめてメモ
ここのリサイズ処理を超参考、どころか、まんま、まるパクリしてみました。

するとこうなりました。

protected override function _onLoad():void {
//インスタンスの作成
// 実行したいコマンドを登録します。
addCommand(
new Prop(headerBG, { x:0, y:0} ),
new AddChild(progression.container, headerBG),
new AddChildAt(progression.container, footerBG,10),
function():void {
_onResize();
progression.container.stage.addEventListener(Event.RESIZE, _onResize);
}
);
}
private function _onResize(event:Event=null):void
{
var containerWidth:Number = progression.container.stage.stageWidth;
var containerHeight:Number = progression.container.stage.stageHeight;
footerBG.y = containerHeight - 30;
}

おっ。出来た！
なお、footerBGは上のインスタンス作成のところに入れておくと出来ません。
当たり前ですね。でも、その当たり前に気づかずに1、2時間悩みました。

とりあえず、これでフッターを一番下、常にステージの高さ-30pxの位置に置くことは成功。
ふう。時間かかったな。
次はコンテンツに入ってみたいと思います。