2013年7月29日月曜日

Raspberry Pi wheezy rasbian に node.js と Cloud 9 IDE を入れてみた

Raspberry Pi  wheezy rasbian に node.js と Cloud 9 IDE を入れてみた


$ sudo apt-get update
$ sudo apt-get -y upgrade
$ sudo apt-get -y install build-essential openssl libssl-dev pkg-config libxml2-dev
$ cd ~ && git clone https://github.com/ajaxorg/cloud9.git cloud9
$ cd cloud9 && mkdir node_modules && cd node_modules
$ git clone https://github.com/ajaxorg/node-libxml.git libxml
$ cd libxml && git checkout v0.0.7 && git submodule init && git submodule update
$ sed -i -e "s/'-msse2',//" support/o3/wscript

$ cd ~
$ wget http://nodejs.org/dist/v0.8.22/node-v0.8.22-linux-arm-pi.tar.gz
$ cd /usr/local
$ sudo tar xzvf ~/node-v0.8.22-linux-arm-pi.tar.gz --strip=1

$ cd ~/cloud9 && npm install


次のエラーが発生した場合は、
npm ERR! cb() never called!
npm ERR! not ok code 0

npmのキャッシュを削除して何度かトライする
$ npm cache clean
$ npm install

インストールできたらcloud9を起動して確認しみてる
$ bin/cloud9.sh -l 0.0.0.0
確認
http://<raspberry-pi-ip-address>:3131/

---
# 酸素アレルギー?


2013年7月26日金曜日

Tizen Developer Lab 東京 に参加してきました!

こんにちは
先日ゲリラ豪雨と思う存分戯れてきたみかんです。

本ブログは主にHTML5に関するネタを掲載していくブログになります。
以後よろしくお願い致します!

さて、今回はインテル主催で開催されたTizen Developer Lab 東京へ行って来ました。
その時の簡単なレポートをお送りしたいと思います。

イベントは夕方からでした。Tizen SDKの入ったノートパソコンを持ってくるといいよとのことなのでSDKインストール済みのMacBookAirを持って出陣です。

会場はフクラシア東京ステーション5Fの会議室。
広々としたスペースで、席のそばには電源タップ完備。

スクリーンには発表用のスライド

会場の後ろにはサンドイッチと飲み物がありました


セミナーの前半はTizenの概要やTizen Webアプリ、Tizenストアについて解説が行われ、後半では実機を用いてSDKの操作やサンプルアプリの作成などを行いました。

各発表につき一つのスライド資料が配られました。それを元にかいつまんで記載していこうと思います。

Tizen Overview

Tizenの概要についての発表です。

