FirefoxOSでサンプルアプリ
というわけでTizenのHELLO WORLDをしたので
FirefoxOSのサンプルアプリにいってみます。
用意するもの：
Firefoxブラウザ＋アドオンのFirefoxOS Simulator
以上です。
ちなみに先日参加したFirefoxOS勉強会で
@dynamitter様の発表にてFirefoxOSのシュミレーターは
公式じゃないけど日本語対応版があるよ、とのことでした。
アドオンのインストール
シュミレータ表示
サンプルソースをご本家よりダウンロードしてきます。
サンプルダウンロード内の「manifest.webapp」を修正します。
「manifest.webapp」はJSON形式です。
以下の設定は今んとこ不要なので削除します。
「"appcache_path": "/offline.appcache",」
「"permissions": {
"systemXHR": {}
}」
{
"version": "0.1",
"name": "Your App",
"description": "Your new awesome Open Web App",
"launch_path": "/index.html",
"icons": {
"16": "/img/icons/mortar-16.png",
"48": "/img/icons/mortar-48.png",
"128": "/img/icons/mortar-128.png"
},
"developer": {
"name": "Your Name",
"url": "http://yourawesomeapp.com"
},
"installs_allowed_from": ["*"],
"locales": {
"es": {
"description": "Su nueva aplicacion impresionante Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
},
"it": {
"description": "Il vostro nuovo fantastico Open Web App",
"developer": {
"url": "http://yourawesomeapp.com"
}
}
}
}
次にシュミレータにアプリを追加します。
「ADD Directory」を選択し、対象のアプリの「manifest.webapp」ファイルを選択します。
右側の「Simulator」ボタンをクリックし、シュミレータを起動します。
ちなみにindex.htmlを普通にHTMLで修正してHELLO WORLDにしたのが以下。
フォルダ構成は以下です。
「manifest.webapp」が、起動時のhtmlファイルの指定、アプリ名の指定などを表すファイルです。
Tizenもそうでしたが、超簡単でした。
ここからHTML5やjavascriptで工夫するのがどこまで出来るか、
というところでしょうか。
Firefox OS 勉強会 2ndに参加
このブログ作成のきっかけ。
自社でなんちゃって勉強会に幽霊部員で所属しているのですが
FirefoxOSについても今年は議題にするということで
色々気になって関東Firefox OS勉強会 2ndに参加させていただきました。
いずれの発表者様もすばらしい発表で大変為になりました。
知らないことがいっぱいで学ぶこといっぱいだなぁと感じました。
せっかくなので各概要と雑感を。
…なんか久しぶりにブログなんて書くので発表の内容引用って
どこまでやっていいのかわからんのですが問題あればご指摘くだされば幸いです。
資料をまとめておいていただいているURLです。
https://sites.google.com/site/mcreatorjp/home/materials/firefox-os
@korodroid様
FirefoxOSとは
・Webベース
・処理高速化
コーディング
・決まったツールはない。お好きに。
実行環境
・Firefox OS Simulator 4.0か、実機
アプリ開発経験
・翻訳アプリを作成～マーケットへリリース
⇒ふつうにjqueryとかgoogleAPIを使って
⇒マーケットは1ヶ月ぐらいでリリース
・アプリの構成
①HTML(普通のHTML)
②icon(普通のアイコン)
③Manifest(manifest.webapp)
・marketplaceに公開
https://marketplace.firefox.com/app/xtranslator/
公開するには「zip」で固めて申請（パッケージ型）
マーケットへの公開種類は「Hosted」「packaged」がある
意外だったのはFirefoxはコーディングの実行環境が決まってないこと。
あと、マーケットプレイスへあげる時に「zip」で固めてリリースするというところ。
zipでいいんだ。。。ある意味かなりハードル低いな。
すごくとっつきやすかったです。
■3次元のJSをおさわりしてみる
@inuchin様
3次元CGを出すには？
ポリゴンを表示するには以下３つが必要
・右手座標系と右ねじの法則
・カメラと視錘台
・ポリゴンと色
firefoxOSで3次元CGを扱うために必要なもの
three.js
…すごく難しい3次元CGの扱いをある程度APIにまとめてくれている
回転角度rad=θ×π/180
・カメラと視錘台
これは図がないと表現が難しい。。
詳しくは発表資料参照。
視錘台は逆さ円錐で台形部分までは描画範囲で、
台形範囲殻外れると描画範囲でなくなるということ。
とにかくCGってのを実現する難しさがありありとわかりました。
最後にデモを見せていただきましたが、
200行弱であの回転サンプルが表現できるんだーと素直にびっくりしました。
■Tizen について
@TNaruto様
Tizenは多くのサードパーティを使っている
特にGUI周り。
OSSを利用しているので、自分だけじゃなくて
他にフィードバックが多く行えている。
※Tizenの前身のMeeGoでもGStreamerへフィードバックが多くあった
TizenはHTML5は選択肢の一つ
FirefoxOSはHTML5は唯一無二
アプリケーションタイプ
・Tizen webアプリ(HTML5など)
・Tizen Nativeアプリ(C/C++)
Tizenのアプリは1度書いたらどのデバイスでも動作する。
「write once run anywhere」
濃ゆい。
ここはTizen勉強会ですか？という勢い。
というか、聞く側としてはFirefoxOS学びに来てTizenも学べるという
1度で2度おいしいでした。
ちょうどそのあたりのイメージがほしかったので
発表者様より資料が公開されたら是非もう少し深く読み込みたい。
■TypeScriptで作る型安全FirefoxOSアプリ
@progremaster様
・javascriptは型がない、ランタイムない
⇒javascript怖い⇒FirefoxOS怖い
・AlfJsとかコンパイルしてjavascriptになるものなど、
他も色々あるがちょっといまひとつ
・TypeScript
⇒APIの互換性あり
⇒型を持っている
⇒出力されるjavascriptがきれい
・型定義ファイルを用意して、コンパイルする
※定義ファイルはフリーで色々ある
・ひよこがぴょこぴょこ動くアプリを作成、マーケットへリリース
⇒マーケットは3時間ぐらいでリリース
TypeScriptは名前は聞いたことあったけど実際を知らなかったので
概要がわかってよかった。
javascript使いさんからするとTypeScriptは神の領域らしい。
出てくるソースがきれいってのはかなりポイントが高い。
TypeScriptにもかなり興味が出てくる。
■俺の思ってたFirefoxOSじゃない
@vvakame様
独自FW？⇒ただのWebアプリ
ドキュメントない？⇒日本語版まである
（中略）
開発簡単？⇒そんなことなかった・・・
端末に戻るボタンが無い、シュミレータが死ぬなどなど
色々問題発生。。
Angular.js⇒神
TypeScript⇒神
FirefoxOSの問題
⇒オフライン問題
⇒hash-bangの動作
などなど。
実際の苦労した点や、動かした点を元に説明しているので
大変わかりやすかったです。
説明の流れがA？⇒Bみたいな話し方でテンポがよくてさらっとわかりやすかったです。
Angular.jsは知らなかったのでちょっと調べてみたい。
■Firefox OS Simulator 4.0
@dynamitter様
Simulator について
・普通にWEB開発。
・マニュフェストファイルを用意。
・メタ情報はJson
・非公式だけど全言語版シュミレータもある
add directoryよりファイルを選択
updateボタンで更新（ショートカットctrl+Rでも実行できるようなった）
シュミレータでデバッグが可能
シュミレータで使えないAPIもある。
ご本家の方。
ご本家ならではのお話も聞けて面白い。
firefoxは日本語版のマニュアルがいっぱいあって読みやすい。
家に帰ってシュミレータを動かしてみましたが、
Mozilla Firefoxのアドオンなので超簡単ですね。
簡単にシュミレータが動作するので、動きの確認にはもってこいですね。
ただ、メモリの確認とかハードに関する部分を考えると
このシュミレータがどこまでハード面のメモリとかCPUまで
シュミレートできるのかは興味がありますね。
※そもそもシュミレータではハード確認する観点じゃないのかな。。
あんまりマニュアル読めて無いので見当違いのコメントかも。
大変濃い2時間でした。
当日の補欠参加だったけど参加できてよかった。
次にこういう勉強会があったらまた参加したい。
開催者様、発表者様ありがとうございました。
Tizen SDKを使ってみた
Tizenが気になったのでとりあえず足がかりにHello Worldでも、と使ってみました。
1.Tizenのダウンロード。
以下から。
https://developer.tizen.org/downloads/tizen-sdk
今時点では「tizen-sdk-windows32-v2.1.4.exe」
インストーラはとりあえず流れのままインストールでOKだと思います。
次にひとまず空っぽプロジェクトを作成します。
Template⇒Tizen-Basic-Blank Applicationを選択。
プロジェクト名を入力してFinishを押す。
はっきりいってこれでほぼ終わりです。
このままでも動きます。
Run as...を選択すると以下の画面が出るので
Tizen WebSimulator Applicationを選択します。
インストールするとエミュレータもインストールできるみたいですが
うまくいかなかったのでまた別途。
HELLO WORLDにするにはindex.htmlを修正します。
これは普通のHTMLを書くだけです。Hello Tizenにしてみました。
index.htmlが修正したファイル。
config.xmlでアプリが起動したときのベースHTMLとかアイコンとかを定義してます。
ニュアンスとしてはAndroidのAndroidManifest.xmlみたいなもんだと。
簡単でしたね。かなり。
Tizenに限らず、Android,iOSとかもサンプルが公式から出ているので
動かすこと自体は簡単で、そこから自分がどういうものを作りたいか、
そして実際に作っていくことがすごく難しいんだろうなと思います。
起動中
IDEのディレクトリ構成
IDE.exeで起動します。TizenのIDEはeclipseベースなんですね。 知らないIDEを１から使うよりもeclipseってことで開発のハードルがかなり低くなると思います。
About Tizen IDE
Tizen Hello World
まずFile⇒NEW⇒Tizen Web Projectを選択します。
次にひとまず空っぽプロジェクトを作成します。
Template⇒Tizen-Basic-Blank Applicationを選択。
プロジェクト名を入力してFinishを押す。
はっきりいってこれでほぼ終わりです。
このままでも動きます。
Run as...を選択すると以下の画面が出るので
Tizen WebSimulator Applicationを選択します。
インストールするとエミュレータもインストールできるみたいですが
うまくいかなかったのでまた別途。
HELLO WORLDにするにはindex.htmlを修正します。
これは普通のHTMLを書くだけです。Hello Tizenにしてみました。
構成
index.htmlが修正したファイル。
config.xmlでアプリが起動したときのベースHTMLとかアイコンとかを定義してます。
ニュアンスとしてはAndroidのAndroidManifest.xmlみたいなもんだと。
簡単でしたね。かなり。
Tizenに限らず、Android,iOSとかもサンプルが公式から出ているので
動かすこと自体は簡単で、そこから自分がどういうものを作りたいか、
そして実際に作っていくことがすごく難しいんだろうなと思います。
