LoginSignup
26
7

More than 3 years have passed since last update.

#NervesJPAdvent Calendar 2020Day 1
@takasehideki

ALGYAN x Seeed x NervesJPハンズオン！に向けた開発環境の準備方法 → これからの開発環境についても追記

Last updated at Posted at 2020-12-01

この記事は #NervesJP Advent Calendar 2020 の1日目です．
今年も完走目指して，れっつじょいなす！！

NCJP_Logo3_V2.png

はじめに

どうもこんにちわ
Nervesとは，関数型言語ElixirにてIoTシステム開発を実現するフレームワークです．
『ElixirでIoT』の世界に革新をもたらします！

詳細な解説はIoT ALGYANで実施したWebinarのこちらの資料や動画もご笑覧ください．

さぁ皆さん！今すぐにでもNervesやりたくなってきたでしょ！？？

そんな皆さんにお誂え向きなイベントが12月27日(日)に開催されまっした！（参加いただいた皆さま，あざまっした！！

IoTを学べる最強コミュニティ IoT ALGYAN と，みんなのものづくりのミカタな Seeed K.K. より，ちょっと遅めのクリスマスプレゼント！
ということで，ラズパイ４本体はじめすぐにNerves始められるぜってなアイテムを太っ腹にプレゼントしました！！

ということでこの記事では，こんな素敵なハンズオン企画に参加するための開発環境の準備方法について紹介します．当日の内容を復習したい方／いまから自習したい方も，ぜひに！！

更新履歴

TL;DR

今回のハンズオンはオンラインなので，皆さんの開発環境を揃えるためにDockerとVisual Studio Code（VS Code）を利用します．WindowsでもmacOSでももちろんLinuxでも大丈夫です．
すでにNerves開発をされている方も，ハンズオン参加時には本環境を整えてください．めちゃ便利です．

作業内容の要点は，次のとおりです．

それではそれぞれの詳細をご紹介します．
分からないところ詰まったところ思わぬエラーが出たら，この記事にコメントいただくか，Twitterにて #NervesJP のハッシュタグ を付けてつぶやいてください．どこからともなくお助けマンが馳せ参じます！！

Docker Desktopのインストール

2020/12/15 追記：
12月11日にDocker Desktop 3.0.0が正式リリースとなりました．
新しいものはより良いはずです．NervesJPハンズオンでは，アップロード後でも問題ないことを確認済みです．すでにDocker Desktopを導入済みの方は，ぜひアップロードしてください．

要件の確認

Dockerを使用するには，PCにいくつかのシステム要件があります．
公式ページの案内（Windows版）を参照いただくのが最も正確ですが，代表的なものを挙げます．

下記ページも参考になります．

Windows 10 Homeの方へ

最近のアップデートによって，Windows 10 Homeでもトラブル少なく動作するようになりました．ただし，Windows 10 Version 2004 / OS build 19018以上に対応するMay 2020 Updateの適用が必須となります．
これが適用されているかは，【設定 > システム > バージョン情報】で確認してみてください．

Homeの場合:
image.png

Professionalの場合:
image.png

Windows 10 May 2020 Updateは，お使いのデバイスに応じて，更新のお知らせが順次で通知されるようです．さすがに今となっては皆さんのデバイスにお知らせが来ているかと思いますが， もしかしたら[更新プログラムの確認] にMay 2020 Updateのお知らせがまだ来ていないことがあります．その場合は，この辺りを参考にしてみてください．

インストール

それではDocker Desktopをインストールしましょう．
インストーラの入手は下記ページの［Get Docker］から．

Windowsの場合は，インストーラを実行時の下記の画面で，いずれの項目もチェックを入れたままにしてください．

image.png

Winな方もMacな方も，Dockerのインストール後はPCを再起動しましょう．

(Homeのみ)WSL 2 Linux Kernelのインストール

Homeの方は，再起動後にDockerが実行されてから，下記の画面が表示されることがあります．
（ここでは「Restart」も「Cancel」もまだクリックしないでください）

