Firefox」タグアーカイブ

【読書】Firefox OSアプリ開発ガイド


Firefox OSアプリ開発ガイド (Amazon.co.jp)

iOS、Androidに対する「第3のモバイルOS」に名乗りを上げているOSの1つとして「Firefox OS」があります。ソニーモバイルが端末を提供するともいわれ、日本ではKDDIがプッシュしているこのOS、最大の特徴は「すべてがHTMLコンテンツである」ということでしょう。ロック画面もホーム画面も設定画面も、ブラウザ画面さえもがHTML(とJavaScriptとCSS)で構成される前衛的なOSと言えます。この本はそんなFirefox OSのアプリ開発解説本です。

とはいえ実機が存在しない現状もあり、実際にはバリバリ商品レベルのものを作るというよりは「Firefox OSでこんなこともできるよ~、できる予定だよ~」という雰囲気を感じました。サンプルコードがHTMLやJavaScriptなので、開発者でないモバイル好きの人もそれなりに読み進められるのではないでしょうか。

個人的には興味津々ですが、本当にHTMLやJavaScriptの動作速度でiOSやAndroidのネイティブアプリレベルのものが作れるのかという疑念も若干あったりします。HTMLでオープンプラットフォームというのは作る側の都合で、使う側にしてみればとにかく快適に使えることが一番大事なので、HTMLアプリであることを言い訳にしなくてよいような完成度が必要でしょう。まずは市販端末第1号がどの程度の完成度で出てくるかに注目したいところです。

【S-MAX・記事掲載報告】FirefoxブラウザがスマートフォンOSになった「Firefox OS」を試してみる


Webブラウザ「Firefox」がスマートフォンOSに! Mozillaの「Firefox OS」をパソコン用ビルドで試す【レポート】 (S-MAX)

firefox_os

スマートフォンOSといえばiOSとAndroidというこのご時世(注:私自身は他のOSを忘れているわけではありません)、Webブラウザ「Firefox」を擁するMozillaがそのFirefoxを利用して開発したスマートフォンOSが「Firefox OS」です。実際に端末に搭載されてリリースされるのは2013年の予定(しかも日本での展開は白紙)という状態ですが、パソコンで試せる環境がリリースされたので使ってみたという話題です。

この記事のポイントは「ダウンロードしたファイルだけでは実行できない」というところ。結局gitやらmakeやらの環境が必要になるという罠。ちょっと使ってみたい人向けに「この実行ファイルを叩けば使えるよ」という配布にすればいいのにと思ったり。

【Tips】Facebookページ内のアンカーリンクをFirefoxでそれっぽく動作させる方法


非常にニッチな気もしますが、誰かの役に立てばと思いまとめてみます。

【解決したい問題】

