UIを追加する2021/08/25に公開・約3,900字・2件のコメントツイートElixir#livebooktechWebアプリではないけれども、アプリケーションの現在の状況がどうなっているかを可視化するために、ちょっとしたUIをつけたいということがあったりすると思います。記録され続ける時系列データをちょっとグラフ化して見てみたいとか。それだけのためにPhoenixを使ってWebアプリを作るのも面倒です。UIを簡単に追加してみます。アプリケーションこんなアプリケーションを作っているとしましょう。1秒ごとに0〜100までのランダムな数字を生成して、時系列データとして保持しておくというものです。これ自体は特に意味のあるものではないですが、たとえば、デバイスから送られてきたセンサーデータを受け取って記録するアプリケーションだと思ってください。ここで、記録された時系列データをグラフとして可視化したいと思った時にどうするか?というのが本記事でやりたいことになります。endend上記のプロセスにアクセスするためのヘルパーAPIを用意しておきます。endendLivebookの設定Livebookとは、ElixirのためのJupyterLabのようなものです。上記のアプリケーションにLivebookを組み込んでいく必要があります。mix.exsに依存ライブラリを追加します。0.3.0"},そして、config/config.exsにLivebookの設定を追加します。以下では、最低限のLivebookのWebアプリケーションへの接続に関する設定などを記述しています(セキュリティ的な保護は全くしていないので、誰でもアクセス可能な場所に置くのには向いていない設定です)。Jasonここで、LivebookのランタイムをLivebook.Runtime.Embeddedに設定しています。Livebookのランタイムには、以下の4つの種類があります。Nodeを用いても良かったのですが、Nervesデバイスなどでも同じように使えるEmbeddedランタイムを使ってみることにしました。上記の設定を施した状態で、iexを起動します。mixすると、localhost:8080でLivebookが起動します。適当にノートブックを作って、以下のようなコードを書き込んで実行してみましょう。"count")Embeddedランタイムを用いているので、ターゲットとなるアプリケーションとグローバルな状態を共有しているため、LivebookSidecarモジュールにアクセスできます。そのモジュールを通じて、記録されている時系列データを取り出して、VegaLiteライブラリを用いてグラフを作っています。上記を実行すると、こんな感じでグラフが表示されます。UIを用意してグラフ化することができました。UIが作れるのも便利ですね。本記事で用いたコードは、以下に置いてあります。kentaro/livebook_sidecarツイートあんちぽあんちぽです。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。2022/06/01に更新Livebookのバージョンが上がったことで少し設定項目がかわったようです。手元で組み込めて動いた程度のものですが、コメントさせてください。約3,900字コメントが参加あんちぽあんちぽです。時系列データのグラフ化Zennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。