Tizenはオープンソース・ソフトウェアの組み込み機器向けのOS。
モバイルだけでなく、IVI((車載情報機器)などマルチデバイスに対応していることが強調されていました。
一番のポイントはなんといってもHTML5との親和性!
TizenはHTML5対応には特に力を入れているようで、HTML5のスコアを測定するサイトでは迫力のある数値を叩きだしているようです。

リンク先を見てみると、VideoやFormsなどの対応力が際立っていますね。

Tizenは大きく分けてMobileとIVIに分かれていて、今のところはMobileのみ開発ができるようになっているとのこと。

TIZEN MobileはWebアプリケーションNativeアプリケーションに分かれています。

Webアプリケーションの特徴
  • HTML/JavaScript/CSS
  • W3C ウィジェットパッケージ
  • Web アプリケーションからデバイス機能へのアクセス
  • 最新のHTML5機能をサポート
Nativeアプリケーションの特徴
  • 複雑なグラフィック、レンダリング
  • センサ情報などを使ったユーザーエクスペリエンスの向上
  • Web Appとのハイブリッド化

アーキテクチャはこれですね。

APIはノンブロッキングなのでAPIがこけてもアプリケーションは落ちないとか。
多数のオープンソースライブラリを利用しているので移植もしやすいそうです。

Hybridアプリケーションというものも作ることができて、これはサービスにNativeを使ってUIをWebのもので構築するということだそうです。開発者のニーズに合わせた開発ができるということですね。

公式のリンク集も。
ピーシーフェーズさんが運営しているTIZENの最新情報をお届けするサイト

TIZEN STORE SELLER OFFICE

アプリケーションストアについての説明もありました。

個人としても法人としても、簡単な情報を入力するだけでもう登録はできるとのこと。
有料アプリを出す場合はもう少し情報が必要になるようで、

共通して必要なもの
  • 預金出納帳

個人の場合
  • 身元保証書

法人の場合
  • 事業者登録認定書

などが必要のようです。

指定する銀行口座ですが、今のところ米ドルを受領及び送金できるところでないと駄目だそうで、円への対応は準備中とのことです。

アプリケーションの登録は、アプリ名やバイナリ、対応デバイス情報や販売情報、カテゴリ情報などを入力して行います。

価格はアメリカのドルで基本のドルを選択しますが、国ごとに選択することもできるそうです。

登録完了すると検証プロセスがスタートして、問題なければ3日くらいで終わるとか。

細かいことは実際にサイトに見に行ったほうが早いですね。
http://seller.tizenstore.com/login/signIn.as

それとTIZEN APP CHALLENGEの説明もありました。
https://developer.tizen.org/ja/contests/tizen-app-challenge
賞金総額400万ドルのビッグイベントです。登録は11月1日まであります!

セミナーの前半はここで終わりで、休憩前に質問タイムがありました。

[Q&A一覧]

Q. 販売業者登録の身元保証書とあるが具体的には?
A. 免許証のコピーの写真等。日本で身分証明書として使えるものなら大丈夫

Q. Android、iOSともにマーケットに出すには登録料がかかり、アプリのダウンロードごとにも手数料が取られるがTIZENでは?
A. 基本的には登録料などはない予定。ダウンロードの手数料は将来的には3割くらいを予定しているが、まだ1年くらいは0%!

Q. バイナリを登録とあるがアーキテクチャごとに用意する必要がありますか?
A. 今のところはarmだけ。将来的にはLLVMによってプロセッサに依存しないようにするつもり(ストアでコンパイルするとか?)

Q. iOSで言うAdhocのような事前配布の仕組みはありますか?
A. そのような制度はまだ整っていない

こんな感じでした。

休憩時に、TIZEN OS搭載の実機の貸出が行われたので早速借りて来ました!

端末の入った箱


御開帳

箱の中身を全部出しました


組み立てておもむろに起動
国と時刻を設定するためのボタンがあります


サクッと設定


準備が整ったのでスタートします

Wi-Fi接続用画面へ

とりあえずこれで完了のようです

ロック画面のお出迎え

ロックを外すとホーム画面が表示されました


サクッと起動したように思います。

さて、セミナーの後半ですが主にSDKの解説とサンプルコードを使ったデモが行われました。

Introduction To the Tizen SDK

Tizen SDKはEclipseをベースに作られています。
SDKではTizen Web アプリケーション、Tizen Nativeアプリケーションの2種類のアプリを作成することができます。

それではSDKのいくつかのスクリーンショットを掲載します。


Tizen IDE のレイアウト

左下のConnection explorerでは、接続されている実機またはエミュレータが表示されます。

Webシミュレータ

WebシミュレータはChromeベースの高速シミュレータで、ビルドが不要です。回転やネットワークなど各種デバイス機能のシミュレートが可能になっています。


エミュレータマネージャー
SDK2.2になってエミュレータマネージャーが新しくなりました。Inten VT-x(仮想化支援機能)対応で高速動作を実現しています。

イベント インジェクタ

イベントインジェクタでは、エミュレータに主導で各種イベントを起こすことができます。

UIビルダー

UIビルダーではUIレイアウトのコードをGUIから自動生成できます。(WYSIWYG)
「Tizen Web UI Builder Project」で新規作成することで利用できます。


次に基本的なプロジェクトのファイル構成を見てみましょう。

左がBlank templateのファイル構成で
右がTizen Web UI Builder templateのファイル構成です。


  • config.xml : アプリ情報全般
  • index.html : スタートページ
  • icon.png : アプリアイコン
  • main.js : メインのjavascriptファイル
  • style.css : CSSファイル
  • page : 1ページを構成する各種ファイル(html,css,js)の集合
  • app.xml : ページやイベントを管理するファイルの集合
  • tizen-ui-builder-fw : UIビルダーによって自動生成されるフレームワークファイル
  • tizen-web-ui-fw : Tizen Web UI Framework ライブラリ
この中で重要なconfig.xmlについてもう少し見ていきます。以下はconfig.xmlを選択して表示される各タブ(一部)のスクリーンショットになります。


config.xml - Feature

Featureは動作に必須の機能を選択します。この情報はTizen Storeでのフィルタリング等に使われます。

config.xml - Privileges
Privilegesはユーザに使用確認を求める必要のある機能を選びます。

config.xml - Policy
Policyはアプリのセキュリティに関する項目で、CSP(Content Security Policy)とAccessの2つがあります。CSPは新しいfirefoxとかにも入っているようです。これらの設定でドメインで指定するなどして、jsは自分のサイトからのみ実行などのような指定ができます。指定外のURLにアクセスすると外部ブラウザが開いたりするような挙動になるそうです。

他にも、SDK2.2からではアプリをエミュレータまたは実機に入れる時に必要だった署名ファイルの作成がIDE上で完結するようになった等の変更があったようです。

ざっとSDKの様子を眺めてきましたが、開発に役立つ機能はかなり充実している印象を受けました。特にUIビルダーで視覚的にデザインを行えるようになっている所などは魅力的だと思います。

Sample App: Tizengram

セミナーの最後では実際にサンプルアプリの作成を追ってTIZENの動きを見て行きました。codezineにも掲載されたサンプルのようです。
サンプルアプリはTizengramというアプリで、今回の資料およびWGTファイルは
http://goo.gl/mbl3R
にて配布されています。

資料にしたがって、落としたWGTをEclipseでImportすればサンプルアプリのソースを見ることができます。

[WGTファイルのインポート]

  • File > Import > Tizen > Web Projects and Widget File
  • Select Widget Fileでwgtファイルを選択
  • Finish


このサンプルでは、写真を取りそれを加工しtwitterにアップするという処理を行うことができます。
(自分はtwitterへアップロードする下りがなぜかうまく行きませんでしたが。。。)

資料のStep1とStep2について軽く実践してみました。

Step1:jQueryMobileでページを3つ作る
Step2:Inputタグで画像を取得し、取得したらページ遷移する

以下、作業手順です。
  • File > new > Tizen Web Project
  • Template > jQuery Mobile Multi Page Application
  • 適当に名前をつけて作成
index.htmlとmain.jsを以下のように編集します。

index.html

main.js




以上の編集が完了後にアプリを実行すると、ボタンを押してカメラ撮影してそれが2ページ目に表示されるというサンプルができあがります。
Step3で行うはずの画像縮小などをしていないのでとても大きい画像が表示されますがとりあえずはここまでにしておきます。

ダウンロードしたサンプルアプリのソースを元に残すStepを消化していくと、さらに理解が深まると思います。

まとめ

Tizenアプリの作成に関しては、リアルタイムに画面を確認できるシミュレータなどの充実したSDKの機能と、既に広く浸透しているWebの技術を利用できることから、非常に開発の工数を削減できるのではないかとのこと。

数多くのライブラリがアプリに転用できることの強みは大きいですね。
Processing.jsがあったり(canvasの画像処理にフォーカス)、SocialAPIも豊富にあったり、という具合ですね。そしてDeviceAPIでファイルシステム等の端末機能へもふんだんにアクセスできると。

くどいようですがTIZEN APP CHALLENGEもありますので、モバイルアプリ開発に興味のあるWeb開発者の方や既にAndroidアプリやiOSアプリの制作に携わっている方などは新しくなったTIZEN SDK 2.2を使ってワンダフルなアプリをデベロップしてみてはどうでしょうか。

スマートフォンブラウザのWebGL対応状況調査(2013年7月版)

皆様、ごきげんよう。
GClueの下っ端社員の☆です。

スマートフォンでWebGLをやる前に

皆さんは、WebGLをご存知ですか?



 WebGLは、ブラウザ上でウェブブラウザで3Dコンピュータグラフィックスを表示させるための標準仕様のこと。OpenGL2.0もしくはOpenGL ES 2.0をサポートするプラットフォーム上で、特別なブラウザのプラグインなしで、ハードウェアでアクセラレートされた3Dグラフィックスを表示可能にする。技術的には、JavaScriptとネイティブのOpenGL ES 2.0のバインディングである。WebGLは非営利団体のKhronos Groupで管理されている。

WebGLはHTMLのcanvas要素を使っている。

(Wikipediaより




つまりは、ブラウザでOpenGL ES 2.0できるよ!ってことですね。
それによって、ブラウザ上で3Dがグリグリ動くようなゲームが作れるわけですね。
それが、PCブラウザ上だけに限らず、スマートフォンのブラウザ上でもできるようになってきていますよ!
スマートフォンのブラウザ上でのWebGLの対応状況について、今回調べてみたので、その結果をご報告する。
そして、ゲームには音が必要ですよね?
HTML5には、高度な音声ライブラリとして、WebAudioというものがある。
これを使えば、ネイティブ並みの音声出力が可能となり、フィルタをかけたり、音声を合成させたりなどのことがJavaScriptで行うことができる。
これの対応状況についても見て行きたいと思う。

調査方法

まず、スマートフォンのJavascriptとHTML5のスコアを測りたいと思う。Javascriptは、GoogleのOctaneを、HTML5についてはThe HTML5 testを使用する。
WebGLについては、うちの会社のロゴをフェードインで表示されるという簡単なものを作成した。
以下のような感じで表示される。
 今回は、WebGLが有効かどうかを確認するだけの目的のため、このような簡単なデモアプリにした。WebGLが対応していない端末では、WebGLを利用するためのContextが取得できないため、何も表示されていない。

次に、WebAudioについての調査ですが、表示される画像をタッチするとWebAudioで読み込んだ音が鳴る。そのソースコードの一部は以下のようになっている。
画像をタッチしたときのリスナーで、上記の「playSound」メソッドを呼び出すようにしした。
 これらの動作確認は、Cloud9上で作成し、MacBookPro上のChromeで動作確認することを確認した。

 chromeの場合、chrome://flagsでWebGLとWebAudioを有効にしているものとする。

測定結果

 測定結果は以下のようになる。比較としてMacBookPro上のブラウザのスコアも測定してみた。
端末名ブラウザOSバージョンOctaneスコアHTML5 testWeGL対応WebAudio対応備考
MacBookProSafariMac OS X 10.8.44603393wavしか再生できない
MacBookProChromeMac OS X 10.8.49450463mp3が再生できない
MacBookProFirefoxMac OS X 10.8.45230410×
iPhone4Safari5.1.1297344××
iPhone4Chrome5.1.1105344××
iPadMiniSafari6857386××
iPadMiniChrome6206386××
Nexus7Chrome4.2.21950430
Nexus7Firefox4.2.21605422
Nexus7Chrome4.31709410×chrome://flagsで、WebAudioの設定項目がなくなってしまった。
Nexus7Firefox4.31677422×
XperiaZ標準ブラウザ4.1.21126345×
XperiaZChrome4.1.21787430
XperiaZFirefox4.1.21286422×
HTC One標準ブラウザ4.1.22247430
HTC OneChrome4.1.22350410
HTC OneFirefox4.1.21641422表示されたが、画像が上下逆さまだった。
GalaxyNexus標準ブラウザ4.0.41140297××
GalaxyNexusChrome4.0.41983430××
GalaxyNexusFirefox4.0.41667422×
DIGNO S標準ブラウザ4.0.41408318××
DIGNO SChrome4.0.41198390×WebAudioを実行するとブラウザが落ちる。
DIGNO SFirefox4.0.41217422×
XperiaGX標準ブラウザ4.0.41605341×
XperiaGXChrome4.0.41821430×WebAudioを実行するとブラウザが落ちる。
XperiaGXFirefox4.0.41458422×
Nexus4Chrome4.2.21941410
Nexus4Firefox4.2.21366422×
VEGA PTL21標準ブラウザ4.0.41461318××
VEGA PTL21Chrome4.0.41969410×WebAudioを実行するとブラウザが落ちる
VEGA PTL21Firefox4.0.41602422×
GalaxyS3
progre
標準ブラウザ4.0.41096416××
GalaxyS3
progre
Chrome4.0.41176430×
GalaxyS3
progre
Firefox4.0.41218422×
ArrowsZ標準ブラウザ4.0.31256287××
ArrowsZChrome4.0.32110430×WebAudioを実行するとブラウザが落ちる
ArrowsZFirefox4.0.31627422×
AQUOS PHONE ZETA標準ブラウザ4.0.41077297××
AQUOS PHONE ZETAChrome4.0.41850430×WebAudioを実行するとブラウザが落ちる
AQUOS PHONE ZETAFirefox4.0.41255422×
Razer標準ブラウザ4.0.4978297××
RazerChrome4.0.41922430×WebAudioを実行するとブラウザが落ちる
RazerFirefox4.0.41197422×
URABANO
PROGRESSO
標準ブラウザ4.0.31255312×
URABANO
PROGRESSO
Chrome4.0.31491430×
URABANO
PROGRESSO
Firefox4.0.3823422×
HTC EVO 4G標準ブラウザ4.0.31087287××
HTC EVO 4GChrome4.0.31332430×
HTC EVO 4GFirefox4.0.3904422×
XOOM標準ブラウザ4.0.4921297××
XOOMChrome4.0.41622425×
XOOMFirefox4.0.41377422×
GalaxyS4標準ブラウザ4.2.21751468×
GalaxyS4Chrome4.2.21928430
GalaxyS4Firefox4.2.21815422×
Tizen
Ref.Device-PQ
標準ブラウザ2.2.01505492 




まとめ

WebGLの対応状況

  • Androidは、XperiaZやGalaxyS4、HTC Oneでは標準ブラウザでWebGLが動作する。
  • Androidは4.0以上であれば、ほとんどの端末でChromeを通じてWebGLが動作する。
  • Tizenは問題なく動く。
  • iOSはまだ対応していない。

WebAudioの対応状況

  • Androidは、XperiaZやGalaxyS4、Nexus7などのChrome上でのみ対応している。
  • Androidの4.0以上の端末では、Chrome上でWebAudioを使用しようとするとブラウザが落ちてしまうものが多い。
  • Tizenは問題なく動く。
  • iOSはまだ対応していない。

JavaScriptのスコア

  • JavaScriptのスコアについては、端末のスペックにより変わっている。
  • JavaScriptのスコアが良いからといって、WebGLに対応しているということはない。
    • XOOMやRazerなど。
  • iOSはGalaxyNexusの4.0.4よりはスコアが上だが、他の4.0系端末よりはスコアが下である。
  • Tizenにおいては、WebGLも動きJavaScriptのスコアも高い。
  • Nexus7は、4.3になったときにChromeのスコアが低くなってしまった、それはWebAudioの設定ができなくなっていることと関係するのであろうか。

HTML5のスコア

  • 総合的には、TIZEN端末がWebGLとWebAudioをサポートし、それぞれのスコアも高得点をたたき出している。
  • その他では、XperiaZやGalaxyS4、HTC OneというトップクラスのAndroid端末が続く。
  • 今後、Chromeの方でWebAudioやWebGLのサポートが行われれば、Android4.0以上のスマートフォン上でも3Dがグリグリ動作するゲームアプリを作成することが出来るのではないだろうか。
  • FirefoxOS端末が手に入らなかったため、その端末との比較も行ってみたい。
  • WebAudioに対応している端末が、WebGLよりも少なかったため、早く対応してほしいと思った。
  • WebGLとWebAudioをサポートしている端末上のアプリは、ブラウザ上でネイティブ並みに動きを見せていた。
  • これからの時代、WebGLとWebAudioによってハイスペックなカジュアルアプリをあらゆるプラットフォーム上で実現できるようになるのではないだろうか。