こんにちは、インフラ部の id:sue445 です。 今回はRendertronをGKEとCloud Runの両方で構築した話をしたいと思います。 tl;dr; 前置き 今までのRendertronの問題点 GKE版Rendertronについて GKEの採用理由について GKE版Rendertronの構成 全体 GKE内部 pod内部 Kubernetesの設定と解説 rendertron-deployment.yaml rendertron-hpa.yaml rendertron-ingress.yaml rendertron-service.yaml Tips nodeのストレージサイズをケチり過ぎたらpodが起動できなくなった N1マシンタイプのnodeとN2マシンタイプのnodeを比較した結果、N2マシンタイプが安くなった Cloud Run版Rendertronについて Clou

こんにちは、型と複雑GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も可能ですので是非ご利用ください。 https://factory.pixiv.net/item_groups/new 今回は、このテキスト入力機能のフロントエンド実装、 特に React と SVG でいかに文字レイヤーを表現するかについてご紹介したいと思います。 SVG にとって文字レイヤーとは何

はじめまして。ピクシブで広告関連のプロダクトを開発しているeastです。今回は、社内で運用している広告配信サーバーの負荷テストを実施したので、その話をしたいと思います。 経緯 ピクシブの広告配信サーバーは、pixiv本体を中心に複数のサービスに対して広告配信を行なっています。現在私はこの広告配信サーバーの大規模改修を行なっているのですが、先日ついに広告配信サーバーの改修がほぼ完了したので、試しに負荷試験を行なってみたいと思い立ちました。 目標は毎秒1万リクエスト ピクシブの広告配信サーバーへのリクエスト数はDailyで 4〜6億req もあり、これは毎秒平均に直すと約 5,000RPS(Request Per Second) になります。さらに、ピークタイムである休日の深夜帯には 12,000RPS にも達します。つまり新しい広告配信サーバーにも、毎秒12,000のリクエストを捌く性能が必

こんにちは。Rubyコミッターのusaです。 なんかRuby の 最新 リリースと一緒に、脆弱性 情報 が いっぱい 公開 されましたね。うわー、なんかよくわかんないけど、やばそうですね！正味のところ、こいつら結局どれくらい危なそうなのか、それらの脆弱性の記事を書いた人がたまたまピクシブにいましたので、率直に本音を語っていこうと思います。 CVE-2017-17742: WEBrick における HTTP レスポンス偽装の脆弱性について うまく利用するのは難しいとは思いますが、使いようによっては利用者(WEBrickで作って公開したサイトを訪問した人)をひどいめにあわせることができるかもしれない脆弱性です。 でも、WEBrickで作ったサイトをプロダクションで公開してる人なんているわけないよねははは。 CVE-2018-8777: WEBrick における巨大リクエストにともなう DoS

「プログラミング言語Rubyのコアコミッター・中村宇作氏を採用しRuby開発とImageFlux開発を加速します」のニュースで既報の通り、Rubyのコアコミッターを務められているusaこと中村宇作が入社しました。 聞き手はニュースの写真にも登場している、bashこと執行役員 技術マネジメント室長 小芝です。 プロフィール 1973年生まれ、富山県出身。 2000年よりRubyの開発に携わり、現在は主にWindows版の開発および安定版の保守を担当。Ruby公式サイトに世界で一番多く記事を書いている人。 RubyKaigi2013スピーカー、大江戸Ruby会議05キーノート。 TRICK 2013、TRICK 2015 入賞者。 好きなメソッド: Enumerable#map 座右の銘: ケセラセラ GitHub、Twitter ID: @unak 自己紹介 まずは自己紹介をお願いします。

ピクシブ福岡オフィスの @ikasoumen です。iOS版が先行してリリースされていたチャットストーリー投稿アプリの「pixiv chatstory」。 昨年の12月から、Android版の提供もはじまりました。 ホーム画面にインストールできるWebアプリ ネイティブで実装されているiOS版と違い、Androidでは全てHTML + CSS + JSで作られているWebアプリを、Google playストアを経由せずにpixiv chatstoryの公式サイトから直接Android端末へとインストールすることができます。 従来の「ホーム画面に追加」されたWebページと違って、Chromeのヘッダーが非表示になっていたり、URLを開く際にアプリとして選択できたりと、まるでネイティブアプリかのような体験を得られます。 これには、Progressive Web App(PWA)の特徴の一部を利

この記事はピクシブ株式会社 Advent Calendar 2017のラストを飾る25日目の記事です。 inside.pixiv.blog 去年も一昨年もラストを飾らせていただいたCTO兼福岡オフィス立ち上げ担当の高山（@edvakf）です。 2017年は福岡に移住という大きなライフイベントがありましたが、思い返してみればペアプロで始まりペアプロで終わったペアプロの年でした。 まずは結論から ペアプロは一般的に言われるようにレビューの手間が減るとかコードの品質が向上するとか属人化を防ぐのに良いとかの利点がありますが、自分は「その時間の集中力」こそが実は最大の利点なのではないかと考えています。 一人で集中して何時間もコードを書き続けられる人は別ですが、現代のプログラミングって調べ物をしてる時間のほうが長くありませんか？しかも調べ物のほとんどは、ちょっと詳しい人ならすぐにわかるようなことばかり

