はじめに
近年、私たちのデジタル体験はコンピューターやモバイル画面の枠を超えて広がっています。デザインに物理的な操作を取り入れたいとします… ボタン… 回せるノブ… 指でなぞってスライドできるバー…。Arduino Uno のような安価なコンピューティングボードが、試してみたい人にとってこれをますます身近なものにしています。
このチュートリアルでは、タッチスクリーンでも、回して押せる物理ノブでも操作できる 空調制御のプロトタイプ を扱います。こうしたものは ロータリーエンコーダー と呼ばれますが、たとえその言葉を聞いたことがなくても、きっとどこかで使ったことがあるはずです。ノブをひねると、クリック感が指に伝わります。ノブを回すたびに感じるクリックで、何かが 1 ステップずつ増減します。たとえば、車のオーディオシステムの音量調整のように。
学べること
このチュートリアルでは、以下の内容を扱います:
Blokdots とは？
Arduino 回路の配線
ProtoPie Connect 経由で Blokdots を使って Pie にメッセージを送る
**完了までの時間: 30〜60 分
**これは Arduino 回路の配線経験によって異なります。
Blokdots
通常、Arduino を扱うときは、少しだけコーディングが必要です。コードを書くこと自体を考えるだけで尻込みしてしまうなら、代わりとなる方法があります。Blokdots は、コンピューター上で動作し、まったくコードを書かずに Arduino をプログラミングできるようにするプログラムです。さらにうれしいのは？ ProtoPie Connect との連携が組み込まれているので、物理デバイスとのインタラクションに Pie をすばやく反応させ始めることができます。
Blokdots - コードなしで Arduino をプログラミング... なんだか聞き覚えがありますか？
執筆時点では、Blokdots はまだベータ版ですが、物理デバイスを扱うのがどれほど速くて簡単かをすでに証明しつつあります。
必要な部品
ここまでのレッスンでは、ProtoPie ライセンス以外に追加購入は必要ありませんでした。このチュートリアルを進めるには、いくつかの部品を用意する必要があります:
要するに — 初心者です。簡単にしてください。
公式 Arduino スターターキット を購入してください。これにはこのプロジェクトに必要なものがほぼすべて入っており、さらに これらのロータリーエンコーダー のセットも付いてきます。
配線しよう！
Blokdots がコーディング面を担ってくれる一方で、配線は自分の手で行う必要があります。簡単なものなら難しくなく、オンラインのどこかで回路図を見つけて、仕組みを正確に理解しなくても Arduino ボードに各コンポーネントをどう接続すればよいかをそのまま示してくれるはずです。
下の図に従って Arduino 回路を配線しましょう。
💡 もう少し丁寧な説明が必要なら、動画の下に詳しい手順があります。
やってみましょう！
Blokdots.com にアクセスし、右上の黄色いダウンロードボタンをクリックしてください。Blokdots はまだベータ版なので、新機能や修正を含むアップデートが頻繁に公開されています。こまめに更新を確認してください。
次に、完成済みの Pie ファイルを使います。こちらからダウンロードしてください:
https://cloud.protopie.io/p/35d69ddd96
では、下の動画に沿って進めましょう:
試してみること
Pie ではファンの速度を上げるときに反時計回りの回転になりますが、物理操作ではエンコーダーを時計回りに回します。ファン速度のコントロールノブを温度コントロールとは逆に動くようにできるか考えてみてください。つまり、ファン速度を上げるときは反時計回り、下げるときは時計回りになるようにします。
2 つ目のボタンも配線されていますが、これまで使っていません。これをどう活用できるでしょうか？
助けて！ 回路はどう配線すればいいの?!
回路の配線に慣れていなくても心配いりません！ 以下に、この回路で使うすべてのコンポーネントの説明と、すべてを配線するための詳しい手順を示します。
Arduino を知ろう
Arduino は、コンポーネントを簡単に接続できるよう設計されています。
上部にはコネクタ群があり、これらはデジタルコネクタで、番号がはっきり振られています。エンコーダーを接続するために、いくつかを使用します。
下部には “POWER.” とラベルされたコネクタ群があります。ここでは “5V” と “GND.” とラベルされたコネクタを使用します。
ブレッドボードの説明
ここでは、すべてを接続するために “Breadboard” と呼ばれるものを使います。ブレッドボードを使うと、電子部品をはんだ付けせずに簡単に接続できます。
Arduino スターターキット には、下の画像によく似たブレッドボードが付属しています。これは穴のグリッドで構成されています:
いくつかの穴のグループが接続されていることを理解することが重要です。上部には 2 列の穴があり、下部にもさらに 2 列あります。それぞれの端には + と – の印が付いています。これら 4 列の各穴は互いに接続されています。通常、これらの列はプロジェクトへの電源接続に使います。一番上の列のどの穴でも電源をつなげば、その列に差し込まれた他のすべてのものに電力が供給されます。
中央の穴は、縦方向の 5 個ずつのグループに分かれています。これらの 5 個組もそれぞれ互いに接続されています。コンポーネントをこれらのグループに差し込み、ワイヤーを使って 5 個組同士や電源列をつなぎます。
上の 2 列と下の 2 列はそれぞれ横方向につながっています（青い線）。縦方向の 5 個組もそれぞれ互いにつながっています（マゼンタの線）。
ロータリーエンコーダー
ロータリーエンコーダーは、回すとクリックする特殊なノブです。このプロジェクトで使うものは押しボタンにもなっています。
5 本のコネクタピンがあり、すべて明確にラベル付けされています:
左から右へ:
GND - グラウンドピン。Arduino の GND コネクタに接続します
+ - 電圧ピン。Arduino の 5V コネクタに接続します
SW - ノブの押しボタンが押されたことを示すピンです。Arduino のデジタルコネクタのいずれかに接続します
DT - エンコーダーのデータピン。Arduino のデジタルコネクタのいずれかに接続します
CLK - エンコーダーのクロックピン。Arduino のデジタルコネクタのいずれかに接続します
💡 DT と CLK が実際にどう動くかを理解する必要はありません。重要なのは、Blokdots でエンコーダーを使うとき、DT と CLK のピンを Arduino の連番のデジタルコネクタに接続する必要があることです。たとえば、DT ピンが Digital 3 に接続されているなら、CLK ピンは Digital 4 に接続する必要があります。配線の説明で、またあらためて確認します。
エンコーダーのピンはちょうどブレッドボードに収まります！
さっそく 2 つのエンコーダーをブレッドボードに差し込みましょう。各ピンがそれぞれ別の縦 5 個組の穴に接続されるように挿してください。
ジャンパーワイヤー
最後のピースは、すべてをつなぐワイヤーです。Arduino スターターキット には、さまざまな長さのジャンパーワイヤーが入っています。色は何を使っても構いません。ワイヤーはワイヤーです。とはいえ、色を分けるとプロジェクトの各部分を識別しやすくなります。たとえば赤いワイヤーは、一般的に電源（より正確には電圧）を示すために使われます。自分にとってわかりやすい色分けを自由に使ってください。
Arduino スターターキットには、さまざまな長さと色のジャンパーワイヤーが付属しています。
図に従おう
上の配線図を覚えていますか？ 図に見えるとおりにワイヤーを接続してください。使うワイヤーの色は関係ないので、下に示されているのと同じ色がなくても、別の色を使えば大丈夫です。
ブレッドボードに電源を供給します:
Arduino の 5V コネクタから、下段の穴（“+” 印）ならどこでもよいので接続します。この列が電源レールです。
Arduino の GND コネクタのどちらかから、下から 2 列目の穴（“–” 印）ならどこでもよいので接続します。この列がグラウンドレールです。
ここで注意したいのは、プロジェクトの向きが図と同じ場合、エンコーダーは今こちらとは反対向きになっているため、この視点では左から右へのピンの並びは次のとおりだということです:
CLK
DT
SW
GND
**エンコーダー 1 の配線: **
グラウンドレールの穴ならどこでもよいので、エンコーダーの GND ピンが接続されている 5 個組の穴のいずれかへワイヤーをつなぎます。
電源レールの穴ならどこでもよいので、エンコーダーの + ピンが接続されている 5 個組の穴のいずれかへワイヤーをつなぎます。
Arduino の Digital 2 コネクタと、エンコーダーの SW ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
Arduino の Digital 3 コネクタと、エンコーダーの DT ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
Blokdots ではエンコーダーに連番のコネクタが必要だと先ほど説明したのを覚えていますか？ DT ピンが Digital 3 に接続されているので、CLK ピンは Digital 4 に接続する必要があります。Arduino の Digital 4 コネクタと、エンコーダーの CLK ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
**エンコーダー 2 の配線: **
グラウンドレールの穴ならどこでもよいので、エンコーダーの GND ピンが接続されている 5 個組の穴のいずれかへワイヤーをつなぎます。
電源レールの穴ならどこでもよいので、エンコーダーの + ピンが接続されている 5 個組の穴のいずれかへワイヤーをつなぎます。
Arduino の Digital 5 コネクタと、エンコーダーの SW ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
Arduino の Digital 6 コネクタと、エンコーダーの DT ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
前と同じように、CLK ピンを Arduino の次の連番のデジタルコネクタにつなぐ必要があります。Arduino の Digital 7 コネクタと、エンコーダーの CLK ピンが接続されている 5 個組の穴のいずれかをワイヤーでつなぎます。
すべて正しくできていれば、次のようになります:
お疲れさまでした！ ProtoPie Connect を使って、Blokdots で最初の Arduino プロジェクトを接続できました。これを使って他に何ができるか、Intro to ProtoPie Connect 4 of 7: Arduino パート 2 - 自分だけのスケッチコードを書こう で見てみましょう。
