読者です 読者をやめる 読者になる 読者になる

自習室

こもります

16bit 浮動小数点のテクスチャできれいにブレンドを行う

はじめに

前回の記事では、WebGL(Three.js)でFBO ping-pongすることで、テクスチャのブレンディングを行い、それによって映像中の動く物体を消す処理をやってみました。

izmiz.hateblo.jp

しかし、問題がありました。

今回の手法だと、背景に対してコントラストが高い動体は、焼きついたように長時間残ることもあります。

f:id:AMANE:20150420184533p:plain

前記事時点では、上の写真のよう焼き付きが起きてしまっていました。手法はあっているはずなのになんでこうなるのか、解明できず気持ち悪かったので、続けて検討したところ、間違いに気がついたので、修正して投稿します。

手法の検証

以下の式で毎回のカメラ画像を足し合わせていくと、動く物は消える(またはブラーがかかる)というのが、前回の記事の内容でした。

 {
Y(n) = a * X(n) + (1.0 - a) * Y(n-1)
}

正しく出来ている場合のシミュレーション

まず、Excelを使って、この計算で狙ったとおりの効果が出るかを確認します。

簡単のためにグレースケールと言うことにして、はじめ入力Xが50の明るさだったところに、10フレームだけ200の明るさが入って、その後また50に戻る、というものです。フィルタの係数はここでは試しにa = 0.1としてみます。(新しいフレームが0.1の重さで足される)

入力X 出力Y
50 50
50 50
50 50
50 50
50 50
200 65
200 78.5
200 90.65
200 101.585
200 111.4265
200 120.28385
200 128.255465
200 135.4299185
200 141.8869267
200 147.698234
50 137.9284106
50 129.1355695
50 121.2220126
50 114.0998113
50 107.6898302
50 101.9208472
50 96.72876245
50 92.05588621
50 87.85029758
50 84.06526783
50 80.65874104
50 77.59286694
50 74.83358025
50 72.35022222
50 70.1152
50 68.10368
50 66.293312
50 64.6639808
50 63.19758272
50 61.87782445
50 60.690042
50 59.6210378
50 58.65893402
50 57.79304062
50 57.01373656
50 56.3123629
50 55.68112661
50 55.11301395
50 54.60171256
50 54.1415413
50 53.72738717
50 53.35464845
50 53.01918361
50 52.71726525
50 52.44553872
50 52.20098485
50 51.98088637
50 51.78279773
50 51.60451796
50 51.44406616
50 51.29965954
50 51.16969359
50 51.05272423
50 50.94745181
50 50.85270663
50 50.76743596
50 50.69069237
50 50.62162313
50 50.55946082
50 50.50351474

200という明るい色が入った後はしばらく画面が明るくなりますが、その後次第にもとの50に戻っていく様子がわかると思います。本当にこうなっていれば、焼き付きのような状態にはならないはずです。

GLSLでの小数丸め

ここからあーだこーだと考えて、はっと、小数の扱いが間違っていることに気がつきました。GLSLのテクスチャは、0-255 の8bit 整数で色が表されますので、 GLSLのmix関数を使って色をブレンドした結果、計算結果が小数だったとしても、最終的に画面には当然整数の値で色が書き込まれます。つまり、どこかで小数の計算結果を整数に直しています。

今回使った THREE.BlendShader では、mix 関数を使って、二枚のテクスチャを混色します。

gl_FragColor = opacity * mix( texel1, texel2, mixRatio );

ここで float mixRatio にfloatの値を入れたとき、計算結果は小数になっているはずですが、 gl_FragColorはもちろん整数です。おそらく、代入の際に四捨五入なり切り捨てなりが行われているはずです。

試しに、毎回計算結果の色が四捨五入されていたとしたら、同じシミュレーションをすると以下の様になります

Excelの計算式はこんな感じ

{
Y(n) = ROUND(a * X(n) + (1.0 - a) * Y(n-1) , 0)
}

入力X 出力Y
50 50
50 50
50 50
50 50
50 50
200 65
200 79
200 91
200 102
200 112
200 121
200 129
200 136
200 142
200 148
50 138
50 129
50 121
50 114
50 108
50 102
50 97
50 92
50 88
50 84
50 81
50 78
50 75
50 73
50 71
50 69
50 67
50 65
50 64
50 63
50 62
50 61
50 60
50 59
50 58
50 57
50 56
50 55
50 55
50 55
50 55
50 55
50 55

途中までは50に戻ろうとしますが、55で下げ止まっています。前回の値が55で今回50が入力されたとき、

 {0.1 * 50 + (1.0 - 0.1) * 55 = 54.5}
 {round(54.5) = 55}

と言うかんじで、四捨五入した結果、前と同じ55になってしまい、これは何回やっても同じだからです。

これが、色の焼き付きの正体だと思われます。

このシミュレーションをしたExcelのファイルをこちらにあげておきます

修正

さっきは {a = 0.1} でやりましたが、blendの係数を下げていくと、より焼き付きが顕著になります。しかし、もともと 長時間の平均画像を求めることで、動体を消す が目的なので、blendの係数は極力下げたいです。

小数の丸めによってblendが途中で止まってしまわないようにするには、Shader内のテクスチャの色計算で小数が使える様にすることが必要です。

浮動小数点テクスチャ

そういえば、いつもお世話になっている wgld.org 様に、このような記事が上がっていました

wgld.org

この記事によると、Three.js も準拠している WebGL 1.0 では、浮動小数点テクスチャはエクステンション扱いですが利用可能のようです。Three.jsで使っているサンプルがないか探してみたところ、例のFBOサンプルで使っていました。

このサンプルに倣って、WebGLRenderTarget を浮動小数点テクスチャ化します

やってみる

まず、Three の rendererからglのコンテキストを取得して、浮動小数点テクスチャのエクステンションを有効化します

gl = renderer.getContext();

if ( !gl.getExtension( "OES_texture_float" )) {
  alert( "No OES_texture_float support for float textures!" );
  return;
}

つぎに、毎フレームテクスチャとして保存される WebGLRenderTarget を THREE.FloatType 指定します

  rt1 = new THREE.WebGLRenderTarget( vidWidth, vidHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat, type: THREE.FloatType }  );
  rt2 = new THREE.WebGLRenderTarget( vidWidth, vidHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat, type: THREE.FloatType }  )

以上でOKです。THREE.BlendShaderは既存のままで大丈夫です。

(もっとやることあるかと思ったので拍子抜けしました)

これで、FBO ping-pong で毎回更新されるテクスチャは16bitで計算されるので、小さい係数でblendを行っても四捨五入の際に丸められたりせず、ちゃんと反映されます。

完成品

前回の失敗作

今回修正した物

動体がちゃんと消えて、変な焼き付きがなくなったことがわかると思います。

最後に

前回中途半端な記事を書いてしまい気持ち悪かったのですが、解決してスッキリしました。

また、浮動小数点テクスチャが有効に使えるシーンがわかったのも収穫でした。

Three.jsのオフスクリーンレンダリングとping-pongで、リアルタイム動体除去を行う

はじめに

f:id:AMANE:20150420184058p:plain

前回に続き、ブラウザ内だけで画像処理的なことをしよう、というチャレンジです。今回は動体除去というか、モーションブラーというか、画像の時間平均処理をしてみます。

上の写真は、割と短時間の平均画像です。動いているものが透けているのがわかると思います。画像の平均処理をもっと長時間で行うと、ほぼ動体が見えなくなります。アルゴリズムはあとから説明します。

OpenCVC++で使うと、普通にMatとかで前回のフレームを保存しておいたり差分を取ったりとお手軽に出来ますが、おなじことをJavaScriptでやろうとすると、必要な枚数画像を展開して、ピクセルを全走査するなど、かなりヘビーな感じになります。今回はブラウザ内で完結させてみるのが目的なので、WebGLのシェーダを使ってみます。

完成品

完成品はこちらで確認出来ます。ページを開いたら、カメラ利用に許可を与えて下さい。上部のバーで除去具合を調整出来ます。ゼロにするとリアルタイムの動画をそのまま出しますが、大きくしていくと、だんだん動体が薄くなっていくのがわかると思います。

動作確認は以下の環境で行っています。

動体除去のアルゴリズム

FIRフィルタによる時間平均処理

動画像を時間にわたって足し合わせて平均を取ると、動かないものは残り、動くものは薄ーくなります。これが基本。FIRフィルタ的な感じ。動画像のローパスフィルタですね。

f:id:AMANE:20150420154518p:plain

式で書くとこんな感じ。 X(n) がカメラから得られる最新フレームの画像で、 X(n-1) が一個前のカメラフレーム。 Y(n) が今回表示される絵。

 {
Y(n) = a_{n}X(n) + a_{n-1}X(n-1) + a_{n-2}X(n-2)+\ldots
}

 {
\sum_{k=0}^{N}a_{n-k} = 1.0
}

係数の合計が1になる様にします。1より小さいと全体の画像がグレイがかって薄くなり、1より大きいと、白飛びした画像になります。

この手法でちゃんと動体を消すにはタップ(データを記憶して、演算をする)を多くしなければなりません。ブラウザに大量のframebuffer objectを確保しなければならなくなるので、リーズナブルではありません。

IIRフィルタ(的)な時間平均処理

上記のような問題は、画像処理だけでは無く電気回路におけるノイズ取りなどでも似たようなことがあるようで、解決法としてIIRという手法があります。

大量のタップを用意する代わりに、過去のフィルタ結果をその後も使い回し続けることで、バッファとしてはひとつか少ない数しか用意しないけど、常に平均画像を求め続けているような計算になります。

最もシンプルにバッファ一個だけでやる場合、式で書くとこんな感じ。 X(n) がカメラから得られる最新フレームの画像で、Y(n)が、今回表示される絵。Y(n-1) が、前回表示された絵。

 {
Y(n) = a * X(n) + (1.0 - a) * Y(n-1)
}

Y(n-1) ももちろん上と同じ式で一回前のカメラフレームが係数をかけて足されて出来た画像でY(n-2)も…と続くので、過去のフレームが秘伝のたれのように残りながら足され続け、平均が求められている、という感じです。一回前の描画内容を覚えておくだけで良いので、コストが低いのがポイントです。

実装

上記IIRフィルタ的処理をウェブカムに対してやってみます。

手順としては以下の様な感じになります

  • 新しいカメラ入力と前回の表示内容をテクスチャにしたもの★をブレンドする
  • ブレンド結果をオフスクリーンレンダリングして、テクスチャ★化しておく
  • ブレンド結果を画面にレンダリングする

ここで、★がついている二つの画像が、メモリ上で同一のものである、と言うことが味噌になります。

Three.js でウェブカム画像を利用する

前記事をご参照下さい -> WebRTCの動画にThree.jsのポストプロセスでエフェクトをかける - 自習室

オフスクリーンレンダリング

THREE.WebGLRenderTarget に対してシーンを書き込めば、その画像をテクスチャとして利用する事が出来ます。オフスクリーンレンダリングについては、下記記事様が勉強になります

今回の例では、ブレンドした結果を WebGLRenderTarget に書き込んでいます。

var rt1 = new THREE.WebGLRenderTarget( vidWidth, vidHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }  );

// 中略
// ここで、最新のカメラ画像とまえのフレームの描画結果をブレンドした新しいテクスチャを作り、
// それをプレーンに貼って、シーン内に配置する

renderer.render(scene, camera, rt1); // 別途用意した、rt1というレンダーターゲット(フレームバッファを含む) に書き出す
renderer.render(scene, camera);      // 「標準フレームバッファ」つまり画面に書き出される。

ブレンド

Three.js リポジトリexamples/js/shaders に、多数のシェーダのサンプルが含まれています。今回はこの中から、 BlendShader.js を利用します。

videoMaterial = new THREE.ShaderMaterial(THREE.BlendShader);
videoMaterial.uniforms['tDiffuse1'].value = videoTexture; // カメラ画像で毎フレーム更新されるTextureオブジェクト
videoMaterial.uniforms['tDiffuse2'].value = null;         // ブレンドされるもの。初めは無し
videoMaterial.uniforms['mixRatio'].value = 0.0;           // y = x1 * (1-mixRatio) + x2 * mixRatio となります

var planeGeometry = new THREE.PlaneBufferGeometry( vidWidth, vidHeight, 1, 1 );
var plane = new THREE.Mesh( planeGeometry, videoMaterial );  // ブレンドした結果の絵をテクスチャとしてプレーンに描き込む
plane.position.z = 0;

scene.add(plane);  // シーン内に配置する

ちなみに、Three.js における ShaderMaterialの扱いかたについては、下記サイトが勉強になります。

起動時は、ブレンドする2枚目のテクスチャがnullになっていますが、mixRatioも0にしてあるので、1枚目のvideoTextureがそのまま出ることになります。2枚目のテクスチャに適切に画像を当てて、mixRatioを動かすと、ブレンドされます。

FBO ping-pong

IIR的に画像の平均を求め続けるには、前回の描画結果に今回のカメラ入力をブレンドして出力する必要があるのですが、WebGLでは、Aというテクスチャを使ってシーンを作ったあと、Aにrenderする、と言うのは出来ません。メモリに書き込むにつれて絵が変わる、なんてことが起きてしまうから、そりゃそうだ、という感じなのですが。

WebGLRenderTargetを2つ用意し、交互に利用する事で、それを回避します。

var rt1, rt2;
var rtSwitch = true;

// 中略

// 交互に利用する2つの RenderTarget を用意する。
rt1 = new THREE.WebGLRenderTarget( vidWidth, vidHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }  );
rt2 = new THREE.WebGLRenderTarget( vidWidth, vidHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBFormat }  );

毎フレーム、BlendShaderで利用するテクスチャと、オフスクリーンレンダリング対象のレンダーターゲットを切り替えていきます。

if(rtSwitch) renderer.render(scene, camera, rt2); // (フラグonの時)rt2に書き込む
else renderer.render(scene, camera, rt1);         // (フラグoffの時)rt1に書き込む
renderer.render(scene, camera);                   // 同じ内容を画面にも書き出す

