2013年8月19日月曜日

FirefoxOS(ALCATEL onetouch)のWebGL&WebAudio調査

みなさん、ごきげんよう!
GClueの下っ端社員の星です。

今回はまた新しくFirefoxPhoneがうちの会社に届きました!!
その写真がこちらです。

 炎のきつねがカッコイイですね!
どことなく、iPhone4みたい・・・というのは内緒の話。
ちなみに、その二つを比較した写真がこちら。
皆さんは、どちらがFirefoxPhoneかわかりますか?
ちなみに、シールは引っかけではなく、右がFirefoxPhoneです。

そして、今回はこの新しく来たFirefoxPhone(ALCATEL onetouch)のWebGLとWebAudioを調査してみたいと思います。

調査に使用するのは、前回(ZTE Movistar)のときに使ったWebページを使用します。

ALCATEL onetouchは、FirefoxOS 1.0.1.0を使用しています。

WebGL

 結果を表した動画がこちらになります。
右がNexus7のChromeとの比較になります。
同じ回転速度ですが、やはりFirefoxPhoneの方の回転速度が遅れています。

ちなみに、FirefoxPhoneの場合は、パッケージングアプリもブラウザと同じ動きになりました。


WebAudio

 WebAudioを使った簡単なプログラムとして、太鼓アプリを作成しました。
画像を叩くと音がなるという単純なプログラムですが、Nexus7のChromeでは音が鳴ったのに対し、FirefoxPhoneではWebAudioが使えないためか真っ黒な画面が表示されるだけでした。ちなみに、ブラウザ、パッケージングアプリ共に同じ動きでした。


まとめ

  • FirefoxOSデバイスは、まだまだHTML5やWebGLの対応が不足していると感じました。
    • FirefoxOSのCPUが1GHzであったり、スペック的に不足しているのでその差が出ている?

2013年8月5日月曜日

FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その3: BlackBerry10編)


その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

それでは次はBlackBerry10のパッケージ型アプリについて解説する。

BlackBerryは、HTML5アプリ向けにWebWorksという環境を用いておこなう。

まず、WebWorks SDKをダウンロードしてくる。

次にRipple emulatorをダウンロードし、Chromeに組み込む。
アドレスバーに
chrome://extentions
と入力しエンターを押す。


ダウンロードしたRipple Emulator、ripple_ui.crxを拡張機能画面にドラック&ドロップする。


追加ボタンを押し、Ripple Emulatorを追加する。

アドレスバーの横にRippleというIconが出てこいたら成功。


それでは、/User/ユーザ名/RippleSites 以下にBlackBerry10向けのWebWorksのプロジェクトを作成する。今回はHelloWorldというプロジェクトを作成する。






$lt;?xml version="1.0" encoding="UTF-8"?>
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" 
  xmlns:rim="http://www.blackberry.com/ns/widgets" 
  version="1.0.0.0" 
  id="HelloWorldApp">
    <name>helloWorld</name> 
    <author>My name</author>
    <description>The classic first app</description>
    <icon src="icon32.png"/>
    <content src="index.html"/> 
</widget>

<html>
 <body>
 Hello BB10
 </body>
</html>
RippleのIconを押して、Enableを選択する。


Start Ripple Servicesを選択し、Rippleを起動する。


http://localhost:9910/HelloWorld/index.html
に接続する。うまくいけば、Rippleの利用規約がでてくる。


BlackBerry 10 WebWorks(1.0.0)を選択する。


これで、Ripple Emulatorが起動される。起動はこんな感じ。









FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その2: Tizen編)

その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

Tizenでのパッケージ型アプリ開発は、Tizen IDEで行う事ができる。FirefoxOS, BB10の中では一番開発環境がしっかりしている。

Tizen SDKは下記URLからダウンロードしてくる。

https://developer.tizen.org/downloads/tizen-sdk

Tizen IDEを起動し、[File]-[New]-[Tizen Web Project]を選択する。


[Basic]を選択する。


TizenのIDEのパッケージ型アプリが生成される。


Tizenのパッケージ型アプリで必須なのが

config.xml
icon.png
index.html

になっている。


