朝考夕省

think in the morning, reflect in the evening.

Rejectcon 2018(builderscon tokyo 2018 番外編)に行きました

techplay.jp

Rejectcon 2018(builderscon tokyo 2018 番外編)に参加してきたので、ざっくりと勝手にまとめてみました。

twitter.com

その「s」を付けるために ─ はてなブログHTTPS化の軌跡

builderscon.io

speakerdeck.com

スピーカーのブログ

ざっくり

  • Mixed contentsの発生
    • HTTPSのサイト上でHTTPのコンテンツを読み込むと発生する
    • ユーザーが自由にHTMLを書けるからHTTPSのブログにHTTPコンテンツを埋め込んでHTTPSとHTTPが混在する
  • 独自ドメインが使える
    • ユーザーが発行した証明書を預かりたくない
    • Let'sEncryptのおかげで解決できた
  • 絵文字記法の発見
    • 絵文字は他サービスがhttpで画像を提供しているものだった
    • はてなプログ側で配信するようにした
      • 他社のサービスを利用している状態だと撤退されたときとかにてんやわんやになる→そもそもよくないよね
  • テスト
    • httpsに準拠したテストに書き換え
    • httpからhttpsへのリダイレクトは重点的に
  • QAシートの用意
    • サポート部に記入してもらう
    • 考慮漏れとかここで気づくことができた
  • 証明書の技術選定
    • AWSのやつだと結果的にブログの要件にあわない

思ったこととか

HTTPS化の話だけでなくて大事なことを再認識できる内容でした。 - 外部サービスとの連携について自サービスで利用できるようにするか否か。という視点は大事 - 問題を解決するために段階を踏んで対応するのは大事 - 社内のエンジニア以外の多数の人に使ってもらって考慮漏れをなくすの大事 - 証明書の技術選定は大事

デザインシステムを導入してUIに秩序を取り戻す

builderscon.io

speakerdeck.com

ざっくり

  • 画面やプロダクトの増加、UI・ トレンドの変化、デザイナーの入れ替わり
    • UIの統一感を保つの大変
  • デザインシステムを導入して解決する
    • ブランド表現としての見た目や振る舞いのクオリティを確保
    • 開発&メンテナンスの効率UP
    • デザインアウトプットの効率UP
    • デザイナーとエンジニアのコミュニケーションコストの低減
  • React Nativeでさまざまなプラットフォームのプロダクトでデザインを統一しやすい
    • CSSは使えないがWebはReact Native for Webで対応していく
  • わかりやすいドキュメントを作る
    • doczというサービスでReactのデザインコンポーネントを簡単にドキュメント管理している

紹介されてたツールとか

Adele 各社、各プロダクトのデザインシステムが公開されているサイト

Lona LonaのGUIコンポーネント作るといろんなプラットフォームでネイティブに動くコンポーネントを自動生成する(まだ不完全)

Theo通化すべき変数だけ管理できればOKな人向け

Microsoft/reactxp MicrosoftSkypeをReactでクロスプラットフォームに開発したときに作られた。 React Nativeでのクロスプラットフォームの参考になる。

docz .mdxというmarkdownとjsxを組み合わせた入力方式で、ドキュメントを書く感覚でReactコンポーネントを描画できる

思ったこととか

自分が開発しているのは今はWebだけのサービスなのでCSSでなんとかなっているけど、画面間のデザインの統一やデザインの管理には課題を感じていたのでデザインシステムの導入を考えたくなった。 Reactでデザインコンポーネントを作っていこうと思っていたけど、いっそのことReact Native for Webに切り替えるのもいいなと感じた。

Rails + Vue.jsでUIリニューアルしてみた

ざっくり

  • フロントエンドのリニューアルでjQueryで作り込まれていたものをVue.jsで作り変えた話
  • フロントエンドに強い人でなければReactよりはVueがとっつきやすい
  • コンポーネント思考で開発効率が上がった

ドメイン駆動Vuexで複雑さに立ち向かう 実践StorybookでVuexに立ち向かう

紹介されてたツールとか

Storybook コンポーネントのカタログを作成・管理できるツール https://github.com/storybooks/storybook

思ったこととか

StorybookでUIコンポーネントを管理しながら開発できるのはデザイナーと共通認識を持ててよさそう。 デザインシステムとStorybookの使い分けの話はなかったけど、導入のために調べてみようかと思った。

新しい技術書出版サービスの作り方

builderscon.io

PEAKS

ざっくり

  • プロダクト開発のお手本のような話
  • キーワード
    • ゴール・ダイレクテッド・デザイン
  • ユーザー、ステークホルダーのゴールを達成するデザイン
    • ユーザー体験設計書にステークホルダーのゴールが書いてある
    • ステークホルダーへのインタビューを最初にしてゴールを明確にしておく
    • ゴールを達成するための機能を開発していく
  • ゴールは3種類
    • ライフゴール(人生において達成したい・どう生きていきたいか)
    • 感情的ゴール(サービスをどういう気持ちで使いたいか)
    • ファンクショナルゴール(上記2つのゴール達成のために必要な機能)
  • 事情通にもインタビューする

