ペペロン頭脳

いわゆるエスアイヤーに勤めてるけどまともにエスアイやったことないITエンジニアのメモ的なアレ。

Raspberry Pi でおうちモニター

システム全体の様子

(2年もブログ放置してたぜ!)

夏休みの工作でやってみましたIoT。
この手のやつは作ってる人たくさんいて取り立てて技術的に新しい点は何もないのだが、いろいろ未経験だったのでいい勉強になった。 github.com

概要

  • 自宅の室温・湿度・気圧を遠隔監視できる
  • 赤外線リモコンの信号を遠隔発信できる
  • カメラを通じて自宅内の様子を確認できる

つまり「部屋暑いな。帰る前にエアコン入れとこ」ができる。 「ほんとにエアコン入ったかな?」をカメラで確認できる。

iPhoneからWebUIを開いた状態

材料

  • 去年勢いで買って腐らせていたラズパイ3
  • ずっと使ってなくて埃を被っていたWebカメラ
  • BME280センサー搭載モジュール(新規購入)
  • IRKit(新規購入)
  • ほかブレッドボードとか小物

おおまかな構成

下記セットを一つのリポジトリにまとめてあります。

  • APIサーバー兼Webサーバー
    • Node.js製
    • アプリフレームワークにExpress, 認証ミドルウェアにPassportを採用
    • /api以下に定義されたエンドポイントを通じて、センサーやリモコン、Webカメラにアクセスする
    • ログイン時にJWT(JSON Web Token)を発行、以後各APIへのアクセス時にトークンを要求・検証する
  • フロントエンドUI
    • Vue.js製のSPA
    • 上記Webサーバーから配信される

作った感想など

久々に半田ごてを持って緊張した

BME280のモジュールはピンヘッダが付いてない状態で買ったので 自分で付ける必要があったのです。普通そういうものかな。 部品小っちゃいし、下手くそなので熱しすぎたりしないか怖かった。 (実際熱しすぎてしまった気がする…) ピンアサインとかGPIOとの接続については情報が多く、苦労せずに済んでよかったよかった。

オールJavaScriptで作れた

APIサーバーもNode.jsで動いており100%JavaScriptなシステムになっています。 npmのパッケージ群が充実しまくってるおかげですね。 BME280センサーから値を取るモジュールも、WebカメラのMJPEGストリームをプロキシするモジュールも、全部npmにある。

npmは便利な一方で↓みたいな危険もあるけどまあそれは。 gfx.hatenablog.com

あとES2015でゴリゴリ書けて楽しかった(一部しか機能使ってないけど)。

Vue.jsの手触りがよい

フロントエンド側はVue.jsで書きました。
(フレームワークいらないくらいの規模ではあるが)

前はBackbone使ってたけどもうメインストリームじゃないし、
Angularはボリューム的に学ぼうという気がまったく起きないし、
Reactは本体の学習コスト低いらしいけど他のコンポーネントを組み合わせて使う前提でそっちの学習コストどうなの。
とにかく手っ取り早く小さいSPA書きたい!けどjQueryには戻りたくない!モダンなのがいい!という場合にVue.jsはいい感じです。

コンポーネント単位で.vueにHTML/JS/CSSをまとめて書いたり、HTMLに独自ディレクティブを埋め込んじゃうスタイル、 最初は気持ち悪いと思ってたけど、スコープがバシッと切れてて◎でした。

あとデータバインディングが無い世界にはもう戻りたくない。

モダーンなフロントエンドJSは当然ビルドしなきゃいけないわけですけど、その辺のサポートも整ってるので苦労しませんでした。 vue-cliでセットアップすれば、ホットリロードしつつ随時Lint掛けてくれる開発サーバーは立ち上がるし、リリースビルドもコマンド一発だしで至れり尽くせり。何かハマったときにもwebpackのconfig類が比較的読みやすくて対処しやすかったです。

No-IP便利, Let’s Encrypt便利

外から自宅に繋ぐため、ダイナミックDNSとしてNo-IPを利用。
HTTPS化必須でしょ。ということでLet’s Encryptを利用。
どちらも実に簡単に導入できて素晴らしい時代ですね。

そういやトークン平文で流してるって「艦これ」が騒ぎになってましたね。 blog.livedoor.jp

IRKitちょっと不安定かも & 罠

公式サイトには

IRKitデバイスは、Bonjourを使ってIPアドレスを求めることができます。

って書いてあるんですが、自分の環境だとどうにもうまくいかず。ルーター側でDHCP固定割当したらアクセスできなくなったりとかも。この辺を掘り下げるにはネットワークの知識が足りない…