CTO兼福岡オフィス立ち上げ担当として新アプリを作っている@edvakfです。 JSON APIを開発しているとこういう問題がありがちですよね。 仕様どおりにAPIの形式を作ったはずだけどなんか自信が持てない テストでいくつかのキーが存在するかの簡単なチェックはしてるつもりだけど、全部チェックするのは大変すぎる APIのControllerやViewをリファクタリングしたらレスポンスの形が変わってアプリがめっちゃクラッシュし始めた というのが怖くて誰もリファクタリングできなくなった APIドキュメントがメンテされない 知らない間にレスポンスのフィールドが増えてたけどドキュメントに書いてない これらを解決したい！と思って試行錯誤したら、スマートに解決することができました。この記事ではRailsのことについて書きますが、考え方は他の言語・フレームワークでも同じです。 なお、今回使ったgemのバ

はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl

ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。主にpixivの技術的な改善をしていますが、広告チームも兼任しているので広告周りの開発もしています。 今回pixivの常時HTTPS化を担当したのでやったことを紹介します。 pixivをHTTPS化した理由 現在のインターネット全体の流れとして常時HTTPS化が進んでいます。エドワード・スノーデン - Wikipediaが暴露したNSAの事件発覚や 公衆無線LANの利用拡大により、通信経路上でユーザーの個人情報を保護することがインターネット全体として非常に重要になってきました。Googleが行っている調査によると、HTTPSページの閲覧時間はウェブ全体の利用時間の3分の2にも及びます。 それだけではありません。ブラウザに新しく追加されるAPIや機能（HTTP2/WebRTC/ServiceWorkerなど）はHTT

ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。 前編ではpixivを常時HTTPS化する前にやった前準備として、広告、画像といったリソースをHTTPSに切り替える際の手順を紹介しました。 pixivを常時HTTPS化するまでの道のり（前編） - pixiv inside 後編では実際にpixivのアプリケーション自体を常時HTTPS化していく手順を紹介します。 従来のHTTPS配信 pixivはPHPアプリケーションを実行するアプリケーションサーバー(Apache/mod_php)の前段にnginxを配置する構成になっています。以前からセキュリティ的に重要なページはHTTPSで提供しており、nginxでHTTPS終端処理を行っていました。HTTPSで応答する場合はアプリケーションサーバーにX-HTTPSヘッダーを付けてプロクシーしています。 具体的には以下のよ

はじめに こんにちは。はてなブログとエモい話が何よりもすきな17新卒のエンジニアPotato4dです。 ひょんなことからこのpixiv insideに技術的な記事を書く機会に恵まれたので、JavaScript周りの話を書きたいと思います。 概要 モダンなJavaScript環境に慣れ親しんだ方には、「コンポーネント」という単位をベースとしたUIやロジックの開発を行う事は珍しくないかと思います。 しかしながら、その「コンポーネント」という単位の大きさと分割指標については、中々まとまった資料が存在せず、それぞれの開発者や、フレームワークによりけりとなっている印象を受けます。 昨今のフロントエンド開発、特に全てJavaScriptで完結するSPA開発で頭の悩ませる部分としては、状態の管理に次ぐ、大きな課題となっているのではないでしょうか。 今回の記事では、そんなJavaScriptにおける「コン

こんにちは、pixivで決済システムの開発を担当しているエンジニアの@ikです。 今回、PayPal User Group(PPUG)というPayPalを利用するユーザーグループが主催する「PPUG Meetup #1 -今更聞けないPayPal入門-」でLTをしてきました。 当日発表した内容はこちらです。 PPUG Meetup #1 pixivでのPayPal導入事例 from ik-fib この発表を踏まえつつ、pixivにおけるPayPal導入・運用の話をしていきます。 PayPal とは PayPalはPayPal Holdings Inc.の提供する決済サービスです。 PayPalを利用することで、購入者は決済を行う際に、自分のクレジットカード情報など決済に使用する情報をECサイト等に直接送る必要が無くなるため、安全に取引ができます。 pixivでのPayPal決済 pixiv

おはようございます、ImageFlux開発責任者のharukasanです。3日前の4月14日、ピクシブではPawooが急にリリースされることになりまして、ここ数日はずっとPawooサーバにログインしていました。このPawooサーバ、既にピクシブの監視体制に入っており、アラート受信後インフラエンジニアが障害対応できる仕組みを整えています。案の定、リリース直後の15、16日は週末にもかかわらずアラートを受け取ることになり、サーバにはりつくことになったわけです。どんなシステムであろうとアラートを受け取ったら対応する、それが我らインフラエンジニアです。 pawoo.netの構成 さて、それではまずPawooの構成を見ていきましょう。digすればわかりますがpawoo.netはAWS上に構成されています。数百台以上の物理サーバを常時運用しているピクシブであっても、さすがにこんなにはやく物理サーバは用

