この記事では、Raspberry Piのシステムを監視するアプリケーションの作成を通してisaaxを使ったアプリケーション開発の基本的な流れについて学びます。実際に試して動作を確認するには下記のモノが必要となるのであらかじめ用意してください。(isaax勉強会ではあらかじめ用意したSDカードを使います)

  • Raspberry Pi
  • microUSBの電源 5V2A
  • SDカード(4GB以上)
  • Windows, macOS, LinuxいずれかのPC
  • WiFiドングルまたは有線LAN (3, Zero Wのモデル以外を使う場合)

サンプルコードはこちら:

https://github.com/isaaxug/system-monitor

0. 概要

今回の作業の流れを下図に示します。

サンプルアプリケーションはRaspberry PiのCPU使用率をグラフでリアルタイムに表示します。デバイスはヘッドレス(キーボード、ディスプレイ、マウスなし)で動かし、手元のPCのブラウザからローカルネットワークを通して接続します。

最終的なファイル配置は下記の通りです。

.
├── isaax.json
├── server.py
├── static
│   └── script.js
└── templates
    └── index.html

完成したアプリケーションの様子はこちら:

1. アプリケーションを実装する

それではアプリケーションを実装していきましょう。Pythonを使ったサーバー側とHTML/CSS/JSを使ったフロントエンドのコーディングを行います。記事ではターミナルを使う方法で解説していますが、扱い慣れた方法で構いません。

任意の場所に作業ディレクトリを作成します。

mkdir system-monitor
cd system-monitor

1.1. サーバー側のプログラミング (Python)

Python3, pip3(PC上ではPython2でも構いません)のインストールが済んでいない場合は、PC上で動作確認するためにインストール作業が必要です。

必要なパッケージをインストールします。グローバルな環境にパッケージをインストールしたくない場合は必要に応じてvenvvirtualenvを使って環境を切り分けてください。

pip3 install flask psutil    # python3の場合
pip2 install flask psutil    # python2の場合
  • Flask … Python製の軽量なWEBフレームワーク
  • psutil … システム情報や動作しているプロセスの情報を取得できるPythonライブラリ

下記の内容でserver.pyを作成します。

import psutil

from flask import Flask
from flask import render_template
from flask import jsonify


app = Flask(__name__)


@app.route('/cpu')
def cpu():
    cpu_percent = psutil.cpu_percent()
    return jsonify(cpu_percent=cpu_percent)

@app.route('/')
def home():
   return render_template('index.html') 


if __name__ == '__main__':
    app.run(host='0.0.0.0', threaded=True)

ここでは、2つのエンドポイントを定義しています。/cpuはGETリクエストがあった際にCPUの使用率をJSONレスポンスにして返します。/index.htmlを返し、ブラウザ側でグラフを表示する役割を担います。

1.2. フロントエンド側のプログラミング (HTML/CSS/JS)

templatesディレクトリとその直下にindex.htmlを作成します。

mkdir templates
vi templates/index.html

 

<!doctype html>
<html>
  <head>
    <title>System Monitor</title>
  </head>
  <body>
    <div id="chart"></div>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/superagent/3.8.2/superagent.js"></script>
    <script src="/static/script.js"></script>
  </body>
</html>

必要なライブラリはCDNからダウンロードしています。

  • highcharts.js … グラフを描画するライブラリ
  • superagent.js … AjaxリクエストやHTTPクライアントを簡単に行えるライブラリ

グラフを表示するためのスクリプトを作成します。FlaskではstaticディレクトリにCSSやJavaScriptのファイルを置きます。staticディレクトリを作成し、script.jsを記述します。

mkdir static
vi static/script.js

 

Highcharts.chart('chart', {
  chart: {
    type: 'area',
    animation: Highcharts.svg,
    marginRight: 10,
    events: {
      load: function() {
        const request = window.superagent;
              series = this.series[0];

        setInterval(function () {
          request
            .get('/cpu')
            .end(function(err, res){
              let x = (new Date()).getTime(),
                  y = res.body.cpu_percent;

              series.addPoint([x, y], true, true);
            });
        }, 3000);
      } 
    }
  },
  title: {
    text: 'CPU Usage'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: 'Percentage' 
    } 
  },
  series: [{
    name: 'CPU Usage',
    data: (function () {
      let data = [],
          time = (new Date()).getTime(),
          i;

      for (i=-99; i<=0; i+=1) {
        data.push({
          x: time + i * 1000,
          y: 0
        });
      }
      return data;
    }())
  }]
});

こちらはほとんどがグラフを初期化するための設定です。第一引数にidを受け取って対象となるDOM内にグラフを構築します。eventsプロパティのloadはグラフが初期化される際に呼び出されます。ここでは、3秒ごとにGETリクエストを送り、受け取ったJSONレスポンスをグラフに追加する処理を行なっています。

...
const request = window.superagent;
      series = this.series[0];