関連

ROLLCAKE

思ったこととか

@7ganoさんの話術がまず面白かった。プロダクト開発の根幹を学ぶことができた。 インタビューとゴール設定はしっかりしておかないとプロダクトの軸が決まらないなー。と改めて考えた。

DAO を目指す Ethereum 技術者コミュニティ「Hi-Ether」の挑戦

builderscon.io

ざっくり

  • Hi-EtherというEthereum コミュニティを中心とした話
  • Gakuseiという学生であることを証明するサービスをブロックチェーンで作った
  • ブロックチェーンは世界共通で使えるので世界中の学生証明ができる

関連

Ethereum 開発者向けコミュニティを作ったよ Gakusei

思ったこととか

ブロックチェーンは全然わかっていないけど、改ざんができないから学生証明とか身分証明で使えるなら個人の履歴管理にも有用だよねと思ったり。 でも隠したい闇歴史もあるよねと思ったり。

フロントエンドエンジニアが考えるべき事は沢山ある

builderscon.io

speakerdeck.com

ざっくり

  • Webサイトの三大品質
  • フロントエンジニアに求められることはたくさんあるけど、すべてはユーザー体験の向上のため
  • ページパフォーマンス改善
    • パフォーマンス改善で売上が上がるわけではなく、機会損失・マイナス要因を抑える
  • 日々の計測が必要
    • 計測し続けていないといつから遅くなったのか、原因がなんなのかわからない
    • 推測するな計測せよ
  • フロントエンドアーキテクチャ
    • jQuery、React、Vueいろいろあるが導入や切り替えを目的にしないように
    • 導入理由を説明できるのならチーム次第で導入していく
  • アクセシビリティ
    • 見やすさは重要
    • 「見づらい」を排除する
    • 文字の大きさ、色・コントラスト
    • 色のコントラスト比を計測する

紹介されてたツールとか

contrast ratio 背景色とフォントカラーのコントラスト比を計測してくれる

思ったこととか

パフォーマンス計測は単発でやるより継続しないとダメだなと思った。大変そうだけど。 コントラストを計測するという発想は今まで持っていなかったので今後は意識していきたい。

入社から二ヶ月経ってわかった SmartHR 開発のつらいところ

思ったこととか

面白楽しくつらい点を紹介されていて会場は大盛り上がりでした。 ペーパーワークを代替していこうという苦労が最近の自分の境遇から想像しやすかった😇

Rails+ReactなSPAサイトでのSEO

builderscon.io

speakerdeck.com

ざっくり

  • SPAでのSEO対策のためにSSRで苦労した話
  • SSRもよいが重要なのは表示速度
  • 早ければインデックスされやすいからSEOに効く

思ったこととか

SSR大変😑

Wantedly機械学習プロダクト開発を支える機械学習基盤

builderscon.io

speakerdeck.com

ざっくり

  • プロダクト開発のために機械学習を使っている(名刺画像読み取りロジックとか)
  • ユーザー同士のつながりを推定するロジックに使っている
  • 機械学習プロダクトを支えるための機械学習基盤を整える
  • データ基盤(BigQuery+S3+Analytics)
  • 学習環境(GPU Instance+SageMaker)
  • 評価管理(script/evaluate+ev)
  • デプロイ(k8s+GPU cluster)
  • 計測(ログ収集+A/B test(効果検証))

思ったこととか

機械学習そのものはわかっていないけれど、プロダクトでの利用は十分あるので基盤整備の参考になりそうでした。

FiNCにおけるFault Isolationの取り組み

speakerdeck.com

ざっくり

  • マイクロサーピスでの障害の局所化の話
  • タイムアウト、Circuit Breaker、Bulkhead → 全部Envoyで解決(インフラ面は)
  • アプリケーション側は安全に機能低下できる対策が必要
    • あるサービスが落ちたときに関連サービスはどうすべきなのか
    • すべてがダメになるより一部がダメになったほうがよいのか、すべてダメにしたほうがよいのか(ビジネス理解も必要)

思ったこととか

マイクロサーピスにしたときのアプリ側の障害時の振る舞いはフロントエンドの人も認識しておかないとプロダクトが死ねるなと思った。 外部サービスとの連携している場合にもこの考え方は当てはまるよね。

エンジニアが起業し自社サービスを立ち上げるまで、そしてその後

builderscon.io

ざっくり

関連

あるエンジニアが「Kibela」というサービスを考え、リリースするまでのフローを全部教える

思ったこととか

お金と縁は大事。 クックパッド出身の人は話が面白い。

The Five F'ing Questions You Should Answer In Your Proposals

www.slideshare.net

ざっくり

  • builderscon主催者が語る、なぜ採用されなかったのか。
  • プロポーザルの書き方、要点のレクチャー

思ったこととか

プロポーザルの書き方、考え方は普段の仕事でも応用できる内容でためになった。PRとかissueでも考え方は同じかなと。

気になったキーボード(2018/9/2)

GDG DevFest Tokyo 2018 の帰りにふらっと立ち寄ったビックカメラ新宿店でキーボードコーナーにいたら公式twitterアカウントからリツイートされたのでブログ書きます。

本編(GDG DevFest Tokyo 2018)のブログがまだですが、、、こっちのほうがプライオリティー高いということで😎w

VORTEX CORE

個人的に気になっている40%キーボードの市販品。 40%キーボードかつメカニカルキーボードは自作界隈ではよくあるんですが、市販品はクオリティの良い物が少ないのでこれは「買い」な一品。

マクロ機能もあるので4レイヤーのキーマップをプログラミング可能。

ちなみに40%キーボードとは通常のキーボード(123とかF1, F2とかテンキー付きのフルキーボードの40%のサイズという意味です)

http://www.archisite.co.jp/products/vortex/core-en/

Mistel Barocco

キーボード界隈で流行りの分割式キーボード(メカニカル)の市販品。 今、自分が市販品のキーボードを購入するならこれ。 社内でも流行りそうな兆し😏

オーソドックスにCherry MXの黒・赤・青・茶の4軸展開で販売されている。 (白軸は限定品みたい)

マクロ機能が搭載されているので3レイヤーのキーマップをプログラミング可能。

元々はクラウドファンディングから始まったとか。。。

http://www.archisite.co.jp/products/Mistel/Barocco-en/ 日本語配列もあります。

SKB-ERG5BK エルゴノミクスキーボード(トラックボール付き)

ここ数年、キーボードに力を入れてきているサンワサプライの製品。 特徴的なのはハの字に開いたキーマップ。 エルゴノミクスキーボードの一種でハの字に開くことで使用者の肩が開いた姿勢で打鍵できるので肩が凝りにくい+手首が腱鞘炎になりにくい、といった効果が期待されます。

真ん中にトラックボールが搭載されていてホームポジションから手を動かさずに親指で操作できるのは快適そうでした。 メンブレンですが、試打したところ打鍵感は良かったです。

高級は求めていないけどキーボード買ってみようかな。という人にはオススメです🤗

https://www.sanwa.co.jp/product/syohin.asp?code=SKB-ERG5BK

親指シフトキーボード「Thumb Touch(サムタッチ)」

リンクは販売元ですが、製造は富士通コンポーネント。ニッチな高級キーボードを作っています。 親指シフト専用のキーボードは愛好家からは望む声が多いものの、ローマ字入力ユーザーが圧倒的に多いので製品が少ない中、近年で出てきた製品の中で一番です。 刻印も親指シフト配列になっているため、親指シフト初心者も入門しやすいとか。

個人的にはメンブレンの感触とキーがアイソレーションでなかったのが残念です😣

http://www.diatec.co.jp/shop/det.php?prod_c=703

Azio Retro Classic

タイプライター風キーボード。 タイプライターの感触を追求するためにオリジナルのメカニカルキースイッチを導入しているらしいです。

クラウドファンディングから製品化された経緯があります。

試打したところ青軸のようなカチカチ音が大きくてタイプライターのような印象は確かにありました。 見た目はレトロでオシャレ。でも音が大きいので静かなオフィスで使うのはメンタル強くないと使えないです。。。😰

https://www.makuake.com/project/retroclassic_bluetooth/

1年間使ってみた。個人的に最強のPCメガネ

レンズはTALEXのモアイレンズ
https://talex.co.jp/product/lineup/mg/

自分はオフィスの蛍光灯の明かりで夕方になると目が痛くなったり頭痛がしてくるので、
少し暗めのモアイ グレーで蛍光灯の白い光を和らげてます。(サンバイザー使えると良いんだけど。。。)
モアイレンズは偏光フィルムを使っているので他社PCメガネのコーティングとは根本的なアプローチが違います。

メガネフレームはOAKLEY FENCELINE
http://www.kineidou.co.jp/oakley/opsalmic/fenceline/fenceline.html

高いけど奮発しました。
視界が大きい、かつ軽いフレームを探しました。
ネット通販で1万円くらい(フレームのみ)で購入できました。

TALEXレンズの取扱店に持っていって持ち込みのフレームにはめてもらって完了です。
ららぽーと東京ベイのイワキ。
https://mitsui-shopping-park.com/lalaport/tokyo-bay/shopguide/10038384_28702.html

■使ってみて
良く見えます。
蛍光灯の光による目の奥の痛みが無くなりました。
夕方の頭痛も無くなりました。
車の運転に使うと目が楽です。
ブルーライトカット。UVカット

フレームが少し合わないのか長時間使うと鼻の位置がズレるのが悩み。