Skip to content

Instantly share code, notes, and snippets.

@MSakamaki

MSakamaki/meark.md

Created August 8, 2015 02:13
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MSakamaki/5c2c0c35db102e0a5166 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MSakamaki/5c2c0c35db102e0a5166 to your computer and use it in GitHub Desktop.
Download ZIP
スライド
Raw
meark.md

Firefox OSハンズオン

present by WoT たまごクラブ

スケジュール(全体)

時間 内容
13:00 - 13:05 あいさつ
13:05 - 15:00 セッション1
15:00 - 15:30 休憩 / ブース展示
15:30 - 17:30 セッション2
17:30 - 18:00 ブース展示
19:00 - 21:00 懇親会

ハンズオン概要

  1. 配布物と環境を確認
  2. 開発環境構築
  3. 簡単なFirefoxOS
  4. ハンズオン開始
    1. バイブレーション API
    2. 近接センサ API (proximity sensor)
    3. 光センサ API (ambient light sensor)
    4. バッテリー API
    5. オリエンテーション API
    6. 通知 API （Notification API）
    7. Web Socket（エクストララウンド）
    8. ???

配布物

  1. 各OS毎のadb-helper
  2. 各OS毎のFirefox OS 2.0シュミレータ―
  3. 初回環境構築マニュアル.pdf
  4. Firefox OS実機接続マニュアル.pdf
  5. ハンズオン内容.pdf
  6. サンプルプロジェクト
  7. Firefox 最新版インストーラー
  8. Windows用Flameドライバ(Windowsの方のみ)

環境構築

  1. ドライバーのインストール(Windows)
  2. Firefoxのインストール
  3. adb-helperのインストール
  4. Firefox OS 2.0シュミレータ―のインストール
  5. シミュレーターの起動確認
  6. 実機接続の確認

既に完了してる方は１０分ほどお待ちください。

Vibration

(バイブレーション)

manifast.webapp

最初なので、manifaset.webappについて簡単に説明

{
  // アプリケーション名
  "name": "Vibration",
  // アプリケーションの説明
  "description": "Web API Test",
  // アプリのタイプ、web, privileged,certifiedがある
  "type": "web",
  // アプリケーションで最初に読むファイル
  "launch_path": "/index.html",
  // 開発者情報
  "developer": {
    "name": "masap",
    "url": "https://github.com/masap/fxos_samples"
  },
  // アイコン、左に解像度、右にその解像度のファイルを指定する。
  "icons": {
    "128": "/style/icons/html5.png"
  }
}

javascript Code

// ボタンが押される時のイベント定義
document.getElementById('vibrationButton').onclick = function() {
  // バイブレーションが既に動いている場合止める
  navigator.vibrate(0);
  // 引数は配列で渡す
  // 配列ごとに「振動する」「振動をやめる」ミリ秒を交互に指定
  navigator.vibrate([1000, 500, 2000]);
};

Proximity Sensor

(近接センサー)

javascript Code

  // userproximity イベントの動き
  window.addEventListener('userproximity', function(e) {
    // 近接センサーに感知すると「near」、感知外になると「far」を表示する。
    document.getElementById('userProximity').innerHTML = e.near ? 'near' : 'far';
  });

  // deviceproximity イベントの動き
  window.addEventListener('deviceproximity', function(e) {
    // deviceproximityでは距離が取れるのでその値を常に表示
    document.getElementById('deviceProximity').innerHTML = e.value + ' (' + e.min + '-' + e.max + ')';
  });

Ambient Light Sensors

(照度センサー)

javascript Code

  // 光量の変化を常に伝える
  // 光量が変化したタイミングで動く
  window.addEventListener('devicelight', function(e) {
    // `e.value` には光量が入ってるので、画面に表示する。
    document.getElementById('deviceLight').innerHTML = e.value;
  });

Battery

(バッテリー)

javascript code

// バッテリーの量を確認する処理
function levelchange()
{
  var battery = navigator.battery;
  document.getElementById('batteryLevel').innerHTML =
    (battery.level * 100.0) + '%';
}
// 充電中かそうじゃないか判断する処理
function chargingchange()
{
  var battery = navigator.battery;
  document.getElementById('chargingchange').innerHTML =
    battery.charging ? 'connected' : 'disconnected';
}
  // バッテリーAPIを取得
  var battery = navigator.battery;
  // 上で作った処理をイベントに設定する。
  battery.addEventListener('levelchange', levelchange);
  battery.addEventListener('chargingchange', chargingchange);
  // 最初は明示的に動かす。
  levelchange();
  chargingchange();

