ravelll の日記

よしなに

UIT#5 で登壇してきました + 資料への補足

さくらの専用サーバチームでフロントエンドエンジニアをやってる @ravelll です。このエントリはさくらインターネット Advent Calendar 2018 3日目のエントリです。

11/29 に開催された UIT#5 で登壇してきたので、その報告と発表内容への補足を書くエントリです。

はじめに: UIT とは?

UIT とは User Interface Technology の頭文字を取った、フロントエンド技術の勉強会です。LINE株式会社の有志によって運営されています。

uit.connpass.com

毎回テーマが異なり、過去のテーマには BFF やアプリ内 Web などがあります。私が登壇した回のテーマは "わたしたちにとってのVue.js" でした。

登壇内容と補足

↓が登壇資料です。所属するチームにおける Vue.js の実践事例を中心に、さくらのフロントエンドの話をしてきました。

speakerdeck.com

この資料の内容について、いくつか補足します。

新コントロールパネル(α)

現コントロールパネルを置き換えるものとして開発を進めているコントロールパネルです。スライドでは刷新が完了したかのように書いてしまいましたが、αとあるように未完成で、現在は一部のユーザーのみに試験的に提供しているものとなっています。

アプリケーション構成

js ファイルを配信しているサーバーや、API アプリケーションの稼働には Docker が利用されていて、コンテナは Apache Mesosフレームワークである Marathon によってオーケストレートされています。
Apache MesosMarathon について知らないかたは zembutsu さんによる 忙しい人の5分で分かるMesos入門 - Mesos って何だ? を読むとイメージがつかめると思います。

ディレクトリ構成

http クライアントが utils にあるというのは嘘でした!!services というディレクトリにありました。
現状 utils と services の境界が曖昧なので utils に一本化しようかなという気持ち。

Vue.js に置き換えてみてどうだったか

まだ置き換えが完全に終わったわけではないですが、最大の目的だった保守性の向上については十二分に達成されることが確信を持って言える状況です。
また、素朴な DOM 更新が VDOM を利用した差分レンダリングになったことや、API リクエストやエンドポイント設計が見直されたこと(こっちが大きい)で、実装できている箇所に関してはパフォーマンスも全体的に改善されている状況です。
個人的には、構成が独自フレームワークから世界的に利用実績のあるライブラリに変わったことで、エンジニアやデザイナーが開発を通して得た知見をアウトプットしやすくなったり、外部の知見を活用しやすくなったのが良かったなーと感じています。

困りごと

デザインが高い完成度になったとき初めて共有される、といったことを話したのですが、現在は Abstract で Sketch ファイルを管理し、エンジニアも Abstract のチームに参加することで、完成度が低いうちからデザインを見れる状況になりました 🎉
これにより早いうちから認識や仕様についてデザイナーに確認することができるようになったので、上手く活用して能率を上げていければと思っています。

おわりに

楽しい機会を作ってくださった UIT 運営のかたがた、ありがとうございました!
あと Vue.js に限らずさくらでフロントエンドをモリモリやっていきたい人にはこちらのサイトが便利です、ぜひご活用ください。

Pixela で飲酒のログをつけ始めた

巷を賑わせている id:a-know さんの Pixela を使って、1週間ほど前から飲酒のログをつけ始めた。

pixe.la

このブログのサイドバーにあるグラフがそれ。グラフのパディングが厚かったので↓のようにネガティブマージンをつけて描画位置を少し左に寄せている。

<img src="https://pixe.la/v1/users/ravelll/graphs/drank?mode=short" alt="飲酒ログのグラフ" style="margin-left:-20px">

目的は飲酒生活の改善ではなく後から振り返ってぼんやり楽しめるようにすることなので、ざっくりと1杯を1単位として記録している。飲んでいるものがビールなのか日本酒なのかワインなのか、また1杯が1パイントなのかハーフパイントなのかも考慮していない。

今は家の Mac から素朴に curl を叩いて更新しているけど、これだと出先から更新できないので簡単な更新用 Web ページを立てようかなと考えている。幸いまだ飲んだ量が分からなくなるような会合に参加していないけど、いつ治安の失われた空間でめちゃくちゃになるか分からないのでスマホからもシュッと更新できるようにしておきたい。そういう会のときは更新するのも忘れてめちゃくちゃになりがちな気もする。

Mint60 のスターターキットを買った + 組み立てた

f:id:ravelll:20181111165336j:plain

初めての組み立て式(と言うんだろか)キーボードではんだ付けをするのも中学生以来だったのだけど、なんとか組み立てることができた。このエントリも組み立てた Mint60 から入力している。ちなみに軸は静音の赤。

組み立てには6時間強かかった。途中はんだ付けに失敗して吸い取り + 付け直しすることが何度かあったり、組み立て終盤でトラブル(後述)があったりしたので電子工作に慣れている人なら半分くらいの時間で組み立てられる気がする。

組み立てはゆかりさんの組み立て記事に沿って粛々とやったらできた。

Mint60の組み立て手順 - ゆかりメモ

CherryPCBマウントスタビライザーの組み立て - ゆかりメモ

組み立てて感じた注意点として、ProMicro 用ピンヘッダやタクトスイッチなどの基盤の表面ではんだ付けするものは特に慎重にやらないと後から困る場合がある。キースイッチのはんだ付け以降にその箇所でミスが見つかると恐らくキースイッチのはんだ付けを全部外す羽目になる。

今回は幸いそこにミスは無かったのだけど、実際に起きたトラブルだと、基板の裏に取り付ける LED がどこかと干渉するのか、2, 3の列のキーが全て反応しなくなってしまった(冒頭で言及したトラブル)。はんだづけした山を短くしたりあれこれ調節してみてもダメだったのと、つけなくても動作に影響がないようだったのでパージして解決。光らなくてもキーボードはキーボードという思想です。*1

キーマップは MacでMint60のキーマップを変更してみた – うろんげな解答 を参考にして書き換えた。avr-gcc はインストールに時間がかかるので Docker で解決したかったのだけど、hex ファイルを基盤に書き込む部分は解決方法が分からなかったのでおとなしく必要なソフトウェア一式をインストール。

そんなこんなで完成した Mint60 を小一時間使ってみたのだけど概ね快適で満足している。方向キー付きの Barocco を求めていたのだけど、これよこれという感じ。強いて言えばスタビライザ付きのキーを押下したときにプラスチックが擦れる音がしてしまうのが気になるくらい。これは塗る方向で解決できないかな…何かを…

総じて、大人の工作という感じで楽しかった。そして前職を退職したときに @asuforce 君がくれたはんだごてが大活躍でした、本当にありがとう!!!

*1:光らなければそれはキーボードではないという思想が存在します。