LINE MUSIC の年末を彩ったアニメーション実装のコツ
Figmaにコメント
実装に必要な情報
数値
フェードイン
ユーザーアクションを求めるところに使わない
大げさにしない
size 99% → 100%
プログレスバーアニメーション
スクロールした量に応じて伸びる
そのままだと緑のバーが画面上に固定されているように見える
トランジションで反映を若干ゆるやかにする
緑の丸
別々のアニメーションが同じタイミングで動いている
見た目の派手さと実装のシンプルさを両立
カウントアップ
setTimeoutのループでカウントアップ
複数の数字を順番に表示させる
重複集計
300までカウントできるようにする
アニメーションは0.2秒を基準にする
ユーザーは0.2秒までしか待ってくれない
(新サービス|カクヨムネクスト)(オープン)?を支えるスプレッドシート(芸|技術)
カクヨム
運用
工数はできるだけ節約してユーザー向けの機能に使いたい
要件が不確か
そこでスプレッドシート
原稿チェック
関数派とVBA (GAS) 派
関数は即時実行される
反映タイミングをコントロールできるようにする
チェック途中のデータのわけがわからなくなる
関数とGASをハイブリッドに使う
Playwrightを使いながらデザインチェックや検索アルゴリズムのテストをした話
Helpfeel
デザインのテスト
案件ごとにデザインをカスタマイズしている
VRT
差分ピクセル数を見る
デザインが崩れそうなFAQを事前に対策する
検索アルゴリズムのテスト
ローマ字でも検索したい
副作用を見積もる
定性評価
人間が見る
定量評価
巨大なテーブルのテーブル定義を無停止で安全に誰でも変更できるようにする
ALTER TABLE
無停止でやる
何十億レコード
INT(32) が溢れる
オンラインDDLできない
メタデータロック
長いトランザクションが貼りっぱなしだとDDLを流せない
メンテナンス
サービス停止
レプリカでDDLを実行をして切り替える
数分ダウンタイムが発生
pt-osc
いろいろよさそう
freeeではpt-oscを使いやすいように修正した
RDS/Auroraに対して実行するECS task/Step Functions
lock_wait_timeoutを短くする
--no-swap-tables
負荷の調整
DB呼び出し回数を減らしてコア機能を高速化した話
高速化と不整合と教訓
単体会計
連結会計
連結グループに対する連結財務諸表
親会社・子会社
連結仕訳
コア機能
連結財務諸表の金額を更新しうる操作をした時にそのまま連結財務諸表を更新する
すごく遅い
DBアクセスをやめてメモリに載せる
高速化できた
金額不整合障害
切り戻した
元から同一科目に対する金額が2つあった
on duplicate key updateでinsert
教訓
フィーチャーフラグ切り戻しで戻った
ドメインルールをコードに落とし込む
ユーザー目線でのシナリオテストを書く
スタートアップの技術顧問を3年間続けて発生した事と気付き
技術顧問
なんでもコードレビュー
前提が違うとやってはいけないことが変わる
技術支援
コードが超属人的になる
セキュリティチェックリスト
開発が遅い、動作が遅い
サービスがうまくいってくるとビジネス側の要求が上がってくる
相談と提案
生成AIで生成したコードをそのまま横流し
理解を促す
細かくレビューする
泣きついたらなんとかしてくれる人
自走できるようにする