image.png

この画面が表示された場合は，WSL 2 Linux Kernelをインストールする必要があります．WSL 2自体の導入は不要です．

「最新の WSL2 Linux カーネル更新プログラム パッケージをダウンロード」のところをクリックしてパッケージをダウンロードして，インストーラを実行してください．
直リンクはコチラ↓
https://wslstorestorage.blob.core.windows.net/wslblob/wsl_update_x64.msi

WSL 2 Linuxをインストールできたら，先ほどの画面の「Restart」をクリックして（あるいは手作業で），またもういちどPCを再起動しましょう．

Visual Studio Code

次はIDEなVS Codeのインストールです．

下記からダウンロードしてインストールしてください．

日本語化パッケージのインストール

VSCodeの初期設定は英語表示で，ぐえっ！となります．やはり日本語でおけとしたいところです．
Webブラウザで下記のページを開いてください．

緑色の【Install】をクリックします．

image.png

Visual Studio Codeに移動します．そして，下記のような画面が表示されます．
また緑色の【Install】をクリックします．

image.png

拡張機能のインストールが完了したら，右下に
"In order to use VS Code in Japanese, VS Code needs to restart."
というメッセージが表示されます．
【Restart Now】をクリックし，VS Codeを再起動します．

image.png

VS Codeが再起動して，無事に表示が日本語になったことが確認できるはずです．

拡張機能のインストール

今回のハンズオンでは，VS Codeの拡張機能である"Remote - Containers"を使用します．
devcontainerとは，その名のとおり，開発（development）に使うDockerコンテナ（container）です．VS Codeの拡張機能では，設定用のフォルダ・ファイルを開くだけで，定義されたDockerコンテナを構築して良い感じにフォルダをマウントしたりVSCodeから操作することができるようになります．

先ほどと同じように，Webブラウザで下記のページを開いて，緑色の【Install】を2回クリックして，インストールしていきます．

image.png

image.png

インストールできたら，左下のところに緑で >< なマークが表示されます．

image.png

開発環境の構築！

今回のハンズオンはオンラインなので，皆さんの環境を揃えるために，GitHubに用意してある開発環境を利用します．

ディレクトリ一式のダウンロード

Gitに慣れている方は，下記のようにcloneしてください．

git clone https://github.com/NervesJP/nerves-algyan-devcontainer

そうでない方は，次のURLから環境をまるごと直接ダウンロードしてきてください．
https://github.com/NervesJP/nerves-algyan-devcontainer/archive/main.zip

開発環境の展開

VS Codeを開いて，左下の緑の >< なところをクリックしてください．
すると上部にコマンドパレットという窓が開きますので，
Remote-Containers: Open Folder in Container...
を選択してください．

image.png

git cloneしてきたディレクトリである nerves-algyan-devcontainer/ を選択してください．
直接ダウンロードしてきた方は，アーカイブを解凍して展開したディレクトリ nerves-algyan-devcontainer-main/ を選択してください．

image.png

ビルド済みのDockerイメージをダウンロード（pull）してきて，よしなに展開されます．PCスペックとネットワーク環境によりますが，10分ほど掛かることがあります．

うまくいかない？場合は，Docker Desktopのアプリが起動していないことが考えられます．
Windowsだと，デスクトップ右下のタスクトレイにこんな感じのクジラのアイコンが表示されているか確認してください（Macだとメニューバーにいてます）

image.png

ちゃんと進んでいるか気になる方は， 右下の青字の "Starting Dev Container (show log)" をクリックすると，進捗のログが表示できます．

ということで，こんな感じに出来上がりっ♪
左下の緑色なところが
>< Dev Container: NCJP-ALGYAN_v2
な表示になっていることを確認してください．
（画像は途中で "Starting Dev Container (show log)" をクリックして進捗を表示した場合のものです）

無題.png

