LoginSignup
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@AseiSugiyamainRepro株式会社

Firefox ハンズオン

Posted at

Firefox OS アプリハンズオン in Nagoyaに参加してきました。
資料は公開され次第追加します。

開発環境構築

Firefox(開発用)をインストール

Firefox Developer Editionをインストール
$ brew cask install firefoxdeveloperedition

スクリーンショット 2015-02-28 13.34.00.png

2つのアドオンをインストール

  1. adbhelper-mac64-latest.xpi
  2. fxos_2_0_simulator-mac64-latest.xpi

Firefox OS シュミレーターを起動

右上のペン型のアイコンからWebIDEを起動

スクリーンショット 2015-02-28 13.38.04.png

右上からシミュレーターを起動、シミュレーターをインストールしていないと起動できないので注意

スクリーンショット 2015-02-28 13.35.16.png

下側の箇所からホームボタン、ランドスケープ(回転)のシミュレーションができる

Hello, world.

定番のHello, world.アプリを作って、アプリの構造を理解します。

Hello world.

WebIDEから、Project -> NewApp

スクリーンショット 2015-02-28 13.41.08.png

今回はHelloworldをやりたいので、Helloworldを選択。

プロジェクトを置くフォルダを選んで、保存。プロジェクトが開き、Editorが起動する。

スクリーンショット 2015-02-28 13.44.09.png

ちなみに設定(Project->Preference)からキーバインドなどを変更可能みたい。

スクリーンショット 2015-02-28 13.46.58.png

実行ボタンから実行すると、アプリがシミュレーターから実行される。

スクリーンショット 2015-02-28 13.48.54.png

技術的な話は次のような仕組みとのこと。

  • アプリのViewはHTMLでまったくWebアプリと作り方が同じ

  • アプリの実行時には、ファイル一式をZip圧縮して本体に送っている

Hello, world. 追加開発

ソースコードはこちら
https://gist.github.com/chikoski/fffbf16faf32389decda

"Hello, World"にスタイルを適用していく。

デバッガーを起動(スパナのアイコン)

スクリーンショット 2015-02-28 14.10.02.png

デバッガーにCSSのライブプレビュー機能あり。Style Editorタブを選択。

実行中に編集すると、アプリを実行しながらスタイルが適用されるので便利。

CSSはAdobeのギャラリーとか見ると色々ある 例 : ビジュアル系 CSS Shapes の用例ギャラリー

JavascriptでEventに対するコールバック関数を定義することで、ユーザーの操作に反応した処理が可能。

app.js
window.addEventListener("load", function() {
  var threshold = 50;
  var className = "night";
  var body = document.querySelector("body");
 
  window.addEventListener("devicelight", function(event){
    
    // devicelight のイベントハンドラ event
    // event.value : 照度(単位lx)
    
    if(event.value < threshold){
      body.classList.add(className);
    }else{
      body.classList.remove(className);
    }
  });
});

見た目の変化はCSSでつける

app.css
body{
  background-color: white;
  overflow: hidden;
}
body.night{
  background-color: black;
  color: white;
}
h1 {
	border-radius: 3px;
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	color: #36bcab;
	font-size: 68px;
	font-weight: 300;
	margin-top: -16px;
	margin-bottom: 0px;
	padding: 0px 0px;
	transition-duration: 1.5s;
}
.night h1{
  transform: rotate(345deg);
}

上記の変更を施すと、明るいところでカメラの前に手をかざすと画面のテーマが変わる

スクリーンショット 2015-02-28 14.33.11.png

回転方向を逆にしたいときは、CSSのtransformの値を負の値にする

.night h1{
  transform: rotate(345deg);
}

実機開発

おすすめの環境はOS Xだそうな(ドライバなど不要で認識するため)

Windowsではドライバを追加、Linuxでは、なんらかの追加作業をする。詳細教えてれると嬉しいです。

スクリーンショット 2015-02-28 15.12.42.png

ボタンを押したらアラートが出るアプリを作りました。

スクリーンショット 2015-02-28 16.53.24.png

スクリーンショット 2015-02-28 16.54.21.png

ソースコードはこんな感じ

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
 
    <title>Hello World</title>
    
    <link rel="stylesheet" href="app.css">
    <link rel="stylesheet" href="button.css">
    <script type="text/javascript" src="app.js" defer></script>

    <!-- Inline scripts are forbidden in Firefox OS apps (CSP restrictions),
         so we use a script file. -->
  </head>
 
  <body>
    <!-- This code is in the public domain. Enjoy! -->
    <p>
      <button id="button">ボタンテスト</button>
    </p>
  </body>
 
</html>
app.js
var button = document.querySelector("#button");
button.addEventListener("click", function(event){
//   console.log("test");
  alert("test");
}, true);
app.css
body{
  background-color: white;
  overflow: hidden;
}
body.night{
  background-color: black;
  color: white;
}
h1 {
	border-radius: 3px;
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	color: #36bcab;
	font-size: 68px;
	font-weight: 300;
	margin-top: -16px;
	margin-bottom: 0px;
	padding: 0px 0px;
	transition-duration: 1.5s;
}
.night h1{
  transform: rotate(-15deg);
}

また、button.cssとして、次のリンク先のcssを使いました。

Coding guide: Buttons https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks/1.x/Button/Coding

javascriptをscriptタグを用いてheadderで読み込む場合に、defer要素を設定しなければいけないのを知らずドハマりしました。

総括

  • Webアプリ的にモバイルアプリを作成できるのは本当かと疑っていたけれど本当だった。

  • Webアプリ的にモバイルアプリを作れることと、簡単にモバイルアプリを作れることは別物

    • 当然、Webアプリの知識がモバイルアプリ作成のために必要になる

  • iOS技術者やAndroid技術者がWebアプリの知識を見つけるために取り組むのはありかも？
    ― 個人的な感想としてはWebサービスの作成よりはモバイルだし取っ付き易い

Reference

tel.min https://github.com/chuo-u-openproject/tel.min
サポート状況を考慮したdefer属性の使い方 https://w3g.jp/blog/script_defer
クイックスタート https://developer.mozilla.org/ja/Apps/Quickstart
document.querySelector https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
いろいろなページで使うJavaScript関数を外部ファイルにまとめて書く http://www.pori2.net/js/kihon/16.html
Web Audio Vocoder http://webaudiodemos.appspot.com/Vocoder/
クリック時の処理(onClick) http://www.ajaxtower.jp/js/event/index2.html
Navigator.mozCameras https://developer.mozilla.org/en-US/docs/Web/API/Navigator/mozCameras
アプリケーションセキュリティ https://developer.mozilla.org/ja/Firefox_OS/Security/Application_security

Web API インターフェイス https://developer.mozilla.org/ja/docs/Web/API
フォームの汎用ボタンを作成する http://www.htmq.com/html/input_button.shtml
Marketplace でアプリを公開し開発者になろう https://www.mozilla.org/ja/firefox/partners/
CSS3 アニメーションの基礎 @keyframes transform http://ri-mode.com/rainbow/2013/06/10/css3_keyframes_transform/

雰囲気とかその辺りは分けて書きます

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?