Firefox OSアプリ用に戻るボタンとリロードボタンを付ける

ここ半年くらいずっと体調を崩して開発から離れていたのですが、やっと少し良くなってきたのでアプリの改善を再開しました。

まずはFirefox OSアプリ、ヒットマンガ・ネットに戻るボタンを付ける、というやつです。

Firefox OSアプリに戻るボタンを付ける

 
おまけで再読み込みボタンも付けておきました。
メモ代わりに、作ったコードを公開しておきます。

サイトをFirefox OS用アプリにしてしまうと、表面上はブラウザを使わないので戻るボタンがなくなってしまい、たいへん不便になります。

ボタンはFirefox OSでアクセスした場合のみ表示しないといけないので、当然UserAgentを調べるスクリプトを書きます。

■Firefox OSのUserAgent
 携帯電話:Mozilla/5.0 (Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
 タブレット:Mozilla/5.0 (Tablet; rv:26.0) Gecko/26.0 Firefox/26.0
 デバイス特有:Mozilla/5.0 (Mobile; nnnn; rv:26.0) Gecko/26.0 Firefox/26.0
 ※アプリからアクセスしても同じです。

■Fx0のUserAgent
 Mozilla/5.0 (Mobile; LGL25; rv:32.0) Gecko/32.0 Firefox/32.0

■他OSのUserAgent(例:ブラウザにFirefoxを使った場合)
 Android:Mozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
 Mac OS X:Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0

「Android」や「Macintosh」の部分がFirefox OSの場合は「Mobile」か「Tablet」になるってことですね。
バージョンはコロコロ変わってしまうので正規表現で書きます。
以下、JavaScriptです。

<script type="text/javascript">
var UA=navigator.userAgent; //UserAgent取得

if(UA.match(/Mozilla\/[0-9]*\.[0-9]* \((Mobile)|(Tablet); .*rv:[0-9]*\.[0-9]*\)/)){
	//Firefox OS用の処理
}else{
	//それ以外の端末用の処理
}
</script>

これで分岐できます。

で、余談ですが、今回フッタに固定表示メニューを作ったのですけど、IEのことは考えなくても良いので単純にCSSで「position:fixed;」を指定すれば問題ありませんでした。

ただ、Fx0では処理が追いつかないようで、スクロールすると固定メニューが動いちゃうようです。

ちなみに戻るボタンとリロードボタンはHTML内に単純にJavaScriptで書きます。


<a href="#" onClick="history.back(); return false;">戻る</a>
<a href="#" onClick="location.reload(true);">リロード</a>

これで問題ありませんでした。
 

「Firefox OSアプリ用に戻るボタンとリロードボタンを付ける」への2件のフィードバック

  1. Marketになければ自作するしかないのではないでしょうか。
    2ch.netは条件に合わないので、
    作る前に運営に確認したほうがいいと思います。
    2ch.scなら自由に作れるはずですよ。

コメントを残す

メールアドレスが公開されることはありません。

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください