この記事は開発初心者向けに0から説明しています。
(授業で使用する記事です)

この記事ではcodepenというサービスを用いて開発を行います。
使用するデバイスMyoについてはこちらを参照してください。

Myoとは

Myoとは腕に装着することで腕から指先にかける動きを取得することを可能とするウェアラブルデバイスです。

CODEPENとは

CODEPENとはウェブ開発に必要なHTML, JS, CSSの三要素を実際の表示を見ながら開発できるウェブサービスです。

まずはCODEPENでWEB開発入門

いろいろ説明しても難しいと思うのでとりあえず作業しながら理解していきたいと思います。

CODEPENに登録する

まずCODEPENを利用するにあたり会員登録が必要になります。
下記URLにアクセスして会員登録を済ませましょう！
https://codepen.io/signup/free

GitHub, Twitter, Facebookのアカウントをお持ちの方は会員登録不要です。
直接ログインして次のステップに進みましょう。
https://codepen.io/login

こんなメールが届くはずです。

メールに記載されているURLにアクセスしましょう。

まずは一つ作ってみる

会員登録が完了したので次に最初のウェブアプリを作成してましょう。

+NewPenをクリックします。

こういう画面に切り替わったかと思います。

まずは名前をつけます。

文字を表示するようにします。

背景に色をつけます。

プログラムで毎秒時刻を表示します。

書いたプログラムはそれぞれこんな感じです。

HTML

<h1>Hello world!</h1>
<h1 id="time"></h1>

CSS

body{
  background-color:#9E9E9E;
}

setInterval(function(){
  document.getElementById("time").textContent=new Date().toLocaleString();
}, 1000);

本当のWeb開発でやらなければならない読み込みなどをCODEPENが勝手にやってくれているので本当に必要な部分を書くだけで済みますね。
らくらくです。

ここで一度保存をしておきましょう。

Web開発について

先程のHTML, CSS, JSがWeb開発の基本となります。

種類	役割	具体的な要素
HTML	レイアウト	文字や写真、ボタン、入力フォームなど
CSS	デザイン	文字や背景の色、写真のサイズなど
JS	動き	HTMLやCSSの操作、計算など

ざっくりとこんな認識で問題ないかと思います。
この記事ではMyoのデータをどう扱うかが問題なのでJS(JavaScript)に関する勉強が中心になっていきます。
HTMLとCSSは表示部分なのでそこまで深く勉強する必要はありません。

早速Myoのデータを取る

さて、そうしましたらMyoのデータを取得するための新しいWebアプリを作成しましょう。

新しいPenの作成

http://codepen.ioにアクセスします。

+NewPenをクリックします。

名前をつけます。

サンプルのコピー

まずは下のコードを貼り付けてください。

HTML

<div class='orientationGraph'>
</div>

CSS

html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #10161d url('https://raw.githubusercontent.com/thalmiclabs/myo.js/master/examples/deviceGraphs/img/dot_grid.png');
  font-family: 'blender_prothin';
  font-size: 12px;
  color: #58bccc;
  line-height: 20px;
}

body {
  text-align: center;
}

.orientationGraph {
  height: 200px;
  width: 500px;
}

//This tells Myo.js to create the web sockets needed to communnicate with Myo Connect
Myo.connect('com.myojs.deviceGraphs');

Myo.on('gyroscope', function(quant) {
  updateGraph(quant);
});

var range = 500;
var resolution = 100;
var graph;

var arrayOfZeros = Array.apply(null, Array(resolution)).map(Number.prototype.valueOf, 0);

var graphData = {
  x: arrayOfZeros.slice(0),
  y: arrayOfZeros.slice(0),
  z: arrayOfZeros.slice(0),
  //    w : Array.apply(null, Array(resolution)).map(Number.prototype.valueOf,0)
};

$(document).ready(function() {
  graph = $('.orientationGraph').plot(formatFlotData(), {
    colors: ['#04fbec', '#ebf1be', '#c14b2a', '#8aceb5'],
    xaxis: {
      show: false,
      min: 0,
      max: resolution
    },
    yaxis: {
      min: -range,
      max: range,
    },
    grid: {
      borderColor: "#427F78",
      borderWidth: 1
    }
  }).data("plot");

});

var formatFlotData = function() {
  return Object.keys(graphData).map(function(axis) {
    return {
      label: axis + ' axis',
      data: graphData[axis].map(function(val, index) {
        return [index, val];
      })
    };
  });
};

var updateGraph = function(orientationData) {
  Object.keys(orientationData).map(function(axis) {
    graphData[axis] = graphData[axis].slice(1);
    graphData[axis].push(orientationData[axis]);
  });

  graph.setData(formatFlotData());
  graph.draw();
};

次に画面上部にあるSettingsをクリックしてください。

JavaScriptを選択します。

Add External JavaScriptの欄に次の3つを追加します。

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js
http://codepen.io/daikinissan/pen/gwjrdj/

サンプルコードの実行

右上のChange ViewをクリックしてFullPageを選択しましょう。
実際の動きを確認することができます。

Myoを接続する

USBのアンテナが付属しているのでそれを用いてPCとMyoを接続します。
https://jp.myo.com/startにアクセスしてMyoコネクトをインストールします。

Continueをクリック

USBのアンテナをPCに挿入しMyoとPCをUSBケーブルで接続します

わかりやすい名前をMyoに付けます

会員登録は無視します

これが出たらUSBケーブルを抜きます。
USBのアンテナはそのままにしておきます。

無線のペアリングが完了したらこのような表示になります。

ここまで来たらこの画面は閉じて問題ありません。