[HTML5][Firefox OS][Tizen]手元にあったHTML5アプリをFxOSとTizenで動かしてみるの巻


 藪下@2課のHTMLいけてないほうです。

 この記事はHTML5 Advent Calendar 2013 四日目の記事です。
 この記事はTizen Advent Calendar 2013 四日目の記事です。

 藪下は名乗りの通りHTML5とかよくわからない子なのでFxOSとかTizenでHTMLアプリを動かして遊んでみようと思います。
 ちょっと図を取って書き込んでとかする時間がないので後でおいおいやります。

今回やること

 藪下は名乗りの通りHTML5とかよくわからない子(4行ぶり2回目)です。なのでFxOSをさわり始めた時にHTML5知らないとだめだよなーとアプリをこさえてみたことがあります。はじめてのHTMLアプリでもGoogle Maps APIはやさしかったです。

 こんなかんじ

 これそのまま使って確認させろやって人はここからzip落としてくださいな。

 これをFxOSとTizenに乗せて動かしてみます。

目次

  • 動かす環境の準備
    • Firefox
    • Firefox OS 1.1 Simulator
    • Firefox OS搭載端末 (keon)
    • Chrome
    • Tizen Simulator
    • Tizen開発用端末
  • FxOSで動かす
    • FxOS向けアプリにする
    • Simulatorへのインストール
    • 端末へのインストール
  • Tizenで動かす
    • Tizen向けアプリにする
    • Simulatorへのインストール
    • 端末へのインストール

動かす環境の準備

 今回は動作環境として以下のものを用意します

  • Firefox
  • Firefox OS 1.1 Simulator
  • Firefox OS搭載端末 (keon)
  • Tizen Simulator
  • Tizen開発用端末

Firefox

 HTML5 Advent Calendar 2013から来た人には釈迦に説法ですが、Firefoxの最新版は現在25(もうすぐ26がでますよ!)です。以下のURLからダウンロードできます。
 Firefox OS 1.1 Simulatorを使うにも必要になるので、インストールしていない人はこの機に入手しましょう。

Firefoxダウンロード
http://www.mozilla.jp/firefox/

Firefox OS 1.1 Simulator

 Firefox OS 1.1 SimulatorはFirefoxのアドオンとして提供されています。Firefox OS 1.1 Simulatorは以下のURLからFirefoxでどうぞ。

Firefox OS 1.1 Simulator 4.0
https://addons.mozilla.org/ja/firefox/addon/firefox-os-simulator/

Firefox OS搭載端末 (keon)

 今回はkeonです。おっかしいなー。もうPeak+が届いててもいい頃だったのに。。。
 keonは現在入手できないので端末で遊びたい人はZTE Openあたりをどうぞ。ただし電波法違反になるので電波は出さないように注意してくださいね。

eBay ? ZTE Open Powered By Firefox OS 3G Unlocked Smartphone Orange
http://www.ebay.com/itm/331031989534

Chrome

 TizenのSimulatorはChromeのプラグインになってます。なのでChromeをインストールしておきます。
 たぶん見に来てる人のほとんどが入れてるんでしょうが一応URL置いときますね。

Chrome
https://www.google.com/intl/ja/chrome/browser/

Tizen Simulator

 TizenのSimulatorはTizen SDKツールセットの一部なので、Tizen SDKをインストールすると一緒にインストールされます。
 Tizen SDKの入手は以下のページからどうぞ。

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

Tizen開発用端末

 Intel主催のセミナーやハンズオンに参加すると借用できるようです。藪下は何度も行く機会を逃しつつやっと先日入手できました。
 セミナーについては以下のページにまとめられているようなのでチェックですよ。

Intelセミナー情報
http://japan.intel.com/swdev/

FxOSで動かす

FxOS向けアプリにする

 まずはFxOSにインストールできるようにします。
 とはいえ、動いているものがあるなら簡単です。FxOSアプリにはそのアプリがどのようなものかシステムに指示するためのマニフェストファイルが必要になります。今回インストールしたいアプリにもマニフェストを用意します。

{
    "name": "Picture Map",
    "description": "view picture app",
    "launch_path": "/index.html",
    "icons": {
        "128": "/img/icon-128.png"
    },
    "developer": {
        "name": "NAGATSUKI Aoi",
        "url": "http://www.nagatsuki-do.net"
    },
    "default_locale": "ja",
    "permissions": {
        "geolocation": {
            "description": "Required for Map view"
        }
    }
}

 ざっくりと眺めると、アプリの名前、説明、起動する際に読まれるHTMLファイルへのパス、アプリアイコン辺りが基本セットです。
 そのほかにロケールやパーミッションが書かれてますがこれらは必要に応じて書きます。今回はGPSを使っているのでgeolocationを許可してますね。

 これをうごいているアプリのルートディレクトリにおいてあげればもうFxOSアプリです!

