SpaceAppChallengeに参加してtracerouteを可視化した話

先に作ったものの紹介

「RouteVisualized+」


NASAは様々な地球に関するオープンデータを公開しています。
私達は、それに「インターネットの情報」を追加しようということに挑戦しました。

このWebアプリケーションを利用することで、インターネットの経路とNASAの公開するデータを重ねて見ることが出来ます。

こちらから見ることが出来ます→http://inajob.github.io/VisualizedEarth/view.html

(エンジニア向けに書くと要はtracerouteの可視化です)

以下製作の記録です

最近Hackathon参加記録となりつつある、このブログですが、今回はSpaceAppChallengeに参加してきました。

NASA主催の世界で同時に開催されるというこのイベント、宇宙をテーマということで、いつもの”なんでもあり”のHackathonとは少し違った感じ。

今回のメンバーは

  • ばりー さん(リーダー、Androidエンジニア)
  • 私( @ina_ani )
  • Nくん(デザイナー、会社の同期)
  • Kくん(エンジニア、ばりーさんの会社の後輩)

ばりーさんとNくんは良くHackathonに出ているらしく、今回はそれのチームに僕が誘われた感じ。
ばりーさんとは以前のHack Day 2016で一緒のチームに出場し、そのつながりです。

何を隠そう、このメンバー全員同じ会社です。(普段の業務ではほとんど関わりないですが・・)

Input Day

正直宇宙、なんたるか、全く知らない僕たちです。
まずは事前に行われるInput Dayに参加することにしました。

平日の夜に開催されたのですが、NくんとKくんは都合が合わず、私とばりーさんで参加しました。
すごい宇宙の話を聞かされて置いてきぼりにされないかな?と心配でしたが、そんなことはなく、BluemixやAzure、IDCFなどの紹介がメインのイベントでした。

よく見るとSpaceAppChallengeはHack Day 2016の運営メンバーが多く、Hackathonの流れも勝手知ったるHack Dayと似た感じだったので一安心。

また、NASAからのテーマというものが与えられ、しかも運営の方々が丁寧に翻訳してくださったものがあり、それを参考にして進めていくことにしました。

調べるとJAXANASAはかなり大量のデータをオープンデータとして公開しており、それらを見るだけでも面白かったです。

打ち合わせの日々

と言ってもこのHackathon、参加は抽選方式で、開催の1週間前に参加の合否が分かるというスタイルでした。
そのため、参加が決まってからいよいよ何をやるか考えねば、という感じで打ち合わせを始めた我々にはあまり打ち合わせをする時間がありません・・

平日は仕事してるので、夜にちょっと集まっては、何を作ろうかと話していました。

SpaceAppChallenge当日

朝10時から会場に集まり、チームビルディングなどが行われ、実際の開発は12時から開始ということでした。
ということで、すでにチームが決まっている我々は、この時間を使って何を作るかを詰めることにしました。
SpaceAppChallengeTokyoは土曜日の12時から翌日の12時までの24時間が開発期間でした。

さて何を作るか・・・

そこでふと、”インターネットのデータもNASAのデータと重ねて見てみたい” と思いそのアイデアをみんなに話したところ、面白い ということで、それを作ることになりました。

可視化するのは、みんな大好きtracerouteです。

パソコンからWebページを見ている時にどのような経路でパケットが相手サーバまで到達しているかを、地図上で見られるようなものをつくろうというものです。

そうと決まれば材料探しです。

