はてなブックマーク

アプリ版デザインシステム実装をOSS化しました こんにちは、ああうえ(@_kwzr_)です。新規事業部とデザインシステム部を兼務しており、アプリ版デザインシステムの実装を進めています。 Web版に引き続いて、アプリ版のデザインシステム(charcoal-ios, charcoal-android)をOSS化しました。 github.com github.com inside.pixiv.blog Web版との同期 アイコン・色・定数などが複数のリポジトリに定義されてしまっていると、更新が困難になってしまいます。 charcoal-iosとcharcoal-androidでは、CIで定期的にWeb版の定数の定義を用いて、自動的に更新を行なっています。Web版の定数はJSONで定義されており、iOS版ではQuickTypeを用いてSwiftの型に変換しています。Android版でも同様にKot

こんにちは、うさみ(@tadsan)です。標記の通り、ピクシブ株式会社はThe PHP Foundation(@ThePHPF)への継続的な財政支援を開始しました。 opencollective.com 支援額は月間1000ドル、年間で12000ドルになる計画です。 PHPは言わずと知れたオープンソースのプログラミング言語処理系であり、誰もが無料で自由に利用できます。そのため、多くの個人ホームページ、ウェブサイト、百科事典、ゲームのAPIサーバー、広告システム、大規模な業務システムに至るまで世界中の多くのプログラムがPHPで稼動しています。 西暦2000年前後においてはLinux, Apache (HTTP Server), MySQL, P* (Perl, PHP, PythonなどPから始まるプログラミング言語)による構成はLAMPスタックと呼ばれ、無料のソフトウェアの組み合せによって

こんにちは、インフラ部の id:sue445 です。 GitLabのGCP移行3部作の最後になります。 前回までの記事はこちらになります。余談ですが前編・中編・後編で合計約4万字になりました。 inside.pixiv.blog inside.pixiv.blog 今回の目次 今回の目次 やったこと5: 移行時の作業の洗い出し やったこと6: 直前の作業を実施 GitLabをcloneするサーバに対してssh configを配置 やったこと7: 実際の移行作業 やったこと8: 移行後の対応 主要サービスで実際にGitLabをcloneしてデプロイできるかを確認（残り） 社内ドキュメントなどで旧URLになってるものを新URLに変更 移行直後のトラブル対応事件簿 OneLoginのロール付与漏れ 移行して3日後に急にデプロイサーバでcloneできなくなった 対応内容1: 踏み台サーバが詰まって

こんにちは、インフラ部の id:sue445 です。 前回に引き続きGitLabのGCP移行について紹介します。 前編の記事はこちらになります inside.pixiv.blog 今回の目次 今回の目次 やったこと2: 実際にGCPに構築した GitLab構築に関係するリポジトリの構成 gcp-gitlab-terraform gcp-gitlab-playbook gcp-gitlab-helm 備考 全体の構成図 webservice (GitLab本体) GitLab CI 3rd party製のDockerイメージから公式のDockerイメージに移行した Docker Swarmは継続利用 GitLabを複数ゾーンで動かすための準備だけした やりたかった構成 現在の構成 Cloud IAPとTunneling SSH Connectionsを利用したgitアクセス Tunnelin

こんにちは、インフラ部の id:sue445 です。 先日ピクシブ社内で利用しているGitLabをオンプレミス環境からGCPに移行しました。 とても長いので全3回にわけて紹介したいと思います。 全体の構成 前編：前置きとアーキテクチャ検討 中編：環境構築 後編：実際の移行作業とその前後の対応。移行後の所感など 今回の目次 全体の構成 今回の目次 tl;dr; 移行の理由 筆者略歴 GitLab移行の時系列 やったこと1: アーキテクチャ検討 構成図 GitLabをクラウドに移行するための障壁をまとめた URLをどうするか Cloud IAP利用時の通信のオーバーヘッドをなくしたい 実際にGCP移行した後の構成 AWSでPoC環境を作った時の構成 LDAPからの依存をやめたい＆複数のログイン方法を統一したい ssh接続時にあるLDAP依存を不要にしたい 余談 AWS移行案 GCP移行案 Gi

