Lookerの埋め込みダッシュボードを社外提供する上での課題と解決策 - pixiv inside
アドプラットフォーム事業部 アドプロダクト部 データチームでアナリティクスエンジニアをしているucchi-です。普段は主に、pixiv Adsという広告ネットワークのデータ周りを開発しています。 ads.pixiv.net 今回は、pixiv Adsで採用している、Lookerの埋め込みダッシュボードについて紹介します。 はじめに ピクシブでは全社的にLookerを使用しています。Lookerを使うことで、BigQueryに保存されている品質の高いデータを気軽に分析することができ、社内の仮説検証や意思決定に役立っています。 一方で、Lookerは社内の分析用途だけではなく、社外へのデータ提供にも活用できます。 具体的な手段はいくつかありますが、pixiv Adsでは、「シングルサインオン（SSO）組み込み」という形式で、クライアント向けの広告管理画面にLookerのダッシュボードを埋め込ん
ピクシブとRuby 〜 Ruby 30周年に寄せて - pixiv inside
こんにちは、CTOの @harukasan です。2023/02/24をもってプログラミング言語Rubyが30周年を迎えたとのこと、大変おめでとうございます。 Rubyに支えられている企業の一社として感謝を示したいと思い、この記事を書くことにしました。 ピクシブとRuby ピクシブでは多くのサービスでRuby on Railsを利用しています。2012年にリリースされた国際版pixiv β(現在は提供終了)を皮切りに、pixivコミック、BOOTH、pixiv FACTORY、pixiv Sketch、Palcy、VRoid Hub、pixiv Adsと数々のプロダクトでRuby on Railsが採用されてきました。 2012年6月にリリースされたpixivコミックはRails 3.2でリリースされ10年以上にわたり同じコードベースで開発が続けられています。余談ですが、pixivコミック
アプリエンジニア育成プロジェクト - pixiv inside
アプリエンジニア育成に取り組んでいます こんにちは、ピクシブで新規事業部に所属しています、ああうえ(@_kwzr_)と申します。普段のプロダクト開発に加えて、全社的なモバイルアプリ領域の開発体験の向上に取り組んでいます。 最近モバイルアプリの世界ではネイティブなフレームワーク以外の開発手段を採用するものが増えてきましたね。 また、ネイティブアプリ開発の進化によって、iOSではUIKitからSwiftUI、AndroidではAndroid ViewからJetpack Composeが採用されることが増えてきました。 モバイルアプリ領域の中で採用できる技術が増えてきたことで、最近は採用したいエンジニアと、世の中にいるエンジニアの技術的なミスマッチが起こりやすくなってきたと感じます。 ピクシブのアプリでは、ビューアーなどの閲覧体験が重要になってくるものが多かったり、ライブ配信・視聴機能や、ドロー
エンジニア方針討論会の取り組み - pixiv inside
はじめましての方ははじめまして。ピクシブで Scala エンジニアをしている Javakky です。 今回は、弊チームで行なっているエンジニアの意思決定・相談会の取り組みについて紹介していこうと思います。 実装・設計・方針討論会 今年の2月からチーム内ではじめた取り組みとして、エンジニア全体への共有事項や意思決定を行う討論会を週1で行なっています。 この会でよく話されるトピックとしては、 開発体験向上のためのツール導入 プロダクトの設計方針・コーディング規約の提案 特定エラーに対する対応方針 などがあります。 実際に、僕がこれまで記事化したツール導入プロジェクトのいくつかは、ここで提案されたものになります！ inside.pixiv.blog inside.pixiv.blog inside.pixiv.blog 討論会をはじめたばかりの頃は「きっと4~5週もすれば話題がなくなっていくだろ
pixivをNext.jsでリプレイスする取り組みをご紹介します。 - pixiv inside
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
pixiv SketchのSSRをFluxibleからNext.jsにリプレースしました！ - pixiv inside
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由来のアク
良薬口に苦し！？カルテ携えた "主治医" に診てもらうRailsプロダクト健康診断のご紹介 - pixiv inside
ピクシブには数多くのRails製プロダクトがあり、それらを各チームで開発しています。 各チームでの知見や悩み事を共有するRails系サービス互助会というものもありますが、今回はRailsアプリケーションを健康に保つための取り組みであるRailsプロダクト健康診断について、対談形式でご紹介します。 トーカー紹介 なぜRailsプロダクト健康診断をやることになったのか "健康診断"で行っていること igaigaさんからみた効果や所感 弊社プロダクトメンバーからみた効果や所感 「お客様の声」 この先の発展の展望 最後に トーカー紹介 nino マンガプロダクト領域のテックリードをしているninoです。 技術的には主にバックエンドを担当しています。Palcyの立ち上げやpixivコミックの開発に関わり、現在はpixivのマンガで面白いことをやっています。最近POからこういう記事がでましたが、他にも
pixiv のデザインシステム実装『charcoal』を OSS 化します - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見たり、社内のデザインシステム整備の仕事をやったりしています。 さて、2021年に開催した弊社カンファレンス #pixivdevmeetup にて発表しましたデザインシステムの Web 版実装が先日 OSS 化されました 🎉 1。GitHub と npm から利用できます。 github.com www.npmjs.com 発表時点では「pixiv-elements」という名称でしたが、公開にあたって「charcoal」という名前になりました。「charcoal（木炭）」とはデッサンの道具であり、線を引く、表現の基礎となる素材の一つです。また創作物を主役とするサービスの基盤として、それ自体は色を持たないモノクロの素材である、というニュアンスも含みます。 （ただし、npm パッケージのスコープは
pixiv Android アプリでのデザインシステムを活用したダークテーマ対応 - pixiv inside
デザインシステムを利用した色の設定 色の実装について Theme切り替え 依存関係 デザインシステムと Material Components for Android Color Theming コンポーネント まとめと今後 フリーランスのソフトウェアエンジニアとして活動している djyugg です。ピクシブ株式会社では、業務委託として主に pixiv Android アプリの開発に携わっています。 play.google.com 多くの要望を頂いていた pixiv Android アプリのダークテーマ対応を2021年7月末にリリースしました。 このダークテーマ対応は、ピクシブのデザインシステムの思想を実装して実現しています。今回は、Android アプリでいかにデザインシステムの実装を実現し、ダークテーマに対応したかを紹介します。 なお、今回は主に Android View 向けの内容と
pixivのブックマークに関する負荷対策をしました - pixiv inside
10/22(金) 追記 この記事で解説している内容について解説する勉強会を開催することとなりました。以下のconnpassよりお申し込みください。 pixiv.connpass.com 10/22(金) 追記 pixivのブックマークについて ブックマークDBの問題について 具体的な対策内容 論理削除廃止・index追加・ブックマークタグのテーブル分割 適応ハッシュインデックスの無効化 アプリケーションコードのリファクタリング・全発行クエリの列挙と見直し 大きな更新処理の非同期化 結果 あわせてよみたい pixivではサービスの成長に伴い、気に入った作品に対して付けることができるブックマークの総数が急速に増加しており、ユーザーの皆様に滞りなくサービスを提供し続けるためブックマークに関するデータベース(以後DB)の負荷対策が必要になりました。 2021年2月より対策を行うプロジェクトを発足し
PIXIV DEV MEETUPでお話した「ブランディングページの 世界観を表現する技術」のセッション資料公開 - pixiv inside
エンジニアのyui540です。 PIXIV DEV MEETUPで「ブランディングページの世界観を表現する技術」というタイトルで、私が今まで関わってきたPIXIVプロダクトのブランディングページを実装するにあたって、サービスの世界観を表現するのにどのような動き・技術的な工夫をしたのかをご紹介しました。 もっとページの世界観を表現するブランディングページがインターネットに増えてほしいのでセッション資料を公開します。 yui540 2019年4月新卒入社。マーケティング&ユーザグロース部プレミアムサービス部所属のCSSエンジニアをしています。特技はCSSアニメーションを使って、バチバチに動くWebサイトを作ること。
Google Play Billing Library v3に対応した話 - pixiv inside
みなさんはじめまして。初めてじゃない方はお久しぶりです。pixivコミックAndroidアプリ担当のconsommeです。好きなウマ娘はトウカイテイオーとマヤノトップガンです。 Androidアプリにおいて、アプリ内で使えるアイテムやサービスの有料会員登録などを行う上で必要になるのが Google Play Billing Library（以下PBL）です。こちらの最新版が2021年3月時点でバージョン3なのですが、2021年8月以降は新規アプリで、同年11月以降はすべてのアプリにおいてバージョン3の使用が必須になります。そう、既存のアプリでも猶予はあと半年ほどしかないのです。 android-developers-jp.googleblog.com とは言え、アプリ内購入周りはお金が絡む部分のため、対応するにも慎重にならざるを得ません。もし不具合が発生したら…というのを考えると、なかなか
Herokuから ECSに 移行した - pixiv inside
こんにちは、インフラ部の 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
ピクシブのエンジニア組織とはプロフェッショナルとして信頼を高める場所 - pixiv inside
ピクシブではプロダクトや事業ごとに様々な専門性をもったメンバーでチームを組んでいます。特にエンジニア職は、そのチームをまたいで信頼性の高いプロフェッショナルとして成長するために、エンジニアギルドという組織を設けています。 この記事では、現在、このエンジニアギルドのトップとして、エンジニア職メンバーを統括している店本にエンジニアギルドの活動、これまでの成果、今後の展望について話を聞きました。 自己紹介をお願いします エンジニア職統括の店本と申します。 私の簡単な経歴をお話ししますと、2007年ピクシブ株式会社の前身である、クルーク株式会社に入社し、入社後はインフラエンジニアとしてpixiv誕生から今日まで約13年間、サービスの成長を支えてきました。 2018年からエンジニアギルドというエンジニア職の組織がスタートしたのですが、その発足以来組織のトップを務めてきました。 2020年1月からは、
ピクシブのこれからについて、COOとCTOから皆さまへお伝えします（前編） - pixiv inside
ピクシブでは企業として掲げているミッション・ビジョン・バリュー達成のため、毎年7月は全社員が一堂に会し、取締役以下全マネージャーより全体方針を踏まえた事業部単位の目標を共有する時間を設けています。 本日はそこからピクシブのテックビジョンにスポットライトを当てつつ、取締役COO清水（以下ushioと表記）とCTO道井（以下harukasanと表記）の対談形式で会社の未来について前編・後編に分けてお話させていただきます。 ushio : 今までピクシブが「どのような姿を目指して」「どのように舵を切って成長していくのか」外部に向けて詳細に語る機会はそう多くありませんでした。ですので本日は、CTOとの対談形式で事業目標とそれに伴う技術・開発方針について話していきたいと思います。harukasan、よろしくお願いします。 harukasan ： よろしくお願いします。 ushio : まず簡単に自己
Terraform運用事例書きました - pixiv inside
こんにちは、インフラ部の id:sue445 です。 Terraformなにもわからないけどディレクトリ構成の実例を晒して人類に貢献したい - エムスリーテックブログ や Terraformのディレクトリ構成の模索 - Adwaysエンジニアブログ を読んで影響されたのでピクシブのTerraform運用事例を紹介しようと思います。 Terraformの採用理由 GitLabでのリポジトリ構成 Terraformのファイル構成 moduleがうまく使えたと思っている事例 GitLab CIでTerraformをいい感じにCIする テンプレートの使い方 ピクシブで実際に使っているテンプレートファイル このテンプレートでできること masterブランチ以外 masterブランチ このテンプレートファイルのポイント 最後に Terraformの採用理由 Terraformと同じようなプロビジョニン
赤いラクダは3倍早い！ピーク時毎分1400件を捌くための決済処理のチューニング紹介 - pixiv inside
こんにちは、4月からBOOTH部になったorekyuuです。 この記事では、転属後の一番大きな成果である、BOOTHで発生する大量の注文(ピーク毎分約1400件)を整合性を取りつつ高速にさばく改善について解説します。 BOOTHが抱えていた課題 まずはBOOTHが抱えていた課題について説明します。 BOOTHでは販売開始時刻が事前に予告されていた場合などの理由で瞬間的に決済が集中し、サーバーが大量の注文に耐えきれないケースが度々ありました。 その原因は在庫の処理にありました。擬似コードですが、注文の処理は以下のようになっていました。 def checkout! ActiveRecord::Base.transaction do 商品の悲観的ロック # 在庫数を同時に編集しないようにロックを取る 商品の在庫の減算処理 注文を確定済みにする 決済の請求APIを叩く end end 上記のコード
不必要な制御文字への対処 - pixiv inside
こんにちは、晴れて2020新卒になったmipsparcです。最近は趣味の鉄道技術系同人誌の新版が出来上がって喜んでいます。 本記事では、入力値には必ずと言っていいほど混入する不必要な制御文字への対処方法をご紹介します。ユーザーに文字列を入力してもらうことのあるすべてのサービスで活用できる話かと思います。 不要な制御文字が入ることで生じる問題 前提として、この記事は制御文字類が必ずしも邪魔と言いたいわけではありません。 制御文字は多言語対応(特に右から左方向に記述する言語)などで重要なときもありますが、今回は問題が発生しうるケースのお話をします。 「腐向け」 「メリークリスマス」 「ゾンビ」 なんの変哲もない3つのイラストタグですが、どれも不可視の制御文字が混入しています。 $ php -r "var_dump(json_encode('腐向け'));" string(26) ""\u2
pixivに脆弱なパスワードで登録できないようにしました - pixiv inside
図1: 脆弱なパスワードを入力した場合のエラー画面 こんにちは、pixiv開発支援チームのmipsparcです。 パスワード、もしかして使いまわしていますか? 複数のサービスで同じパスワードを利用していると、「パスワードリスト型攻撃」によって不正アクセスの被害を受けてしまうかもしれません。 パスワードリスト型攻撃の被害にあわないためには、ブラウザやパスワード管理ツールで自動生成された安全なパスワードを利用するのが好ましいです。 しかし、実際には多くの人が「使いまわしたパスワード」や「簡単なパスワード」(以下、脆弱なパスワード)を利用していますし、啓蒙活動にも限界があります。 pixivではサイバー攻撃への対策を複数とっていますが、根本的な対策のひとつとして、脆弱なパスワードを新しく設定できないようにしました。 脆弱なパスワードの判定方法 脆弱なパスワードの利用はどのように防ぐことができるで
PIXIV TECH FES.のLPを支えるCSSアニメーションテクニック - pixiv inside
※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