あとリクエスト投げるときにX-Requested-Withヘッダ付けろと書いてあるんですが、実際はそれだけじゃ足りなくてContent-Lengthもちゃんと載っけてやらないといけない。 例にあるcurlだと気にする必要ないけど、他の手段で明示的にヘッダを書く場合は注意が必要。(ちなみにパケット分割が発生しないサイズなら無くてもOKなのを確認済)

カメラの必要性

妻には「それカメラ必要ある?リビング写す必要ある?覗き趣味なの?変態なの?」と10回くらい聞かれたので
「覗かれたくないときは何かかぶせてカメラ塞いでください」と20回くらい返した。

絶対無いといけないわけでもないし…
セキュリティ的には無いに越したことはないし…
あと今ストリーミングの制御を一切してないので、LTE経由でうっかり開いたままにすると容易にパケ死ギガが減る。
ちゃんとコントロールするか、カメラいっそやめてしまうか……
うーむ。

いまさらだけどYAPC::Asia Tokyo 2015ショートレポート #yapcasia


4日前に感想エントリ集めが終了してたようだが気にしない。

あの熱狂から3週間も経ってしまった。
盛り上がりを見せる開発案件を視界の端に追いやり、先輩をひとりでハードな客先MTGに旅立たせつつ(ホントすみませんでした)、自分は年休をとり国際展示場方面へ出陣したあの夏の日。
翌週からは気温も下がり秋の気配漂い始め、僕のブログ熱もサゲサゲになると同時に本職の稼働がピークに達し職場とベッドを往復する日々でしたなどという言い訳をしつつも、やっぱり記録することは大事よねと呟いてこのエントリをもって懺悔にかえさせていただきます。

なお僕はPerlを1行も書いたことがないということを最初に宣言しておく。

1日目 8/21(Fri)

Effective ES6 - Teppei Sato

僕は朝に弱い。しかも久々の年休だ。眠りたい。ということでノコノコとセッション開始時間ギリギリに会場に到着。
そしたらまあ人気セッションでして激混みなわけよ。スタッフの計らいで通路にも立ち見・座り見させてもらえたのでなんとか潜り込み聴講開始。
趣旨としては、class構文をはじめ多数の機能が盛り込まれつつあるES6ちゃんを実務でも使いましょうよというお話。現時点でもBabel使ってバベっちゃえばいいじゃない!という提案を添えて。
ES5時代に必要だった数々の「工夫」をしなくて良くなるのが大いに魅力的だなーと思ったけど、堅めのエンタープライズで使うにはもうちょっと枯れてからかな・・・という感想です。
いま現在JSライブラリ開発案件やってるので、正直飛びつきたいけどお客さんとこに出るソースだし独断で突っ走れない事情があるので。お仕事ではES5時代の「ノウハウ」を駆使し続けるか、という感じ。http://www.slideshare.net/teppeis/effective-es6

TBD - Yukihiro "Matz" Matsumoto

日本が誇るRubyの父、Matz。
僕にとって生Matzは始めての体験であったので、それだけで興奮ポイントは高かったけど内容も非常に興味深かった。
まず本番でもタイトルがTBDのままというお茶目っぷりが笑いを誘っており、そこから近年のハードウェアの進化やらRubyの反省点などにあっちこっち話題が飛びつつ、「ああ~ 第一線のITエンジニアはなに話してても面白いんじゃー」とか呆けてたらいつの間にかすべてが新言語Streemの伏線として回収されて壮大なカタルシスを味わえるっていういまここにある奇跡みたいな。
技術力だけでなく、トーク力も第一級。サンキューMatz。www.youtube.com

うっかりをなくす技術 - karupanerura

発表者自身がうっかりMacの電源アダプタを忘れて電池残量ピンチ!という事件が印象的なセッション。
なお僕自身もTシャツ付きチケット買ったのにサイズ選択の手続きしてなくてTシャツもらえない、っていううっかりを犯してるので非常に気になるセッションでありましたが、どっちかっていうと実装レベルに近い話が多かった。
安全工学に触れつつ、主にコーディング上のうっかり(null値チェック漏れなど)をどう防ぐか?などのテクニックについてが中心でしたね。
https://www.slideshare.net/karupanerura/technology-for-reduce-of-mistakes

そして帰社

アイエエエ!?」「帰社!?休み取ったのに帰社ナンデ!?」「コワイ!」
LTとその後の懇親会も出れるなら出たかったよ。でも社畜だから、私もう行くね。

2日目 8/22(Sat)

どうしてこうなった? Node.jsとio.jsの分裂と統合の行方。これからどう進化していくのか? - Yosuke FURUKAWA

仲間割れのスキャンダラスな話…ではなく、なんのための分岐だったのか&未来についてNodeの歴史を絡めて懇切丁寧に解説していただいた。
すでに実験的フェーズは終わり、長期サポート計画もあるプロダクトへと育っています。エンタープライズでもバリバリ使えるこれからのNode先生にご期待ください!とか言ってる隙に先日v4.0.0出たよね。いきなりバージョン番号がジャンプしたワケもよくわかったので、やっててよかったYAPC式。
https://speakerdeck.com/yosuke_furukawa/dousitekounatuta-node-dot-jstoio-dot-jsfalsefen-lie-totong-he-falsexing-fang-korekaradoujin-hua-siteikufalseka

実はホットでオープンな Microsoft Azure - Tatsuro Hisamori

僕はSIer勤めです。SIerではなんだかんだWindowsですよ(Macも使うけど)。PCもサーバーもWindowsなドザーなら気になる話題だよね、Azure。とか思ってたけど、実はLinuxでも使えますからねって最初のほうで言われました。AWSに比べて注目度は低い(当社調べ)ながらもオープンかつ凄まじいスピードで成長中!
想像以上に機能が膨大だったとか驚きポイントは数々ありましたけど、本題とはちょっとズレますけど、データセンターの規模とハードウェアメンテナンスの富豪っぷりが一番の衝撃でした。
なんかサーバーを満載したコンテナ(物理的な)単位でDCに納入→故障マシンは放置し、一定割合を超えたらコンテナごと交換だそうです。ちなみにリージョン一つで一般的なDC16個分の規模。AmazonGoogleはどういう運用してるか知らないけど、やっぱMSスゲー!っていう感想です(小並感)。
あとQiitaにサンプルあるからどんどん触って!とかクラウドで動いてる環境をオンプレに持ってこれる!とかSIフレンドリーな話もありました。
あと笑いポイントとしてはプレゼン中にパワポが「動作を停止」するってハプニングがありましたね。Win98のお披露目事件がフラッシュバックした。
https://docs.com/hisamori-tatsur/7486/discover-the-microsoft-azure

Adventures in Refactoring - Ben Lavender

GitHubの中の人によるリファクタリング術の解説(英語)。内容もさることながら同時通訳者のスピードと正確さに驚嘆。同時通訳初体験だったけどすごいですねプロは。
要約すると、コードは小さく保つのが正義。行数の増えるリファクタリングは悪。そして何より測定、測定だそうです。
(レポートの内容が薄いのは筆者の技術・知識レベルが低いためであり、登壇者のトーク内容にはなんら問題はございません。涙。)

サンタクロースを支えるIT技術 - Masayuki Ishikawa

技術的なトークから離れ、ちょっと気になるタイトルのトークへ足を運んだ。ボランティア活動にIT技術者として貢献する、というお話(http://www.charity-santa.com/)。
ITエンジニアの勤務外活動といえば勉強会やセミナー!みたいな固定観念があったけど、ダイレクトに基底現実に貢献できる活動って色々あるんだなってのが新鮮でござった。
http://www.slideshare.net/mishikawa55/it-mishikawa-yapcasia

オープンソースエンジニアのための Windows入門 - tsubasa

いままで*nix一筋でやってきた人たちに、主に「*nixでのこの機能はWindowsではこれ」と紹介するセッション・・・という趣旨ではあったのだが、僕含め大半がWindows経験者という感じでした。
今後のWindowsはオープンソースの見方!?改めて学ぶオープンソースのためのWindows入門!! #yapcasia #yapcasiaC - Togetterまとめ

Lightning Talks (day 2)

直前までトーク聞いてたので既に会場満杯だったけどなんとか入れたぜLTセッション!
多種多様なトークで盛り上がったけど、個人的には「MySQL5.7の罠があなたを狙っている」「コミュ力あげてこ」「CONBUさんの無線AP超速設営・撤収」が勢い・内容ともに強烈でした。
技術者兼IT芸人な方々のトークには、要素技術について詳しく知らなくても楽しませる力があるよね。

www.slideshare.net
www.youtube.com

そして閉会

僕はPerlを書いたことはないし、そもそもWebな人でもないし、オープンソースエンジニアでもない。
けれどもYAPC::Asiaの懐は深かった。こんな僕でも暖かく迎えてくれた。新たな知見を、熱気を、未来への希望を与えてくれた。
東京では今年で最後らしいからってだけの軽い気持ちだったけど、チケット買っといて本当によかった。
だいぶ時間が経ってしまいましたが、スタッフの皆様、登壇者の皆様、本当にありがとうございました!

JScript5.8をES5化してバッチに利用するのだ

2015年とは思えないクソレガシーな話題だが、現場では必要なんだ。
現場では、必要なんだ!!!

カジュアルに、移植性の高いバッチを書きたい

Windows環境で日々devるITエンジニアの皆さんへ。

PowerShellが登場してずいぶん経ち、アップデートも重なってきている。けど職場環境を見渡してみるとあまり普及しているとはいえない。利用されているのは相変わらず古き良き.batだ。
ちょっと高度なことはC++,C#等で書いたバイナリやらRubyPythonに仕事を受け渡したり。あるいはVBScriptJScript(WSH)で書いたり。

ん?JScriptってJavaScript的なやつなのか。
じゃあフロントエンドで書き慣れてるJSで、バッチが書ける?

WSH(Windows Script Host)ではJScriptが使える

WSHやらJScriptとはなんぞやということについては各自調べていただくとして、WSHは廃れてるので本来はPowerShell使うべきですよというのも置いといて。
一言で言うと「ほぼJavaScriptな言語でバッチが書けます」ということだ。これが追加の環境構築なしで使える(客先常駐なんかで重要)のがうれしい。

こんな感じでコマンドやバッチファイルからスクリプトを呼び出して使う。

> cscript hoge.wsf
<!-- hoge.wsf -->
<job>
<script language="JavaScript">

function hoge() {
  var fso = WScript.CreateObject('Scripting.FileSystemObject');
  // ファイル読み込み
  var streamReader = fso.OpenTextFile('hoge.txt', 1, false);
  var lines = streamReader.ReadAll();
  // ファイル書き込み
  var streamWriter = fso.CreateTextFile('huga.txt', true);
  streamWriter.Write(lines);

  // コンソールに出力
  WScript.Echo('hoge!');
}

// 関数を呼んでスクリプト終了
WScript.Quit(hoge());

</script>
</job>

同じような仕組みでVBScriptも書いたりできるのだが、よりマシなJScriptで処理が書けることがわかった。よっしゃよっしゃ。
と言いたいところだがちょっと待って欲しい。
おそらく未だ多くの現場で使われているであろうWindows7には、JScript5.8が搭載されている。JScript5.8はJavaScriptでいうところの1.5であり、これはECMAScript3ベースだ。つまり、String.prototype.trimやらArray.prototype.mapなどの便利メソッドは使えないのだ。

なお、IEはバージョンアップに伴って新しいバージョンのJScriptを使用できるが、WSHから利用するエンジンはJScript5.8で固定されてしまう。いろいろ頑張っても固定されてしまう。subtech.g.hatena.ne.jp

JScript5.8環境でもECMAScript5相当のコードを

やっぱりES5から登場した素敵メソッドを使いたい。使いたいなら作ればいいじゃない!というか先人のコードを利用させてもらえばいいじゃない!
ということで、JScript拡張ライブラリを用意した。

github.com

自分では大したことはしていない。偉大なるES5-shimとJSON3をconcatして、クラス的な仕組みとファイル操作系のヘルパーを追加したのみ。みんな大好きiniファイルが扱える。
以下のように、dist/JScriptExtender.js あるいはminの方をインクルードして使う。
なおテストはしたが独自実装部分のドキュメントは未作成だ。しばし待て。
(追記:2015/06/22)ドキュメント書きました。READMEも。

<job>
<!-- ここでインクルードする -->
<script language="JavaScript" src="dist/JScriptExtender.js"></script>
<script language="JavaScript">

function es5Test() {
  // Arrayの素敵メソッド
  var num = [1, 2, 3, 4, 5].filter(function(v){
    return (v % 2 === 0);
  }).map(function(v) {
    return v * v;
  }).reduce(function(prev, current, i , ar) {
    return prev + current;
  });
  WScript.Echo(num); // => 20

  // JSONを扱う
  var str = JSON.stringify({'Hello': 123});
  WScript.Echo(str); // => '{"Hello":123}'

  // iniファイルを読む
  //   iniの内容がハッシュ/配列としてオブジェクトにロードされる
  var iniReader = new Ini('hoge.ini');
  var iniObj = iniReader.Load();
}
WScript.Quit(es5Test());

</script>
</job>

他にも、マルチプラットフォームが考慮されてるライブラリはインクルードして使うことができる。ちょっと試した感じだと、underscore.jsは使えた。

おまけ:VisualStudioでデバッグできます

デバッグは素のWindowsではできないのだが、VisualStudioがあればできる。セットアップについては下記が詳しいので紹介。kaeruz.com

さいごに

一手間加えれば、生まれたままのWindowsでもわりと快適にJSなバッチ書けますよということで。あまりクリティカルなところには使えないけど、ちゃちゃっと何か動かしたいときにはアリな選択肢ではないかと。ECMA標準に定義されてない機能も使えますしね。MSDNのドキュメントはいまいち辿りづらいけど。

しかし、そもそもWSH脆弱性やドキュメント整備不良が理由で廃れてるわけでしで、ドザーなエスイーとしてはPowerShellをちゃんと使えるようにするか、最近活気のある.Net方面に走るのが正しいと思われま。

エンジョイ。