<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/HelloTizen" version="1.0.0" viewmodes="maximized">
    <tizen:application id="LxJtz5PaU5.HelloTizen" package="LxJtz5PaU5" required_version="2.2"/>
    <content src="index.html"/>
    <icon src="icon.png"/>
    <name>HelloTizen$lt;/name>
</widget>

FirefoxOSとTizenとBlackBerry10のPackageアプリの比較(その1: FirefoxOS編)

その1 FirefoxOS編
その2 Tizen編
その3 BlackBerry10編

FirefoxOSやTizen、BlackBerry10では、HTML5+CSS3+JavaScriptをパッケージして、ストアで配信する事ができるようになる。

各OS毎に、パッケージ型アプリの作成方法を解説していく。

FirefoxOS
FirefoxOS向けアプリを作る場合、

  • ホスト型アプリ
  • パッケージ型アプリ

の2パターンでおこなう事ができる。ここではパッケージ型アプリの作り方を解説する。

FirefoxOS向けパッケージ型アプリケーションは、コンテンツの中身であるpackage.zipと、download.htmlとpackage.manifestから構成される。package.zipには、manifest.webppとindex.htmlなどから構成される。



まずは、package.zipから作成する。これがFirefoxフォンにダウンロードされるアプリ本体になる。

package.zipを以下の構成で作成する。

   

<html>
<body>
Hello FF
<body>
</html>
{
  "version": "1.0",
  "name": "Hello FF App",
  "description": "description",
  "launch_path": "/index.html",
  "icons": {
    "16": "/icon/icon16.png",
 "32": "/icon/icon32.png",
 "256": "/icon/icon256.png"
   },
  "developer": {
    "name": "GClue, Inc.",
    "url": "http://www.gclue.com"
  }
}
これらのファイルをZIPで固めて、package.zipを作成する。


{
  "name": "Hello FF App",
  "package_path": "http://aizu.gclue.jp/ff/package.zip",
  "version": "1.0"
}
<html>
  <body>
    パッケージ型アプリのインストールページ


    <script>
      var manifestUrl = 'http://aizu.gclue.jp/ff/package.manifest';
      var req = navigator.mozApps.installPackage(manifestUrl);
      req.onsuccess = function() {
        alert(this.result.origin);
      };
      req.onerror = function() {
        alert(this.error.name);
      };
    </script>
  </body>
</html>




2013年8月2日金曜日

FirefoxOS(ZTE Movistar)のWebGL調査

みなさん、ごきげんよう!
GClueの下っ端プログラマーの★です。

うちの会社に、ようやくFirefoxOS端末が届きました!
それが、こちらです!

見た感じ、近未来的なフォルムがかっこいいですね!

FirefoxOSといえば、TIZENと同じようにHTML5やWebGLが動きます。
というわけで、今回はFirefoxOSのWebGLについて調査していきたいと思います。


調査内容

 今回調査用のプログラムをCloud9を使って作成しました。
ワタクシ、プログラマを名乗っておりますが、WebGLは全くわかりません!!(えっへん
というわけで、現在うちの会社で開発中のライブラリを使ってWebGLを使ったプログラムをJavaScriptで簡単に作成しました。
その様子をPC上のブラウザ(MacBookPro上のChrome)で動かしている様子がこちらになります。

 プリミティブな立体が回っております。これをTIZEN,Android,そしてFirefoxOSのブラウザ上で実行してみましょう。

調査結果

 調査の様子を比較した動画がこちらになります。

 やはり、Android(Nexus7,AndroidOS4.3)のChromeで動作させているのが一番速いですね。TIZEN(2.2)のブラウザも中々速いっす。
ちなみに、左からFirefoxOS,TIZEN,Androidになります。

一方、FirefoxOS(OPEN_FFOS_V1.0.0B04_TME)は・・・、ちょっと、動きが遅いですね。


まとめ

  • FirefoxOSはまだまだ改善の余地あり
    • OSのバージョンが古いだけ?
  • TIZENも中々速い。
  • でも、やっぱりAndroid+Chromeが良かった(Nexus7を使っていたからというのもある?
  • iOSもWebGL対応はよう!!

HTML5+WebGLが動く端末も、PCブラウザ並みに動くようになってきました。
もう少しでPCブラウザ並みのWebGLのゲームがプレイできそうな気がしました。
これからのスマートフォンブラウザの動向に注目しなくては!!