こんにちは、ピクシブで新規事業部に所属しています、ああうえ(@_kwzr_)と申します。所属している部署では2019年ごろからスクラム開発を導入しており、スクラムマスターをやっていた時期もあります。 今回は、バックログをClickUpからNotionに移行した理由や、Notionのでスクラム開発に適したバックログの作り方を紹介します。 今回の記事はカタカナがよく出てきます。苦手な方は逃げてください。 バックログをNotionにした理由 TL;DR Notionは同期性が良い！ 今までのバックログ運用がNotionでもできそうだった 投票機能もNotionの機能を組み合わせればできた 今までの開発ではフロー情報の管理にesa、ストック情報の管理にNotion、タスク管理にClickUp、ホワイトボードツールにFigJamを利用しており、スクラム関連のイベントだけでも4つのツールを使う必要があ

こんにちは。ピクシブで新規事業部に所属しています、ああうえ(@_kwzr_)と申します。 最近、自分の所属する部署で飼っている便利botをSlack Platformで作り直したので、その紹介をしようと思います。 Slack Platformとは、Slack上にアプリケーションをホスティングできるサービスです。 最近オープンβ版が公開されて、Slackの有料プランを使っているユーザーであれば使えるようになりました。 便利bot「pastel」の紹介 便利botはpastelと名付けられていて、 @pastel 共有 内容 のようにbotに対してメンションを送るとその内容をNotionに記録してくれて、後からMTGのときに振り返ることができたり、 ※こんな感じでNotionに反映されます。各共有内容にスプリントへのrelationが付いてくれるので、勝手にそのスプリントの共有内容としてまとめ

アドプラットフォーム事業部テックリードのsakiです。 先日のRubyKaigi 2022にピクシブのエンジニアは9名が参加し、私も多くのセッションを聞きました。 どれも興味深かったのですが、今回は特に型情報の話に注目しました。業務ではRubyと並んでGoを使うことも多く、Rubyの型情報は今後の技術選択にも強く関わってくるのではと考えています。 型情報に関するセッション 私が見た中で型情報に関わるセッションは下記のものでした。 RBS generation framework using Rack architecture (ksss) Let's collect type info during Ruby running and automatically generate an RBS file! (osyo) Adding Type Signatures into Ruby Doc

pixiv事業本部の丸山（@alitaso）です。 RubyKaigi 2022 にピクシブからは8名がオフライン参加、1名がオンライン参加をしました。 どの発表も非常にエキサイティングで、特に WASM や YJIT のキーノートは非常に高度な内容でした。Ruby を前に進めるために多くの方が知恵と腕を振るっている姿を間近で見ることができてより Ruby を好きになり、自身もコミュニティのために活動していきたいと思えるようになりました。 弊社からは配信技術部のマネージャーでありコアコミッターの中村（@unak）が Ruby Committers vs The World に登壇し、 Ruby 2.X 系の終了宣言をしていました。備えていきましょう。 Ruby Music Mixin 2022 RubyKaigi 2022 の最終日夜、弊社主催の音楽中心懇親会 Ruby Music Mix

こんにちは、CTOのharukasanです。CTO以外にImageFluxのプロダクトオーナーもやっています。 ピクシブは三重県津市で開催されたRubyKaigi 2022にMusic Lounge Sponsorとして参加しました。 Ruby Music Mixin ピクシブでは最終日2022/09/10 (土)にRuby Music Mixinというラウンジを提供させて頂きました。Ruby Music Mixinについては別にalitasoが記事を書いてくれたのでそちらをご参照ください。 inside.pixiv.blog Ruby Music Mixinのトリをつとめる弊社若手の様子 RubyKaigi 2022は感染症対策のため三重県津市の会場とオンラインのハイブリッドで開催されました。これにあわせ、Ruby Music Mixinも物理ラウンジに加え、オンラインラウンジとして配信