画像処理技術エンジニアの緑川晃。ニックネームはmido。 イラスト一枚でグッズを作成することができるサービス「pixivFACTORY」の画像処理システムを開発している彼に、同技術を発展させることで今後何ができるのか、話を聞きました。 特化した技術は、世の中のプラットフォームへと変わる可能性を秘めている ── イラスト一枚でグッズを作れる「pixivFACTORY」は、画像処理技術を追求することが、サービスにとって重要な価値になっているんですけど。画像処理を扱っていく上で、今後どのような活動が求められているんでしょう。 うーん。その観点からいうと、ツールやライブラリは、これからもっと内製したらいいんじゃないかなって思っています。今よりもっと高い価値や機能を提供していくために。 たとえば、最近なんですけど、「pixiv FACTORY BOOKS」という同人誌を作れるサービスの改善をしていま

緑川晃、ニックネームはmido。 趣味ではUNIX/Linux互換OSをゼロから開発するほど、低レイヤーな技術を愛する画像処理エンジニア。そんな彼が開発に関わっているのは、オリジナルグッズを制作できるサービス「pixivFACTORY」です。 かつてオリジナルグッズの制作は、PCに特化した特別な制作ツールと、それを扱えるだけの専門的知識、スキルが求められていました。グッズを作るという活動は、ごく一部のクリエイターにだけ与えられた特権でした。 そんな常識を覆したのが、pixivFACTORYです。スマホの制作ツールでも扱えるような、一般的な画像形式のイラスト画像を準備するだけ。たったそれだけでグッズを制作できるという、グッズ制作のあり方に一石を投じたサービスです。 その仕組みを支える裏側では、ImageMagick、BlenderなどのOSSや、Goなどのプログラミング言語を駆使し、画像ファ

ピクシブで働く人の姿や、どんな技術を使ってプロダクトを生み出しているのかがみえる。そんなイベント「pixiv Night #02」が、2017年3月14日に代々木のピクシブオフィスにて開催されました。 テーマは「画像処理」ということで、イラスト1枚からグッズを作成できるサービス「pixivFACTORY」の開発チームに所属するhayaが、同サービスの画像処理システムについて、具体的な実装方法を語りました。その内容をお届けします。 買う前に実物を目にしたような体験をさせたい 物を買う時、実物をみたいと思いませんか？ たとえば、オリジナルマグカップを作りたいと考えた場合、イラストを描いて画像ファイルを入稿すれば、イラスト入りマグカップは製造できます。しかし、お金を払って手に入れるものなのですから、どういう見た目になるのかを事前に確認できないと不安になりますよね。 では、イラストが入った状態のグ

2017年3月2日（木）、都内では初のGitLabのイベント「GitLab meetup in Tokyo #1」がピクシブのオフィスで開催されました。 ピクシブ7年目社員である堀岡 亜樹、ニックネームはuchienneo。彼女が同イベントのLTで語った、GitLabを使ったプロジェクト運営におけるタスク管理の方法について紹介します。 GitLabをタスク管理ツールに選んだ理由 ピクシブのエンジニアをやっているuchienneoといいます。私はpixivというサービスの魅力に惹かれて、エンジニアとして7年ほどピクシブで働いてきました。 私が開発に関わっているプロダクトでは、エンジニアが持っているタスクの管理にGitLabを使っています。そこで使ってみて感じたことを、お伝えできればと思います。 pixivisionという、ピクシブが運営しているサービスがあります。pixivに投稿されたイラス

ピクシブのリードエンジニア道井俊介(ニックネーム：はるかさん)に、画像変換技術の未来について語っていただきます。 （※この記事は、「画像の価値は上がったのに、技術は10年前から変わっていない ─ ImageFluxで描く画像変換の世界」の後編です。） これからの画像変換システムのありかた ── はるかさんは、これからの画像変換のあるべき姿をどのように捉えているんですか 今でこそEC2みたいなクラウドサービスがあるけど、そうじゃなかった時代のことを思い出して欲しいんです。物理サーバーの時代。やれCPUがどうだとか、SSDに何をつかうだとか、省電力モードがどうとか。Linuxを入れればとりあえず大丈夫でしょ、とか言われてたけど、実際に運用に乗せると、そうでもないですよね。 BIOSの設定がどうなってるだとか、そういう細かいところは、日々のルーチンワークとしてやっていたはずなんですよ。そこに、E

2012年入社。ピクシブでインフラエンジニアとして活動している道井俊介。ニックネームは、はるかさん(@harukasan)。入社以来、彼は画像配信インフラに関わり続けています。 サービス開始当初はよく障害を起こしていたpixivの画像配信インフラも、対策を重ね、今では安定した配信を実現しています。2014年には、画像変換のためのGo製プロキシ「go-thumber」をオープンソースとして公開。メルカリの久保達彦氏と共著した技術評論社「nginx実践入門」などの執筆にも関わりました。現在は、さくらインターネットと提携し、メルカリなどで活用されている画像変換のクラウドサービス「ImageFlux」の開発リーダーとして活動しています。 まさに、画像変換の世界で最前線に立っているはるかさん。今回彼に、世界最大規模のイラスト画像配信インフラの中でやってきた取り組みを語っていただきながら、同技術の今と