HACKist » FirefoxOS

【第三極モバイルOS】FirefoxOSデモアプリの作り方

HACKist — Tue, 25 Jun 2013 11:23:55 +0000

こんにちは。川崎です。

前回の記事ではFirefoxOSの概要説明を書かせて頂きましたが、やはりどんなものでも新しい物は自分の手で試してみなくては理解するのは難しいですよね。

と、いう事で今回は実際のFiurefoxOSアプリをシミュレータで作ってみたいと思います。

用意頂くのはFirefoxのブラウザと、エディタ（普段使っているツールやテキストファイルでOK）になります。

手順① FirefoxOSシミュレータを起動する

シミュレータはFirefoxブラウザのアドオンとして配布されていて誰でも簡単に入手出来ます。

通常であればFirefoxブラウザを開き、Firefoxスタートページにある「アドオン」を選択して配布サイトで検索して入手、という手順になるのですが、6/24現在、検索にかからないので下記URLからリンクしてみて下さい。

■Firefox-os-Simulator

https://addons.mozilla.org/en-US/firefox/addon/firefox-os-simulator/?src=search

上記画面が出たら「Firefix OS Simulator」のリンクをクリックします。

次に「Add to Firefox」をクリックします。

シミュレータは開発者向けに提供されるアドオンなのでダウンロード時にOSの警告画面が出ますが、そのままインストール続行して下さい。

インストールが完了するとダッシュボードが開きます。

この画面がシミュレータの起動や、アプリのアップロード、インストールを行う場所になります。

ダッシュボードを任意で立ち上げたい場合は下記イメージの通り、ブラウザの「ツール」➡「Web開発」からFirefox OS Simulatorを起動してください。

無事ダッシュボードが開けた所で、まずはシミュレータを起動してみましょう。

起動は非常に簡単です。ダッシュボード左にあるSimlatorボタンを押すだけです。

ダッシュボード初回起動時はボタンが「Stopped」になっていると思いますので、これをクリックして下さい。

無事起動しました。

シミュレータはマウスでスマホ操作同様にフリックやタップで操作出来ますのでこの状態でもFIrefoxOSがどんなものなのか体験する事が出来ます。

手順② アプリケーションファイルを作成する

シミュレータが動いた所でさっそくアプリを作ってみましょう。

今回作るのは文字と画像を表示するだけの簡単なアプリです。

どんな開発環境であっても必ずディレクトリ構成という物が決まっています。今回は最小構成という事で下記のようなフォルダを用意しました。

一番上にルートディレクトリを新規作成して用意します。これは任意の名前で大丈夫ですが、アプリ名にすると分かりやすいです。

ルートの直下には画像を格納する「images」フォルダと、HTML、そしてアプリを制御する為の「manifest.webapp」を用意します。JSやCSSを使う場合にはimagesと同階層にフォルダを切ると分かりやすいと思います。

では、実際に書くファイルの中身を見ていきましょう。

■ manifest.webapp

————————————