IPから地図の緯度経度を対応づけるデータは、非商用で利用ができるGeoLite( http://dev.maxmind.com/ja/geolite2/ )を使うことにしました。
システムの見た目の部分はブラウザ上で動くWebアプリとして実装することにしました。

まず4人で役割分担です

  • 僕と、N君はフロントの見た目の部分
  • ばりーさんとK君はバックエンドのDBや実際にtracerouteを実行する部分

という分担にしました

地図の表示などはライブラリを使うのが良いだろうということで、はじめのうちしばらくは地図ライブラリを調べていました。

  • OpenLayers3

http://openlayers.org/
多機能そう・資料も多い
使ってみるとCanvasに描画しており非常に重い

  • DataMaps

http://datamaps.github.io/
d3.jsを使った地図情報表示ライブラリ。
SVGベースで軽快に動くが、表現力が低い

  • leaflet.js

http://leafletjs.com/
SVGベースで動き、表現力も十分

ということで、色々とライブラリを変えながら、最終的にleaflet.jsを使うことにしました。

地図は初めはOpenStreetMapなどのラスター形式の地図を使っていたのですが、色などのカスタマイズがやりにくかったため、最終的にNaturalEarchが提供しているgeojson形式の国境線のデータを利用しました。( https://geojson-maps.kyd.com.au/ )
leafletはgeojsonの形式のファイルを読み込む機能があり難なく世界地図を表示することができました。

国境データはそのまま描画すると、イギリスが中心となった世界地図なのですが、日本でよく見る形の東アジアが中心になった地図の方がわかりやすいということで、ロード時に座標をずらして読み込むようにしました。

NASAのデータはWMSというタイルマップを返すAPI形式のものを利用することにしました。
これもleafletが対応していたため、URLとレイヤー名を指定すると、NASAのデータを地図の上に表示することができました。

(たとえばここ、 かなり面白そうなデータがあります http://sedac.ciesin.columbia.edu/maps/services

フロントエンドはこうやって僕がJavaScriptのライブラリなどで、一応動くものを作り、N君が色やレイアウトを調整するという流れで作業しました。

作業はgitbucketのプライベートリポジトリを介して行いました。git便利

バックエンドはあまり関わっていないので詳しい流れはわからないのですが、ばりーさんがtracerouteをしたデータをDBに溜め込む部分を作り、K君がその結果とGeoLiteの緯度経度を紐付けて、APIで返す部分を作っていたようです。

GeoLiteのデータはIPのサブネットと緯度経度のペアの情報が大量にあるということで、IDCFのサーバ上で、これらのデータをSQLでjoinしまくるのが遅いというのが問題になっていたようです。

このHackathonは夜中もぶっ通しで開発してもいいよ、というものだったのですが、もう我々も歳だということで、一度は帰ることに・・

土曜日の夜の段階では、見た目はなんとなく動いていて、NASAのデータ、世界地図、ダミーの経路を表示できるようになっていました。バックエンドは、SQL上では返したいデータが取り出せるという状態でした。

僕は帰って4時間ほど寝て、ほぼ始発に乗って会場へ、、
日曜日は仕上げということで、クォリティを高めたり、プレゼン資料を作ったりしていました。

APIが完成すると、ちょっと気になるあのサイトの経路を調べて、遊ぶことができるようになりました。
Akamaiすごいなとか、ここは自社のデータセンター通ってるな とかを地図上で見れるのは思いの外面白かったです。

yahoo.comへの経路、シンガポールらしい(あと経由しているルーターは全部yahoo.comのものみたい)

ニュージーランドのサイトを見てみる

あのサイトはオランダから?


またNASAのデータを重ねることで、人口が少ないこんなところをインターネットが通っている!とか、風の強いこんなところにデータセンターがあるっぽい ということを見ることができました。

12時で開発は終了し、その後発表です。

ガチ技術のものから、斜め上の発想のものまで、様々な作品がありました。
僕たちの作品は見た目はかなりいいクォリティだったと自負しています。

が、宇宙との関わりの部分が弱かったため、賞はもらえず・・

しかし多くの方から

  • 完成度が高い
  • あのサイトの経路が見てみたい

などコメントをいただくことができました。

また、僕たちエンジニアはtracerouteなんて出来て当たり前と思っていましたが、見に来てくださった方の中には、こんな情報が公開情報なのか!と驚く方もいらっしゃって、エンジニアしか体験できていない、インターネットの中身の部分を、一般の方にも感じてもらえるきっかけになったかな? と思っています。 (宇宙関係無いけど・・)

雰囲気構成図


まとめ

今回はかなりスムーズに進めることができ、完成度もまずまずで、堅実なものづくりができたかなと思っています。
ただ、今回のようなテーマのあるHackathonでは、もう少しテーマに寄り添った作品にしたほうがよかったなというのが少し心残りです。
また社会人4人で1週間でネタを考える、というのもそもそも集まるのも難しく、次回はもっと時間を確保するか、 またはオンラインでうまくネタ出しをする方法を考えていきたいなと思いました。


SpaceAppChallengeは有志の方が運営をしているようで、宇宙愛の強さを感じました。
IT業界で宇宙のこと大好きな人、結構多いと思っているので、我こそは!と思う方は是非次回にでも参加してみると良いと思います。

ゲーム機のようなものをまとめてみる

これは?

最近僕がハマっているArduinoなどを応用した小型の携帯ゲーム機をまとめてみました。

これ以外にも知ってたら教えてください。

今回はIchigoJam(http://ichigojam.net)のような外部ディスプレイをつなぐタイプのゲーム機は除外して、ディスプレイ付きの、スタンドアローンで遊べるものに絞ってみました。

Gamebuino

http://gamebuino.com/

f:id:inajob:20160323204242p:plain

最近僕がハマっているハードウェア

自分で作ってみた記事:http://d.hatena.ne.jp/inajob/20160322

  • Arduino互換
  • 十字キー+A,B,C
  • 84x48のモノクロ液晶
  • atmega328
  • スピーカ
  • 通信対戦用ケーブル
  • バッテリー
  • SDカードからのゲーム書き込み
  • オープンソースハードウェア・ソフトウェア
  • 39€で販売中(今頼むと6月くらいに発送されそう)
  • 使いやすいライブラリ
  • PCでもデバッグできるエミュレータ(すごい!)
  • 有志によるゲームと(わりと)活発なコミュニティ

Arduboy

https://www.arduboy.com/

f:id:inajob:20160323233340p:plain

  •  薄い筐体
  • オープンソース
  • Arduino互換
  • 上下キー+AB
  • 薄くて小さい筐体
  • 128x96のモノクロOLED
  • スピーカ
  • PreOrderで$39
  • 多分Atmega32u4(Leonardoと同じ)
  • そろそろ届き始めたのだとか・・
  • こちらもコミュニティは活発
  • ライブラリはあるものの、まだこなれていない印象。

Meggy Jr RGB Soldering Kit

shop.evilmadscientist.com

f:id:inajob:20160323212518p:plain

LED Game for AVR

http://www.nicotak.com/avr/ledgame.html

f:id:inajob:20160323213747p:plain

  • 16x16単色LED
  • 2007年Arduinoの黎明期と同じくらいの時期(多分)に発売している
  • atmega168
  • 上下左右+ABボタン
  • Arduinoではない、ISPで書き込む (Arduinoに改造している記事あり http://www.kako.com/neta/2008-006/2008-006.html
  • もう売ってなさそう
  • 様々な改造例あり。 SDカードのデータを読みこんでブートするGamebuinoみたいな改造もあった
  • 回路図あり オープン http://www.nicotak.com/avr/develop/inside.html
  • LED直結で抵抗がないけど大丈夫なのかな?(それの考察もあるけど結論が出ていない模様)
  • 輝度ムラの出来る配線 ソフトウェアで輝度ムラを除去するサンプルプログラムあり
  • 単三電池2本から

 

AVR-GAME-2S

http://www.microfan.jp/shop/7_1.html

f:id:inajob:20160323215913p:plain

  • 3240円くらい
  • キットなので自分で組み立てる
  • ボタンは4つ
  • 8x8 2色LED
  • スピーカ
  • atmega168
  • Arduino非互換 ISP書き込み
  • よく似た単色8x8LEDのものもある http://www.microfan.jp/shop/7_2.html
  • 回路図が見れる(ライセンス表記なし)
  • 別売りのACアダプタ電源

EGP01

http://www7a.biglobe.ne.jp/~elegan-konya/EGP/EGP01.html

http://elegan-konya.at.webry.info/

f:id:inajob:20160323221341p:plain

TFT液晶と3Dスティックを組み合わせた小型ゲーム機

  • dsPIC33FJ128GP804-I/P
  • 4方向+1タクトスイッチの3Dスティックのようなボタンが2つ
  • 液晶は別途購入 128x128のカラーTFT液晶
  • 3V駆動
  • 開発ブログが読み応えがある
  • もう売っていない

GAMBY

http://logicalzero.com/gamby/

f:id:inajob:20160323221946p:plain

  • Arduinoのシールドとしてのゲーム機(なのでArduinoでプログラミングできる)
  • 十字ボタン+4方向入力ボタン(写真左の黒いやつ)
  • スピーカ
  • オープンソース
  • Games for Arduino, Made By You!
  • 96x64モノクロ液晶
  • 25$くらいで販売中(たぶん自分で組み立てるキット)
  • ライブラリあり https://github.com/logicalzero/gamby

Nibble

https://www.kickstarter.com/projects/808254712/nibble-pocket-sized-arduino-wifi-oled-sd-card-ir

f:id:inajob:20160323222831p:plain

Kickstarterでfundedなやつ

  • Jun 2016に発送予定?
  • €49で募っていた模様
  • ATMEGA328P - 16 MHz
  • Wifi
  • 128x64 OLED Display (単色っぽい)
  • LiPo battery - 300 mAh - 8+ hours battery life
  • 8個のボタン
  • MicroSD(たぶんgamebuinoみたいにSDからhexを書き込める)
  • 赤外線送信機
  • スピーカ
  • Arduinoとして利用できる(マイクロUSBケーブルが刺せる)
  • 3Dプリンタで作られた筐体

Tiny Arcade

https://www.kickstarter.com/projects/kenburns/tiny-arcade-a-retro-tiny-playable-game-cabinet/description

f:id:inajob:20160323223706p:plain

これは有名だったから知ってる人も多そう

  • フルカラーOLED(96x64)
  • SDカードからゲームをロードできる
  • アナログジョイスティックと2つのボタン
  • スピーカ
  • リチウムイオンバッテリ
  • USBからプログラミングできる
  • Arduino Zero互換(32bit-ARM)
  • $60出資で組み立てキット
  • フリーでオープンソースなゲーム (そのもののサイトが見つからなかった。 これはTinyDuinoという姉妹プロダクトのサイトか?http://tinyduinogames.de/
  • 絶賛開発中の模様 (Mar 2016出荷予定だ、がんばれw)

Tetris(R) MicroCard

https://www.arduboy.com/store/products/tetris-microcard

f:id:inajob:20160323232529p:plain

  • Arduboyの人たちの前作?
  • $49
  • モノクロOLED (多分 128x96 を縦向きに使っている)
  • USB端子のようなものが見えるが、特に言及されていない

DIY Gamer Kit

https://www.adafruit.com/products/2123

f:id:inajob:20160323234940p:plain

  • Arduinoのシールドとしてのゲーム機(うしろにこっそりArduinoが見えます)
  • 9V電池
  • 自作キットとして販売 $56.95
  • 動画を交えた開発チュートリアル
  • 赤外線送信・受信

DigiPixel

http://www.bradsprojects.com/the-digipixel/ 

f:id:inajob:20160324000850p:plain

  • Arduinoのシールドとしてのゲーム機
  • 8x8フルカラーLED
  • 十字+ABボタン
  • ライブラリあり AirWriteという残像を使った表示を実現できる
  • 元々Kickstarterで、今はもう売ってないかな・・?

Magpi

http://www.instructables.com/id/Magpi-The-Micro-Arduino-Gaming-Platform-Interface/?ALLSTEPS 

 

f:id:inajob:20160324001152p:plain

  • The Micro Arduino Gaming Platform Interface
  • Arduinoを使った簡単なゲーム機
  • 製品ではなく作り方の紹介
  • 3Dプリンタ用のデータなども公開されている
  • ライブラリも提供されている

情報源

まとめ

Arduinoなどの普及によりこういうゲーム機はとても作りやすくなってきています。

オープンソースなので、自分で作ってみるもよし、買ってみて遊び倒すもよし、ゲームソフトを自作するのもよしです。

部品から仕組みを理解し、組み立てて、更にその上で動くゲームを開発するというのは、ある意味フルスタックな感じでとても満足感があります。

新しいことに挑戦してみたい方には是非薦めたい遊びです。

Gamebuinoつくってみた

Gamebuinoざっくり紹介

GamebuinoはArduinoを利用して作られたゲーム機とその環境です。

http://gamebuino.com/
(下記画像は公式ページのものです)

Arduinoに加えて下記の機能が搭載されています

  • ハードウェア
    • 48px*84pxのLCD(バックライト付き)
    • 十字ボタンとA,B,Cボタン
    • SDカードソケット
    • スピーカ
    • バッテリー
    • 通信対戦用のI2C端子
  • ソフトウェア

ハードウェアはまぁ書いてあるとおりの機能です。ソフトウェアがすばらしくてですね、、

ブートローダ

Arduinoブートローダーとほぼ同じなのですが

  • シリアル経由の書き込み(これはArduinoと同じ)
  • SDカード経由の書き込み
  • Cボタンが押された状態で起動した場合にLOADER.HEXを書き込む

という機能があります。
これにより、パソコンが無くても違うプログラムに書き換えることが出来ます。
ビルドしたバイナリをSDカードに入れておくことで、事実上ほぼ無限のゲームを入れ替えながら遊ぶことができます。
まるでゲーム機みたい!

ゲーム開発用ライブラリ

ゲームづくりにおいて大切なのは良いライブラリです。
ゲームが作りたいのに、円を書くアルゴリズムや直線をひくアルゴリズムの作成に時間を割かれたくありません。

GamebuinoにはよくできたSDKが提供されており、様々な機能が簡単に呼び出せる関数にまとめられています。
一例を以下に列挙

  • 名前入力などに使える文字入力(keyboard)
  • ちょっとした情報をユーザに伝えるpopup(アニメーション付きで表示されます)
  • ちょっとした当たり判定(physics)
  • ボタン周りの処理(キーリピートなど)
  • 8bitサウンドのソフトウェア音源とトラックの管理
  • 各種図形の描画ルーチン
  • 数種類の大きさのアルファベットのフォント

とてもすばらしい

Gamebuinoつくってみた



インベーダーも動きました!


さてさて こういう構成で作れば良いのか

お値段はざっとこんな感じ

LCD 500円 有機ELなら倍くらい
FT232RL 秋月のモジュールが1000円くらい(これは使いまわせるので1つあればOK)
Atmega328 250円
Speaker 100円(なにかしらのおもちゃから取り出してもOK)
ボタン 10個で100円くらい(良いボタンは1個100円くらいする)
レギュレーター 1個30円くらい、周辺にコンデンサが必要、これは1個10円もしない
基板 150円
SDカードスロット 250円
その他 もろもろ

2500円くらいかな

もし2個めを作るならFT232RLは共用できるので1500円くらいです

FT232RL

FT232RLからはシリアルの通信線でAtmega328と接続します。
TX,RXという送りの線と受信の線です。それと書き込み時にリセットを書けるための線を接続します。

シリアル接続は予め転送レートを決めておいて、そのクロックでデータを送り合う方式です。

Button

ボタンは全部で7つあります。
それぞれをAtmega328と接続します。
プルアップはAtmega328の内部で行うので不要です。

LCD

LCDとAtmega328はSPIというインターフェースで接続します。

  • CS(chip select)
  • MOSI(master out, serial in)
  • MISO(moster in, serial out)
  • SCK(serial clock)

SPI

SPIはMasterとSlaveという役割を割り振ります。MasterはAtmega328などのCPUで、Slaveは液晶などの周辺機器であることが多いです。

MasterがSCKからクロック信号(HIGH,LOWを切り替え続ける)を送り、そのクロックに合わせてMOSIを通してMasterからSlaveに、MISOを通してSlaveからMasterにデータを送ります。

また複数のSlaveを接続する際にピンを消費しないように、MOSI,MISO,SCKのピンは他のSlaveと共有することが出来ます。CSがHIGHのものだけがその信号をやり取り出来るようになっています。

Speaker

スピーカーはトランジスタを介して接続します。
たぶん今回の場合は小さいスピーカなので無くても大丈夫だと思います。

SDCard

SDカードとはSPIで接続します。
これはLCDと線を共有します。
ただしCSだけは違う配線で接続します。SPIはCSを使ってどの接続が有効かどうかを切り替えるのです。

  • CS(chip select)
  • MOSI(master out, serial in)
  • MISO(moster in, serial out)
  • SCK(serial clock)
レギュレーター

今回使うLCDやSDカードは3.3Vで動作します。
そのためには乾電池3本から得られる4.5Vを3.3Vにレギュレーターで降圧する必要があります。

普通のArduinoは5Vで動作しますが、Gamebuinoは3.3Vで動作します。

組み上げる

Gamebuinoのサイトを参考に結線します。
本当はブレッドボードにまず組んで、動作を確認してからユニバーサル基板を使うのが良いです。

ブートローダーの書き込み

ブートローダーの書き込みは少し面倒くさいです。
専用の書き込み器を使うか、既に作られてあるArduinoを利用するか、FT232RLを使う方法がありますが、どれも煩雑です。

ココに良い資料があるのでこの方法を使いました。
http://make.kosakalab.com/arduino/bootloader/

エンクロージャ

とりあえず配線の裏側を守るために木の板を用意してネジとナットで基板に固定します。


遊ぼう!

SDカードにHEXファイルを入れておくことで、複数のゲームを切り替えて遊ぶことが出来ます。ただしSDカードはSDHCではなく「SD」カードである必要があります。

これは2G以下のSDカードのことです。
今やあまり売っていないですが、なんとか調達しましょう。

http://gamebuino.com/wiki/index.php?title=Games

ゲームはここにたくさんあるので、ダウンロードしましょう。
液晶がGamebuinoとは別の場合は、液晶の命令セットが異なるためゲームを再度ビルドする必要があります。

まとめ

Gamebuinoは良いので、自分で作るか買ってみてください!

まずは公式ページにアクアセス! → http://gamebuino.com/

aitendoのTN液晶をarduinoで制御してみる

aitendoで99円くらいで売っていたTN液晶をArduinoから制御してみます。

たぶんこれ
http://www.aitendo.com/product/4410

HT1621BというチップでSPIみたいなインターフェースがある模様。
ネット上でもいくつか作例を見つけました。


  • CS
    • チップセレクト
  • RD
    • 読み出しの時に使うっぽい 今回は使わない
  • WR
    • 書き込みの時のクロック
  • DATA
    • データ線
  • GND
  • VDD
  • LED A
    • バックライト アノード
  • LED K
    • バックライト カソード

で、CSを HIGH->LOWして WRを動かしながらDATAからデータを流していく。

調べた所

SYS EN 100 0000-0001-0 -
BIAS 100 0010-1001-0 1/3bias 4 commons option
LCD ON 100 0000-0011-0 -

まで流すと初期化完了らしい。
読みやすいようにいろいろ書いたが、真ん中の列にある0や1をこの順で書きだせばOK

先頭の100がコマンドモード 後続の9ビットが引数のようなものらしい。

続いてデータの書き込み

DATA 101 AAAAAA DDDD .... Aはアドレス、以降4ビット単位でアドレスをずらしながら書き込んでいく。(例ではDと表記)

今の所とにかく各セグメントを点滅させるところまで出来た。

どのアドレスがどのセグメントに対応しているかはこれから調べる予定。

さて、何に使おうか

#define WR 6
#define DATA 7
#define CS 8

void data(bool b){
  digitalWrite(WR, LOW);
  digitalWrite(DATA, b);
  digitalWrite(WR, HIGH);
}
void com(bool b0, bool b1, bool b2){
  data(b0);
  data(b1);
  data(b2);
}
void op(bool b0, bool b1, bool b2, bool b3, bool b4, bool b5, bool b6, bool b7, bool b8){
  data(b0);
  data(b1);
  data(b2);
  data(b3);
  data(b4);
  data(b5);
  data(b6);
  data(b7);
  data(b8);
}

void op4(bool b0, bool b1, bool b2, bool b3){
  data(b0);
  data(b1);
  data(b2);
  data(b3);
}
void op6(bool b0, bool b1, bool b2, bool b3, bool b4, bool b5){
  data(b0);
  data(b1);
  data(b2);
  data(b3);
  data(b4);
  data(b5);
}
void setup() {
  pinMode(WR, OUTPUT);
  pinMode(DATA, OUTPUT);
  pinMode(CS, OUTPUT);
  
  
  digitalWrite(CS, HIGH);
  
  // == 9bit code sequence ==
  // SYS EN  100 0000-0001-X
  // BIAS    100 0010-1001-X 1/3bias 4 commons option
  // LCD ON  100 0000-0011-X
  
  // pattern

  // BIAS    100 0010-0000-X 1/2bias 2 commons option
  // BIAS    100 0010-0100-X 1/2bias 3 commons option
  // BIAS    100 0010-1000-X 1/2bias 4 commons option
  
  // BIAS    100 0010-0001-X 1/3bias 2 commons option
  // BIAS    100 0010-0101-X 1/3bias 3 commons option
  // BIAS    100 0010-1001-X 1/3bias 4 commons option

  
  digitalWrite(CS, HIGH);
  digitalWrite(CS, LOW);
  com(1,0,0); op(0,0,0,0, 0,0,0,1, 0);
  digitalWrite(CS, HIGH);
  digitalWrite(CS, LOW);
  com(1,0,0); op(0,0,1,0, 1,0,0,1, 0);
  digitalWrite(CS, HIGH);
  digitalWrite(CS, LOW);
  com(1,0,0); op(0,0,0,0, 0,0,1,1, 0);
  digitalWrite(CS, HIGH);
  digitalWrite(CS, LOW);
  
  com(1,0,1); op6(0,0,0,0,0,0);

  op4(1,1,1,1);  
  op4(1,1,1,1);  
  op4(1,1,1,1);  
  op4(1,1,1,1);  
  
//  for(int i = 0; i < 100; i ++){
//    op4(0,0,0,0);
//  }

  digitalWrite(CS, HIGH);
  digitalWrite(CS, LOW);
  
  int count = 0;

  while(true){
    digitalWrite(CS, HIGH);
    digitalWrite(CS, LOW);
    com(1,0,1); op6(0,0,0,0,0,0);
    for(int i = 0; i < 64+8; i ++){
      data(i >= count);
    }
    count ++;
    delay(50);
    
    if(count >= 64 + 8){
      count = 0;
    }
  }
}

void loop() {
}

RakuChordの回路を発注してみた。

少し前になりますが、基板を発注してみました。
とても簡単で驚きました。

ということで簡単なやり方を公開してみます。
今回はオープンソースのCADソフトである「KiCad」を使っています。

http://kicad.jp/

また発注はスイッチサイエンスPCBを利用してみました。

https://www.switch-science.com/pcborder/
(裏では結局FusionPCBに発注してるだけっぽいので、慣れたらいきなりFusionPCBでも良いかもですが、、 なんとなく日本人が間にいてくれると心強いかなと思って使ってみました。)

回路図の作成


まずは論理的な回路の配線を作ります。
部品の配置にはこだわらず、どことどこがつながるべきかを線でつないでいきます。
KiCadでは大抵の部品のプリセットがあるので、とても簡単に作ることが出来ます。

作成したらルールのチェックを実行します。
未結線の回路やVCCとGNDがショートしてたりしたら教えてくれます。親切!
(いくつかのルールがよくわからないので無視しました。勉強しなければ・・)

フットプリントの選択

フットプリントというのは、基板に部品を配置するときの「足の形」のことです。
要はその部品のためにどのように基板に穴を開けて、シルクに印刷をするのかをひとまとめにしたものです。
例えば抵抗であれば、四角い抵抗を示すシルクに加え、2つの穴を2.54*4mm間隔に配置する、などと行った感じです。

やることは回路の部品に対応するフットプリントを選択することです。
これもKiCadのプリセットがかなり使えます。
ただし、イアホンジャックのようなものはフットプリントが足りないことがあります。

そういう時はフットプリントエディタでオリジナルのフットプリントを作る必要があります。これは少し面倒だけど、寸法がわかってればそのとおりに穴を配置するだけです。

プリント基板の作成


いよいよ基板の作成です。

といっても、どの部品をつかって、どのように結線すべきかは回路図の作成、フットプリントの選択で作成したデータに含まれているので、やることは部品を基板のどこに配置するかを決めるだけです。

はじめにデザインルールを入力します。
これは穴の大きさなどの基本的なパラメータの初期値を入れるものです。
発注する業者によって最小の大きさなどがあるので、考慮しながら入力します。(僕はココで間違えてけっこうハマりました。)

次に外形線を引く必要があります。作りたい基板の大きさに合わせて外形線を引きます。丸みのある線も引くことが出来ますが、今回は長方形の基板にしたいだけなので単純に長方形の外形線を引きます。
基板の発注をするときには大きさで値段が決まるので、外形線を引くときは予算と相談する必要があります。 もちろん作りたい部品が全部乗る大きさにする必要があります。

そして、フットプリントをロードします。てきとーに散らばった状態からスタートするので、それらをいい感じに配置していきます。

その後配線を引きます。今回は表、裏の2面の基板を作成するので、どちらの面に線を引くのかに気をつけながら配線をします。
どこに配線すべきかは回路図のデータから明らかなのでKiCadが配線をガイドしてくれます。
(画像のナナメの黄色い線がそれです)

当然同じ面で配線が交差するとショートするので、うまい具合に立体交差させながら配線します。

大体出来たところでERCをかけます。
ERCを実行すると回路図とプリント基板の設計の矛盾を教えてくれます。回路図ではつながっているのにプリント基板上で繋がっていなかったりしたときに教えてくれます。

また配線同士が近すぎる場合なども警告してくれます。

エラーが出なくなるまで修正をすれば基板データの完成です。

発注

後はガーバーデータという形式にエクスポートすれば完成です。

業者が指定する方法に合わせてエクスポートします。
いくつかのファイルが出力されるので、ファイル名を業者の指定するものに変更して、業者の指定する方法でそれらを納品します。(スイッチサイエンスの場合はzipで固めてアップロードしました。)

あとはWebフォームで発注をするだけです。
お値段はスイッチサイエンスPCB( https://www.switch-science.com/pcborder/ )だと

  • 5cm*5cmで10枚1389円+送料1080円
  • 10cm*10cmで10枚3074円+送料1080円

とかそんな感じです。

上手く行けば大体2週間~3週間くらいで基板が届きます。
(中国の旧正月をまたぐと納期がすごく遅くなるので注意!)

上手く行かない時は1週間以内くらいにダメだった旨が連絡され、発注もキャンセルされます(クレカからは一度引き落とされた後にキャンセルがかかります)。穴の大きさが指定されたものより小さかったりすると基板を作る前にストップがかかることがあります。

基板自体に論理的な問題があるものはチェックされないので、注意が必要です。

組み立て

基板が届いたらそれを組み合わせて作品を完成させます。
僕は木材と組み合わせてRakuChordを作成しました。
アクリル板やレーザーカッターを使えばもっとかっこいいものが作れると思います。(ちょっと高いけど)

まとめ・基板を作る利点

ユニバーサル基板でやるよりも明らかに完成度の高いものが作れます。
基板はもうできているので作るのが簡単になります。 完成度が高くてしかも簡単!やらない手はありません。

同じものを大量に作るような場合にも有効です(僕の場合は1つ作りたいだけだったので10枚単位で発注すると基板を余らせてしまいましたが・・)

個人でもそこそこ簡単に作れるので、自分の作品を持っている人はぜひやってみてください。

また、基板を作る前段階として、ブレッドボードなどの試作の回路であっても、その論理回路図をKiCadで書いてみるのをおすすめします。
回路ってバージョン管理出来ないので、記録のためにもちゃんと回路図で書いておくと後が楽です。

Hack Day 2016に参加して「Life Lapse」をつくって入賞しました!

Hack Day 2016に参加してきました。
かれこれ4回めの参加です。

Hack Day( http://hackday.jp/ )というのは、土日の24時間(本当に午前9時〜翌日午前9時)という時間制約のもと「動く」プロダクトを開発し、その後90秒で発表するというYahoo!JAPANの名物イベントのOpen版です。

今回も会社つながりのメンバー(でもこの組み合わせは初めて)で参加しました。

とりあえずの説明

とりあえず作ったものは
「Life Lapse」
です。


アクションカムなどが小型化してきており、もう既に1日じゅうを録画することは技術的には可能となっていますが、実際にそれをやったところで、その動画をどう活用するか?という問題があります。

それを解決する方法として僕達は「Life Lapse」を作りました。

なんとめでたく賞をいただくことも出来ました!

ということで、いつもの振り返りつつ何をやったのかを説明していこうと思います。


↓実際はブラウザ上で動作するのですが、動作の様子をgifアニメで録画してみました。

早送りで再生されつつ、注目ポイントではゆっくりと再生されているのがわかると思います


参加メンバー

  • @kasahi 発起人? 今回のリーダー的存在
  • @shamabe ライブコーダーなあの人 Hacker's Bar( http://hackers.bar/ )でライブコーディングをするなどHackerの鑑
  • ばりーさん 仕事ではAndroidアプリなどをバリバリ開発してる人
  • cacciemaさん 仕事はWebデザイナー、といいつつかなり幅広い仕事をしてる印象の方(社内でたまに合うくらいなので、まぁ印象、ということで)
  • matsuchiさん 仕事はWebデザイナー、絶賛JavaScriptを勉強中らしい(こちらはチーム作るまでは全く面識なしでした)
  • 僕 誘われて参加しました。

社内や社外のHackathonに顔を出すことが多い人ばかりというのが特徴かな?

参加まで

開発などは24時間でやるのが条件だが、打ち合わせなどは事前にやることが推奨されている。
ということで、開催の1ヶ月前くらいからちょこちょこ集まり始める

といってもそれほどみんな時間も取れないので、夜ご飯を一緒に食べに行ったりして、そこでアイデア出しをする感じです。
しかしここで大きな問題が!
「アイデアがまとまらない!!!」

今回6人というわりと大人数チームだったということもあって、なかなかアイデアがまとまりません。
「それはもっとすごいものを見たことがある」
「それは何の役に立つのか?」

などと言い出すと、そもそもいいアイデアというのが出てきませんでした。

個人的にはこういうときのアイデア出しでは、いま流行りの技術を使ってみるという観点で考えることが多いのですが、どうも最近ディープラーニング人工知能「FinTech」といった一朝一夕では使いこなせそうにないものが多く、それらをベースにしてもなかなか良さそうなアイデアに結びつかなかったです。

また、理論的にできるか?ということに加えて、「参加メンバーが24時間で開発できるか」という観点も考えなければいけません。
それぞれに得意なことがあるので上手く活かしていきたいのですが、どちらかというと旧来のWebの技術をベースに仕事をしているので、本当にガチデバイス作成 みたいな方向にいくのも難しいなぁ、、 しかしWebアプリ作るだけではなかなかみんなをあっと言わせるものを作るも難しいし、、、

いくつかの案は「できるかも?」と言うものがあったのですが、少し実証実験をしたところで実現可能性がとても薄くなるものや、「思ったものとは違う!」といったものも出てきて、良さそうに思ったけどボツになる案もありました。

そんなこともあって、実際に今回のネタにしよう!と合意が取れたのはHack Dayの前日の金曜の夜でした。

Hack Day開始

今回は秋葉原が会場ということで、朝眠い目をこすりながら集合
朝9時に「Hack Time!」の掛け声とともに開発開始です。

私達のプロダクトまず必要なものは、頭に固定できるアクションカムと、JINS MEME( https://jins-meme.com/ja/ )と、JINS MEMEから取れる様々なセンサーのデータを記録する仕組みです。

アクションカムについてはオリンパスの方が貸し出してくださったレンズスタイルカメラ( http://olympus-imaging.jp/product/opc/a01/ )を使おうと考えていました。
しかし、会場で電波を発するものが多いせいでWifiの電波状況が非常に悪く(Hackathonではよくあることなので、やはりか・・ という印象でしたが)スマートフォンとの連携が前提となっているレンズスタイルカメラでは、撮影が心許ないということや、頭への固定方法を考えなければ、、 という問題が出てきたため、秋葉原で調度良いアクションカムを調達することにしました。

JINS MEMEについては、知人で持っている人がイたので借りてくることに成功しました。

そして一番大事なJINS MEMEのデータを記録する仕組みの部分です。
どうもまだ安定して動くSDKiOS版しかないということで、JINS MEMEのクライアントとしてはiOSでうごくアプリを作ることになりました。
しかしうちのチームメンバーでiOSのアプリを得意としている人はいませんでした、、

やったことがないわけではないので、一番かけそうなばりーさんにとりあえずお願いをして書いてもらうことに、、
普段はAndroidの開発をしている方なので、Androidだったらもっと早く作れたのに・・ と残念そうでした。
わたしも少しiOSのアプリは作ったことがあったので、慣れないばりーさんの補助ということでいわゆる「ペアプログラミング」をしました。

といっても一般的な?ペアプログラミングとは違い、ばりーさんがコードを書いている間に、僕が次必要となるAPIの仕様を調べて、 それをざっと伝えて、 ばりーさんはその情報を元に新しいロジックを書いて、 という、なんというか「パラレルディベロップ(造語です)」をしました。

JINS MEMEのデータは、一度iPhoneのアプリに貯めこまれ、それをサーバに送ってサーバ上のMySQLに保存することにしました。
そのためのサーバの設定やサーバプログラムは@kasahが作成してくれました。

といいつつ@kasahさんは買ってきたアクションカムの設定をしたり、画質はどのくらいで行こうか?、プレゼンの時にどのような画面構成だと見栄えがするだろうか?など総合的なプロデュースをしていたので、途中から サーバのプログラムは僕にバトンタッチして、ばりーさんがつくったiOSアプリからサーバプログラムにデータを送る部分の最終的なすり合わせは僕が行いました。

デザイナのcacciemaさん、matsuchiさんは画面の構成の案を出したり、プロダクトの企画意図の詰めや、プレゼンを進めていくうえでどのように伝えると誤解なくスムーズに伝わるか、ということを考えたりしていました。
プレゼン資料のの草案や画面の簡易的なイメージ図などを作ってもらいました。

@shamabeさんはブラウザ上で動く動画再生のしくみとその見た目の部分を作っていました。
今回のプロダクトの画面は、動画と各種データがたくさん表示されるため、拡張性の高い仕組みが必要だということで、基本的な動きの部分をかなり丁寧に作っていました。
また、動画の再生速度を柔軟に調整できるための汎用的な仕組みも作ってもらいました。


このプロダクト、プレゼンで必要なものとして「実際にLife Lapseを使って要約した動画」があります。
これを撮れるのはこの日の明るいうちだけ!ということで、昼ごはんまでになんとか撮影の目処を立てる必要がありました。

昼を食べにいく段階ではiOSアプリの完成度は80%と言った所、何故か上手く通信できずJINS MEMEのデータは端末に残ったままとなっていました。

しかしお腹も空いたのでとりあえず昼ごはんです。
昼を食べつつ今後の流れを確認しました。

なんとか撮影へ

そして、戻ってきて程なくしてアプリが完成しました。
(通信が出来ないのはいわゆるAppleのATSに引っかかってたからでした、初心者丸出しのあるあるですね;)
サーバに実際に送られたデータを保存して、なんとか行けそうなことを確認して、いざロケハンに出発です。
(サーバで保存するところも変なバグを僕が仕込んだためにちょっと時間をロスしました・・)


アプリから淡々と送られてくるデータを見つつ、居残り組はデータの解析方法の検討を始めることに、、
ともかく可視化しないとはなしにならないなということで、僕はブラウザ上でJINS MEMEのデータを可視化する仕組みを作り始めました。
ばりーさんは引き続きJINS MEMEアプリの改良を行い,GPS座標やAppleWatchから脈拍を取得するなどの機能の開発をはじめました。

1時間ほどでロケハンを終了して戻って来ました。

カメラからムービーデータをパソコンに移し、JINS MEMEのデータはMySQLからダンプして取り出します。

僕は、ダンプしたデータをJavaScriptで扱いやすいように変換するちょっとしたスクリプトを書いて、作りかけていた可視化ツールを使って、JINS MEMEのデータをグラフ化しました。


@shamabeさんは動画データをパラパラマンガのようなたくさんの画像ファイルに分割して、ファイル名を適切に変換して、作成した動画再生の仕組みの上で再生出来るようにしました。

ということで、日が暮れることには、「なんかブラウザ画面で動画が再生できて、速度も調整できる」という状態にはなりました。

いかに解析するか?

夜ご飯のお弁当を食べた後は僕はJINS MEMEのデータをいかにして上手く使うか を考え始めました。
見た目がある程度想像できるようになってきたのでデザインの得意なcacciemaさんmatsuchiさんは、さらにデザイン部分を詰めていたようです。

またGPS座標が取れるようになったので、夜にもう一度撮影に行こうということで、外に再びロケハンに行ったりもしました。

そろそろ終電も近づいてきたということで、うちのチームでも帰る人は一旦帰って明日また来るということになりました。

といいつつ@kasahiさん、@shamabeさん、ばりーさん、私は、残って夜通し作業することに・・

JINS MEMEのデータを組み合わせるうえで大変だったことは、まず「動画とJINS MEMEのデータの位置合わせ」です
動画、とJINS MEMEは別のデバイスで、それぞれがそれぞれデータを記録しているので、当然ですが、JINS MEMEのグラフのどこが動画のどこに対応するかがわからない状態でした。

加えて、それぞれのデバイスのフレームレートも違うため、その作業は困難を極めました。
動画は15FPS JINS MEMEのデータは大体0.05sに1つのようでした(20FPS)

これらの条件を元に、グラフとにらめっこして、JINS MEMEのデータと動画のオフセット・スケールを決定します。
スケールは上記に書いた通り仕様がわかっているので、後はオフセットです。

JINS MEMEの取れるデータの中のZ方向の加速度 が歩いているときと止まっているときでかなり顕著に差が出ているということで、まずはそれを利用して、当たりをつけました。
おおまかに位置があったところで、次は首を左右に振る動きに着目し、カメラの左右移動とJINS MEMEのデータが合うように微調整しました。

これで動画とJINS MEMEのデータが対応しました。

さて、ここからは数学の時間です。どうやって動画内の「注目ポイント」を出してこようか・・?

グラフを見たり、計算式を考えて、新たにそれもグラフにしてみたりしながら、試行錯誤を繰り返す・・
時刻は夜中の3時頃、、
グラフを見つめつつ、横では秋葉原散策動画を再生して、、、、

いくつかの注目ポイント作成のアルゴリズムを考案することが出来ました。

たとえば、、

  • Z方向加速度をうまく平均化したうえで、閾値で判定し、更にその結果を平均化することで、歩いていて「おっ?」と立ち止まった場所の検出をする
  • 首の動き(特に見上げる方向)を閾値で判定することで、なにか上下にものがあってそれに着目するために、見上げている・見下しているポイントを検出する
  • JINS MEMEに組み込まれている「isWalking」という値を利用して、「歩くのをやめた直後」を検出して、店に入った瞬間や、ふと足を止めた瞬間を検出する

などといった、注目ポイントの検出方法を発見しました。

朝7時、夜帰っていたメンバーも再び会場に戻ってきて、デザインとプレゼンの最終調整です。
(もう一人cacciemaさんは風邪でダウンでした、 無念・・お大事に)

僕はというと大体やりたいことが出来たし一安心、ということでちょっとウトウト・・(10分、20分だったかと・・)

そしてついに「Life Lapse」が完成しました!

発表は@kasahiさんということで、僕のできることはここまでか、、ということで
まぁ万が一のために自分のPCでもプレゼンが出来るようにとデータをもらったり、展示の時に見せる用のグラフデータを作成したり、、などをしていました。

発表・そして、、

そしていよいよ発表会です。
9時に開発を終了して、発表は10時からのスタートです。

僕達のチームは2番めの発表ということで、慌ただしく会場に移動。
せっかくなので全員前に出ようということで、とくにやることも無いのですが、舞台裏に行くことに。
発表は想定通りに行うことが出来、一安心。

全部で80チーム近くあるということで、自分たちの発表が終わってからも14時過ぎまで発表が続きます。

僕はせっかくなのでということで、会場でずっとほかチームの発表を見ていました。
他のチームも面白い発表ばかりで、中には「僕達もやろうかと検討していたやつ」もあったりとかして、かぶらなくて良かったーなどと安堵したりしていました。

怒涛の発表が終わった後は、展示会です。

多くの方に興味を持っていただけたようで、ブースにはたくさんの方が来てくださいました。
結構詳しい方も多く、「どうやって注目の時間を算出しているのか?」といった技術的に聞いてほしい質問をバシバシとしていただいたりして、 それはですね・・・ と自慢気に説明したりしました。


1時間ほど展示をした後に、賞の発表です。

イベント案内にあった賞は
グランプリ、金、銀、銅
だったのですが、どうもそれ以外にも4組ほど受賞される賞があったようで(名前がわからないので「ノーマル賞」と呼びます)
私達はその「ノーマル賞」をいただくことが出来ました!

商品にはHackey( http://hackey.cerevo.com/ja/ )をいただきました。



他の受賞作品も「やっぱりね」というものがほとんどで、納得感ある審査結果でした。

授賞式の後は懇親会です。
知り合いも多く参加していたため、うろうろ回りつつ「なんであれを作ろうと思ったの?」など、作った人同士での意見交換や感想を言い合ったりしました。

で17時くらいに解散。
帰って風呂に入ってから泥のように寝ました。。

お疲れ様でした。

感想

今回もたくさんの勉強をしました

  • 最新のiOS開発について
  • Jins MEMEの使い方と取れるデータ
  • @shamabeさんの圧倒的なきれいなコーディング(ライブコーディング的コーディング)
  • などなど

仕事ではやらないようなプログラミングを、いつもとは違うメンバーで出来るこのイベントでは、いつもこういった新しい事を学ぶことができます。

また、24時間爆速でものづくりの流れを体験できるため、プロダクト開発についての経験値がとても上昇するように感じます

たとえば、どこを諦めるのか だったり、 何をコアとしてピボットするかだったり、 メンバーとのコミュニケーションだったり、 作業の段取りだったり、、 etcetc

会社での大きなものづくりではこれらの流れはもっとゆっくりと流れていくため、ついつい全体が見れなくなってしまうのですが、Hack Dayでは24時間という縛りの中でこれらを進めていく必要があります。

また、これだけの多くのチームがテーマを絞らずに好き勝手にものづくりをしているため、その成果物はそれぞれが個性的にはなりつつも、いくつかの傾向が見られるというのもHack Dayの面白いところだと思っています。

それは今後の世の中の流れを示していたり、 今の「イケてる」を示していたり、 現代の課題を示していたり するのだと思います。(スタンドアローンコンプレックス?)

今回で言うと・・

  • クマのぬいぐるみを利用したHackが異様に多い
  • 司会者の方が話題にする程に「生首」の出てくるプロダクトが多い
  • バレンタインデーにちなんで ぼっち脱却 的なプロダクトが多い (そしてそのアプローチが様々なのも面白かった)

とかですかね・・w(もっと他にも真面目な共通項もたくさんありますよw)

とまあ、今回もとても得るものの多いHack Dayでした。

一緒にチームで戦った皆さん、Hack Dayを実行するにあたってご尽力されていた皆様、ほかチームで楽しいHackを披露してくれた皆様、来ていただいた観客の皆様に感謝します。


過去のHack Day

Hack Dayは今回で4回めで、僕は過去3回も参加しました。宣伝的にリンクを置いておきます。

その他の記事たち

発見したら追記していきます

そして何ら役に立たない作品がたくさんある。くだらない作品に注がれた情熱は、となりのエンジニアを刺激し、よりくだらなくなっていく。そして仲間が増えていく。カオスの中でクリエイターたちのネットワークが育っている。

ww そういう一面もあるかも・・

2015振り返り

今年はあまりブログ記事が書けませんでした。
このブログはなにか見せびらかしたいものを作ったら更新するようにしているので、すなわちあまりアウトプットが出来なかった年ということなのかもしれません。

仕事や、プライベートでもいろいろあった年なので、そっちにリソースを割きすぎて趣味のプログラミングがおろそかになっていた、という印象です。

とか書いてたけど、まとめてみるとまぁそこそこいろいろ作ってるなという印象。
会社でも、プライベートでも、自分の出来る所プラスアルファが必要なことが増えてきた印象。やりたいことを整理して適切に時間を配分していかないといけないなと思っています。

ステータス

あらたに引越しました(前の家は4年目を前におさらばです)
会社に入ってから6年目

今年学んだスキル

  • 初海外!
  • 電子工作
    • 基板の発注方法
    • ESP8266
  • swift
    • 基本的な所
  • コンテナ技術
    • 基本的な所

月別ふりかえり

  • 1月
    • 正月
  • 2月
    • RaspberryPi2発表
  • 5月
    • 木製RakuChordをもうひとつ作成
    • gitで管理できてない我が家のプロジェクトを可視化するツール
    • アメリカへ!
    • 長引く体調不良
  • 12月
    • (実は)お引っ越し