2016年コミケの旅

この記事は1時間半遅れで投稿された OUCC Advent Calendar 2016 - Adventar の18日目の記事です.というか遅刻してばかりですね…すみません…

昨日はid:nantenさんの「個人的2016年を振り返る -」でした.

www.adventar.org

今回はOUCC内で暗躍する組織,コミケ班についてです.

コミケ班とは何か.それは毎年夏と冬に東京で開かれる祭, すなわちコミケで頒布される様々なお宝,それらを求める同志達によって結成される同盟です(何が頒布されるのかはお察しください). この記事でコミケに興味のない部員は全く知らないであろう,コミケ班の活動内容について紹介したいと思います.

f:id:spring_raining:20161219012037j:plain

続きを読む

BNFでパーサコンビネータに触れる

この記事は2日遅れで投稿された OUCC Advent Calendar 2016 4日目の記事です.遅くなりすみません…

昨日の担当は@klta6154さんですが霊圧が消えているようです.

www.adventar.org

loquat

ところで,同じくOUCC部員のid:susisuによって作られたパーサコンビネータライブラリ loquat というのがあり,最近はそのソースコードを読んでいたりしていました.他の人のコードを読むのはとても勉強になります.

github.com

loquat自体はとても高機能なライブラリですが,もっと簡単にパーサを作りたい時があるかもしれません.たとえばBNFで定義した文法がそのままパーサになるともっと便利になると思いませんか? そういうわけで下のようなものを作ってみました.

github.com

使い方

インストール

$ npm i lqbnf

実数をパースしたい時はこんな感じで,

const BNF = require('lqbnf');

const parser = BNF(`
  <number>                ::= "-" <non-negative-number> | <non-negative-number>
  <non-negative-number>   ::= <non-negative-integer> "." <digits0> | <non-negative-integer>
  <non-negative-integer>  ::= <digits> | "0"
  <digits>                ::= <digit-without-zero> <digits0> | <digit-without-zero>
  <digits0>               ::= <digit> <digits0> | <digit>
  <digit-without-zero>    ::= "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9"
  <digit>                 ::= "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "0"
`, 'number');

第1引数にそのままBNFを記述した文字列,第2引数に開始記号の名前を入れるとあら不思議,loquat互換のパーサが出来上がります.

const lq = require('loquat')();

const result = lq.parse(parser, '', '-1230.0456');
if (result.success) {
  const util = require('util');
  console.log(util.inspect(
    result.value,
    { colors: true, depth: undefined }
  ));
}
else {
  console.error(result.error.toString());
}

/*
result.value = [ '-',
  [ [ [ [ '1' ], [ [ '2' ], [ [ '3' ], [ [ '0' ] ] ] ] ] ],
    '.',
    [ [ '0' ], [ [ '4' ], [ [ '5' ], [ [ '6' ] ] ] ] ] ] ]
*/

作っておいてなんですが,現状ではパース結果をただ配列で返すだけなのであんまり実用的ではない気がします,あとは繰り返し記号が使えたり,EBNFに対応したりするともっと良いですね,どなたかPull Requestお待ちしています(投げやり).

明日(今日)の担当は@shinoshinospさんです.

LINEエンジニアインターンに参加しました

f:id:spring_raining:20160905020151j:plain

8月8日〜9月2日まで,「LINE Summer Internship 2016 Engineerコース」,通称40万インターンに参加してきました.

line-hr.jp

選考

募集要項ページに書かれているとおり,書類選考→技術テスト→面接 という流れでした. 書類選考後の技術テストはmecab-ipadic-neologdを使ったもので, こんな感じでGitHubリポジトリの形で提出を行いました.

github.com

その後の面接では技術テストの内容についてや,LINEのインターンで何をしたいかなどを話しました. 面接は対面で行ったので交通費が無駄にならないかヒヤヒヤしましたが,帰り際に新幹線代を現金でポンとくれました.最高.

インターンの様子

LINEはちょうど上場後だったで,オフィスには胡蝶蘭がところせましと置いてました.

f:id:spring_raining:20160904232837j:plain

f:id:spring_raining:20160904232930j:plain

こちらがオフィスの眺めです.

f:id:spring_raining:20160904233047j:plain

レゴゾーンにあったシン・ゴジラ

f:id:spring_raining:20160904233448j:plain

もちろんインターン中は遊んでいるだけではなく,課題にもちゃんと取り組んでいました.

LINEのインターンは面接時の希望に応じてそれぞれ違う部署に配属される形になっていて, 私はLINEポイントのチームで新機能を作っていました. 部署によっても違いますが,開発をしていく際には特に技術的な縛りはなく, どちらかというとインターンの期間中にちゃんと定めた目標を達成することを重視していると思います. また実際にチーム内ミーティングにも参加することもあり,メンターの方からは大規模なサービスならではのアドバイスがあったりしてとてもためになります.

こんな感じでいろんなテーブルがあり,思い立ったらシュッとミーティングができます.(いつも埋まっている)

f:id:spring_raining:20160905001235j:plain

美味しいコーヒーもたくさん飲めます.10円玉の調達に困るところが欠点です.

f:id:spring_raining:20160905000411j:plain

実はヒカリエオフィスはスペースが無くなりつつあるらしく,来年には新宿ミライナタワーへ引っ越すとのことです. 一体新オフィスはどんなオシャレ空間になるんでしょうか…

インターンに行こう

f:id:spring_raining:20160905010020j:plain

LINEインターンはこんな人におすすめです. きっと良い経験になりますよ!

  • 多くの人に使われるサービスを開発してみたい人
  • 大規模バックエンドの裏側を知りたい人
  • 大量のデータをいじくり回したい人
  • 凄腕エンジニアにビシバシコードレビューされたい人
  • 40万円がほしい人

同じくインターンに参加していたメンバーの感想エントリも紹介します(随時追加).高校生で本を書いていたりOpenJDKのコミッターだったり,インターン中に海外に研究発表に行ってたり,どの人も強そうでとても刺激になりました.精進します.ハイ…

diary.hatenablog.jp

popkirby.hatenablog.com

tombo2.hatenablog.com

「はじめる React Native」メイキング

事後報告になってしまい申し訳ないのですが、先週のコミックマーケット90で個人サークル「pentapod」として、このような本を頒布していました。

pentapod.github.io

おかげさまで売れ行きは順調で、Twitter等でも感想を見かけることがありとても励みになりました。有り難い限りです。 ところで、この本は組版Vivliostyleを利用したCSS組版を採用しており、 組版について言及したツイートも頂きました。

せっかくなので、「はじめる React Native」を入稿するまでに行った手順を紹介しようと思います。

f:id:spring_raining:20160822013749j:plain

執筆

CSS組版を使うにあたり、どのような形で原稿を書くかは少し考えるところでした。 CSSでレイアウトを作成するため、当然最終形はhtmlになるのですが、生でhtmlを書くのは面倒ですし、 かといってMarkdownからhtmlを生成する方法ではレイアウトを考える時点で柔軟性が足りない可能性がありました。 そこで、今回はPug(Jade)を使ってhtmlを生成することとしました。

f:id:spring_raining:20160822010252p:plain

Pugについては公式ページを見れば一目瞭然なのですが、これはインデントで入れ子を表現する形のhtmlテンプレートエンジンです。Pugにはフィルタ機能があり、これを使うことでテンプレート内でMarkdownを使うことも可能です。これであれば、執筆時にあまり手間を掛けずに思い通りにhtmlタグを作ることができます。

f:id:spring_raining:20160822010758p:plain

このような感じでmarkedcodeといったフィルタを作成し、その中に文章やコードを書いていきました。PugのビルドにはGulpを使ったビルドスクリプトを用意して、htmlを生成しました。

レイアウト

執筆と平行して、ページのレイアウトの試行錯誤も行っていました。 レイアウト前は単にCSSを組む作業だと思っていたのですが、この工程が存外に時間がかかり難航しました。 これはVivliostyleがまだ策定中のCSS仕様を先取りで実装していてインターネット上に情報が少なく、Vivliostyleで使うことのできるCSSの情報を得るためには、W3Cを資料を読むしかないという状況が多くあったためです。(CSSEPUBの勉強にはなりましたが…)

実際にレイアウトを行う際にはこちらのVivliostyleサンプルページが非常に参考になり、特に「CSSシークレット」はCSSソースコードのかなりの部分を流用しています。

実際のCSSStylusで書いており、レイアウト作成中はVivliosytle.jsでプレビューを行って、最終的にはChromeの印刷機能を使って完成品となるpdfを生成しました。ここで、後述するテンプレートにピッタリ合わせるためにCSSでページサイズを182mm 257mmに、余白を3mmに設定しています。

入稿

印刷はグラフィックに依頼しました。オフセットB5フルカラー(表紙:片面カラー/マットコート/135kg 本文:52ページ/上質/90kg) を100冊印刷して89,460円です。学割が効けばここから1割引してくれます。

www.graphic.jp

グラフィックでは入稿用のテンプレートが用意されており、入稿を行う時はIllustratorを使って手作業でpdfのページをテンプレートに貼り付けていきました。この時、フォントのアウトライン化に漏れがあり、再入稿を行ったため早期入稿を逃してしまいました…結局テキスト全選択→アウトライン化→保存をバッチ処理にして行ったのですが最初からこうすれば良かったですね。

技術系同人誌を作ろう

普通こういった情報はブログやQiitaなどで公開することが一般的ですが、僕は一冊の本としてまとめた形で公開するのも一つの手段だと思っています。体系的にまとまった情報は、インターネット上では貴重なものです。ぜひ世界中で他にはない同人誌作りにチャレンジしてみてください。

文章以外のファイルを公開しています。完成形となるCSSソースコードは実家のPCに置いてしまいコミットできていませんが、来月くらいに修正します。

github.com

「はじめる React Native」は電子版でも販売しています! 書籍版も取り置き承ります🙏ご興味あればどうぞ🙏

pentapod.booth.pm

Arduinoから取得した情報をMackerelで見る

ゴールデンウィーク暇すぎて,以前衝動買いしたArduinoで何か作れないかと思い立ち, 部屋の温湿度を見られるようにしようということになりました.

TL;DR

github.com

Arduino→PC

使用した部品は以下の通りです.見た限りDHT11以外はArduinoをはじめようキットに含まれているようなので,そっちを買うのが手っ取り早いです. (なお,僕はこのキット日本橋にて9000円で買ったのですが,同等品がAmazonにて4000円以下で売られていることをTwitterで教えられめっちゃ不機嫌になったのでAmazonで買うことをおすすめします)

  • Arduino Leonardo
  • USBケーブル
  • 温湿度センサ DHT11
  • カーボン抵抗 10kΩ
  • ブレッドボード
  • ジャンプワイヤ 4本くらい

Arduinoと部品を以下のような感じで繋いでいきます.

f:id:spring_raining:20160504212213p:plain

https://www.arduino.ccからAuduinoのIDEをインストールしたら,「スケッチ>ライブラリをインクルード>ライブラリを管理」から,「DHT sensor library」を検索してインストールします.

ライブラリをインストールしたら,早速Arduinoで実行してみます. GitHubに上げているwatcher.inoIDEにコピペしてみてください.

ArduinoをUSBで接続したあと「ツール>シリアルポート」を確認し,接続したあとに現れた項目を選択します.また「ツール>マイコンボード」でArduino Leonardoを選択します.そして「スケッチ>マイコンボードに書き込む」を実行すると,Arduinoにプログラムが書き込まれます.

f:id:spring_raining:20160504230122p:plain
書き込みに失敗すると下の欄に真っ赤な文字でヴァッとエラーが出力される

書き込みが終わったら正しく動作しているか確認してみましょう.「ツール>シリアルモニタ」を開くと,Arduinoから送信されるシリアル通信を表示できます.(ボーレートは9600bpsとしておきます)

f:id:spring_raining:20160504214816p:plain

PC→Mackerel

Arduino側が完成したら,常時起動してArduinoからの信号をMackerelに送信するPCを用意します*1.今回は自室の片隅で動いている録画サーバーにぶっ込むこととします.ちょうどこのサーバーでは既にMackerelを導入していたので好都合でした.

PC側で実行するスクリプトは,シリアル通信を受信して標準出力を行うだけなので,各自お好きな言語で書いたらいいと思います.今回はJavaScriptで書きました.作成するスクリプトの出力は,以下のページの仕様に従うようにします.

mackerel.io

具体的には,プログラムを実行すると,{出力項目の名前}\t{出力項目の値}\t{UNIX時間}という行を表示したい項目(温度,湿度など)の行数だけ出力するようにします.

また,環境変数MACKEREL_AGENT_PLUGIN_METAに1が設定された状態で実行すると,1行目に# mackerel-agent-pluginを, 2行目からは設定情報を含むJSON形式のテキストを出力するようにします.

$ node main.js
odango.humidity.my_room 19.00   1462368181053
odango.temperature.my_room  22.95   1462368181053

$ env MACKEREL_AGENT_PLUGIN_META=1 node main.js
# mackerel-agent-plugin
{
  "graphs":{
    "odango.temperature":{
      "label":"Temperature",
      "unit":"float",
      "metrics":[
        {"name":"my_room","label":"My Room"}
       ]
    },
    "odango.humidity":{
      "label":"Humidity",
      "unit":"percentage",
      "metrics":[
        {"name":"my_room","label":"My Room"}
      ]
    }
  }
}

もし僕の書いたコードをそのまま使うのであれば,GitHubからコードをcloneしたあとmetrics.sample.jsondefs.sample.jsonをそれぞれ metrics.jsondefs.jsonという名前でコピーし,適宜JSONの内容を書き換えて下さい.

スクリプトが完成したら,Mackerelの設定ファイル(/etc/mackerel-agent/mackerel-agent.conf)に以下の内容を追記します.

[plugin.metrics.arduino]
command = "node /path/to/script/main.js" # 作成したスクリプトを実行するコマンド

忘れずにArduinoを接続したら,mackerel-agentを再起動してmackerel.ioを見てみましょう.1分ごとにグラフが伸びていくはずです.

f:id:spring_raining:20160504225248p:plain
17:30頃だけ湿度が上がっているのは,温湿度計に息をハーッってやったせいです

所感

電子工作ができなくても,ArduinoとMackerelどちらもシンプルな仕組み&ネット上に情報がたくさんあるので,拍子抜けするくらい簡単に終わります.興味のある方はぜひ.

ただ,Mackerelの無料アカウントでは1日しか情報を表示できないのが残念.せめて7日だけでも…

Arduinoをはじめよう 第3版 (Make:PROJECTS)

Arduinoをはじめよう 第3版 (Make:PROJECTS)

*1:「常時起動しているPC」のハードルが高いようなら,Raspberry Piを使うのもいいでしょう