モノクロタイム

I'm from the future!

RaspberryPi ZeroをAPIサーバにして遊んでみる

こんにちは,れいじです.

RaspberryPi Zeroを買ったまま持て余していたので,APIサーバにして遊んでみました.

※ちなみにデコってます.かわいい

セットアップする

ラズパイゼロのセットアップに関してはインターネットに山のように情報があるので割愛します. あ,ラズパイゼロ買うならスターターキット買ったほうが絶対楽です.すでにケーブルなりSDカードなり持て余している方は別ですが,私みたいな初心者勢はスターターキット買ったほうがいいです.必要なコネクタとか全部揃ってるし.

Raspberry Pi Zero W Starter Kit

Raspberry Pi Zero W Starter Kit

今回はラズパイ上でNode.js+Expressを動かし,REST APIを作ります.使用するOSはRaspbian.

nodeのアップデートをする

使用するパッケージの都合上,すでにインストールされているnodeよりもバージョンをあげる必要があります. ここではnodeのバージョン管理ツールnを使用してみます.

# nのインストール
$ npm install -g n

# stable版にアップグレード
$ n stable
$ node -v  
10.4.1 # 2018/06/20時点

#yarnのインストール
$ npm install -g yarn

これで実行環境の準備は完了です.

RESTAPIを作る

プロジェクトを用意しています.README.mdに沿って準備すればだれでも使えるはず. 3時間くらいで作ったコードなのでものすごい雑です.多分近いうちに座標とかをリクエストパラメータとして受け付けられるようにします.

github.com

※ YORPのappIDについては公式ドキュメントをどうぞ

Yahoo!デベロッパーネットワークヘルプ - アプリケーションIDとは

あ,nodeやexpressに関してはこの辺りをどうぞ.

qiita.com

ラズパイでgit cloneしてyarnするだけで必要なライブラリが入ってくれます.便利.

appIdを.envで環境変数に登録して,yarn startします.このときラズパイ上で動作確認するときはhttp://localhost/weather/getWeatherにGetメソッドでリクエストを投げると今後1時間の降水予測が返ってきます.

<?xml version="1.0" encoding="UTF-8"?>
<YDF xmlns="http://olp.yahooapis.jp/ydf/1.0" firstResultPosition="1" totalResultsAvailable="1" totalResultsReturned="1">
    <ResultInfo>
        <Count>1</Count>
        <Total>1</Total>
        <Start>1</Start>
        <Status>200</Status>
        <Latency>0.002441</Latency>
        <Description></Description>
        <Copyright>(C) Yahoo Japan Corporation.</Copyright>
    </ResultInfo>
    <Feature>
        <Id>201806192350_0_35.663613</Id>
        <Name>地点(0,35.663613)の2018年06月19日 23時50分から60分間の天気情報</Name>
        <Geometry>
            <Type>point</Type>
            <Coordinates>0,35.663613</Coordinates>
        </Geometry>
        <Property>
                    <WeatherAreaCode >
            <WeatherList>
                <Weather>
                    <Type>observation</Type>
                    <Date>201806192350</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200000</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200010</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200020</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200030</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200040</Date>
                    <Rainfall >
                </Weather>
                <Weather>
                    <Type>forecast</Type>
                    <Date>201806200050</Date>
                    <Rainfall >
                </Weather>
            </WeatherList>
        </Property>
    </Feature>
</YDF>

さらにラズパイがネットワークに繋がっていれば,IPアドレスを使用してのアクセスも可能です.

f:id:yomoyamareiji:20180620003116p:plain

この次はvvvvからラズパイにアクセスをして,インタラクティブなお天気デジタルサイネージを作ってみようかなーと思っています.

vvvvからHTTPGETを投げるのはめちゃくちゃ簡単なので,APIサーバを自作できれば色々な団体(企業)が公開しているデータを使用してリアルタイムなメディアアートを作ることができますね. ではでは~

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-

128x64 OLEDをArduino UNO(互換機)で動かす

こんにちは,れいじです.

こちら真似してArduino UNO 互換機でOLEDを動かしてみました.

サンプルコード実行や環境設定については以下を参照してください.

ArduinoでOLEDディスプレイを試す

用意したもの

  • ジャンパワイヤ オス‐オス

  • Arduino UNO互換機(KeyStudio製.安い・安定して使える・配色がエモい)

  • OLED小型ディスプレイ

  • ブレッドボード

配線

やむを得ずGroveのモニタを絵に使用していますが, * GND * VCC * SDA * SCL 以上4つの入力ピンがあるOLEDなら同じように配線できます.

f:id:yomoyamareiji:20180605004554p:plain

KeyStudioのArduino互換機の基盤にはSDA・SCLがなく,代わりにA4/A5ピンが同じ役割を果たします.これは通常のArduinoUNOでも同じです.

動作確認

無事動いているようです.このOLEDは秋月電子さんで600円弱で購入しましたが,かなり使い勝手がいいですね.

今回はサンプルコードしか実行していないので,好きな文字列やデータを表示できるようにしてみたいです.