Simulatorへのインストール

 Simulatorへのインストールは開発ツールからSimulatorを立ち上げたときに表示されるページで行えます。

 まずはAdd Directoryボタンからローカルに置いてあるアプリのmanifest.webappを読むか、web上に置いてあるならAdd URLからmanifest.webappのURLを開きましょう。
 ダッシュボードに何か出てきた成功です。manifest.webapp検査されてValidation Result: OKになっているのを確認しましょう。

 たぶん追加するとSimulatorが立ち上がってるんじゃないかと思いますが、今後修正したりなんかした場合はCtrl+RとかRefreshボタンなんかを使うといいです。

端末へのインストール

 端末へのインストールも実はSimulatorと同じ要領でできます。詳しくはこちら(ステマ)を見ていただくといいかと思います。

Tizenで動かす

Tizen向けアプリにする

 今度はTizenアプリにしてみます。既存のwebアプリをTizenアプリにする手順は公式のWikiにまとまってます。

web アプリケーションをTizen SDK に読み込む – Tizen Developers
https://developer.tizen.org/ja/downloads/sample-web-applications/load-web-app-tizen-sdk?langredirect=1

プロジェクトの作成

 まずはIDEを立ち上げてプロジェクトを作ります。今回はwebアプリの取り込みなのでTizen Web ProjectではなくProject…のほうからプロジェクトを作ります。

  • General
    • Project

 を選んでNext。

 Project nameに任意のアプリ名を入れて、Use default locationのチェックを外してLocationを既存のアプリの場所にしてFinishします。

.projectの用意

 .projectファイルができてますが空っぽなのでいろいろ書く必要があります。サンプルとかからコピーするのが一番手っ取り早い(って公式のWikiに書いてる)ので以下のURLのをパクります。

https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk/sample-.project-file

 変更箇所はアプリ名ぐらいでしょうか。

config.xmlの用意

 さらにconfig.xmlというFxOSでのmanifest.webappに相当するものが必要になります。たぶん作られてないですよね。作りましょう。

  • プロジェクトツリーのプロジェクト名を右クリック
    • New
      • File

 からNew Fileダイアログを出してファイル名にconfig.xmlを入力してFinishで警告ダイアログが出てきます。これを無視してやればconfig.xmlが空でできます。

 空のcomfig.xmlを開いたらまたも下記URLのをパクります。だって公式Wikiに書いてあるんだもん。。。

https://developer.tizen.org/downloads/sample-web-applications/load-web-app-tizen-sdk/sample-config.xml-file

 Overviewのタブで自分のアプリに合わせてごにょごにょしてください。

プロジェクトの構築

  • プロジェクトツリーのプロジェクト名を右クリック
    • Refresh

 するとプロジェクトの構築が可能になっているはずです。

  • プロジェクトツリーのプロジェクト名を右クリック
    • Build Project

 でプロジェクトを構築すればTizenアプリの出来上がりです! が、初めての場合たぶん途中で止められます。セキュリティプロファイルをなんとかしろと言われるはずなので作ってあげましょう。

  • Window
    • Preference
      • Tizen SDK
        • Security Profiles
          • Profiles

 のAddボタンでセキュリティプロファイルを追加します。
 このままだとプロジェクトの構築でやっぱりAuthor作れよとか怒られるので、

  • Window
    • Preference
      • Tizen SDK
        • Security Profiles
          • Author Certificate

 の横にGenerateボタンがあるのでAuthor Certificateも作りましょう。(*)がついている項目は必須項目なので何かしら入れてあげましょう。

Simulatorへのインストール

 SimulatorはChromeで動きます。なのでTizen SDKにChromeの実行ファイルの場所を教えてあげる必要があります。

  • Window
    • Preference
      • Tizen SDK
        • Web
          • Simulator
            • Google Chrome Settings
              • Google Chrome location

 にChromeへのパスを入れましょう。
 あとうちの環境ではLaunch the simulator in Google Chrome application modeのチェックがついているとSimulatorが起動できなかったので、単にChromeが起動するだけだよ? という人はチェックを外してみてください。

 さて準備ができたのでインストールです。Simulatorへのインストールは簡単です。

  • プロジェクトツリーのプロジェクト名を右クリック
    • Run As
      • Tizen Web Simulator Application

 でSimulatorが起動してアプリが動きます。

端末へのインストール

 次はお待ちかねの端末へのインストールです。と言ってもこちらも簡単です。
 端末をPCに繋いだら

  • プロジェクトツリーのプロジェクト名を右クリック
    • Run As
      • Tizen Web Application

 で端末にインストールされてアプリが起動します。

さいごに

 とまあ一通り簡単にみてきましたがHTML5界隈の人も簡単にアプリ作れちゃうと思うのでやってみてください!
 逆にTizen界隈はまだ組み込み屋さんが多くてWebアプリに忌避感あるかもしれないですけどこの機になんかやってみるといいですよ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">