JINS MEME Advent Calendar 2015 3日目の記事です。昨日の記事は@hatoneさんによる JINE MEME iOSアプリ開発入門 -公式サンプルアプリを動かす-でした。サンプルアプリが動いたら、次はセンサから得られるデータについてもっと詳しく見てみたいはず!今日はセンサデータをグラフ表示したり保存する方法について紹介します。記事の前半は作ったものの紹介で後半は実装の工夫です。

背景

センサを使って何か面白いものを作るならデータの観察は欠かせません。そこで、観察に便利な波形のモニタリングラベル付データの記録機能を持ったアプリを作ってgithubで公開しました。READMEに従ってAPP_IDとAPP_SECRETを書いたKey.hを作成してから実行してみてください。

機能

  • アプリ上でセンサデータをグラフ表示できる
  • オフライン解析のためにデータを記録できる

実装

グラフ描画 直近のデータを配列として保持しておき、UIBezierPathで連結することで描画しています。上限下限や色などはStoryboard上で変えられるようにIBInspectableを設定しました。

@IBDesignable class GraphView: UIView {
    @IBInspectable var maximumValue: Double = 1000.0{
        didSet {
            self.setNeedsDisplay()
        }
    }
    .
    .
    .
}

データの記録 開発者がデータの読み書きに使えるDocumentDirectory以下にテキストファイルを作成し、memeRealTimeModeDataReceived(data: MEMERealTimeData!)が呼ばれる度にそのデータを追記しています。また、iTunesやiFunBoxを使ってデータを取り出せるようにプロジェクト名-info.plistにKey:Application supports iTunes file sharing Value:YESをセットしました。

まばたきのアニメーション PaintCodeを使ってPathの位置を変数で変えられる目の画像を作成しました。PaintCodeから出力されたStyleKitをimportして、目の開閉や虹彩の位置とともにdraw~を呼び出して描画しています。

その他の細かい実装についてはリポジトリをご参照ください。

まとめ

JINS MEMEのデータを観察する際に役立つアプリを作って公開しました。ご活用ください。JINS MEME Advent Calendar2015 明日は古川さんとのことでとても楽しみです!