FROKAN × UIT #2 「年忘れLTバトル」
https://gyazo.com/d74563aea6cf7f29fc1943ecfcbd4508
https://uit.connpass.com/event/152518/
デザイン LT
株式会社ディー・エヌ・エー 小松 貴之
デザイン本部マーケティングデザインブ第一グループ
フロントエンド、バックエンド
「最近関わった案件の話」
fontgraphy
https://fontgraphy.dena.com/pc/
AIサーバーが音声を分析してフォントとイメージを選定
実装
homunculuc Inc.の木村さん
WebGLの達人
Dreamweaverが開発環境
可動範囲
フロントとバックのサポート
管理画面
プロトタイプの検証
開発環境
フロントエンド(社外)
バックエンド(社外)
Docker + BrowserSync
集英社DeNAプロジェクツ
https://shueisha-dena-projects.com/
開発環境
Next.js
Three.js
Tween
音に合わせてオノマトペや背景を動かす
20パターン実装
処理不可などを検証してパターンを絞る
AudioContextで実装
FrequencyData
マウスインタラクション
Mac Chrome, iPhoneのみ
LINE株式会社 生田 望
Verda LIENチーム
プライベートクラウド
管理画面
element-ui
限界が見えてきた
コンポーネントない
AWS, GCPみたいなもの
UIT Dev2チーム
「UITしくじり先生 俺みたいになるな!」
https://speakerdeck.com/line_developers/the-greatest-teacher-in-uit-failure-is
プロダクトデザインの失敗談
リニューアル
サードパーティUIの脱却
ユーザーのためのプロダクト
変更点
ヘッダーメニュー
サイドバー
ひと目でみて
サーバー一覧が見れるように
ロードバランサーがつくれる
結果
サードパーティUIからは脱却できた
ユーザーのためのリニューアルにはなってない
どこで間違えた?
類似サービスを真似した
AWS, GCPの体験
インフラリソースはバラバラである
ソリューションアーキテクトが相談してくれる
Verdaにはそれがない
アーキテクトがなくてもUI・UXを提供
ロードバランサから一度に作成できる機能
インフラのつながりを分かりやすくする
そもそもデザインのプロセスが悪かった?
バックエンドが企画・API開発
縦割りでフロントエンドの担当が決まる
分離したUI・UXになってしまう
どうすればよかったか
フロントエンドの下請けをやめる
バックエンドと合流する
統合されたUI・UXが出来る
まとめ
状況が違う類似サービスを真似しない
プロダクトの使われ方を知る
プロダクトの「使わせ方」をデザインする存在
バックエンド LT
株式会社ディー・エヌ・エー P-Chan
Pocochaのフロントエンド担当
APIになろう
https://speakerdeck.com/p1ch_jp/lets-become-an-api
趣味でつくったAPIの話
P-Chan API
identification
account
サーバーを立ち上げてAPIを返す
express
データ取ってきて保存してアレコレ
預金残高API
Puppeteer
マネーフォワードに入る
Nowはタイムアウトが10秒でつらい
Photon
データの永続化
Prismaライブラリを使用
lift save
lift up
直感的なオブジェクト操作ができる
LINE株式会社 緑豆はるさめ
新卒
UITチーム
「GraphQL server をつくる・つなぐ」
https://speakerdeck.com/line_developers/graphql-server-constructing-and-bonding-api
LINE Design System
アイコン
LAICON
LINEでのFont awesome
リリース問題点
エンジニアが関与
VaildなSVGか
アイコンの命名
アイコンフォントのビルド・デプロイ
CMSをつくるプロジェクト
プランナーとデザイナーがアイコンを追加する
レビューや承認作業をする
GraphQLを使用した
APIリクエスト削減
余分なレスポンスを削除
社内でも採用事例がある
GraphQL Serverをつくる
DB接続
TypeORM
Decoratorでカラム定義できる
TypeScriptとの同期
SDLと互換性ある
type-graphqlを使用
フォーラム機能が大変
ユーザーがアップ
レビュー・リテイク
追加されるとリリース
GitHub Pull Requestと仕組みが一緒
APIを利用すればいいんじゃないだろうか
Apollo Federation
Apolloの機能
複数のAPIをとって一つのAPIにする
schemaのtypeを定義できる
LAICONユーザーとGitHubアカウントを相互参照する
Apollo Gateway
2つのAPIサーバーを合体できる
フロントエンド LT
株式会社ディー・エヌ・エー 平嶋 美紀
試行錯誤録
基本の構成
Nuxt.js
Firebase Hosting
プロジェクト名の30文字制限
Cloud Functions
IPアドレスのチェック
デプロイの最大サイズ100MB
CircleCI
Slack
非エンジニアによるサイト更新
Contentful
HeadlessCMS
APIのリミットがある
サイズが大きいファイルは注意
画面上でmasterへマージする機能はない
migration APIを実行できるLambdaを実装
Lambda
AWS consoleで違うリージョンを選択してた
問い合わせ機能
Amazon SES
レコードの設定でドメイン認証をやってくれる
送信制限の解除申請が必要
デフォルトはサンドボックスで検証済みのメアドしかできない
サーバーレスの学び
1つの方法にとらわれない
メリットとデメリットを知る
LINE株式会社 AlanGDavalos
「Differential Servingでコードにダイエットをさせましょう」
https://speakerdeck.com/line_developers/putting-your-js-code-on-a-diet-with-differential-serving
https://qiita.com/alangdm/items/7258bfb44f09f98daf48
ダイエットは必要?
JSの実行はv8はロード時間の10-30%
https://v8.dev/blog/cost-of-javascript-2019
ES5コード
必要なユーザー11.6%
Polyfill
Differential Servingを使う
nomodule属性
モダンブラウザが無視する
レガシーは両方ダウンロードされる問題がある
Safari10が特に問題
onbeforeloadはある
nomoduleがない
vue-cli --modernモード
webpack
rollupは優秀
20%減らすことが出来た