重い lint ルールを特定しよう！TIMING オプションで ESLint 実行速度改善
こんにちは，株式会社 AbemaTV Web browser チームの山﨑です． 私たちのプロダクトでは JavaScript や TypeScript などの静的解析ツールである ESlint を CI で活用しています．しかし，ESlint の実行が不安定になっており開発速度や開発者体験が低下している問題が発生していました．具体的には， eslint を実行している CircleCI のインスタンスクラスを large にしても，job の失敗率が 50% を超えてしまっているような状態でした． この問題を解決すべく，eslint のルール毎の実行時間を計測する TIMIMG オプションを活用することでボトルネックとなっていたルールの特定・精査を行いました． 今回の記事では，不安定だった CI 上での ESlint 実行を TIMIMG オプションを活用し安定化させるに至った話をします
ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
脅威モデリングをソリューション化させるまでの歩み | CyberAgent Developers Blog
本記事では、 脅威モデリングの概要と弊社で脅威モデリングをゼロからソリューションとして提供するまでの歩み、それに伴って発生した課題とその対応策の一部についてご紹介いたします。本記事を通じて、脅威モデリングの理解の助け、または実践する際の参考になれば幸いです。 ToC 背景 脅威モデリングについて 知見を整理するまでの歩み まとめ 背景 弊社のシステムセキュリティ推進グループ（以降、部署）は、「セキュリティ維持・向上・事後対応を通じて、サイバーエージェントグループの成長阻害要因となるITセキュリティリスクを排除する」をミッションに据えております。弊社には関連会社にてゲームやブログ、動画配信など多数サービスを有しており、弊部署は横断組織という位置付けから、それら関連会社に対してセキュリティ対応や管理策の設計・運用など日々多数の取り組みを実践しています。 その中で、プロダクトのシステムにおけるリ
100万行の大規模なJavaScript製システムをTypeScriptに移行するためにやったこと | CyberAgent Developers Blog
現在ピグ事業部の主力サービスである「ピグパーティ」でサーバーサイドエンジニアをしております新卒2年目の川口です。普段はSRE関連の業務を主とし、サーバーサイドの業務効率改善や、システムの運用保守、時には機能の開発や修正なども担当しております。 ピグパーティは、2015年にiOS/Androidでリリースされたアバターコミュニティアプリで、サーバーサイドはNode.js(JavaScript)+MongoDBを採用しています。 ピグパーティではこれまでにプライベートクラウドからGCPへの移設、Kubernetes(GKE)の採用など、技術的負債の排除や新技術の採用などを積極的に行ってまいりました。今回は、サーバーサイド開発時の大きなボトルネックになっていた、型がわからないことに起因する複数の問題を解決するために、TypeScriptを導入することにしました。その結果、システム規模に対して少な
実例で学ぶモニタリング定例のすゝめ | CyberAgent Developers Blog
この記事はCyberAgent Developers Advent Calendar 2021 11日目の記事です。 みゆっきこと山中勇成(@toriimiyukki)です。普段は、ABEMAで動画配信基盤の開発運用を担当しています。 直近では、配信システムの大規模刷新プロジェクトなどを担当しており、こちらの模様はCA BASE NEXTの発表からアーカイブを閲覧可能です。 ABEMAでは、24時間365日のリニア型配信やVOD配信など、昼夜を問わず落とすことができないミッションクリティカルなサービスを運用しています。サービスを支えるマイクロサービスは、配信分野に限っても20サービスを超えています。 既にPrometheusなど、各種モニタリングソリューションでの監視やアラーティングなども行っていますが、この記事では、あえて手動監視を定期的に行う、モニタリング定例を勧めたいと思います。 な
重いサイトを軽くしろ！年末年始は #WebSpeedHackathon 2021 に挑戦しよう | CyberAgent Developers Blog
ABEMA で Web フロントデベロッパーとして活動している 宮代 @3846masa です。CyberAgent Advent Calendar 2021 4 日目は、Web パフォーマンス改善のコンテストについてお話します。 TL;DR Web パフォーマンス改善コンテスト “Web Speed Hackathon 2021 mini” を開催します！ 改善する対象は https://web-speed-hackathon-2021.herokuapp.com/ です オンライン開催で、12 月 4 日から 1 月 3 日までの 1 ヶ月間、好きなときに誰でも参加できます 記事の後半は、課題となる「重たい短文投稿サイト」を作るまでの開催記です はじめに CyberAgent では、Web パフォーマンス改善を競うコンテスト “Web Speed Hackathon 2020” を昨年
CLライブキャスト配信におけるリアルタイム字幕機能の紹介 | CyberAgent Developers Blog
はじめまして！CLでiOS開発している劉と申します。 今回はCLライブキャス配信におけるリアルタイム字幕機能を紹介したいと思います。 目次 リアルタイム字幕とは？ リアルタイム字幕の仕組み リアルタイム音声認識 音声認識結果から各言語へ翻訳 字幕を視聴動画へ同期 最後に リアルタイム字幕とは？ リアルタイム字幕とは、CLライブキャスト配信者の音声をリアルタイムで認識・変換し、自動で他言語字幕を表示するというものです。 ユーザーはライブキャスト配信内の字幕言語選択ボタンから言語を選択することで、配信者の言葉がリアルタイムに字幕変換された状態で視聴することができます。 本機能は、日本語、英語、中国語(簡体字、繁体字)、韓国語、タイ語、インドネシア語の7言語が対応され、エンタテインメントコンテンツ配信プラットフォームでは国内初の機能となります。 リアルタイム字幕の仕組み CLのライブキャスト配信
ABEMA Web で Polyfill のコードをモダンブラウザ向けに 99% 削減した話 | CyberAgent Developers Blog
これらを踏まえて polyfill-library を使って Polyfill の出し分けをすることが最適解だと確信しました。 Polyfill の出し分けの実装方法 最初に実装したコードの全体像を見せると次の通りになります。それぞれの変数や関数についての説明は後ほどおこないます。 import crypto from "crypto"; import { Response, Request } from "express"; import { getPolyfillString } from "polyfill-library"; import polyfillLibraryPackageJson from "polyfill-library/package.json"; const FEATURES_OPTION = { flags: ["gated"] }; const FEATUR
Aurora MySQL のバックアップは本当にそれでいいのだろうか？ | CyberAgent Developers Blog
技術本部 サービスリライアビリティグループ（SRG）の長谷川 @rarirureluis です。 #SRG（Service Reliability Group）は、主に弊社メディアサービスのインフラ周りを横断的にサポートしており、既存サービスの改善や新規立ち上げ、OSS貢献などを行っているグループです。 また Amazon Aurora MySQL（以下：Aurora MySQL）の話です。何でこんなに Aurora MySQL に関する記事ばっか書いてるのか僕も分かりません。 前回の Aurora MySQL のアップグレード方法のベストプラクティスはこちらです。 RDS Graviton2 に少ないリスクで切り替える方法を考えてみる【アップグレード編】 | CyberAgent Developers Blog 今回はバックアップについてです。 そのクラスター、間違ったクエリ流したときに
「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog
こんにちは，テレビ＆ビデオエンターテインメント「ABEMA」で Web エンジニアをしている野口 (@nodaguti) です．今回は，ABEMA の開発組織で行われている「改善week」という制度を使って esbuild というバンドラーを ABEMA Web に導入し，開発ビルドのバンドル処理を最大 69 倍高速化した話をご紹介します． 改善weekとは ABEMA では事業の成長に合わせて機能開発も活発に行われています．そのため，今でもスプリントごとに新しい機能の追加や既存機能の改善など数多くの施策がリリースされています． 各事業施策は目標としている KPI の達成を目的として設計されています．それゆえに KPI と直接関連しにくい部分のデザイン改善やリファクタリング，開発体験 (DX) 向上などは施策の合間に行う形になりがちでした．また，アニメーションの見直しやアプリの Debug
KubernetesベースのCI/CDシステムProwに入門してみた | CyberAgent Developers Blog
こんにちは、技術本部 OpenSaaS Studioでサーバサイドエンジニアをしている安里です。2019年5月に開催された社内勉強会のレポートをお届けします。 技術本部ではエンジニアの技術向上を目的として定期的に勉強会を開催しており、 今回は同じくOpenSaaS Studioのメンバーである安井さん(@gkuga)に講師をお願いし、ProwというKubernetesベースのCI/CDシステムの勉強会を行いました。 勉強会の様子 Prowについて 勉強会の前半では、こちらの資料をもとにProwの成り立ちや機能、仕組みが説明されました。 KubernetesのCI/CDは元々Jenkinsで行なっていましたが、以下のような運用上の課題を抱えており、これらを解決するためにProwが開発されたとのことです。 Jenkinsのバージョンを上げる際に全ノードを停止する必要がある Githubと連携す
アメブロ2019: こえのブログでのPWA | CyberAgent Developers Blog
こえのブログは「声で書くブログ、声で聴くブログ、声で観るブログ」をコンセプトに書き手、読み手双方にバージョンアップしたブログを提供するアメブロの新機能です。 投稿者は端末に向かって喋るだけで、その音声が活字化されブログとして公開できます。閲覧者は活字化された文字を通常のブログと同じように読めるほか、音声を聴きながらでもコンテンツ消費できます。 モバイル端末、テレビ端末やスマートスピーカーなどの普及により、今後ますます増えると予想される利用形態に対して、それぞれに適した形でコンテンツを提供できるように挑戦しています。 この記事では、技術的な側面を中心にこえのブログを紹介します。 こえのブログは、文字でも音声でもコンテンツ消費できるのが特徴です。読者の方へのメッセージや質問に回答など利用法は様々です。龍玄としさんやクロちゃんさんなど著名人の方の声も聴けます。 できる限りサーバーにアクセスしない
Well-Architectedな組織を実現するためのチャレンジ
この記事は、CyberAgent Developers Advent Calendar 2018 13日目の記事です。 はじめまして、技術本部サービスリライアビリティグループ（以下、SRG）の柘植（@shotaTsuge）・岡田（@rm_rf_slant）です。 今回は、我々が組織という観点で行なっている活動について紹介したいと思います。 SRGとは はじめに私達の組織についてお話しします。 私達が所属している技術本部のSRGは、メディア管轄（AbemaTV 関連事業以外）と呼ばれる主に、Amebaサービス（アメーバブログやアメーバピグなど）や子会社が提供しているAWAやタップル誕生、技術本部が運用しているアメーバの基盤サービスや秋葉原ラボなどのインフラ周りを横断的にサポートする部署です。 SRG が普段行なっている業務としては、新規サービス立ち上げのインフラ周りのサポートや、既存サービス
Optimized Server-Side Web Application In 2018 | CyberAgent Developers Blog
こんにちは、フロントエンドエンジニアの原(@herablog)です。今日はアメーバニュースモバイル版(モバイル端末でご覧ください)のリニューアルをご紹介したいと思います。 労力と効果 Webがサービスとして利用されるようになってから、長い月日を経てさまざまな構成パターンやライブラリ・フレームワークが生み出されました。今では作りたいものはなんでも作れるといっても過言ではないでしょう(いや、やっぱり大げさかもしれません)。そんな中で我々は労力に対して効果がより得られるポイントを探り出す必要があります。今回のアメーバニュースモバイル版のリニューアルでは、そのような考えから始めてみました。 エンジニアを褒めるネコ、いつもありがたく使わせていただいております。 サイトの前提条件 どのような構成のWebサイトにするかを選択する上では、前提条件を確認・定義することが大切です。それによって選択される結果は
エンジニア自身が1年間技術広報を兼任して達成したアウトプットと感じたメリット | CyberAgent Developers Blog
はじめに CyberAgent Developers Blog では4回目の記事となる吉田慶章 ( @kakakakakku ) です．最近，社名変更をした「株式会社マクアケ」でインフラ／サーバサイド／スクラムマスターなどを担当しつつ，今回のメインテーマでもある「技術広報」を兼任しています．ところで，皆さんのサービスには「技術広報」を担当するメンバーはいますか？ 技術広報とは？ 最近「技術広報」を担当している人が増えてきているように感じますが，業務として明確な定義はなく，各社それぞれに独自の役割があると思います．例えば以下のような活動が挙げられると思いますが，広義で言えば「サービスをもっと知ってもらうための技術的なマーケティング活動」と言えるのではないでしょうか． 記事執筆 イベント登壇 イベント開催 採用活動 エバンジェリスト活動 などなど この中でも，私の技術広報としてのミッションは主
FRESH! における Web プッシュ通知機能 〜実装編〜 | CyberAgent Developers Blog
はじめまして。FRESH! でフロントエンドの開発をしている池田 (こりら) です。 この記事では、Web Push の実装概要や FRESH! における Web プッシュ通知機能 〜機能設計編〜 をもとに、実際に FRESH! でどのように Web Push 通知機能を実装したのかを紹介します。 アジェンダ Web Push の実装概要 Web Notifications API Web Push API Firebase Cloud Messaging (FCM) Service Worker push イベント notificationclick イベント FRESH! における Web プッシュ通知の実装 FCM に関連する処理をユーティリティ化 通知に関する実装 チュートリアルの実装 チャンネルページ・登録情報の管理ページの実装 各ブラウザの個別対応 Chrome (59) Fi
WebパフォーマンスとプロダクトKPIの相関を可視化する話 | CyberAgent Developers Blog
技術本部 Web Initiative Center で Web プロダクトの品質改善や組織の技術推進に取り組んでいます、 @1000ch です。その活動のひとつに、直帰率や PV/Session といったプロダクトの KPI を上げることを目的とした Web パフォーマンスの向上があるので、今日はその取り組みについて書きます。 旧来の Web パフォーマンスの評価指標 これまでは DOMContentLoaded イベントや load イベントの値が Web ページのパフォーマンスの良し悪しとして扱われることが多かったと思います。しかしアーキテクチャの複雑化の一途をたどる Web ページのパフォーマンスを測る上では、もはや適切な指標とは言えません。 DOM 構築完了を指す DOMContentLoaded イベント DOMContentLoaded は DOM ツリーの構築完了を表します
AbemaTVのシークプレビューへのこだわり | CyberAgent Developers Blog
こんにちは。AbemaTVのUIデザイナーのリーダーをしている松本です。 みなさん、PCやスマホで動画をみることはもう当たり前の時代ですよね。 しかし、「動画プレイヤー」というものは奥が深すぎて未だに「普遍的なUI」が見つかりません。(あったら教えてください) YouTube・Netflix・Hulu・ニコニコなどの動画サービスのプレイヤー、パソコンやスマホなど各デバイスの標準プレイヤー、テレビやゲーム機などの動画プレイヤーなど、数多くのプレイヤーがこの世に存在していますが、全てが人間のごとく個性豊かな表情を見せています。 今回はAbemaTVのiOS・Androidアプリのプレイヤーの「シークプレビュー」について。 ようやくAbemaTVの各デバイスでプレイヤーの「シークプレビュー」機能が実装されました。(Webは一足先にリリースしていました) そのUIのこだわりをつらつらと述べます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Androidをコマンド操作する技術への学び | CyberAgent Developers Blog