ここで，左下の緑色なところが
>< Dev Container: NervesJP-ALGYAN
な表示になっている場合（NCJP-ALGYAN_v2ではなくNervesJP-ALGYANになっている場合）は，dev-containerの更新が必要です．

fwupのインストール

fwupとは，Nervesのファームウェアの構築とmicroSDカードへの書き込みのためのユーティリティです．
https://github.com/fhunleth/fwup

今回のハンズオンでは，ファームウェア書込み済みのmicroSDカードを参加者の皆さんに配布しますので，使用することはありません．ですが，今後のNerves開発を続けていくためにも，ホストPCにインストールしておきましょう．

Windowsの場合

Chocolateryを使われている方は，下記でインストールできます．

choco install fwup

そうでない方は，下記からバイナリを直接ダウンロードして，ダウンロード先にPath環境変数を設定してください．
https://github.com/fhunleth/fwup/releases/download/v1.8.3/fwup.exe

macOSの場合

brewでインストールできます．

brew install fwup

Linuxの場合

プラットフォームに合わせて，パッケージのダウンロードとインストールを行ってください．
https://github.com/fhunleth/fwup#installing

dev-containerの更新

2020/12/15 22:40にdev-containerをアップデートしました．その更新作業を説明します．
特にこの記事の公開後すぐに開発環境を整えられた方，本当に申し訳ないですm(_ _)m
ただし，このアップデートはbug fixではありませんので，更新しなくてもハンズオンの内容自体には支障はありません．

左下の緑色なところが
>< Dev Container: NervesJP-ALGYAN
な表示（下図参照）になっている方は，dev-containerの更新を行ってください．

image.png

更新方法です．
Gitに慣れている方は，下記のようにcloneしてきたディレクトリに移動して，git pull をしてください（別のところに git clone するのでも構いません）

cd <cloneしてきたディレクトリ>/nerves-algyan-devcontainer
git pull

そうでない方は，次のURLから環境を，改めてまるごと直接ダウンロードしてきてください．
（元々のディレクトリ環境は削除して構いません）
https://github.com/NervesJP/nerves-algyan-devcontainer/archive/main.zip

その後，VS Codeのコマンドパレットから，
Remote-Containers: Open Folder in Container...
でディレクトリを選択し直してください．

ディレクトリ位置が変わっていない方（git pullされた方）は，
Remote-Containers: Rebuild Container
でも更新できます．

注意事項

今回の開発環境は幾つかcheatをしています．
ちゃんとまともな開発環境の準備方法はハンズオン当日にもご案内しますが，メモ書きとしても残しておきます．

  • NervesではファームウェアのmicroSDカードへの書き込みを，少なくとも最初の１回は行う必要があります．これはDocker開発環境ではいかんともできません．ということで今回は,,, ファームウェア書き込み済み！のmicroSDカードを皆さまにお届けします．
  • Nervesの開発では ${MIX_TARGET} という変数がかなり大事で，これによって開発対象とするIoTボードの品種を指定します．今回はラズパイ4をプレゼント！ということで， ~/.bashrc にて rpi4 として固定化しています．
  • Nervesでのラズパイとのネットワーク通信では，SSH鍵による認証を行います．この公開鍵／秘密鍵は，なんと今回はGitHubに晒していて，皆さん同じものを使うように共有していますｗｗ もちろんtoo dangerousなので，良い子はマネしないでください^^;
  • 当日のネットワーク負荷を削減するために，幾つかの設定ファイルやアーカイブをDockerイメージ内に取り込んでいます．ちょっとイメージのサイズが大きくなっていますが，当日は楽になりますのでご容赦くださいませ．

これからの開発環境

ハンズオンおつかれさまでした！！（という想定で追加した項目です^^;
前記のとおり，この記事で解説している開発環境は，ハンズオン向けに特化して仕込みをしています．特にSSH鍵を皆さんで共有しているのは，セキュリティ上のリスクがあります．ご自身で作成されたSSH鍵を利用していただく必要があります．

ということでこの項目では，これからもNerves開発やっていくぞっ！という方向けに案内します．