if(rtSwitch) videoMaterial.uniforms['tDiffuse2'].value = rt2; // (フラグonの時)次のターンでは、rt2の内容をブレンドに使う
else videoMaterial.uniforms['tDiffuse2'].value = rt1;         // (フラグoffの時)次のターンでは、rt1の内容をブレンドに使う

rtSwitch = !rtSwitch;  // フラグを切り替える

ちなみに、これをミスって、シーン内に使っているテクスチャに書き込もうとすると、以下の様に怒られます

[.WebGLRenderingContext-07E445A0]GL ERROR :GL_INVALID_OPERATION : glDrawElements: Source and destination textures of the draw are the same.

さいごに

改めて、完成品はこちらです

今回の手法だと、背景に対してコントラストが高い動体は、焼きついたように長時間残ることもあります。たとえば下のような例。ラズパイのマークが、白い壁に染みついちゃってます(笑)

f:id:AMANE:20150420184533p:plain

今回の手法は、厳密に背景と動体を分離して消す、というよりは、「動体をうっすらとぼかすことでプライバシーを守りつつ、背景はほぼリアルタイムのものを撮影する」といった用途にむいていると思います。

焼き付きを抑えるには、「動体がない」瞬間を検知して、テクスチャを全部書き換えちゃう、とかすると良いかと思います。

改善案募集

もちっと綺麗に動体を消せる技術ご存じの方、是非とも教えていただきたいです!

(追記) 改善しました

焼き付きのようになってしまう問題を改善しました。追加で投稿していますので、ご参照下さい。

izmiz.hateblo.jp

GPGPU的な用法

FBOのping-pongは、こういった画像の保存という単純な用途以外にも、さまざまな可能性があります。たとえば、大量の点群の

  • 速度
  • 座標
  • 質量

などの「色」ではない情報をテクスチャ風の配列群に仕立ててシェーダに渡し、fragment shaderでガッと計算をした後に、それらを再度オフスクリーンレンダリングという形でテクスチャ的データに書き出して、次のフレームでも利用する、という用法があります。Three.jsの公式サンプルにも作例があります

シェーダでの計算結果を次のフレームで活用するために、FBO ping-pong が使われています。かなり複雑ですが、GPUの計算リソースを活用出来るので、ブラウザでも上記サンプルのようになにやらすごいことが出来ます

WebRTCの動画にThree.jsのポストプロセスでエフェクトをかける

やりたいこと

f:id:AMANE:20150414222133p:plain

このブログで何度かにわたって、ブラウザとopenFrameworksを連携させ、oFで加工した映像をWebRTCで扱う、というシリーズをやっていますが、今回は、映像の加工もブラウザ内で完結させてみます。

CSS でもいろいろ出来る

ブラーや明るさ調整は、それぞれ -webkit-filter: blur(100px)-webkit-filter: brightness(0.1) など css としてブラウザで実装されており、非常に高速に動作します。*1

これ以外の、もう少し自分好みのことをしようとしたときも、WebGL の fragment shader を使うことで、やはりブラウザ内で完結させることが可能になります。グリッチとか、ドットとか、歪ませたりとか、そういうの。

そういえば、CSS Shader とかいうのもあったような気もしますが、遠い過去の話ですね。

完成品

こちらで動いています。PCにウェブカムをつないだ状態でこのページにアクセスし、カメラの利用に許可を与えて下さい。

環境

素のWebGLを自力で書くのはしんどいので、Three.js を使います。

動作確認は、以下の環境で行っています。

参考にさせていただいたサイト

特に、一つ目のサイトの、 Bad TV Shader for Three.js と言うサンプルのコードを見てみると、既存の動画ファイルに対してでは無くウェブカムに対してエフェクトを掛けるコードが、コメントアウトされた状態で書かれています。 今回の記事は、ほぼこの内容の焼き直しになります。

やってみる

ポイントだけ追っていきます。

ウェブカムの映像を取り込む

よくあるWebRTCのサンプルのように、 navigator.getUserMedia でストリームを取得し、それを <video> タグに流し込みます。このとき、 <video> タグそのもの(無加工の映像) は使わないので、 style="display:none" しておきます。

<!-- 表示されないのでどこにあっても良い -->
<video id="video" style="display:none"></video>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia;
window.URL = window.URL || window.webkitURL;

video = document.getElementById('video');
video.autoplay = true;  // これを外すと、スタート時の映像で停止します

var option = {
  video: { mandatory:{ minWidth: 1280 } }, // firefoxでは無効
  audio: false
}
// var option = {video: true};

navigator.getUserMedia(option,
  function(stream) { // for success case
    video.src = window.URL.createObjectURL(stream);  // videoタグにストリームを流し込む
  },
  function(err) { // for error case
    console.log(err);
  }
);

// カメラ画像のサイズを記録しておく。後で使う。
video.addEventListener('loadeddata', function() {
  // Chromeは問題無いが、Firefoxだと、'loadeddata' イベントでvideoWidthらが埋まっていないので、値が得られるまで待機
  (function getVideoResolution() {
    vidWidth = video.videoWidth;
    vidHeight = video.videoHeight;
    if(vidWidth != 0) {
      console.log("video width: " + vidWidth + " height: " + vidHeight);
      setup(); // カメラの映像が流れ始めたら、Three.js内の準備を始める
    } else {
      setTimeout(getVideoResolution, 250);
    }
  })();
});

<video> の映像を Three.js のテクスチャにし、平面なメッシュに貼り付ける

videoTexture = new THREE.Texture(video);  // なんとこれだけでテクスチャとして使える!
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;
videoMaterial = new THREE.MeshBasicMaterial({  // マテリアルにする。カメラ画像をそのまま使いたいので、ライティング等は無し。
  map: videoTexture
});

var planeGeometry = new THREE.PlaneGeometry( vidWidth, vidHeight, 1, 1 );
var plane = new THREE.Mesh( planeGeometry, videoMaterial );  // 平面に書き込む
plane.position.z = 0;
scene.add( plane );  // シーンに追加

Orthographic なカメラ

パースペクティブなカメラを使ってももちろん良いですが、オルソーなカメラを使うことで、簡単に全画面ぴったりに上記カメラ画像平面を貼り付けることが出来ます。

camera = new THREE.OrthographicCamera(vidWidth/-2, vidWidth/2, vidHeight/2, vidHeight/-2, 1, 2000);
camera.position.z = 500;  // カメラの near/far クリッピングと合わせて設定する

繰り返し描画する

まずは動画にエフェクトを掛けずに、そのまま描画してみます。

HTML の <video> タグのDOMが、描画出来る状態になっているか(つまり、新しいフレームが来ているか)を調べ、その状態になっていたら、 videoTexture を更新するようにしています。