はじめまして。 機械学習チームにてレコメンドの改善を行っているgumigumi4fです。 本記事では、機械学習チームの取り組みの一環として機械学習等のバッチを含むバッチ実行環境を整備した話について話したいと思います。 今までのバッチ実行環境 機械学習チームではピクシブ会社全体のサービスにおけるアイテムのレコメンド等を主に取り組んでおり、そのロジックは多岐に渡ります。 matrix factorizationを用いた手法 item間共起頻度に基づくシンプルなアイテムの推薦手法 ニューラルネットを用いた手法 これらの計算を行うためのバッチは実装者の好きな手法で実装されており、バッチを行う環境に関しても下記にようにバラバラになっていました。 オンプレの機械学習用マシンに各ユーザー毎に設定したcronでバッチが実行 gitlab-ciのスケジューリングによってバッチが実行 BigQueryで完結す

こんにちは、新規事業部のあやぬん(@ayatk_ch)です。 前回、ピクシブは RubyKaigi 2022 に Music Lounge スポンサーとして協賛しますというタイトルでイベントの告知をさせていただきました。 inside.pixiv.blog 今回は一般の参加者の募集を開始いたします！ イベント概要 時間：2022年9月10日 18:00 〜 23:30 場所：三重県津市大門18-7 Cafe＆Live Bar Bran 小規模ではありますが RubyKaigi 参加者同士の懇親会場をご用意いたします。心地よい音楽に身をゆだねながらいっしょに楽しいひとときを過ごしましょう。 当日はライブストリーミングの予定もありますので、オンライン参加の方も現地の様子を見ながら楽しんでいただければと思います(URLは後日RubyKaigi参加者を対象に公開いたします)。 出演者一覧 kiri

はじめましての方ははじめまして。ピクシブで Scala エンジニアをしている Javakky です。 今回は、弊チームで行なっているエンジニアの意思決定・相談会の取り組みについて紹介していこうと思います。 実装・設計・方針討論会 今年の2月からチーム内ではじめた取り組みとして、エンジニア全体への共有事項や意思決定を行う討論会を週1で行なっています。 この会でよく話されるトピックとしては、 開発体験向上のためのツール導入 プロダクトの設計方針・コーディング規約の提案 特定エラーに対する対応方針 などがあります。 実際に、僕がこれまで記事化したツール導入プロジェクトのいくつかは、ここで提案されたものになります！ inside.pixiv.blog inside.pixiv.blog inside.pixiv.blog 討論会をはじめたばかりの頃は「きっと4~5週もすれば話題がなくなっていくだろ

pixivではNext.jsを用いたフロントエンドのリプレイスプロジェクトを2022年3月末より行っており、現時点(2022年8月)でリクエスト機能をNext.jsにてリプレイスしました。 今回のpixiv insideではピクシブ株式会社で働くエンジニアの取り組みとして、pixivのフロントエンドをNext.jsでリプレイスする取り組みについて実際に取り組んだメンバーからご紹介します。 まずは皆さんの自己紹介をお願いします namazu: pixivのウェブ領域に関するテックリードを担当しているnamazuです。今回のNext.js化プロジェクトではPjMやNext.jsのホスティング回りの実装を担当しています。 shu: 2022年3月に入社したshuです。Next.js化ではフロントエンドの設計、実装を担当しています。 mog: エンジニアとしてアルバイトをしているmogです。Nex

