サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
inside.pixiv.blog
おはようございます、ImageFlux開発責任者のharukasanです。3日前の4月14日、ピクシブではPawooが急にリリースされることになりまして、ここ数日はずっとPawooサーバにログインしていました。このPawooサーバ、既にピクシブの監視体制に入っており、アラート受信後インフラエンジニアが障害対応できる仕組みを整えています。案の定、リリース直後の15、16日は週末にもかかわらずアラートを受け取ることになり、サーバにはりつくことになったわけです。どんなシステムであろうとアラートを受け取ったら対応する、それが我らインフラエンジニアです。 pawoo.netの構成 さて、それではまずPawooの構成を見ていきましょう。digすればわかりますがpawoo.netはAWS上に構成されています。数百台以上の物理サーバを常時運用しているピクシブであっても、さすがにこんなにはやく物理サーバは用
はじめまして。ピクシブで広告関連のプロダクトを開発しているeastです。今回は、社内で運用している広告配信サーバーの負荷テストを実施したので、その話をしたいと思います。 経緯 ピクシブの広告配信サーバーは、pixiv本体を中心に複数のサービスに対して広告配信を行なっています。現在私はこの広告配信サーバーの大規模改修を行なっているのですが、先日ついに広告配信サーバーの改修がほぼ完了したので、試しに負荷試験を行なってみたいと思い立ちました。 目標は毎秒1万リクエスト ピクシブの広告配信サーバーへのリクエスト数はDailyで 4〜6億req もあり、これは毎秒平均に直すと約 5,000RPS(Request Per Second) になります。さらに、ピークタイムである休日の深夜帯には 12,000RPS にも達します。つまり新しい広告配信サーバーにも、毎秒12,000のリクエストを捌く性能が必
10/22(金) 追記 この記事で解説している内容について解説する勉強会を開催することとなりました。以下のconnpassよりお申し込みください。 pixiv.connpass.com 10/22(金) 追記 pixivのブックマークについて ブックマークDBの問題について 具体的な対策内容 論理削除廃止・index追加・ブックマークタグのテーブル分割 適応ハッシュインデックスの無効化 アプリケーションコードのリファクタリング・全発行クエリの列挙と見直し 大きな更新処理の非同期化 結果 あわせてよみたい pixivではサービスの成長に伴い、気に入った作品に対して付けることができるブックマークの総数が急速に増加しており、ユーザーの皆様に滞りなくサービスを提供し続けるためブックマークに関するデータベース(以後DB)の負荷対策が必要になりました。 2021年2月より対策を行うプロジェクトを発足し
ピクシブで働く人の姿や、どんな技術を使ってプロダクトを生み出しているのかがみえる。そんなイベント「pixiv Night #02」が、2017年3月14日に代々木のピクシブオフィスにて開催されました。 テーマは「画像処理」ということで、イラスト1枚からグッズを作成できるサービス「pixivFACTORY」の開発チームに所属するhayaが、同サービスの画像処理システムについて、具体的な実装方法を語りました。その内容をお届けします。 買う前に実物を目にしたような体験をさせたい 物を買う時、実物をみたいと思いませんか? たとえば、オリジナルマグカップを作りたいと考えた場合、イラストを描いて画像ファイルを入稿すれば、イラスト入りマグカップは製造できます。しかし、お金を払って手に入れるものなのですから、どういう見た目になるのかを事前に確認できないと不安になりますよね。 では、イラストが入った状態のグ
ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。主にpixivの技術的な改善をしていますが、広告チームも兼任しているので広告周りの開発もしています。 今回pixivの常時HTTPS化を担当したのでやったことを紹介します。 pixivをHTTPS化した理由 現在のインターネット全体の流れとして常時HTTPS化が進んでいます。エドワード・スノーデン - Wikipediaが暴露したNSAの事件発覚や 公衆無線LANの利用拡大により、通信経路上でユーザーの個人情報を保護することがインターネット全体として非常に重要になってきました。Googleが行っている調査によると、HTTPSページの閲覧時間はウェブ全体の利用時間の3分の2にも及びます。 それだけではありません。ブラウザに新しく追加されるAPIや機能(HTTP2/WebRTC/ServiceWorkerなど)はHTT
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
みなさんはじめまして。初めてじゃない方はお久しぶりです。ピクシブでAndroidアプリエンジニアをしておりますconsommeです。 ピクシブでは基本的に年一回、社員同士の交流を深めるという目的のもと、社員研修を開催しています。2018年は2泊3日の沖縄研修が計画されました。そのなかで研修運営チームから「社員研修で使うアプリを作れないか?」という相談を受けました。 研修中は基本的にチーム行動になるので、自分のチーム以外の人が何をしているかがわかりづらい。それなら各自で研修中に撮った写真を共有して、みんなで楽しめれば社員同士の交流につながるのではないか、そのためのアプリが欲しい、とのこと。 そう言われるとアプリエンジニアとしては作らないという選択肢はありません。ぜひやりましょう、ということで、社員研修を盛り上げるためのアプリを開発することになりました。 システム構成 アプリ側 アプリはFlu
はじめまして、2018年7月入社の sue445です。自称「フルスタックキュアエンジニア」です。最近はpixiv PAYのチームでRailsを書いたり社内gemを作ったりしています。 好きなプリキュアはキュアピースです。 前置き 先日Rails 5.2.1がリリースされました https://weblog.rubyonrails.org/2018/8/7/Rails-5-2-1-has-been-released/ pixiv PAYでもその対応を行っていて、先日本番環境にRails 5.2.1を投入しました 💪 ググると特定のバージョンでのアップデート方法はいろいろ見つかるのですが、どのバージョンでも使える汎用的な方法が意外になかったので紹介しようと思います。 Rails 4.1系以降はだいたいこの方法でアップデートしてきたのでそれなりに実績のある手法だと思います。 筆者スペック 初め
CTO兼福岡オフィス立ち上げ担当として新アプリを作っている@edvakfです。 JSON APIを開発しているとこういう問題がありがちですよね。 仕様どおりにAPIの形式を作ったはずだけどなんか自信が持てない テストでいくつかのキーが存在するかの簡単なチェックはしてるつもりだけど、全部チェックするのは大変すぎる APIのControllerやViewをリファクタリングしたらレスポンスの形が変わってアプリがめっちゃクラッシュし始めた というのが怖くて誰もリファクタリングできなくなった APIドキュメントがメンテされない 知らない間にレスポンスのフィールドが増えてたけどドキュメントに書いてない これらを解決したい!と思って試行錯誤したら、スマートに解決することができました。この記事ではRailsのことについて書きますが、考え方は他の言語・フレームワークでも同じです。 なお、今回使ったgemのバ
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
CTOのharukasanです。 pixivをはじめとするピクシブが運営している各サービスにおいて、ユーザーの投稿した作品を不当な目的を持って取得する行為から守ることは、プラットフォームとして重要な責務のひとつであるとピクシブは考えています。これまでもピクシブでは、作品が不当な目的で大量に取得されないよう機械的なクローリングを検知し、ブロックするために様々な手段を講じてきました。この記事では、現在行っている対策と、今後実施していくために現時点で取り組んでいる施策についてご説明します。 English version is available here これまでに実施している不当な目的での作品大量取得への対策について ピクシブでは不当な目的で作品を大量取得されることを防止するため、基本的な対策に加え、様々なソリューションを導入しています。ここでは特徴的な技術についていくつかの例を紹介します。
図1: 脆弱なパスワードを入力した場合のエラー画面 こんにちは、pixiv開発支援チームのmipsparcです。 パスワード、もしかして使いまわしていますか? 複数のサービスで同じパスワードを利用していると、「パスワードリスト型攻撃」によって不正アクセスの被害を受けてしまうかもしれません。 パスワードリスト型攻撃の被害にあわないためには、ブラウザやパスワード管理ツールで自動生成された安全なパスワードを利用するのが好ましいです。 しかし、実際には多くの人が「使いまわしたパスワード」や「簡単なパスワード」(以下、脆弱なパスワード)を利用していますし、啓蒙活動にも限界があります。 pixivではサイバー攻撃への対策を複数とっていますが、根本的な対策のひとつとして、脆弱なパスワードを新しく設定できないようにしました。 脆弱なパスワードの判定方法 脆弱なパスワードの利用はどのように防ぐことができるで
こんにちは、インフラ部の id:sue445 です。私事ですが先日GCPの Professional Cloud Architect を取得しました。 そういうわけで今日はGCPではなくAWSの話をします。 tl;dr; 劇的ビフォーアフター 構成 移行のモチベーション パフォーマンス向上 コスト圧縮 アーキテクチャの採択理由 やったこと 1. DB作成 2. MySQL 5.7 -> 8.0 MySQL 8.0でハマったこと MySQL 8.0からデフォルトの認証がcaching_sha2_passwordになった RDSのMySQL 8.0からMariaDB 監査プラグインがなくなった 3. 本番用のDockerイメージを作成 困ったこと:CodeIgniterがログの標準出力に対応していなかった 4. ECS + Fargate + CodePipeline構築 5. CDN作成 6
こんにちは。Rubyコミッターのusaです。 なんかRuby の 最新 リリースと一緒に、脆弱性 情報 が いっぱい 公開 されましたね。うわー、なんかよくわかんないけど、やばそうですね!正味のところ、こいつら結局どれくらい危なそうなのか、それらの脆弱性の記事を書いた人がたまたまピクシブにいましたので、率直に本音を語っていこうと思います。 CVE-2017-17742: WEBrick における HTTP レスポンス偽装の脆弱性について うまく利用するのは難しいとは思いますが、使いようによっては利用者(WEBrickで作って公開したサイトを訪問した人)をひどいめにあわせることができるかもしれない脆弱性です。 でも、WEBrickで作ったサイトをプロダクションで公開してる人なんているわけないよねははは。 CVE-2018-8777: WEBrick における巨大リクエストにともなう DoS
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
ピクシブのメディア事業部で広告事業を担当しているdrillです。社内ではアドネットワーク・SSP等の配信広告の運用によるマネタイズを主な業務として行っています。 ウェブページにおけるコンテンツの表示や動作については、それぞれのブラウザの仕様に基づいて正常に働くように気を配るということがウェブ業界の常ですが、これはもちろん広告配信においても例外ではありません。意図したとおりに広告配信が行われていない環境があると、impやclick等の数値の正確性が担保されなくなったり、場合によっては収益的機会損失に繋がってしまうケースもあります。今回は広告配信に関わりそうないくつかの例を挙げつつ、ブラウザの動向に気を配ることの重要性についてお伝えできればと思います。 Better Ads Standards について まずはGoogle Chrome関連で最近騒がれがちな話から。ユーザーに不快感を与えるよう
こんにちは、VRoid部のkeshigomuです。 普段は主にVRoid Hubのフロントエンドエンジニアとして、3Dキャラクターを表示するビューワーの開発に携わっています。また@pixiv/three-vrmという、Web上で3Dモデルを使ったコンテンツを開発するためのOSSライブラリの運用も行っています。 今回、ブラウザで簡単に3Dキャラクターと会話できる技術デモ「ChatVRM」とそのコードをオープンソースで公開しました。 「ChatVRM」は、テキスト・口頭で話しかけた言葉にキャラクターがフルボイスで回答してくれる「キャラクターと会話できる」デモです。WEBブラウザ上で動作でき、3Dキャラクターのインポート・切り替え、キャラクターに併せて声を調整することもできます。 (2023/07/10追記) 読み上げ音声の生成に使用していたKoeiro APIの提供終了に伴い、以前のデモとコー
2020/12/25 編注:この記事は2018年当時のエピソードです。現在はこの方法では審査に通らなくなりました。 おばんです、給料日であることをいいことに、にじさんじくじに課金しまくったBOOTH iOSエンジニアの @danbo-tanaka です。 平素よりBOOTH iOSアプリをご贔屓いただき、ありがとうございます。 みなさんもうアプリをアップデートしていただけましたでしょうか? 8月16日(木)にリリースしたv2.12.0では、これまで要望の多かった有料ダウンロード商品の販売を実装しました!🎉 これまでiOSアプリにおいて、デジタルコンテンツの購入に対応したアプリは多くありませんでした。それはAppleが用意したアプリ内課金(通称Apple税。手数料として30%をAppleに支払う必要がある支払い方法)を通さなければ、基本的にデジタルコンテンツの取り扱いが許されなかったという
お初です。2017年10月入社の @kobaken です。iOSアプリ開発を生業にしております。 最近はすっかりスタァライトされてしまい、舞台創造科の一員になってしまいました。 普段は声優のことを考える傍ら、pixivやpixiv SketchのiOSアプリの開発をしています。 ところで、iOSアプリ開発をされている皆さんの中に、このような現象に頭を悩まされている方はいるでしょうか? なかなか終わらないビルド……侵食されるCPUリソース……固まるIDE…… わかります。自分も以前までは上記の症例に頭を悩まされ、【精神破壊(メンタルブレイク)】される寸前でした。 どうにかして作業効率を上げないと僕が病んじゃう!そうすると開発の手が止まって、新しい価値をユーザに届けられなくなっちゃう!私これからどうすればいいの〜〜〜!……そんなとき僕たちの目の前に現れたのが「iMac Pro」でした。 iMa
アプリエンジニア育成に取り組んでいます こんにちは、ピクシブで新規事業部に所属しています、ああうえ(@_kwzr_)と申します。普段のプロダクト開発に加えて、全社的なモバイルアプリ領域の開発体験の向上に取り組んでいます。 最近モバイルアプリの世界ではネイティブなフレームワーク以外の開発手段を採用するものが増えてきましたね。 また、ネイティブアプリ開発の進化によって、iOSではUIKitからSwiftUI、AndroidではAndroid ViewからJetpack Composeが採用されることが増えてきました。 モバイルアプリ領域の中で採用できる技術が増えてきたことで、最近は採用したいエンジニアと、世の中にいるエンジニアの技術的なミスマッチが起こりやすくなってきたと感じます。 ピクシブのアプリでは、ビューアーなどの閲覧体験が重要になってくるものが多かったり、ライブ配信・視聴機能や、ドロー
こんにちは。pixiv事業本部のUIUXチームでプロダクトマネージャーを担当しているdo7beです。ピクシブにエンジニアとして入社して5年弱ほどで、1年前からプロダクトマネージャーとして活動しています。 今回は僕が所属しているUIUXチームの歴史とフロントエンド技術のモダン化についてご紹介していきたいと思います。 UIUXチームとは UIUXチームとは、その名の通りUIに関する問題解決・改修・新機能開発を行うチームです。その他にも海外ユーザーに向けたSEO・ローカライズやフロントエンドエンジニアの教育を行っています。 UIUXチームでは意図・目的に合ったUIを目指すためデザイナーとエンジニアが密にやりとりしています。これは学生アルバイトエンジニアも同様で、新規機能をリリースするなどの大きな成果を挙げています。 イラストを魅力的に紹介! pixivでAMP Storiesを実装しました @s
※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何?」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ
ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。 前編ではpixivを常時HTTPS化する前にやった前準備として、広告、画像といったリソースをHTTPSに切り替える際の手順を紹介しました。 pixivを常時HTTPS化するまでの道のり(前編) - pixiv inside 後編では実際にpixivのアプリケーション自体を常時HTTPS化していく手順を紹介します。 従来のHTTPS配信 pixivはPHPアプリケーションを実行するアプリケーションサーバー(Apache/mod_php)の前段にnginxを配置する構成になっています。以前からセキュリティ的に重要なページはHTTPSで提供しており、nginxでHTTPS終端処理を行っていました。HTTPSで応答する場合はアプリケーションサーバーにX-HTTPSヘッダーを付けてプロクシーしています。 具体的には以下のよ
こんにちは、CTO兼福岡オフィスマネージャーの@edvakfです。最近はとあるC++のコードをRustに逐語訳しながらRustを勉強中です。 今回はピクシブで使っているデプロイ管理画面のpployをgo-pployにリプレースした話を書きます。 まずは結論から メンテナビリティの向上 を目指して社内システムをリプレースした 小規模であっても新規開発から得られる学びはとても大きい その気になれば式年遷宮できるシステム規模を心がけましょう そもそもpployとは? pployとは、「デプロイ管理画面」という類の小さなウェブアプリケーションです。 ピクシブで開発しているウェブアプリケーションのデプロイは基本的にはすべて 「デプロイ中」状態になる masterにpushする staging等にデプロイして確認する productionにデプロイする 問題無ければ「デプロイ中」状態を解く という手順
小芝敏明がピクシブの"開発本部長(VP of Engineering)"に就任。小芝敏明とはどんな人物なのか?これからピクシブをどのように変えるのか?その想いを聞いてみましょう。 この2年間、"開発文化を創る"というチャレンジをしてきた "古き良き時代から来ました。真面目なSE、真面目にSE" @bash0C7こと小芝です。どうぞ、よろしくお願いします。 ── 小芝さん、メディアでもブログでも、毎回その挨拶ですね。どういう由来が!? 自分の職業を一言で表現するなら「システムエンジニア」という言い方がフィットすると考えてます。広義のシステムを扱う仕事が自分の天職と思っていて、そのように名乗りも使っています。言い回しはソロアイドルの寺嶋由芙さんインスパイアです。 ── 仕事の活動だと、今のピクシブの広告配信プラットフォームを手掛けたり、RubyKaigiの運営に関わるなど、最前線のエンジニアと
こんにちは、pixivのリクエスト機能を開発するチーム(以下、リクエストチーム)でプロダクトマネージャーをしているgeta6です。 ピクシブでは、社内ドキュメンテーションツールとしてNotionを採用しています。Notionでうまいことドキュメンテーションが機能し、継続できるよう、使い方やルールを各メンバー・各チームみんなで考えています。 本日はそんなNotionで実際にやってみて得られた気づきや知見をシェアします。もし参考になることがあれば、取り入れたり取り入れなかったりしていただければ幸いです。 背景 リクエストチームは立ち上げ当初より一貫してフルリモート体制で働いています。お互いにそれほど顔馴染みのないメンバー同士でしたが、第1回目の緊急事態宣言が出る前後からこちら、ほぼ物理的に顔を合わせることなく仕事をしています。 基本的にメンバーはDiscordに常駐しており、朝会・定例・雑談・
2012年入社。ピクシブでインフラエンジニアとして活動している道井俊介。ニックネームは、はるかさん(@harukasan)。入社以来、彼は画像配信インフラに関わり続けています。 サービス開始当初はよく障害を起こしていたpixivの画像配信インフラも、対策を重ね、今では安定した配信を実現しています。2014年には、画像変換のためのGo製プロキシ「go-thumber」をオープンソースとして公開。メルカリの久保達彦氏と共著した技術評論社「nginx実践入門」などの執筆にも関わりました。現在は、さくらインターネットと提携し、メルカリなどで活用されている画像変換のクラウドサービス「ImageFlux」の開発リーダーとして活動しています。 まさに、画像変換の世界で最前線に立っているはるかさん。今回彼に、世界最大規模のイラスト画像配信インフラの中でやってきた取り組みを語っていただきながら、同技術の今と
「pixivコミック・ノベル」チームのエンジニアの pawa です。 pixivコミックはWebやアプリで漫画を試し読みできるサービスです。私が一番好きな pixivコミック作品は「温泉卓球☆コンパニオンズ!」です。 2017年7月4日、pixivコミック(Web版)の作品ページにタグ機能が追加されました。 これらのタグは、作品説明文から自動的に抽出されたもので、コンピュータに計算させた「作品のキーワードとして妥当な順番」に並んでいます。 今回は、このタグ機能が生まれるまでの物語をご紹介します。 問題提起 pixivコミックに携わる者として、以前から、次の2点を問題だと感じていました。 特定のジャンル(たとえばスポーツ)の漫画を探すのが難しい 「あわせて読みたい」作品がなぜ「あわせて読みたい」のか分かりにくい 私は、社会人になってから、大好きなスポーツが共通する人とスポーツをすることの果て
次のページ
このページを最初にブックマークしてみませんか?
『pixiv inside』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く