setInterval(function () {
  request
    .get('/cpu') // GETリクエスト
    .end(function(err, res){
      let x = (new Date()).getTime(), // 現在時刻を取得
          y = res.body.cpu_percent;   // JSONレスポンスからCPU使用率を取り出し

      series.addPoint([x, y], true, true); // グラフにデータを追加
    });
}, 3000); // 3秒(3000ミリ秒)ごとに処理を繰り返す
...

seriesプロパティにはグラフを最初に描画する際のデータをセットしています。データベースなどにデータを持っている際はそこから取り出した値を使いますが、今回は保持しているデータはないので全て0で埋めています。

...
data: (function () {
  let data = [],
      time = (new Date()).getTime(),
      i;

  for (i=-99; i<=0; i+=1) { // 100個分のデータを表示
    data.push({
      x: time + i * 1000,
      y: 0
    });
  }
  return data;
}())
...

1.3. 動作確認

このサンプルコードはどのOS環境でも動作するため、エラーがないか確認するためにまずはPC上で実行してみましょう。

python3 server.py

起動後localhost:5000にアクセスし、グラフの表示が確認できれば成功です。

1.4. isaax.jsonの作成

最後に、isaax.jsonという名前で設定ファイルを作成します。このファイルはisaaxがデバイス上でアプリケーションを動かす際に必要な情報を提供します。startプロパティがアプリケーションの実行方法を指定します。

{
  "name": "system-monitor",
  "version": "0.1",
  "description": "CPU monitoring",
  "author": "your name",
  "license": "MIT License",
  "scripts": {
    "start": "python3 -u server.py"
  }
} 各項目の説明を以下にまとめましたので参考にしてください。
キー 説明
 name アプリケーション名
 version アプリケーションのバージョン
 description アプリケーションの説明
 author あなたの名前
 scripts.start アプリケーション起動コマンド

1.5. .gitignoreの作成

venvやvirtualenvで作成した仮想環境、macOSの.DS_Storeなどはリポジトリにあげる必要がないため、必要に応じてバージョン管理の対象から外してください。

アプリケーションの実装は以上です。最終的なファイルの配置などはサンプルコードを確認してください。

2. GitHubに反映する

GitHubにログインし、新規リポジトリを作成しましょう。

表示されるインストラクションにしたがって作成したアプリケーションをリポジトリに反映します。コマンドラインから行う方法は下記の通りです。

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/<YOUR NAME>/system-monitor.git
git push -u origin master

3. isaaxのプロジェクトを作成する

isaaxにログインし、先ほど作成したリポジトリとisaaxプロジェクトを紐付けます。まだisaaxへの登録が済んでいない場合は、GitHubアカウントを使って登録してください。

下図を参考に「新規プロジェクト追加」をクリックします。右側のボタンはステップバイステップでプロジェクトの作り方を確認することができます。

モーダルが表示されるので、下図のように情報を入力して保存します。

 

4. デバイスを登録する

作成したプロジェクトにデバイスを登録します。デバイスを登録するには「プロジェクトトークン」を使ってRaspberry Piにisaaxdをインストールします。isaaxdはデバイスに常駐化し、ユーザーアプリケーションの更新や管理を行います。

先ほどプロジェクトを保存した際に、下図のような画面に遷移したはずです。こちらはプロジェクトトークンとisaaxdのインストールを自動化するためのスクリプトです。背景が黒い方をクリップボードにコピーしてください。

Raspberry PiにSSHログインし、上でコピーしたコマンドを貼り付けて実行します。下図のようにisaaxd installation completeが表示されれば成功です。

この時点で、リポジトリに反映したユーザーアプリケーションも一緒に配信されます。PCからブラウザを開き、<Raspberry PiのIPアドレス>:5000にアクセスしてみましょう。デバイスの更新やアプリケーションのログはisaaxのダッシュボードの通知パネルから確認できます。

5. 次のステップ – アプリケーションを更新する

PC上でアプリケーションに任意の変更を加えてコミットを作成し、GitHubリポジトリにプッシュしてみましょう。するとプロジェクトに登録されたデバイス全てに更新が反映されます。

  • psutilのドキュメントを参考に、CPU使用率以外の値を表示してみましょう
  • 複数のグラフを表示させてみましょう
  • 他にも、思いついた変更を試してみましょう

まとめ

ガイドは以上となります。1から作成したアプリケーションをisaaxでデバイスに配信するために必要なステップについて説明しました。今回はクロスプラットフォームなアプリケーションでしたのでPC上で動作確認を行いましたが、実際には実機を伴った開発をするべきです。isaaxではクラスターというデバイスをグルーピングする機能を使って開発環境のデバイスと本番環境のデバイスを分けて開発することができます。その他、環境変数サービスシェルスクリプト機能など便利な機能があるので試してみてください。


Leave a Reply

Your email address will not be published. Required fields are marked *