はじめましての方ははじめまして。ピクシブで Scala エンジニアをしている Javakky です。 今回は、僕がピクシブ株式会社で働く中で、 OSS と関わるようになったきっかけについて話したいと思います。 入社 と OSS 私は、2020年の 5月に内定者アルバイトとしてピクシブ株式会社へ入社後、1年ほど ピクシブ百科事典 の開発に関わっていました。 ピクシブ百科事典は 2009年から運営されている息が長いサービスで、レガシーな部分も多かったこともあり、ちょうどテストなどの改修が盛んに行われている時期でした。 そんな中、僕にとっての転機が訪れます。 百科事典のMySQLに依存した実装コードへのテスト追加にあたり、メンターの tadsan から提案されたのが、https://github.com/vimeo/php-mysql-engineでした。このライブラリは、当時まだリリースされて

はじめましての方ははじめまして。ピクシブで Scala エンジニアとして働いている Javakky です。 突然ですが、ピクシブのエンジニア職組織で行っている「プロセス評価」とはご存知でしょうか？ 現在では少し異なりますが、過去の活動についての記事はこちら ↓↓↓ inside.pixiv.blog ピクシブのエンジニア職組織、「エンジニアギルド」では全エンジニアがチームの垣根を越えて開発や意思決定のプロセスを交換しあう「ギルド 1on1 面談」というものがあります。 この面談は毎月の初週ごろに、所属している全エンジニアによって行われます。 内容としては、前月に行ったプロジェクトのうち、特に意思決定のプロセスに関与したものなどについて背景・課題・取り組み・理由・内容などをまとめた資料を用意し、それぞれ 30分程度で紹介するというものです。 発表が終わったらお互いにフィードバックを行い、それ

pixiv SketchのWeb版はReact + FluxibleでSSRを実現していました。 今回、FluxibleというライブラリをRedux Toolkit + Next.jsでリプレースした話をさせていただこうと思います。 このリプレースで狙った効果は、クライアントサイドのパフォーマンス向上と、開発容易性・メンテナンス性の向上の2つです。 背景 Next.js化前、つまりFluxibleの時点での状態として以下のものがありました。 Fluxibleの開発が止まってしまっている・Fluxibleの知見が少ない 致命的なバグや脆弱性があったときに対応できない FluxibleはReact 15.x までしか対応しておらず、16以上はサポート対象外 Storybookのstoryにできるコンポーネントと、できないコンポーネントにわかれてしまう コンポーネントにFluxible由来のアク

どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite

@verno3632です。 普段はpixiv Androidアプリの開発を担当したり、Androidアプリ分野テックリードとして、弊社の提供するAndroidアプリの品質や開発速度の向上を目指しています。 また、新卒エンジニアのメンターの統括も行っており、新卒エンジニアが成長を続けられるようなしくみを考えています。最近では来たるAndroid 13の対応について、特に通知権限周りを進めたり、UGCポリシーとにらめっこしています。 Android会の発足 もともとはアプリMTGとして、外部のアドバイザーを交えてアプリ開発に関わるメンバーが集ってプロジェクト横断で共有・相談する場でした。その後OS毎に別れ、Androidアプリに関して取り扱うものとして開催されています。 隔週のAndroid会 Android会はAndroidアプリエンジニアが隔週で集まる会で、以下を毎回確認しています。 お知

みなさんこんにちは @FromAtom です。普段はpixiv SketchのiOSアプリを開発をしたり、iOSアプリ分野テックリードとして、弊社の提供するiOSアプリの品質向上や開発速度向上を目指しています。少し前までは、モバイルアプリ分野全般のテックリードをしていたのでGoogle Playに追加された Data Safety Sectionの対応に奔走したりしていました。 弊社では4つのiOSアプリを開発しているのですが、それぞれアプリの性質やユーザー層も異なっています。また、弊社は技術領域ではなくプロダクト・サービス毎にチームを分割しているため、各アプリを担当するエンジニアの悩みや知見がチーム内に閉じやすいという課題がありました。 そんな課題を解決するために生まれた『🍎の会』についてご紹介します。 🍎の会の発足 🍎の会は元々『アプリMTG』という名前の会議体で始まりました。自