dev-containerを使用する開発環境

コチラに詳細をまとめています．

今回の記事でDocker DesktopとVS Code，あとfwupは導入済みのはずです．
差分は下記のとおりです．

  • dev-containerのディレクトリは，コチラをご利用ください．
    https://github.com/NervesJP/nerves-devcontainer
  • 初回の起動後に，SSH鍵をご自身で作成してください．
    ssh-keygen -t rsa -N "" -f .ssh/id_rsa
  • Nervesの開発ターゲットを環境変数 MIX_TARGET というもので指定する必要があります．デフォルトは rpi3 にしていますので，必要に応じて変更してください．
    echo "export MIX_TARGET=rpi4" >> ~/.bashrc

WSL 2のみを使用する開発環境

dev-containerは，DockerコンテナとホストPCのファイルシステムをbindします．この性能があまりよろしくないため，Nervesのビルド等に時間が掛かります．頻繁に開発をやっていきたい！という場合は，Windowsの方は，WSL 2のShellで開発環境を構築するのをオススメします．

コチラの記事で詳細を紹介しております．

ちょっと手間が多く詰まることがあるかもしれません．
分からないところ詰まったところ思わぬエラーが出たら，この記事にコメントいただくか，Twitterにて #NervesJP のハッシュタグ を付けてつぶやいてください．
やっぱりどこからともなく，お助けマンが馳せ参じます！！ :sunglasses:

macOS/Linuxの方向けの開発環境

macOSやLinuxをホストPCとして使用されている方は，コチラの記事をご参照ください．

ファームウェアの作成方法

プレゼント枠の皆さまには，ファームウェア書込み済みのmicroSDカードをお送りしました．
最初からやり直したい！自分のSSH鍵で準備してやるぞっ！という方は，下記のように行ってください．

$ git clone https://github.com/NervesJP/nervesjp_basis
$ cd nervesjp_basis
$ git checkout v1.0
$ export MIX_TARGET=rpi4
$ mix deps.get
$ mix firmware

_build/rpi4_dev/nerves/images/nervesjp_basis.fw というのがハンズオンのスタートラインとなっているNervesファームウェアです．こちらをmicroSDカードに書き込みます．

dev-containerの方は，ホストPC上で，fwupを実行します．

$ fwup _build/rpi4_dev/nerves/images/nervesjp_basis.fw

WSL 2やmacOSでネイティブに環境構築された方は，このとおりです:fire: 

$ mix burn

おまけ：ハンズオンで使用する機材

今回のハンズオンで使用している機材を紹介しておきます．

どうでしょうか皆さん？いろいろNervesでつくりたくなってきていませんか？？

みんなでワイワイやっていきましょう．NervesJPにぜひご参加ください！！

NCJP_Logo3_V2.png

この内容を自習してみた！とか，違うGroveを使ってなんか作ってみた！とか，ワイガヤしませんか？？
2021年の１発めは"新年LT回"です．よろしくどうぞっ！！
https://nerves-jp.connpass.com/event/199455/

image.png

$\huge{Nervesならできるもん！}$

れっつじょいなす！！

おわりに

ALGYAN x Seeed x NervesJPな体験ハンズオン，
NervesJPのメンバ一同でもりもりっと鋭意準備中です！！ :snowflake::snowflake::snowflake::snowflake:
→ そして12/28(日)に成功裏に開催！あざまっした！！

ncjp_members.png

phx_sample.png

動画アーカイブが公開されていますので，機材を揃えて自習復習にぜひとも！
https://www.youtube.com/watch?v=A1AiQZR7UFQ

image.png

参考ページ

#NervesJP Advent Calendar 2020 の2日目は，@kentaro さんの「ウェブチカでElixir/Nervesに入門する（2020年12月版)」です．
ものっそい丁寧な解説記事！ これからNerves始める方もすでに慣れてる方も，この記事を写経するだけでめっちゃんこいろいろ学べます！！

26
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
26
7