{

“name”: “Hackist”,

“description”: “HackistSample”,

“launch_path”: “/index.html”,

“icons”: {

“128”: “/images/icon.png”

“developer”: {

“name”: “Hackist”,

“url”: “http://hackist.jp/”

“default_locale”: “ja”

}

————————————

このmanifestファイルはアプリを一意に判定したり、様々な役目があるアプリに必ず必要なものですが、コードはjson形式で書かれています。ファイルの拡張子は.webappです。

今回はサンプルなのでこのファイルは各アプリで作成する「お約束ファイル」程度に作成すると考えてもらえば良いです。

次はHTMLファイルを見てみましょう。

■ index.html

————————————

sample

Hackist FirefoxOS Sample!

————————————

HTMLは非常にシンプルですね。

テキスト表示だけだと面白くないので今回はHackistロゴをimagesフォルダ配下に格納して呼び出してます。HTMLの記述はWebアプリと一緒なのであまり凝った事をしなければFirefoxOS用に注意しなきゃいけない事もありません。

ではシミュレータで動かしてみましょう。

手順③アプリのインストール

インストールはダッシュボード画面から簡単に行えます。

ダッシュボードを開いて「Add Directory」ボタンをクリックして下さい。

ファイル選択画面にて先ほど作成したディレクトリの「manifest.webapps」を選択して下さい。

すると自動的にアプリがブラウザにアップされてシミュレータが起動します。

ホーム画面を見ると一緒にimagesに格納したicon.pngもちゃんと適用されてます。

アプリを修正して再度アップし直したい時やは前述のAdd動作を再度行うだけです。

エラーがあるときはちゃんと教えてくれます。

アプリを削除したい時はダッシュボードに「Remove」があるのでそこから簡単に出来ます。

誰でも出来るFirefoxOSアプリ

このようにFirefoxOSの開発は驚くほど簡単に出来る訳です。

このハードルの低さはiOSやAndroidとは比べ物にならない上に、元々WebでフロントエンドでHTML/CSS/JSを書いている人であればほぼ障害なくFirefoxOS向けのある意味ネイティブアプリ開発する事が出来ます。

（FirefoxOSにはネイティブかWebかという選択肢自体がありません）

今回は技術的な部分や、FirefoxOSの深い部分には触れていませんし、まだ新技術で今後進化するFirefoxOSですが誰でも簡単にアプリ作成が出来るので是非、試してみて下さい！

Webプラットフォームであるということ

「Webベース」といっても今までAndroidやiOSでWebViewで作っていたものや、HTML5ベースのアプリ、と言われている存在とは根本的に違う物になります。

FirefoxOSはWeb中心となる事を見据えた未来のプラットフォームであり、単純に第３極モバイルOSという事で既存OSのネイティブアプリと並べて比較してしまうのは少し違うのでは無いか個人的には感じています。

次回からは第三極OSもう一つの注目株である「Tizen（タイゼン）」についても同じように説明＆アプリ作成をして行きたいと思います。

Tizenが気になる方はもう少々お待ち下さい。

【第三極モバイルOS】FirefoxOSのアプリ開発基礎知識

HACKist — Tue, 25 Jun 2013 11:22:52 +0000

こんにちは。６月からHackistに仲間入りした新顔の川崎です。

最近、FirefoxOSとかTIZEN(タイゼン)とかいう言葉を良く聞くようになってきましたね。

「これらの単語は一体なんなの？」という方の為にざっくり説明しますと、これらはAndroidやiPhoneに続く「第三極モバイルOS」とか言われるスマートデバイス向けの新しいOSになります。

まだキャリアから端末も発売されていないので一般には浸透していない状態ですが特徴としてGoogleやAppleのような所謂、”提供者”である巨人の縛りが無い、「オープンな」OSとして業界内で話題になっており、その使われ方も注目を集めています。

では実際に第三極OSが既存OSと何が違うのか、という事や、アプリの作り方、そしてビジネス面のメリット/デメリット等をこのブログで連載形式でお届けしたいと思います。

第一回となる今回は第三極モバイルOSの筆頭でユニークな仕組みを持ったFirefoxOSについて書いて行きます。

FirefoxOSとは

ブラウザのFiefoxは既にWebの世界で市民権を得ているので知っている人も多いと思いますが一応説明させて頂くと、Firefoxは「Mozilla」という非営利団体が提供しているオープンソースのWebブラウザになります。

そのブラウザのアーキテクチャを採用して、Webプラットフォームのモバイル向けOSとして作られたのがFirefoxOSになります。

既に開発者向けには「Peak」と「Keon」という名前で端末が発売されています。

見た目や操作感はAndroidに結構近いです。

2013年2月に開催されたMobileWorld Congressでは世界中の通信事業者から18社がFirefoxOSを指示すると表明しました。日本ではKDDIが、端末メーカーとしてはLGやHuawei等が名乗りを上げています。

Webプラットフォームってどういう事？

FirefoxOSの特徴として「Webベースである」という事が良く語られます。

その理由は様々な視点から語られますが、ざっくり言うとアプリをHTML5等のWeb技術で動かしており、ウェブブラウザのエンジンを利用してダイレクトにウェブアプリを動かすモバイル端末を動作させる、という所にあります。

ただ、前述した説明だけだと少々抽象的で、FirefoxOSの本質が見えていないので、もう少し掘り下げて見てみましょう。

端末に搭載されるOSは大きく分けると３つの構成で分けられます。各構成の役割は①画面表示をする部分（UI）、②処理を行う部分（エンジン）、③全体を取りまとめる土台（カーネル）となっています。

FirefoxOSはそれぞれの構成を独自に作成した物を利用しており、上から「Gaia」「Gecko」「Gonk」と名付けています。

出典：FirefoxOSアーキテクチャ

https://developer.mozilla.org/ja/docs/Mozilla/Firefox_OS/Platform/Architecture

Gaia(ガイア)

上記図の一番上にあるのがGaiaです。Firefoxでは表示を行うViewをHTMLベースで作っています。これがまず１つ、Webベースであると言われる理由になります。

Gecko（ゲッコー）

GeckoはFirefoxが誇るエンジンになります。ブラウザもプログラムの集合体であり、Web上で動作する為の処理を司るのがエンジンになります。ブラウザの世界ではOSS(オープンソースソフトウェア)であるWebkitに始まり、近年も進化続けています。オープンソースであるFirefoxはW3Cで進められているHTML5の標準化を待たずして独自に進化をしているので、最先端のWebエンジンであると言えます。FirefoxOSは処理を解釈するエンジン部分がこのGeckoになるのでWebベースという事です。

Gonk（ゴンク）

上記のGaiaとGeckoは基本的にはWebブラウザのFirefoxと同じアーキテクチャを採用していますが、それだけでは当然端末を動かす事は出来ません。FIrefoxOSでは端末の制御等を行うためにGonkが居ます。

GonkはLinuxを採用しており、その実態はAndroid4.0のカーネルを流用しています。既にOSSとして提供されているAndroidから必要なカーネルだけを持ってくるあたりはとても賢い選択だなと思います。

結局、Androidと何が違うの？

FirefoxOSはWebアプリケーションを動作させる為に様々な最適化がされています。AndroidやiPhoneは非常に高機能ですが、動作させる為に色々と複雑な仕組みが載って、動作させる為の端末スペックもハイエンドになっています。それに対してFIrefoxOSは無駄な物を削ぎ落としたスマートな作りになっているので、結果として超軽量なプラットフォームになっているのです！

ローエンド（低スペック）端末向けと言われるFirefoxOS

FirefoxOSはローエンド端末や途上国に向いているという情報をよく見ます。とはいえMozillaさんは非営利団体なので、特に「◯◯に向けた端末」等を指定している訳ではありません。ローエンドと言われている理由は動作する端末スペックによります。

Android4.0は動作させるのには端末のメインメモリ（RAM）が1GBないし２GB必要になります。

前述したように高機能化を進めたが為に出て来たしまった制約です。

メモリ1GB以上ハイスペック端末は端末価格が高く、国によっては「高過ぎて売れない」というケースが出てきます。それに対してWebベースのFirefoxOSはメモリが256MBでも512MBでも軽快に動作します。その為、端末性能に依存せずにOSを載せる事が出来るので、世界的に注目されているOSになります。

※余談ですが、Androidも5.0で低スペック動作可能になると言われているので、そのあたりの棲み分けについても今後が楽しみです

Webベースのアプリだけどサクサク動作する理由

Webベースのアプリだと動作が遅いんじゃないのか？という疑問を持つ方がいるかも知れません。FirefoxOSではasm.jsというJavaScriptを事前に型付き言語に処理する仕組みを採用している為、実行速度がとても速くなっています。

asm.jsはブラウザ版の最新バージョンであるFirefox22でも対応するそうなので、そこで実際に速度を体感してまた別途記事にしたいと思います。

FirefoxOSのアプリ開発に専用ツールは必要ない！

モバイルのアプリケーション開発では専用のデベロッパーツールであるSDKを利用する場合がほとんどでしたが、FirefoxOSの場合はそんな事はありません。

① エディタ

② Firefoxのブラウザ

③ Firefoxブラウザのアドオン（Simulator）

この３つだけです。

エディタはVimでもDreamWeverでもeclipceでも単純テキストに対応しているメモ帳でも大丈夫です。つまり、ブラウザさえあればシミュレータで動かす事が出来ます。

AndroidやiOSは高機能な統合開発環境がSDKとして提供されていますが、高機能が鵜故に習得コストがかかります。

その反面、FirefoxOSの開発環境のハードルの低さはかなり魅力的であると思っています。

今回はFirefoxOSの概要について書いてきましたが、次回記事では「エミュレータでのアプリ作成方法」を書いて行きたいと思います。