Firefox(4.0以降)には、インラインフレーム(iframe)内に定義されたアンカー(「#test」のような記述)でページ全体が正しくスクロールしない事象があります。このため、独自コンテンツをiframeで埋め込むFacebookページでは、Firefoxにおいてページ内のアンカー移動ができません。

【解決方法の概要】

Facebook JavaScript SDKの「FB.Canvas.scrollTo」メソッドを使って画面全体をスクロールさせることで、アンカーのような動きを実現させます。

【サンプルコード】

1. HTMLファイル(index.php)

<html>
<head>
<title>anchor test</test>
<script src="script/fb_scroll.js"></script>
</head>
<body onload="fb_gotoTop();">
<!-- Facebook SDKロードここから -->
<div id="fb-root"></div>
<script src="script/fb_load_sdk.js"></script>
<!-- Facebook SDKロードここまで -->
<a href="javascript:fb_anchor('test')">アンカーへ</a><br/>
<!-- 中略 -->
<div name="test" id="test">ここにスクロールさせたい</div>
</body>
</html>

2. JavaScript SDKをロードするためのJSファイル(fb_load_sdk.js)

  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      xfbml      : true  // parse XFBML
    });

    // Additional initialization code here
  };

  // Load the SDK Asynchronously
  (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

3. スクロールを実行する処理を記述したJSファイル(fb_scroll.js)

/**
 * idが指し示す要素の位置へスクロール(anchor代用)
 */
var fb_anchor=function(id)
{
	// Firefoxの場合のみFacebook APIでスクロール
	var strUA = navigator.userAgent.toLowerCase();
  	if(strUA.indexOf("firefox") != -1)
	{
	    FB.Canvas.getPageInfo(
	        function(info) {
	            var elemOffsetTop = document.getElementById(id).offsetTop;
	            FB.Canvas.scrollTo(0, elemOffsetTop + info.offsetTop);
	        }
	    );
    }
    // それ以外はAnchorが効くので普通に遷移
    else
    {
		location.href="#" + id;
    }
};

/**
 * ページ先頭に遷移
 */
var fb_gotoTop = function()
{
    FB.Canvas.scrollTo(0, 0);
};

【理屈】

HTMLファイルの拡張子が.phpになっているのは、FacebookページがコンテンツをPOSTでロードするのに対して、私が使っているサーバー(CORESERVER)において.htmlファイルへのPOSTがエラーになるための回避策で、それ以上の意味はありません。

Facebook JavaScript SDKのロードはFacebookの技術ドキュメントを参照して実装してください。この例では見通しを良くするためにJavaScriptを別ファイルに切り出しています。

アンカーへ飛ばすリンクにはhref記述に「#test」のような記述の代わりに「javascript:fb_anchor(‘test’)」のように記述してJavaScriptの処理をコールするようにします。

fb_scroll.jsに定義されたメソッドfb_anchorでは(1)FB.Canvas.getPageInfoメソッドで取得したiframeの画面最上部からの位置(offsetTop)と(2)パラメータで指定されたidに対応するHTML要素のiframe内における最上部からの位置(offsetTop)を加算して、画面全体におけるスクロール位置を計算し、FB.Canvas.scrollToメソッドでスクロールさせています。(1)を計算して加算するのがミソです。

サンプルコードではUserAgentを見てFirefoxの時のみFB.Canvas.scrollToによるスクロール、それ以外の場合は普通にアンカーによるスクロールを行わせております。このへんはお好みで。

【オマケ】

fb_scroll.jsに定義されたメソッドfb_gotoTopは単純に一番上までスクロールを戻す処理です。この処理をbodyのonLoadに仕込んでおけば、ページ遷移のたびにFacebookページのスクロール位置が一番上まで戻り、普通のWebページっぽくなります(この処理が入っていないと画面遷移してもスクロール位置が保持される)。

Firefox 6リリースを記念して手持ちのブラウザでSunSpiderを動かしてみる


MozillaのWebブラウザ「Firefox 6」が今日(8/17)リリースされました。パッと見わかりやすい違いとしては、

image

URLのドメイン名部分が色分けされて表示されるようになりました。最近のブラウザではよく見られる形式ですね。その他の見かけはあまり変わらない感じですが、細かい変更はリリースノートをご覧ください(他力本願w)。

で、いい機会なので手持ちのブラウザでベンチマーク「SunSpider」を走らせてみました。

Firefox 6:281.0ms (詳細
Chrome 13.0.782.112 m:265.4ms(詳細
Safari 5.1:310.6ms(詳細
Opera 11.50:265.5ms(詳細
Internet Explorer 8:4242.8ms(詳細

IEは最新版の9ではないのであくまで参考値で。いわゆるモダンブラウザはどれもJavaScriptの実行速度が速くなりましたね。

ケータイサイト開発者に朗報!「FireMobileSimulator」がFirefox 4に対応


FireMobileSimulator.org

ScreenClip(1)

Mozilla Firefoxで携帯電話ブラウザをエミュレートできるプラグイン「FireMobileSimulator」。機種を選択するだけで簡単に利用できる一方、必要なら手動でパラメータを調整できる奥の深さも併せもち、個人的に開発に必須のプラグインになっていました。

さて、Firefoxが4にアップデートして、FireMobileSimulatorが一時的に使えない状態になっていましたが、この度Firefox 4対応版(Ver1.1.12)がリリースされました。写真のように今まで通りバッチリ利用できます。これで会社PCにもFirefox 4を導入できるということで嬉しい限りです。作者様に感謝。