function render() {
  if(video.readyState === video.HAVE_ENOUGH_DATA) {
    if(videoTexture) videoTexture.needsUpdate = true;  // ここがポイント
  }
  // loop
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

取りあえずこれで、ただの <video> タグではなく、 Three.js のつくる <canvas> 内にmeshに貼られた画像として描画されます

EffectComposer

Three.js 内で扱えるようになってしまえばこっちのものです。Three.js で作り上げたシーンをカメラで見てレンダリングした結果に対しポストプロセスをかけていきます。

Three.js は標準でシャレーなポスプロシェーダをたくさん備えています。

公式サンプルの postprocessing/ ディレクトリもおもしろいです

EffectComposerの使い方はこちらで簡潔にまとめられています

自分のものにもかけてみる

DotShaderと RGBShift をかけてみます。

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

var dotScreenEffect = new THREE.ShaderPass( THREE.DotScreenShader );
dotScreenEffect.uniforms[ 'scale' ].value = 2;
composer.addPass( dotScreenEffect );

var rgbShiftEffect = new THREE.ShaderPass( THREE.RGBShiftShader );
rgbShiftEffect.uniforms[ 'amount' ].value = 0.003;
composer.addPass(rgbShiftEffect);

rgbShiftEffect.renderToScreen = true;

// 中略
// 繰り返し描画するルーチンの中

// renderer.render(scene, camera);
composer.render();  // rendererではなく、エフェクトのチェーン後のcomposerが画面に描き出す

本来、ブラウザ(キャンバス)が書き込み先である renderer に対し、 EffectComposer オブジェクトに対して書き込め、と指示し、そこから EffectComposer がいくつかのエフェクトを経由した後、.renderToScreen 指定したところで画面に書き出します。

完成

動作しているものへのリンクを再掲します

最後に

今回はローカルのウェブカムの画像に対してエフェクトを掛けましたが、 対象は <video> タグに描かれている内容でさえあれば良いので、もちろん WebRTC で「受信した」 映像に対してエフェクトを掛けることも出来ます。これを使うことで、さまざまな画像エフェクトが出来るビデオチャットシステムも作ることが出来るようになります。

*1:webkitのコードを読んでみたところ、OpenCLで高速化しているようです https://trac.webkit.org/browser/trunk/Source/WebCore/platform/graphics/filters/FEGaussianBlur.cpp

ofxLibWebsockets で oF とウェブブラウザの間でお話しする

はじめに

相変わらず、ブラウザとopenFrameworks 間で共同作業させるシリーズです。

以前こんなものを書きました。

これらの記事では、ブラウザとoF間にNode.jsのプログラムを挟み、socket.io と OSC を相互に変換することで、データのやりとりをしていました。もともと以下の理由でそういう構成にしていました。

  • ブラウザとnode.js間はsocket.ioでの通信が楽
  • node.jsとoF間では、OSCでの通信が楽
  • それを単につなげればよいので楽

このときの構成は下図のようになります

f:id:AMANE:20150407143947p:plain

しかしこの結果

  • 機能上はほぼ意味の無い node.js の変換コードを書かなければいけない。実装コスト増大

という問題も発生しました。

  • oFでやろうとしていることを別のプログラムでシミュレートする
  • 複数のブラウザやoFのプログラムとやりとりをする

などのケースを想定すると多段構成にする意味もありますが、一対一で通信をするだけなら、ほぼ意味はありません。従って、ブラウザとoFで直接お話しをさせたいです。

いろいろ試した結果、以下の構成が可能であることがわかりました。今回はその方法についてまとめます。

f:id:AMANE:20150407143959p:plain

非バイナリデータのみ

WebSocketでバイナリのやりとりも出来る筈ですが、本記事では非バイナリデータ…つまり、数値、文字、bool とそれらをオブジェクト化した物などをやりとりします。いずれバイナリも調査します。

この記事を追うとできるもの

oFの画面でマウスを動かすと、その座標をJSONとしてラップし、WebSocketを介してブラウザに送ります。ブラウザではJSONを復元して、オブジェクトとしてコンソールに出力します。

f:id:AMANE:20150408215316j:plain

完成品はこちらにアップしています

github.com

ofxLibWebsockets の基本

addon単体としてのドキュメントがほとんど無いため、使いこなしに少々苦労しました。サンプルを読んで探していくスタイル。

プロジェクトへの追加

oFプロジェクトへの追加の方法は、ofxLibWebsockets のgithubにまとめられています。こちらを参考に追加もしくはoFプロジェクトの作成を行ってください。

自分はWindows(VS2012) で試しているのですが、配布されている ofxLibWebsockets のオプションに間違いを見つけました。以下修正してください。

プロジェクトプロパティ > リンカー > 全般 > 追加のライブラリディレクトリ で、構成が Debug の際に、

..\..\..\addons\ofxLibwebsockets\libs\libwebsockets\lib\win32\Release` となっているものを
..\..\..\addons\ofxLibwebsockets\libs\libwebsockets\lib\win32\Debug に修正。 

oF側をサーバとしてセットアップ

ofxLibWebsockets のサンプル "example_server_echo" を参考に。最低限の構成は以下、だと思います

void ofApp::setup(){
    ofxLibwebsockets::ServerOptions options = ofxLibwebsockets::defaultServerOptions();
    options.port = 9092;
    options.bUseSSL = false; // you'll have to manually accept this self-signed cert if 'true'!
    bSetup = server.setup( options );

    // this adds your app as a listener for the server
    server.addListener(this);
}

メッセージの受け取り

こちらも、ofxLibWebsockets のサンプル "example_server_echo" を参考に。ただ受け取ったメッセージを標準出力します。

void ofApp::onMessage( ofxLibwebsockets::Event& args ){
    cout << "got message " << args.message << endl;
}

試しにブラウザから送ってみる

先に "example_server_echo" を起動してから、Chromeで適当なページを開き、developer tool のコンソール上で以下の様に順に打ち込みます

ws = new WebSocket('ws://localhost:9092'); // 接続
ws.send('hoge'); // 文字列を送る

一行目をenterした時点で、oFのコンソールには "new connection open" と表示されます。
更に二行目をenterすると、oFのコンソールに "got message hoge" を表示されます。

JSON形式でやりとりしてみる

ブラウザ側から送ってくるデータは、それが元々オブジェクトであった場合も、message = JSON.stringify(data) したのちに送り出し、ofxLibWebsockets で受け取ると、jsonとして復元されます。

逆に、ブラウザ側でJSON形式で受け取りたい場合は、oF側でJSON形式でまとめ上げたものを文字列として送り出し、それをdata = JSON.parse(message) することで、jsonとして復元されます。

図にまとめると下のようになります。

f:id:AMANE:20150407162026p:plain

ofxLibWebsockets は内部でjsoncpp というライブラリを利用しているので、json <-> 文字列 の変換が出来ます。新しいjson形式のデータ作成も可能です。

ブラウザからobjectデータを送り出し、oFで受け取るケース

// 送出側 (js)
var ws = new WebSocket('ws://localhost:9092/');
var pos = {'x':0, 'y':100};
var message = JSON.stringify(pos);
ws.send(message);
// 受け取り側 (cpp)
void ofApp::onMessage( ofxLibwebsockets::Event& args ){
    // args.messageには、 js側で message = JSON.stringify(pos) として作られた文字列"message" が入っている
    cout<<"got message "<<args.message<<endl;
    
    // 送られてきた args.message がjsonにパースできる形式である場合、
    // 自動的にパースされ args.json に Json::Value 形式で収められる
    if ( !args.json.isNull() ){
        cout << "New message: " + args.json.toStyledString() + " from " + args.conn.getClientName();
    }
}

oFでJSON形式にラップしたものをブラウザで受け取るケース

マウスを動かすと、最新の座標をWebSocketで送り出す、というもの

// 送出側 (cpp)
void ofApp::mouseMoved(int x, int y ){
    Json::FastWriter    writer;
    Json::Value     value;
    value["x"] = x;
    value["y"] = y;
    std::string message =  writer.write(value);
    server.send(message);
    cout << "mouseMoved : " << message << endl;
}
// 受け取り側 (js)
var ws = new WebSocket('ws://localhost:9092/');
ws.onmessage = function(event) {
  var data = JSON.parse(event.data); //event.dataは文字列。これをJSON形式にパース
  console.log(data);
}

JSONCPP の使い方

以下のページなどを参考にしました

スピードを上げる

ofxLibWebsocket (libwebsocket)では、WebSocketの送り出し受け取りを、専用のスレッドを立てて行っています。一つの処理をコンテキストとしてまとめ、それをキューに積んでいって、前から順に処理していきます。その辺りはこちらのページで勉強させて頂きました。

ofxLibWebsocketでは、そのスレッド処理に、何故か標準で 50ms の待機時間が挿入されているため、毎秒 20 回までしか通信の処理が出来ません。マウスの動きを伝えるには遅すぎます。ここを変更します。

// addons/ofxLibwebsockets/ofxLibWebsockets/Server.cpp 19行目
    Server::Server(){
        context = NULL;
        waitMillis = 10; //★ここ 50 -> 10 など。
        reactors.push_back(this);
        
        defaultOptions = defaultServerOptions();
    }

これで、最大100回/秒 通信できるようになります。

waitMillis を変更するための public な関数をServer.cpp か 親クラスの Reactor.cpp に追加しても良いかもしれません。

さいごに

oFで画像を作ってブラウザ内で利用する、と言ったことも出来るかもしれないので、調査してみます。

dropmark のビデオプレイリストの再生をループさせるChrome Extension を作った

動機

こんなことがしたい、と思いました

  • 余ってるPC + ディスプレイで、様々な動画を垂れ流しにしたい(会社でシェアしたい)
  • 極力簡単にプレイリストを管理したい
  • YouTube と Vimeo のリンクを貼るだけでOKみたいな感じがベスト
  • 全画面再生
  • ループ

イケてる動画をみんなであつめてそれを垂れ流しておくことで、ふとした瞬間に素敵な動画に出会えるたら良いなーというのが狙いです。

調査

公式

Vimeo だと、Likesなり Watch Laterなり Channel なりを、"Watch in Couch Mode" で再生開始すると、自動的に全画面 + ループになります。

f:id:AMANE:20150301201100p:plain

YouTubeだと、お気に入りなりプレイリストに、「繰り返す」ボタンがあります。これをONにしてから全画面再生すれば良い感じです。

f:id:AMANE:20150301201113p:plain

それぞれ良いのですが、会社で色んな人に登録してもらうとすると、両方のサイトにアップロードされている動画を扱いたくなります。

おしいやつ

Tumblrで動画を集めておくことはもちろん出来ますが、自動で再生していく機能はありません。

同じようなものがないかなーと探していたところ、dropmark というサービスの存在を知りました。

dropmark

自分も今回の目的以外で使ったことがないのでよくわかっていないのですが、いわゆるブックマークサービスです。その中の特徴的な機能として、ビデオのリンクを貼っておくと自動で再生してくれる機能、と言うのがありました。この記事で知りました

これで解決!と思ったのですが、ひじょーに惜しいことに、リストの最後まで行くと、そこで一覧画面に戻ってしまう仕様です。

そこで、Chrome Extensionを使って、ウェブサービスをハックしてみることにしました。

完成品と使い方

ぎっはぶ

ここに上げてあります

使い方

  • コードをPC内のどこかにおく
  • chromeの設定 > 拡張機能 > パッケージ化されていない拡張機能を読みこむ
  • フォルダを指定して開く

現状のコードは、すべてのウェブサイトに対して処理をしてしまうような物にになっているので、dropmarkを全画面で再生し続ける専用のPCを用意できる場合は良いのですが、もしご自身のPCで一時的に試してみたい、と言う場合は、利用しない場合は、拡張機能のリスト中で「有効」のチェックをはずしておくと良いかと思います。

f:id:AMANE:20150301205851p:plain

ついでに

YouTubeの再生を極力高画質で行いたいので、別途それ用のChrome-extension を入れます。この手の物はたくさんあるのですが、こいつはちゃんと動いていました

Vimeoの方は、ある程度大きくプレイヤーが開いたら、自動的に高画質になるので心配ありません。

設計(?)

主に、以下の三つのことをやっています。

  1. プレイリストの最後のビデオになったかの判定
  2. プレイリストの先頭のリンクを取得する
  3. 最後のビデオの次に、プレイリストの先頭のビデオを再生するようにハック

1. プレイリストの最後のビデオになったかの判定

これは、画面中の "Next Item" ボタンのハイパーリンクを見ることで判別出来ます。動画を指すURLではなく、動画一覧を指すURLだった場合は該当です。

f:id:AMANE:20150301202152p:plain

2. プレイリストの先頭のリンクを取得する

プレイリストのHTMLの中身を見て動画の一個目を指すURLを取得すれば良いのですが、実際は「最後の動画を見ている最中に」異なるページのHTMLを参照することになるので、少しトリッキーなことをします。

  1. jQuery<div> 要素を作ってその中にプレイリストのHTMLを丸っと挿入する
  2. その中から該当するHTML要素を見つける
$.get(playlisturl, function(data) {
  var playlisthtml = $('<div>').html(data);

jQueryのgetコマンドで動画一覧のページのHTMLを引っこ抜いてきて、それを <div> タグの中に展開することで、jQueryで解析可能なものにします。ここでこの <div>.append とかしなければ、その要素は表示されたりはしません。あくまでHTMLデータの中身を解析するためだけに一時的に存在するものになります。

プレイリストのhtmlを取得できたら、その中から、お目当ての「先頭の動画」のURLを見つけてきます

var firsturl = playlisthtml.find('.item-preview:first-child').attr('href');

3. 最後のビデオの次に、プレイリストの先頭のビデオを再生するようにハック

1.で、最後のビデオか判定するのに使った "Next Item" の href に、先ほど見つけてきた先頭動画のURLを代入すれば完了です。

まじで?

「えっ…?」って感じでした。次の動画への飛ばし方はちゃんと本家のjs読めばわかるかも知らん、気合い入れて解析してやろう!と意気込んで始めた直後、まぁそんなわけはあるまいと思いつつもものは試しでURL書き換えてやろーと適当こいたところ、出来てしまった、という感じです。結果オーライ、簡単で良かった。やったー

さいごに

と、説明しましたとおり、dropmarkの現状の実装を、偶然も織り交ぜつつ勝手にハックした感じですので、動作保証など一切できません。万が一ご入り用の方がいらっしゃった場合は十分ご理解の上ご利用ください。

3時間くらいで出来て良かったです。会社で運用してみます。

MOVERIOのお出かけ中利用シーン難しさランキング

前説

engadget さんにこんな記事があって

japanese.engadget.com

おっ、と思って脊髄反射で申し込んだら、当選したので、行ってきました。そのときのイベントレポート記事が上がっております。

写真のどこかに、私も写ってますね。私もEngadgetさんの記事が上がる前にレポートを書いておいたらリンクを貼ってもらえたはずでしたので、悔やまれます。

そう、そういうわけで EPSON 様から MOVERIO BT-200AV をお借りしてきました。

半年貸してやるから、7本ブログ書け

とのことです。全力で楽しんでいきましょう。開発にもトライしてみる予定です。

f:id:AMANE:20150317195651j:plain

うまく撮れました。

MOVERIOについて知る

MOVERIOは、公式には、以下の様なコンセプトの商品のようです。以下公式サイトから抜粋

  • 大画面を楽しむ
  • いつでもどこでもパーソナルシアター
  • レコーダーやスマートフォンの映像を楽しむ
  • 高画質・高音質のモバイルビューアー
  • 誰にも邪魔されず、自分だけで楽しめる
  • 好きな姿勢で、好きな場所で
  • 飲食しながらでも楽しめる

などなど。要するに、映像を見る装置です。私もBT-200 を使ってアニメを数本見てみましたが、思ったよりは普通に見られます。

一方で、こうもうたわれています。

  • Androidを採用し、カメラ、GPS機能、各種センサーを搭載。機能を活用した対応アプリで楽しみ方が広がります。
  • モベリオ用のオリジナルアプリが作れる
  • Webブラウジングをモベリオで楽しむ

Androidなので、この眼鏡スタイルを活かしたアプリ体験はいろいろ探索していけそうです。自分もいくつか作ってみたいアイデアを考え中ですので、このブログで報告できたら良いなと思います。

今回は 開発ネタは置いておいて 、メインの「映像を見る」機能についてちょっと考えてみます。どんな時に使えると嬉しいか。そして、それは実際可能なのか。

MOVERIOのお出かけ中利用シーン難しさランキング

考えてみました。難しそうだなーと思った順。

  1. 通勤電車
  2. ショッピングモール
  3. ディズニーランド
  4. 飲み屋
  5. ファストフード店
  6. 喫茶店(特にスタバ)
  7. お散歩中
  8. 公園・河川敷
  9. ジム
  10. 大学構内
  11. 野球場・サッカー場・競馬場
  12. 飛行機・新幹線・長距離バス

前提

前提として、「出先で映像を見る」という行為をそもそもしそうなシーンを想定しています。言い始めればもっといくらでも候補を挙げられそうですが、

  • コンテンツを見る、という行為をスマホ等でもそもそもしないところは除外
  • 論理的には上記に含まれますが、「1人で映像を見る」という行為が不適切な場合も除外

としています。MOVERIOのまっとうな使い方を考えてみよう、と言うことです。

解説

簡単そうな順に簡単に考察をしてきます

12. 飛行機・新幹線・長距離バス

f:id:AMANE:20150330145821j:plain

公式もおすすめの利用法。手にタブレットを持って持ち上げ続けたり、首を下に向けながら映像を見るのは結構しんどい。自由な姿勢で両手を空けられるモベリオ的には相当妥当な利用法!

車の中でタブレットで動画を見ていると弱い人だと車酔いしますが、「モベリオだったら車酔いしない!」みたいな展開があったりしないでしょうか。これは要調査です。

11. 野球場・サッカー場・競馬場

f:id:AMANE:20150330145911j:plain

ラジオを聞きながら野球や競馬を見る、というのは良くある話ですが、それのTV中継版。対象物が遠距離で焦点のズレも問題なさそう!

と思ったのですが、TV放送を見る方法ってあるんでしたっけ…?

まぁその、待ち時間に見るとか…

10. 大学構内

f:id:AMANE:20150330145919j:plain

ジャンル的には公園・河川敷に近いですが、大学内、特に理工系のキャンパスなら 「実験かな」と思われるので普通にスルーされること間違いなし!

9. ジム

f:id:AMANE:20150330145932j:plain

バイクをこぎながらの動画閲覧は鉄板ユースケースでしょう。ジムによってはスタッフさんに怒られるかもしれないので、真摯な態度で(EPSON社員になったつもりで!)モベリオの良さをアピールしていきましょう。タブレットで動画見てる人なんていくらでもいますしね。 最新のスポーツマンはこれ!くらいの堂々たる態度 を見せられるかがポイントになりそうです。

8. 公園・河川敷

f:id:AMANE:20150330145940j:plain

この辺りから、少し攻めたユースケースになります。そもそも、公園でひとりで動画を見るシーンが余り思いつきませんが、「変な人って思われないかな??」と少しドキドキしながら眼鏡を外で掛ける、わりとソフトな入門編という感じでしょう。たまに通りかかる人に、全く気がつかれないか、変わったサングラス?と思われるか、社交的なおじさんに話しかけられるか、くらいで済みそうですね!

7. お散歩中

f:id:AMANE:20150330145946j:plain

公園や河川敷でこそこそ見るのにスリルを感じなくなったら、次は出歩いてみるのも良さそうです。ただしおそらく結構危険ですので、がっつり映像を楽しみたい方にはおすすめできません。 普段からアニメを2本同時見したり、プログラミングしながらアニメを見ているような玄人の方向け の用法です。

家でビール飲みながらアニメ見てたらお腹に肉が付く一方ですので、お散歩しながら健康にアニメ鑑賞は、2015年のニューオタクスタイルとしてアピールしていけるかもしれません

6. 喫茶店(特にスタバ)

f:id:AMANE:20150330145956j:plain

Macbook

スタバにおけるドヤリングはもはや社会現象とも言えるかと思います。たとえTwitterを見ているだけでも、Mac in starbucks is very おしゃれ。ただのドヤリを超える新世代のドヤリとして、 モベリオドヤリング を提唱してきましょう。店員さんと仲良くなれるかも!

5. ファストフード店

f:id:AMANE:20150330150004j:plain

公式でも結構頭の方でおすすめしている、食事をしながらの動画鑑賞。両手がふさがっていても動画が見れる!モベリオは 録り溜めた深夜アニメの消化に追われる現代人には欠かせないデバイス と言えそうです。忙しいオタリーマンなあなた(誰)、ためしに、殺伐としている吉野家で、黙々と大盛つゆだくをかっこみながら幸腹グラフィティを見る、というのはいかがでしょうか。

4. 飲み屋

f:id:AMANE:20150330150027j:plain

今回のモニターで借りている人みんなで、塚田農場で MOVERIOオフ会 なんかどうでしょうか。良く訓練された浴衣ギャルの塚田農場店員は、きっと笑顔で「えーそれなんですかぁー?」と聞いてくれるに違いありません。 これぞ商機。

3. ディズニーランド

f:id:AMANE:20150330150038j:plain

プーさんのハニーハント、2時間待ち!みたいな時こそ、モベリオです。初めの1時間くらいはなんとかたわいもない話で持ちますが、次第に間が持たなくなってきます。こんな時こそモベリオ。なんなら2人で互いにモベリオ。サングラス代わりにもなってちょうど良い感じです。アニメを一話見終わる度に感想を語り合えば、2時間でも3時間でも待てそうなものです。

ディズニーランドはリア充の聖地かと思いきや、コアなネズミファン達の強烈なオタク感はすさまじいものがあります。ちょっと変わった眼鏡を掛けているくらいでとやかく言われる筋合いはありません。どんどんかけましょう。

2. ショッピングモール

f:id:AMANE:20150330150045j:plain

いつまでも終わらない奥さんのお買い物に付き合うのに疲れたら、最後の力を振り絞り最高の笑顔で理解ある夫を演じつつ「終わったら呼んでー」と奥様を送り出し、フードコートに腰を下ろしてモベリオを取り出します。

しかしそこは大量の親子連れであふれかえっています。

通りかかった子供「なんかかっこいいめがねだよー」
そのお母さん「しっ、見るんじゃありません」

なんて、ほほえましい風景もあるかもしれませんね。

1. 通勤電車

f:id:AMANE:20150330150051j:plain

個人的に最強のユースケースがこれ。

満員電車、周りはおっさんだらけ、顔近いっす、あなたの後頭部なんか見たくないっす。いやおねえさん、別にあなたのこと見つめてないっす偶然そちらしか向けないだけです! 手が挙げられなくてパズドラもできねぇ! なんて日常も、モベリオで一変します。

乗り込む前に再生開始。満員電車の不快な30分が快適アニメタイムに!

というシナリオなのですが、同時に変な人と思われるリスクもひじょーに高い。痴漢えん罪怖いです。あまり世の中に普及しているデバイスというわけでもないので、モベリオかけてるだけで「この人ちかんです!」と言われるリスクが無いわけではありません。この季節、花粉症もあってマスクをしてたりもしますので、より一層怪しいです。

女性ならそんな心配もありませんので、ぜひ試してみていただきたいです。

最後に

途中のディズニーやショッピングモールは冗談として、通勤電車ユースケースは(マスクが取れた頃に)勇気を出してトライしてみたいです。かなり実益があると思われる用途が同時に非常に危険度が高い、というのはなんともモベリオという商品の難しさを表している気がしますが、そこんとこぶち破っていきたいです。

最初に紹介したブロガーイベントでは、エプソンの中の人が電車の中で使っている様子をちゃんと動画にしてレポートしてたりして、がんばるなぁと思ったのですが、そういえば割と美人の女性の社員さんでした(笑)

MOVERIOは電車の中でも使える!(※ただし美人女性に限る) ってわけですね。

冗談はほどほどにして

開発ネタと並行して、「こんなところで使ってみた」レポートも、ブログとして書いていこうと思います。

フリー素材最高

今回はじめて自分のブログでフリー写真素材を使ってみました。フリー素材を使った記事感が見事に出てますね!

ブラウザ上の開発環境 "CLOUD PEBBLE" で Pebble アプリの開発をしてみた

はじめに

Kick Starter で、とんでもない額の投資を得て話題になっています。$500,000- の目標に対し、3月8日午前時点で $16,816,735- の投資を集めています。達成率で言うと3000% です。

公式:

追って発表された、Pebble Time Steel と Smartstrapsについての記事:

欲しい

Apple Watchも話題になっています。むろん、表現力やアプリの作り込み、コミュニティの大きさは圧倒的だと思われます。一方で、電池もちはだいじょうぶか?と心配されています。 Pebble Timeは e-paper のおかげで(カラーにもなったのに!) 一度の充電で7日間*1使える、という点で、Android Wear のプロダクト等と比較してもかなり特殊な立ち位置にいます。

自分はApple Watchも結局買ってしまうかもしれませんが、いつもそこにいて、ちらっと見る、という従来の時計に近い使い方が出来る(と期待できる)Pebble Time を結構楽しみにしています。

SDK

カラー画面に対応したSDKが公開されました。まだ現物はありませんが、おもしろそうなので開発してみようと思いました。Android Wear や Apple Watch ほどは流行らないかと思いますが、長時間駆動可能という特性を活かした体験を作れると良いなぁと思います。

開発者向けの情報はこちらのサイトにまとめられています。既存Pebble向けのSDK Ver2系と、カラーに対応したSDK Ver3が入手できます。それらのインストールガイド、APIのドキュメントや、チュートリアルもまとめられています。

サイトがお洒落です。

Mac の開発環境 (割愛)

チュートリアルをやる分には、Macの開発環境と CLOUD PEBBLE での開発には差が無いようです。もちろん最終的に完成したアプリをPebble本体にインストールする際にはMac上に開発環境を構築する必要がありますが、手始めにちょっと触ってみたいという今回みたいな段階では、ビルド、エミュレーション出来る環境が0ステップで手に入るのはかなりありがたいです。

また、アプリの設定系の .json ファイルを、いちいち手書きしていくのではなく、埋めるべきところをGUIで埋めていく形式で書けるのも、CLOUD PEBBLE の優れているところです。手始めには、CLOUD PEBBLEを使うのが良いでしょう。

と言うわけで実際は一応Macの開発環境も作ったのですが、今回は割愛いたします。

CLOUD PEBBLE

ブラウザ上で動くPEBBLE のIDE + シミュレーション環境、CLOUD PEBBLE ですが、少しワークフローが特殊だったので、簡単にまとめておきます。とりあえず、アカウントを作成してログインして下さい。

プロジェクトの作り方

主に三つあります

  1. テンプレートから作成する
  2. ローカルからzipでインポートする
  3. GitHubからインポートする
1. テンプレートから作成する

PROJECTSタブ > CREATE で新しいプロジェクトを作成します

f:id:AMANE:20150308125227p:plain

この状態だと、SDK2.0 準拠のプロジェクトも選択出来ます。SDK2.0準拠の場合は、C言語だけではなく、 simply.js や pebble.js といったjsの方言での開発も可能です

f:id:AMANE:20150308125417p:plain:w550

が、ここでは SDK3.0を使いたいのでそちらをえらびます。すると、Project Typeはえらべなくなり、C言語での開発のみとなります。今後アップデートされると、js系も使える様になるのかもしれません。

f:id:AMANE:20150308125510p:plain:w550

ここでえらべるテンプレートは、基本的にSDK2系の頃のサンプルのようです。基本を抑えるにはこのサンプルを色々読んでみると良さそうです。

2. ローカルからzipでインポートする

既にローカルにプロジェクトがある場合は、それをzipにまとめてアップロードできます。

先に1. の手順で作ったプロジェクトを、zip でDLすると、必要なファイルとディレクトリ構成がわかるので、それがちゃんとパックされた物をアップロードすればOKです。チュートリアルをCLOUD PEBBLEでやる分には、zipでインポートをする事は無いと思います。

3. GitHub からインポートする

SDK3系のサンプルは、GitHub上に上がっています。

このページ中のスクリーンショットをクリックすると、それぞれのプロジェクトが上げられているgithubに飛びます。これらをCLOUD PEBBLEに取り込むことが出来ます。下図のように適当な名前をつけ、対象リポジトリのアドレスを指定し、IMPORT すれば、CLOUD PEBBLE上で扱えるようになります。

f:id:AMANE:20150308142800p:plain:w550

また、先にGitHub上で Fork して自分のプロジェクトとした物を、CLOUD PEBBLE にインポートして、その際に "USE AS GIT REMOTE" にチェックを入れておくと、CLOUD PEBBLE上で編集した結果を、GitHub上に再度Push出来るようになります。

f:id:AMANE:20150308144659p:plain:w550

f:id:AMANE:20150308144913p:plain

さすがにCLOUD PEBBLE上でローカルコミットを作る機能は無いようで、毎回origin/masterに対しpushする形となります。あらかじめ GitHub 上でブランチを作っておいて、そのブランチをCLOUD PEBBLE上にpullし、編集するようにすれば良いでしょう。

GitHubとの連携

上記3で説明しましたように、プロジェクトをGitHubからインポートした場合は、そのGitHubリポジトリをそのままリモートリポジトリとして運用することが出来ますが、1や2の手順でCLOUD PEBBLE上のプロジェクトとした物については、後からGitHubに突っ込むことは出来ないようです。もし既存のプロジェクトをどうしてもGitHubで管理したい場合は、一度プロジェクトをzipとしてDLして、それをGitHubに突っ込み、再度3.の手順でCLOUD PEBBLEに取り込むと良いかと思います。

ビルド、実行

ビルドの方法は2種類有ります

  • COMPILATION > RUN BUILD して、INSTALL ON BASALT
  • コードの画面で、右上の緑色の "Save, Build, Install and Run" ボタンを押す

f:id:AMANE:20150308151807p:plain

f:id:AMANE:20150308151815p:plain

左上のPebbleのウィンドウ内にアプリが表示されれば成功です

f:id:AMANE:20150308151958p:plain:w600

操作法

Pebbleウィンドウの周囲四つのボタンを、マウスクリックで押すことが出来ます。

ログの出し方・見方

C言語の場合 APP_LOG() マクロを利用します

 APP_LOG(APP_LOG_LEVEL_INFO, "Outbox send success!");

js の場合、 console.log() 関数を利用します

console.log("Temperature is " + temperature);

ログの見方は2種類有ります。

  • インストール直後のモーダルウィンドウで、 "VIEW LOGS" をクリックする
  • COMPILATION > VIEW APP LOGS をクリックする

f:id:AMANE:20150308152941p:plain:w550 f:id:AMANE:20150308152951p:plain

これで、ログを見ることが出来ます f:id:AMANE:20150308153210p:plain:w600

[PHONE] と書いてある行は、PebbleKit.js 内で console.log() で出力された内容です。 [INFO][DEBUG] は、Cのファイル中から、APP_LOG() で出力された内容です。APP_LOG_LEVELについては、こちらを参照

チュートリアルを流してみる (CLOUD PEBBLE)

チュートリアルは上から順に通していけば良いと思いますが、数カ所の要点だけメモしておきます

チュートリアルのコードは、チュートリアル本文中のリンクから、CLOUD PEBBLEのプロジェクトとしてインポートできる

f:id:AMANE:20150308162419p:plain

上の図の様なリンクがあったら、そこを押すと、その時点のチュートリアルのプロジェクトをCLOUD PEBBLEに取り込むことが出来ます。これをやりながらチュートリアルを進めると良いと思います。

FONTや画像の取り込み方のちょっとしたコツ

ぽつぽつ引っかかったので。

ひとつの .ttf ファイルに対し複数のサイズでフォントを定義する

フォントは、取り込んだひとつの.ttfファイルに対し、複数のサイズで定義しておくことが出来ます。複数定義されていると、RESOURCES のなかのフォントファイルにマウスオーバーすることで、定義されているフォントを確認出来ます。

f:id:AMANE:20150308163738p:plain

サイズを追加するには、.ttf ファイルを選択して、一番下までスクロールし "ADD ANOTHRE FONT" して、"IDENTIFIER" の最後の _24 みたいなサイズの数値を、使いたいフォントサイズに変更して SAVE します。

.c コード中での画像リソースへのアクセスの仕方

画像ファイルをアップロードすると、下の画面のように表示されますが、ここに出ている "IDENTIFIER" の文字列「そのもの」では、.c コード上で扱う事が出来ません。なぜかそんな仕様です。

f:id:AMANE:20150308164714p:plain:w600

この画面に表示されている "IDENTIFIER" 文字列の先頭に、 "RESOURCE_ID_" とつける必要があります。たとえばこの場合は

  s_background_bitmap = gbitmap_create_with_resource(RESOURCE_ID_IMAGE_BACKGROUND);

で、使える様になります。なぜかそんな仕様です。気をつけましょう。

AppMessage の使い方

スマホ側で動くPebbleKit.jsと、Pebble本体で動く .c 言語間でデータのやりとりをする AppMessage ですが、少し手続が煩雑でした。

スマホ側(JS)
1. {key: value} のオブジェクトを作る
2. SETTINGS で、1. で作ったオブジェクトに含まれる key を登録する
3. Pebble.sendAppMessage(object, ... で送り出す

Pebble側(C)
4. static void inbox_received_callback(DictionaryIterator *iterator 関数で
    DictionaryIterator インスタンスに格納された状態で受け取る
5. Tuple *t = dict_read_first(iterator); でオブジェクトのメンバの一つ目を読み出す
6. t->key で、データの種類を調べて、 t->value でデータを読み出す

サンプルの場合、 1と3 で以下の様にメンバをオブジェクトに突っ込んで送ろうとします

var dictionary = {
    "KEY_TEMPERATURE": temperature,
    "KEY_CONDITIONS": conditions
};

// Send to Pebble
Pebble.sendAppMessage(dictionary,

これを、ちゃんとC側で受け取れる様にするには、SETTINGSの画面で、2のステップで以下の様な登録をしておく必要があります

f:id:AMANE:20150308221257p:plain

また、6 で t->key としてデータのキーを調べますが、このときに参照されるのは、 KEY_TEMPERATURE といった文字列ではなく、2 で登録した Key ID (0とか1とか)の方ですので注意が必要です。

さいごに

一通りチュートリアルを通すことで、CLOUD PEBBLEの使い方と、コーディングの仕方がなんとなーくわかりました。これをベースに、watchface(時計のテーマ) や watchapp(Pebbleのアプリ) を作っていこうと思います。

ちょうど、ustwo が "Watch Face Design Guidelines" というのを出していたり、明後日が Apple Watch の発表(おそらく)だったり、またスマートウォッチ界隈が動き始めているので、その辺りを参考にしながら、自分なりのスマートウォッチのあり方を模索してみたいです。

*1:Pebble Time Steelに至っては10日間!