ではでは~

【vvvv】vvvvでJoyConを入力機器として扱ってみる(接続編)

こんにちは,れいじです.

vvvvは外部入力機器を簡単に扱うことができます.例えばDualShock4.これはPS4のコントローラですが,PS4だけでなくPCゲームのコントローラとしても優秀です.

DualShock4の場合

DualShock4に関しては既にサンプルパッチが出ていてタッチパッドのタッチ入力以外のすべての入力を取得してBangや座標データとして変換・使用することができます.

これに関してはvvvv講座にも動画が上がっており,解説がされています.


【vvvv講座】PS4のコントローラを使う~Contribution探検~

Dualshock4はUSBケーブルを用いた有線接続・Bluetoothを使用した無線接続に対応しています.

JoyConの場合

じゃあJoyConはどうなのさ.

JoyConはNintendoSwitchのコントローラで,本体から外して使うことができます.JoyConは本体とくっついている状態のとき,本体とくっついている部分の端子を用いて有線接続をします.外して使うときはBluetoothを使用して本体と通信を行います.

vvvvにはBluetoothで繋ぐことのできる機器と連携するためのHIDノードというものが存在します.

HID (Devices) | vvvv

このHIDノードはDualShock4を接続するためにも使用されていて,DualShock4と同様にJoyConをHIDデバイスとして認識させてやればその入力を取得することが可能ということになります.

ただしJoyConはPCで扱うためにひと手間必要です.詳しい手順は以下のリンクから.

hyperts.net

要約すると,

  • PCとJoyConをペアリングする

  • vJoy driverというJoyConの設定用ソフトウェアをダウンロードする

  • mfosse\JoyCon-DriverというJoyCon用ドライバを入手する

下2つをやらなくてもPC上で動作確認はできるんですが,ジョイスティックの傾きが正常に取得できなかったりJoyCon内側のランプの点滅が止まらなかったりします.あと下2つをやらないとvvvvで値の取得ができませんでした.

静止画で申し訳ないのですが,取得できた記念のツイート.

わりと通信内容が不明で,飛んできた通信内容(バイナリ)の必要そうなところ,不必要そうなところを勘で切り出してます.ただJoyConの解析はかなり進んでいて通信内容も分かってきたので,微調整すればモノにできそうな気がしています.これ↓読むのかなりつらいけど…

github.com

とりあえず,vvvvでもJoyConが使えそうな兆しがあるということで報告でした.

Switch持ってなくても,JoyCon単体でも買えます.興味ある方はぜひ.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る

↓こいつがあれば有線接続もできるんじゃないだろうか…

Joy-Con充電グリップ

Joy-Con充電グリップ

【vvvv】HitTestについて【技術書典4・補足記事】

この記事は技術書典で頒布したvvvvでCGプログラミングやってみる本ービジュアルプログラミングことはじめー - CANDY - BOOTH(同人誌通販・ダウンロード)の補足解説記事になります.

こんにちは,れいじです.

技術書典4で頒布したvvvvの本について,補足説明の記事を書きました.

HitTestについて

HitTestはデスクトップ上(もしくはRendererウィンドウ上)のマウスポインタの位置をもとにして,Renderer上に表示されているオブジェクトと接触したらイベントを発生させるノードです.

実際に使うとどういうものが作れるかは以下の記事も参考にしてみてください.

reiji1020.hatenablog.com

HitTestにも様々種類がありますが,今回頒布した本ではHitTest(2d circle)を使用しました.

これはマウスポインタの位置の周囲にある一定の大きさの円の外周を接触範囲とし,この外周とCGが重なり合ったときにtrueを返すboolean関数のような働きをします.

f:id:yomoyamareiji:20180501223419p:plain

HitTest(2d circle)のヘルプパッチでは,五角形の頂点が円の外周として示されています.この五角形の頂点が緑の楕円と重なった時,楕円は青色に変化するようなパッチが組まれています.

つまり,

ので,2種類の処理が書けるのです.

頒布した本では,


マウスポインタがCG(オブジェクトに触れたとき):trueを返す →

  • 図形の大きさ=等倍

  • n角形の角数=三角形

  • CGの色=オレンジ


マウスポインタがCG(オブジェクトに触れていないとき):falseを返す →

  • 図形の大きさ=二倍

  • n角形の角数=五角形

  • CGの色=紫


の処理を複数のswitchノードを使用して作り分けています.

HitTestには2d circle以外にも2d Polygon, 2d Quadなど違う性質を持つノードがいくつか存在します.

ご自分の好みに合わせて&便利なノードを使い分けてくださいね.

ではでは~

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

vvvvook -プロトタイピングのためのビジュアルプログラミング入門

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

Prototyping Interfaces: Interaktives Skizzieren mit vvvv

  • 作者: Jan Barth,Roman Stefan Grasy,Martin Lukas,Markus Lorenz Schilling,Jochen Leinberger
  • 出版社/メーカー: Schmidt Hermann Verlag
  • 発売日: 2013/06
  • メディア: ハードカバー
  • この商品を含むブログを見る