FROKAN × UIT #2 「年忘れLTバトル」 https://gyazo.com/d74563aea6cf7f29fc1943ecfcbd4508
デザイン LT
デザイン本部マーケティングデザインブ第一グループ
フロントエンド、バックエンド
「最近関わった案件の話」
fontgraphy
AIサーバーが音声を分析してフォントとイメージを選定
実装
Dreamweaverが開発環境
可動範囲
フロントとバックのサポート
管理画面
プロトタイプの検証
開発環境
フロントエンド（社外）
バックエンド（社外）
集英社DeNAプロジェクツ
開発環境
音に合わせてオノマトペや背景を動かす
20パターン実装
処理不可などを検証してパターンを絞る
AudioContextで実装
FrequencyData
マウスインタラクション
Verda LIENチーム
プライベートクラウド
管理画面
限界が見えてきた
コンポーネントない
AWS, GCPみたいなもの
UIT Dev2チーム
「UITしくじり先生 俺みたいになるな！」
プロダクトデザインの失敗談
リニューアル
サードパーティUIの脱却
ユーザーのためのプロダクト
変更点
ヘッダーメニュー
サイドバー
ひと目でみて
サーバー一覧が見れるように
ロードバランサーがつくれる
結果
サードパーティUIからは脱却できた
ユーザーのためのリニューアルにはなってない
どこで間違えた？
類似サービスを真似した
AWS, GCPの体験
インフラリソースはバラバラである
ソリューションアーキテクトが相談してくれる
Verdaにはそれがない
アーキテクトがなくてもUI・UXを提供
ロードバランサから一度に作成できる機能
インフラのつながりを分かりやすくする
そもそもデザインのプロセスが悪かった？
バックエンドが企画・API開発
縦割りでフロントエンドの担当が決まる
分離したUI・UXになってしまう
どうすればよかったか
フロントエンドの下請けをやめる
バックエンドと合流する
統合されたUI・UXが出来る
まとめ
状況が違う類似サービスを真似しない
プロダクトの使われ方を知る
プロダクトの「使わせ方」をデザインする存在
バックエンド LT
APIになろう
趣味でつくったAPIの話
P-Chan API
identification
account
サーバーを立ち上げてAPIを返す
データ取ってきて保存してアレコレ
預金残高API
Puppeteer
マネーフォワードに入る
Photon
データの永続化
Prismaライブラリを使用
lift save
lift up
直感的なオブジェクト操作ができる
新卒
UITチーム
アイコン
LAICON
リリース問題点
エンジニアが関与
アイコンの命名
アイコンフォントのビルド・デプロイ
CMSをつくるプロジェクト
プランナーとデザイナーがアイコンを追加する
レビューや承認作業をする
APIリクエスト削減
余分なレスポンスを削除
社内でも採用事例がある
GraphQL Serverをつくる
DB接続
Decoratorでカラム定義できる
SDLと互換性ある
type-graphqlを使用
フォーラム機能が大変
ユーザーがアップ
レビュー・リテイク
追加されるとリリース
APIを利用すればいいんじゃないだろうか
Apollo Federation
Apolloの機能
複数のAPIをとって一つのAPIにする
schemaのtypeを定義できる
LAICONユーザーとGitHubアカウントを相互参照する
Apollo Gateway
２つのAPIサーバーを合体できる
フロントエンド LT
試行錯誤録
基本の構成
プロジェクト名の30文字制限
IPアドレスのチェック
デプロイの最大サイズ100MB
非エンジニアによるサイト更新
APIのリミットがある
サイズが大きいファイルは注意
画面上でmasterへマージする機能はない
migration APIを実行できるLambdaを実装
AWS consoleで違うリージョンを選択してた
問い合わせ機能
レコードの設定でドメイン認証をやってくれる
送信制限の解除申請が必要
デフォルトはサンドボックスで検証済みのメアドしかできない
サーバーレスの学び
１つの方法にとらわれない
メリットとデメリットを知る
「Differential Servingでコードにダイエットをさせましょう」
ダイエットは必要？
JSの実行はv8はロード時間の10-30%
必要なユーザー11.6%
Differential Servingを使う
nomodule属性
モダンブラウザが無視する
レガシーは両方ダウンロードされる問題がある
onbeforeloadはある
nomoduleがない
vue-cli --modernモード
webpack
rollupは優秀
20%減らすことが出来た