Firefox OSアプリ開発は簡単!Firefox OS Simulatorをインストールする方法


24日にKDDIがFirefox OSを搭載したスマホを発売するというニュースがありました。
さらにソニーはFirefox OS端末を開発するらしいです。
 →HTML5で作られた「Firefox OS」搭載スマホの発売が決定、実機の最新デモはこんな感じ
 →ソニーモバイルも「Firefox OS」に参入 2014年に端末発売へ

firefox_os_simulator00.png


まあ、KDDIは2011年にWindows Phone7.5を発売しておきながら1機種のみ
ソニーはPlayStation3のGame OSを複数の機器から発売すると宣言しながら実現せず、
新たにPlayStation Suiteで囲い込もうとするも鳴かず飛ばず全く一貫性がないですが、
ビジネスなんてそんなものでしょう^^
このFirefox OSも先行きがかなり不明ですが(悲観的)、興味があるのでちょっといじってみました。

今回紹介するのはFirefox OS上で動くアプリです。
といってもまだ実機が出てないのでパソコンでのシミュレーターで、Firefox OS Simulatorです。
 
 

Firefox OS Simulatorのインストール方法


とても簡単にインストールできました!!
なぜならブラウザFirefoxのアドオンだから!
iPhoneやAndroidといった他のアプリ開発のようにXcodeやらEclipseの別ソフトではないのです!!


ではインストール方法についてです。

まずアドオンで「Firefox OS Simulator」を取得します。
firefox_os_simulator01.png

ダウンロードされるのでインストールします。
firefox_os_simulator02.png

firefox_os_simulator03.png

しばらくするとインストールが完了し、Firefox OS Simulatorの画面が表示されます。
(クリックで拡大)
firefox_os_simulator04.png

表示されない場合は[ツール]-[Web開発]-[Firefox OS Simulator]で立ち上げます。
firefox_os_simulator03-2.png

左のStopボタンをクリックするとRunningとなり、Firefox OS Simulatorが起動します。
firefox_os_simulator04-1.png


Firefox OSの画面


ホーム画面
firefox_os_simulator05.png


ホーム画面から右にフリックした画面
アプリがずらっと並んでいます。
firefox_os_simulator06-2.png firefox_os_simulator06-3.png

ホーム画面から左にフリックした画面
コミュニケーション関係のアプリが並んでいます。
firefox_os_simulator06.png

すでに大半のアプリは動きます。
さらにFirefox Marketplaceからアプリをインストールすることもできます。
firefox_os_simulator07.png

Twitterの公式アプリがあったのでインストールしたら普通に使えました。
firefox_os_simulator07-2.png


全体的な感想としては、先行するiPhoneの模倣であることは否めませんね。。。
後発なんですからもっと斬新なものを期待したんですが。。。



アプリ開発


Firefox OSのウリの1つとして挙げられるのはアプリ開発がHTML/CSS/JavaScriptでできることです。
Objective-CやらJavaやらVisual C#のように専用のプログラム言語ではなくHTMLで行えることはウェブ開発者だけでなくウェブデザイナーなどHTMLを使いこなすことができるディベロッパーが参加しやすいという利点があります。

まず次のような簡単なindex.htmlを作ります。

index.html

<!DOCTYPE html>
<meta charset=UTF-8>

<title>Hello World</title>
  Hello World!<br>
  ようこそ!


またマニフェストファイルが必要とします。
マニフェストファイルはプレーンなJSONファイルで、.webappという拡張子を持ちます。

manifest.webapp

{
  "name": "Hello",
  "description": "Firefox OSアプリ",
  "launch_path": "/index.html",
  "icons": {
    "256": "/img/icon256.png"
  },
  "developer": {
    "name": "teapipin"
  },
  "default_locale": "ja"
}


"icons"を省くとなぜかうまくいきませんでしたの必須項目なのでしょう。
"launch_path"で先ほどのindex.htmlへのパスを設定します。

次にFirefox OS Simulatorのダッシュボードから「Add Directory」ボタンをクリックするとファイル選択ダイアログが開きます。
ここで作成したマニフェストファイルを指定します。
(クリックで拡大)
(なぜかうまく指定できない場合がありました。Firefoxを立ち上げ直すとうまくいきましたが)
firefox_os_simulator08-0.png

アプリがインストールされ、ホーム画面にアイコンが表示されます。
firefox_os_simulator08.png

クリックするとアプリが起動しindex.htmlの内容が表示されます。
firefox_os_simulator08-2.png


以上とても簡単でした。
もちろんHTML/CSS/JavaScriptを知らなければ勉強する必要はあります。
でもこれらはObjective-CやらJavaやらVisual C#と比べると習得が容易です。
この世界は勉強の日々ですからどんどん習得していきましょうね♪

  


↓この記事が参考になったら拍手、ツイート、いいね、はてブ、いずれかをお願いします。今後のブログ作りに役立てたいので。
関連記事

コメントの投稿

非公開コメント

プロフィール

てぃー

Author:てぃー
詳しい自己紹介:こちら
Twitter:@teapipin


follow us in feedly 
にほんブログ村 IT技術ブログへ にほんブログ村 PC家電ブログへ
現在の閲覧者数:

ブログ内検索
今日のアクセス数の多い記事
カレンダー

08月 | 2017年09月 | 10月
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
過去記事ダイジェスト
お知らせ
ツイッター分析の分析結果が新潟大学教育学部の論文に引用
教育の実証研究の場でも高く評価!

ツイッター分析の分析結果が和歌山大学防災研究教育センターの論文に引用
防災の研究において評価!

2015年版ツイッター分析(世界編)が始動!
今回は世界の国別・言語別ツイートを分析!

ツイッター分析の分析結果が慶應義塾大学有名教授の研究論文などに引用
文系の研究までも制覇!

Interval Timer EX
有名雑誌「Mac Fan 2015月2月号」に「インターバルタイマーEX」が3度目の掲載!ポモドーロテクニックに有効!

自作Macアプリ3部作が2014年 Vector 年間ダウンロードランキング Mac トップ100にすべてランクイン

TimeCalcを公開しています!
時間計算、年齢計算、学歴欄作成など。

ツイッター分析の分析結果が人工知能の研究に!
ブログが学会発表で引用されました。

今まで開発したiPhoneアプリのソースコードを公開しています!
勉強に役立ててください。


2013年 Vector 年間ダウンロードランキング Mac トップ100に「デジカメ変更日を撮影日に一括変更 for Mac」と「インターバルタイマーEX」がランクイン

Interval Timer EX
有名雑誌「Mac Fan 2013月4月号」に「インターバルタイマーEX」が2度目の掲載!!

リアルタイムツイッター地図
リアルタイムツイッター地図を公開しています!
位置情報付きツイートをリアルタイムに表示します。

新たなツイッター分析としてイベントツイート分析を行っています!

2012年8月1日(水)開催の「Twitter勉強会」で発表
ツイッター調査:約173万ツイートを調査して分かったTwitterの利用動向 #twtr_hack from teapipin


Interval Timer EX
有名雑誌「Mac Fan 2012月3月号」に「インターバルタイマーEX」が掲載!!



 

はてなブックマークの人気記事
ツイート&いいね!ランキング
最新記事