iframe内のスクロール位置問題

某ソーシャルゲームプラットフォームではiframeタグを使って
インラインフレーム内でゲームが提供されています。

ユーザー視点でみると、ブラウザの上からまずプラットフォーム側のヘッダーがきて、
コンテンツがあって最下部にフッターですね。
アニメーションなどの固定フルスクリーン表示では
とくにこのヘッダー部分(バー)が40px分邪魔になってきます。
ゲームの開発会社は必然的にヘッダーのバーを隠して
フルスクリーンでみせるための対策をしています。
スマートフォンの画面解像度、一般的に320px X 480pxの場合、40pxって相当地価高いよ。。

さらにiframe内のページ遷移は前のスクロール位置を引きずってしまうため、
ページの途中から表示されてしまいます。
iPhoneのアドレスバーを隠す際などの
setTimeout(function(){
window.scrollTo(0, 1);
}, 100);
はスクロール位置を制御するやり方としてはよく使われていますが、
コレは不安定なのでオススメしません。
window.onload後に発火してもDOM形成と画像ロードの合間に
ユーザーがスクロールを始めていたらバッティングしてしまう。

コンテンツの先頭から表示する一番確実なやり方はlocation.hash
これが最有力。

Body直下に
<a name=”top”>
を仕込んでおいて、
DOMの形成後に
location.hash = “top”;
を発火し、URL汚染がいやなら直後に
location.hash = “”;
しておく。

a href=”sample.html#top”
でも出来るが、EdgeCreateJSなどを使っている場合も考慮して
ローディング機構の切り替えタイミングにあわせて
任意で発火させるのが確実だと思います。

RSSフィードURL変更のお知らせ

知らないうちにfeedburnerのJPドメインが使えなくなってたっぽいので変更しました。
ブログの更新もしばらく滞っていますが、引き続き宜しくお願いします。

http://feeds.feedburner.jp/alt
↓↓↓
http://feeds.feedburner.com/alt-scape

久々にDJやります

初っ端ということで
オールドスクールmeetsダブパンクでゆるく激しく攻めていこうと思います。
※今日は4/1だけどこの告知は嘘じゃないですよ


EN@青山蜂
2012/4/8(日) 17:00~
¥2000/1d

【3F】***********
●GuestDJ HOME CUT(Edit Conference)
●nanaparrish
●チンタンゴ
●NO THE WA
●DJ TOSHIKI
●DJ mitsu
●H.Bro’s

【2F】***********
●GuestDJ HOME CUT(Edit Conference)
●alt-scape
●Asakusa Bambaataa (金太楼鮨)
●hiphouseboys
●SPACE THUNDER X(SOUND INSIDE,TEBP)
●croquette
●WHY(SWEET)

FlashDevelop4でAIR for iOSの実機確認ができるまで for Windows

AIR for iOSFlashDevelopで構築してみました。
実機確認までうまくいったけど、正直これで合ってるか自信ない。。
以下、自分メモ程度に書いておく。

環境は現在最新のFlashDevelop4.0.0 RC2
FlashDevelopにバンドルされているAIR SDKは3.0、Flex SDKは4.5.1。
OSはWindowsXP

最新のAIR SDK(3.1)、Flex SDK(4.5.1)にそれぞれバージョンをアップしたい場合は
FlashDevelopのインストール先にダウンロードしたSDKを上書きするか
SDKを別の場所に置いてFlashDevelopの参照先を変更するかでいけると思う。
あとFlashDevelopの環境設定の方もアップしたバージョンに変更する。
これらのバージョンアップは後ほど余裕のあるときにやってみる。

続きを読む »

JavascriptでH.264のビデオをデコード(再生)する「Broadway.js」

またスゴいのが出てきたけど、このJSビデオデコーダよりもEmscriptenの方に驚きました。
これ使えば比較的簡単にC言語資産のライブラリとか移植ができそう。
似たようなアプローチだとGoogleのNative ClientやAdobeのAlchemyがありますが
どちらもブラウザプラグインなので、プラグインなしならコレ。
あとJS変換のライバルはllvm-js-backendというのもあります。

とりあえずメモだけ。
下の翻訳間違ってたらすみません。

続きを読む »

ログ出力ライブラリ「Blackbird」をスマートフォンで使ってみる

スマートフォンのためのリモートデバッグ環境その1 – weinre
スマートフォンのためのリモートデバッグ環境その2 – JSconsle

とみてきましたが、
もっと単純にログ出力だけで十分という方にはコレがよさそうです。

Blackbird
http://www.gscottolson.com/blackbirdjs/

画面の端っこにログ出力用コンソールが表示されるので
PC向けというよりはスマートフォンなどのログ情報が確認しにくい環境で役に立ちそうです。
iPhoneAndroidは上記のweinreやJSconsle使うとしても、
Windows Mobile6.5(IE6)やBlackBerryなどWebSocket使えない系のブラウザには試す価値アリ。

続きを読む »

HTML5を視野に入れてHTML4.01とXHTML1.0のどちらを選ぶべきか

もしクライアントのレギュレーションなりでHTML5ダメってなった場合、
のちのHTML5移行を想定してHTML4.01XHTML1.0のどちらで作るべきか。
※XHTML2.0は策定打ち切りなので対象外

続きを読む »

SNSプラットフォーム同士をミックスさせるスキーム



電車のなかでふと考えた。

こういう構図のキャンペーン、もしくはアンケートってないものだろうか。。
上の図のようにFacebook側の人が「いいね」押した数、
mixi側の人が「チェック」した数をグラフィカルに統計し、
期間内に投票された数で競わせたり、抽選でプレゼントしたりのなにか。
まあmixiやFacebookでなくても、Google+、モバゲー、GREEなど
外部サービス向けにソーシャルAPI公開してれば何でもいいんだけど。

SNSのプラットフォームはそれぞれ文化もユーザー層もシステム仕様も違うから、
キャンペーン利用するためのアプリケーションは基本、複数跨いで考えませんよね。
そこを逆手にとって2極3極のパイを総取りする方法を考えてみようと。。
要はSNSプラットフォームをミックスさせたスキームってあってもいいよねという発想です。
既にありますかね?

続きを読む »

スマートフォンサイト構築のためのリモートデバッグ環境その2 – JSconsole




前回紹介したweinreに続いて、
JSConsoleというデバッグツールもよさげなのでテスト。
簡易的に使うなら便利だけど、正直Firebug並みのことはできないです。
あとセキュリティ面でもjsconsole.com側にDOMやクッキー情報が筒抜けなのでご注意をば。

サポート環境は
iOS 4.2.x – iPad, iPhone 4
Andriod 2.2.2 – Nexus One
webOS – Palm Pre

JSConsoleのソースはGitHubにあります。
https://github.com/remy/jsconsole

続きを読む »

スマートフォンサイト構築のためのリモートデバッグ環境その1 – weinre




スマートフォンブラウザのWebInspectorをリモートで実現するweinreが凄い
スマートフォン用ベージをデバッグする5つの方法


これらの記事みて自分の開発環境にもweinreを取り入れようと思い試してみました。

加速度センサーやGeo Location APIなんかのデバッグにも
PCのブラウザコンソールからCSSやJS弄ったりするのにもちょー便利。
iPhone、Android問わず、クロスデバイスで利用できるし。

続きを読む »

次のページへ »