我が名はなんとか菜である!

主に技術系の記事を書きますが、ポエムも混入します。

HTML5版のニコ生プレイヤーはどのようにしてコメントを取得しているかを調べた

HTML5時代のリアルタイムデータ取得

ユーザー生放送のHTML5プレイヤー化が完了し、モダンな作りになってきたニコニコ生放送のプレイヤーですが、内部で使われている方法もそれに合わせてかなりモダンなものとなっています。
今回、Chrome拡張によるニコ生コメントビューワーを作るにあたり、どのようにリアルタイムなコメント取得を行っているのかを調べたところ、WebSocketを使っていることが分かったので、そこで得られた知見を書いていこうと思います。

続きを読む

Reactに状態管理ライブラリを導入するのは段階的にやっていくのでも遅くないという話と、MobXがよさそうという話

Reactを始めてみたはいいけど、最初の設計段階で状態管理することを考慮してライブラリ導入しなきゃいかんのでしょ?

と思っていたんですが、意外とそうでもなくて、アプリの骨子をReact標準のPropsとStateだけで組んでから、複雑度が増してきた段階でReduxやMobXを導入しても遅くないんだなぁというのが最近ようやく分かったので、道のりをまとめておこうと思います。
また、ReduxとMobXを両方試してみての感想も後半に書いてみました。
なお、Reduxについての言及が多めですが、これは「Reduxは5時間ぐらい試して上手く行かなかったけど、MobXは1時間で上手くいくようになった」というだけの話ですので、特に意図はないです。

続きを読む

Google Home mini からパソコンの電源を入れられるようにした【Google Assistant + IFTTT + Raspberry Pi】

我が家にもGoogle Home miniが来たので、色々遊んでみました。 ざっくりこういう仕組みです↓

仕組み
GoogleHomeから家のパソコンを起動する仕組み

続きを読む

2017年のまとめ

今年も残すところあと僅かとなりました。
あと2,3時間ほどで2017年が終了するので、なんとなく今年あったことを文章に残しておこうと思います。
特に内容はありません。 カテゴリを絞って書くつもりはないので闇鍋な内容になりそう。

続きを読む

Switchが盗まれたので買い直したらアカウント関連でドタバタした話

となってから、

こうなるまでの話です。
ポイントは2つです。

  • ユーザー側からは「ダウンロード出来る本体」の紐付け解除は、紐付けを行った本体からでしか行えない
  • サポートに問い合わせる際に「新しい本体の製造番号」をアカウントの情報と共に伝えれば、紛失した本体の登録を解除する対応をしてもらえることがある

ニンテンドーアカウントとダウンロードソフトについては権利がガチガチなイメージがありましたが、特に任天堂と揉めたということはなく、非常に丁寧かつ素早く(2回問い合わせて合計4営業日)対応して頂けました。本当にありがとうございました。
以下は、どうしてこうなったかを時系列順にお話しします。

続きを読む

【Angular4】FormGroupに入れ子になったFormArrayをComponentの親子で共有する

Angular4でも2でも動くと思うけど4って書いたほうがかっこいいかなと思って。

Angular4でComponentを書いてるとしばしば次のような問題にブチ当たります。

Componentが無限にデカくなる

最初から適切に画面の分割ができていればいいんですが、実際のプロダクトだと設計書の段階ですでに闇鍋だったりして、頑張ってServiceにロジックを詰め込んでも、一つのcomponent.tsがUI操作だけで2000行とかになったりして無事に死にます。
これに対する応急措置として、親子関係を作ってComponentを分割するというのがありますが、FormGroupを使って入力値の管理をしている場合は一筋縄では行きません。(僕は行きませんでした)
特に、親元のFormGroupの中にFormArrayが入っていてるときに、その部分を分割しようとすると、子Componentから直接親のFormGroupが見えないため、Cannot read property 'getFormArray' of nullようなエラーが出て上手く動きません。
公式ドキュメントもイマイチ参考にならなかったので色々試行錯誤したところ、ようやくうまくいく方法が見つかったので、覚え書きしておきます。

続きを読む

30分ちょっとの時間と慣れと気合で作るフロントエンド開発環境

初投稿です。
シャカイに出て1年とちょっとが経ちました。研修後に配属されたチームで、なんとあれほど避けていた フロントエンド をやるハメになりました。
大体ここ10ヶ月ぐらいで学んだり感じたりしたことをここに書いてみようと思います。


目次

  1. エディタのインストー
  2. node.jsのインストー
  3. npmを使ってみる
  4. webpackのインストー
  5. babel及びプラグインのインストー
  6. webpack-dev-serverのインストー

目標:
基本的なnode.js, npmの仕組みを使ってフロントエンドの 最小限の 開発環境を構築する。

続きを読む