Orientation

(傾き検知)

javascript code

// 傾きを検知したら動く処理
function orientationchange()
{
  document.getElementById('screenOrientation').innerHTML =
    window.screen.mozOrientation;
}
  var screen = window.screen;
  // 上で定義した「orientationchange」処理をイベントに設定する
  screen.onmozorientationchange = orientationchange;
  orientationchange();
  // 傾き検知をやめる
  document.getElementById('lockOrientationButton').onclick = function() {
    document.getElementById('lockState').innerHTML =
      screen.mozLockOrientation(screen.mozOrientation) ?
      'locked' : 'lock failed';
  };
  // 傾き検知を開始する
  document.getElementById('unlockOrientationButton').onclick = function() {
    screen.mozUnlockOrientation();
    document.getElementById('lockState').innerHTML = 'unlocked';
  };

（おまけ）アプリの傾きを固定できる。

manifest.webapp に以下を追加してみよう。

{
  "name": "Screen Orientation",
  "description": "Web API Test",
  "launch_path": "/index.html",
  "developer": {
    "name": "masap",
    "url": "https://github.com/masap/fxos_samples"
  },
  // この行を追加
  "orientation": [ "portrait-primary" ],
  "icons": {
    "128": "/style/icons/html5.png"
  }
}

Notification

(通知機能)

manifest.webapp

{
  "name": "Web Notification",
  "description": "Web API Test",
  "launch_path": "/index.html",
  "developer": {
    "name": "masap",
    "url": "https://github.com/masap/fxos_samples"
  },
  // 権限を設定する必要が有る。
  "permissions": {
    // desktop-notification使うよ！という宣言
    "desktop-notification":{}
  },
  "icons": {
    "128": "/style/icons/html5.png"
  }
}

javascript code (1/2)

  // 通知する許可があるかを確認します
  if (Notification && Notification.permission !== 'granted') {
    // 許可を得ていないので、許可を求めます
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }
    });
  }

javascript code (2/2)

    // 通知する許可がある場合に通知をします
    if (Notification.permission === 'granted') {
      var n = new Notification('Hello');
      return;
    }
    // まだ許可を得ていないので許可を求めます
    Notification.requestPermission(function (status) {
      if (Notification.permission !== status) {
        Notification.permission = status;
      }

      if (status === 'granted') {
        var n = new Notification('Hello');
      } else {
        alert('通知機能が許可されていません');
      }
    });

WebSocket & GPIO

javascript code (1/3)

  // ラズベリーパイマシンのipを指示する
  var wsUri = 'ws://[ラズパイのIP]:8000/';
  var output = document.getElementById('output');
  var slider = document.getElementById('slider');
  var brightness = document.getElementById('brightness');
  // WebSocketを定義する
  var websocket = new WebSocket(wsUri);

javascript code (2/3)

  slider.value = 0.0;
  slider.addEventListener('change', function() {
    // スライダーの値が変化すると、websocketを使ってサーバに情報を送る
    brightness.innerHTML = slider.value;
    // 指示する内容はgpioのportとbrightness(スライダーの値)
    websocket.send('{ "port": "18", "brightness": "' + slider.value + '"}');
  });
  // ラズベリーパイと接続が出来たときの処理
  websocket.addEventListener('open', function(evt) {
    output.innerHTML = 'CONNECTED';
  });
  // ラズベリーパイと接続が切れたときの処理
  websocket.addEventListener('close', function(evt) {
    output.innerHTML = 'DISCONNECTED';
  });
  // ラズベリーパイに指示を出したときの処理
  websocket.addEventListener('message', function(evt) {
    output.innerHTML = evt.data;
  });

javascript code (3/3)

  //エラーが起こったときの処理
  websocket.addEventListener('error', function(evt) {
    var str = '';
    for (var i in evt) {
      str += i + '=' + evt[i] + '<br/>';
    }

    for (var i in evt.target) {
      str += i + '=' + evt.target[i] + '<br/>';
    }
    output.innerHTML = str;
  });
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment