めもりすずこ

めもりすずことは、僕に関する出来事を記録することにより記憶を助ける文書である。

オープンキャンパスのネタ 技術編

概要

www.facebook.com

ソースコード

github.com

流れ

担当した部分で頑張ったところを書く.

  1. Server (Raspbian): Raspberry Pi Zero Wにカメラモジュールを取り付け,mjpg-streamerを使い,カメラからの映像をストリーミングする
  2. Client (macOS): 映像を取得し,現在のフレームにマーカがあるか判別する https://github.com/mimorisuzuko/oc2017/blob/master/detect-ar-marker.js
    • 現在のフレームをnode-canvasで描画する
    • 画質が悪いせいか認識率が照明に左右されることが分かったので,先にCanvasを2値化する
    • js-aruco に2値後のcontext.getImageDataを渡し判別する
    • (もっと賢いやり方があったかもしれない)
  3. Client: マーカがあればドローンに動きを送信する https://github.com/mimorisuzuko/oc2017/blob/master/drone.js https://github.com/mimorisuzuko/oc2017/blob/master/index.js#L19-L20
    • ドローンの制御はnode-rolling-spiderを使用した
    • node-rolling-spiderで行われる本来の処理は,「(事前にnoble でドローンのuuidを調べる) => 既知のuuidを渡し,インスタンスを生成する => nobleで目的のuuidを持つperipheralを探す(二度手間やん)」
    • これを周囲のドローン(uuidが未知)に自動的に接続したかったため,「nobleでドローンのperipheralを探し,インスタンスperipheralをぶっこむ」と書き換えた

Wantedly, Inc.のサマーインターンに参加しました

こんにちみ.7/31(月)〜 8/4(金) の期間,Wantedly, Inc.サマーインターン2017:ReactでつくるWebフロントエンドコースに参加しました.

www.wantedly.com

朝からお腹が痛すぎてランチなのにプリンだけ食っている様子は以下です.

www.wantedly.com

Wantedlyとはこれです.真面目にプロフィールを記入していると企業から話が来ます.なので,登録していない方は記事を読むより登録しましょう.(所属がアルバイト先になってしまうのは,学歴よりも職歴を優先して表示するFacebookのせいですかね?)

www.wantedly.com

WHY: 何故インターンに行ったか

M1になり,今後の進路として就職か進学かを考え始めていました.そして,就職を考える材料としてインターンに行こうと思いました.インターンは大体以下の条件で探していました.

  1. エンジニアの人が知ってる会社
    • 綺麗なコードがありそう
    • 開発環境(物理環境とプログラミング環境)が整っていそう
    • コードレビューが受けられそう
  2. 給料欲しい
    • 無いよりは欲しい
  3. フロントエンド(JavaScript
    • ゼロから知らない言語の指導を受けるより,自分の力を測りたかったので1番書けるフロントエンド
  4. 2日以上
    • 1日だけのインターンだとその会社のことがあまり分からなそう

最初は,周りで高評価なはてなサマーインターン2017に応募する気でしたが,期間が1ヶ月と長かったのでやめました.応募先を探していた時,id:mactkgのツイートが流れてきました.

期間がちょうど良く,内容がフロントエンド特化していたため,Wantedlyのインターンに決めました.

HOW: どうやって行ったか

これまでやったことをWebページに上手くまとめ,GitHubで日々活動していると通ると思います.

WHAT: 何をやったか

詳しく書くと権力に潰されてしまうので,ほどほどに書きます.

こんなことやりますにありますが,Wantedly Feedチームで開発をします.

まず,メンターにいくつか作業の案を出してもらい,その中から面白そうなモノを選びました.選んだ後は,メンターと「この機能(この改善)があった場合にどういう数値(例えば,記事のPV)が変化するのか」を議論しました.自分の知識の中から仮説を述べたり,Wantedly Feedと似たサイトの取り組みを参考にし,作業内容を詰めました.

インターンのイメージは「これやれ!」「できました!!」「インターン終わり!!!!」でしたが,Wantedlyのインターンでは,「その機能や改善は本当に必要なのか?」をメンターと議論し見定めてから開発できたので良かったです.

開発フローは以下の記事と同様です.「Issueを立てる => コード書く => PR出す => レビューされる => … 」ですね.

qiita.com

最終日には成果報告会と打ち上げがありました.

よかったこと

  • 白金台周辺のランチが美味い
    • けど,高い(700 - 1200円ぐらい)
    • 最後に行ったハンバーガー屋が良かった
  • 人事の人や偉い人と色々話せた
    • 「 Wantedlyに入るか否か」ではなく,広く進路について相談できました
  • コードレビューが受けられた
    • とりあえず動くモノを作成することは困りませんでしたが,チームの人やレビュアーが読めるコード,簡潔なコードを書くことが大変でした
    • レビューを受けてマシなコードになったかと思います
    • 個人で開発している時は,何を書こうが自分は読めるので,コードの簡潔さなどは意識していなかったです
  • エディタの使い方が上手くなった
    • 大きいプロジェクトを触るので,どこに何があるのか,こことどこが関連しているのかを把握するのが大変でした
    • それらを把握するため,必然的にエディタを以前より上手く使えるようになった気がします
    • Visual Studio Code愛してる
  • 言われたことをやるのではなく,考えながら開発ができた
    • 前述のメンターとの議論により,言われたことをやる開発ではなく,自ら「成果を出したい」と思いながら過ごせました
  • 机周りなどの環境が良かった
    • 椅子とか.トイレ綺麗

難しかったこと

何個かPRを出しましたが,調整しなきゃいけない部分があり,インターン期間中にはマージされませんでした(今後どうなるのか…).プロダクトのためのコードとなると気にしなきゃいけない部分が色々出てくると実感しました.

加えて,インターンにおける僕のスタートダッシュが遅かったのもマージまで持っていけなかった原因だと思います.

おわりに

全体的に良い経験でした.

インターンに行く前は「旬なライブラリを使ったイケてるコードを書きに行きたい」と思っていましたが,その辺は自分の力でどうにかできる気がします.なので,どこのインターンに行くか?(どこに就職するか?)は,自分の力でどうにかできない部分(例えば,その会社のVision)に共感できるか否かを考えて決定すると良いことがある気がします.

思い出したら追記していきます.

2017年4月終える

こんばんみ.大学院生になって1ヶ月終わる.素早い.

上旬は研究室に新しい人が入って来て,歓迎のために無限に花見をした.3日間連続で花見して,「今日は花見で疲れたから何もしない」って3日連続でなってた.

無限の花見を終えて,先輩に「テトリス感覚でカレンダーの行が消えていく妄想に怯えています」って言われて焦り出した.一瞬で1週間終わってた.テトリスで言うと1行消えてた.テトリスは1行消えた分スコアが手に入るけど,現実はそんなに甘くない.このままだと学部生の時と同じくんだりをすることになると思った.

焦ったので論文を読み始めた.でも,論文読んでるだけだと学部生の時と変わってなくて,何か進歩しようと思い,論文の追検証をした.「追検証しろ」「追実装しろ」って散々言われてたけど,正直あんまりやってこなかった.

それからは論文読んで追検証したり,条件変えて実験をしてた.「この案イケるわ〜〜〜〜常に成長する自分が怖い〜〜〜〜〜」って言いながら実験してた.先輩のところに実験データ持って行ったら「この論文読んだ?これと何が違う?」って言われた.でも,データを元に議論できたので良かった.議論して今後やることも決まったので良かった.データ大事.議論大事.追検証大事.

昨日は研究室の人とSwitchのマリオカートやった.楽しかった.

空前絶後の超絶怒涛の大学卒業記念研究ポエム

こんばんみ.

先日,大学から卒業式の案内が来ました.卒業です.イェーーーーイ*1.卒論を書き終え,学部生時代を振り返ると「研究に対する視点が3期構成だったなあ」と思いました.ミルキィホームズで例えると,「探偵オペラ ミルキィホームズ探偵オペラ ミルキィホームズ 第2幕ふたりはミルキィホームズ(ここ)」です.*2

以下に僕の視点遍歴を書きます.これから研究室に配属され,研究をしていく人たちには参考になるかもしれません.

1期: 面白いモノ作ったろw

  • ここでの面白さ楽しいとか笑わせられるとか
  • 研究室に配属してすぐは面白いモノを作れば褒められたりする
    • 今思えば,「進捗 → 実装」だった気がする
    • 「実装をすること = 悪いこと」ではないです
  • 論文を読んだり国際会議の動画*3を見ていると,確かに面白そうなシステムの図やデモが載っている
  • 「研究というのはよく分からないけど面白いモノを作ればいい」となる

2期: 有意差出せばええんか?

  • 3年生の後半ぐらいになると面白いモノを作っても褒められない
    • 指導教官「で?これで何が解決されるの?」
    • 指導教官「実際に使ってみてどうなの?」
  • やたらと実験というワードを聞かされる
    • 指導教官「実験はしたの?」
    • 論文を読んでみると,確かに実験という章がある
    • 実験という章では比較実験を行い,有意差を出してる
  • 「有意差出せばええんかコラ!」となる

3期: 実験は盾

  • 「実験 ≠ 有意差を出す(論文を書く)儀式」ではないと分かる
  • 実験により提案手法の得意・不得意(従来手法が得意)を明らかにする
    • できないことがあっても良い
      • 背景に沿うことができて,それ以外はできなくても良い
      • 「これはできます!でも,これはできません!」と主張すべき
      • 「何でもできます!」は危険(本当に何でもできるの?
  • 面白さ(知見としての価値)の証拠を出すために実験を行う
    • サイエンスなので証拠が必要
      • 証拠を提示するための手段として実験がある
      • 代替手段は作例とか
    • 証拠のない主張(簡単!直感的!)はただのポエム
    • 実験結果は「本当に簡単なの?誤差じゃなくて?証拠は?」と言われた時の盾になる
  • 「有意差が出ない → 悪い研究」ではない
    • 例)「操作時間は従来手法と差がないがユーザは提案手法を好んだ」など?
  • 証拠の無い発表が怪しく思えてくる
  • 論文の読み方も変わった気がする
    • 実験設計,背景を気にするようになった
    • 以前がどちらかというとシステムの章を楽しみにしていた

4月から大学院生になります.3期から何期まで行けるのだろう.

*1:サンシャイン池崎が好きです ジャスティス

*2:他には,探偵オペラ ミルキィホームズ Alternative ONE & TWO,探偵歌劇 ミルキィホームズ TDなどがあります

*3:CHIの動画が公開されましたね https://www.youtube.com/watch?v=9pSeJWXcOvM

Ultra JSFiddleことJKFiddleを作った

こんばんみ.

JSFiddleとは

JSFiddleとは,オンラインでHTMLやらJavaScriptを試すことができるウェブアプリケーションです.CSSでは,SCSSを選択できたり,オプションとしてNormalized CSSを付けたりできます.また,CoffeeScriptだったりバベったりもできます.便利です.ちょっと試したい時,関数の動きが思い出せない時に使っています.

JSFiddleの問題

  • HTML書くのダルいじゃん
    • Pugで書きたいじゃん
  • 補完ショボいじゃん
    • VSCodeぐらい欲しいじゃん
  • 狭いじゃん
    • Slackっぽくショートカットでサッと移動したいじゃん

JKFiddle

github.com

f:id:mimorisuzuko:20170203204345p:plain

特徴

  • Pug,SCSS,JavaScriptが書ける
    • Electron上の iframe で実行
  • Editorはmonaco-editor
  • ⌘ + ${n} で他のパネルへ移動
  • Drag & Drop でファイルをあげられる

自分用にサッと組みましたが,良さげです.

ログインできなくなったSlack Teamを取り戻した

経緯

  1. iPhoneのSlackでTeamを作る(1年程前)
  2. 登録の時にメールアドレス間違える
  3. メールアドレスを間違えたのでパスワードを設定するメールが届かない
  4. Slack.app などでログインできない 使えない 詰んだ

問い合わせる

聴くのはタダだしSlackに問い合わせてみた.

内容は「大分前に作ったチームがあるんだけどメールアドレス間違えちゃったからログインできない.多分そのチームはinactiveだと思うから解放してくれない?」みたいな感じ.フォームで送信したので詳しい内容は残ってなかった.

30分ぐらいで返信が来た.

f:id:mimorisuzuko:20170111003914p:plain

I know how frustrating a typo can be!

うるせえ.

返信で新しく作ったSlack Teamを送ったら無事取り戻せました.

f:id:mimorisuzuko:20170111004049p:plain

#ABPro 2016で発表したMimori Suzu Codeについて

こんばんみ.ABPro2016で「かわいい💕ツイート🐔が作れる💪エディタ✒️ Mimori Suzu Code」を発表しました.当日のツイートの様子はTogetterでまとめられています.

togetter.com

かわいいツイート #とは

かわいいツイートとは以下の通りです.

つまり,このようなツイートが作成できるエディタを構築します.かわいいツイートを目指す理由は,汚いツイートよりかわいいツイートの方が多方面に有益であるからです.RTといいねの数が実証していますね.

準備

かわいいツイートの取得

Node.jsでTwitter APIを叩き,三森さんのツイートを取得します.RTは省き,本人のツイートのみを取得するようにしました.

f:id:mimorisuzuko:20160925165959p:plain

ツイートの加工

取得したツイートを加工していきます.

まず,ツイートに含まれる不要な文章を消します.不要な文章とは,例えば,古い引用RTの形で含まれた他の人のツイート,画像やリンクのURL,ハッシュタグなどです.

そして,不要な文章が無くなったツイートをいい感じに分けていきます.これが1番大変でした.上記で挙げたツイートもそうですが,三森さんのツイートは句読点はもちろん,顔文字,絵文字,「笑」などが文章の区切り文字になっています.

推しのために丹精込めて手動で分けていくのは天にも昇る気持ちになると思いますが,作業の過程で本当に天に召される可能性があったので丹精込めてプログラムを書きました.

github.com

www.npmjs.com

エディタの外観を作る

Visual Studio Code上でDev Toolsを開いてDOMの構造や色を参考にして作成しました.見た目通り,中身もしっかり組んであります.

当日

ツイートするところを直前に組み直したのでライブデバッグする羽目になりました.

おわす.

github.com