図1: 脆弱なパスワードを入力した場合のエラー画面 こんにちは、pixiv開発支援チームのmipsparcです。 パスワード、もしかして使いまわしていますか? 複数のサービスで同じパスワードを利用していると、「パスワードリスト型攻撃」によって不正アクセスの被害を受けてしまうかもしれません。 パスワードリスト型攻撃の被害にあわないためには、ブラウザやパスワード管理ツールで自動生成された安全なパスワードを利用するのが好ましいです。 しかし、実際には多くの人が「使いまわしたパスワード」や「簡単なパスワード」(以下、脆弱なパスワード)を利用していますし、啓蒙活動にも限界があります。 pixivではサイバー攻撃への対策を複数とっていますが、根本的な対策のひとつとして、脆弱なパスワードを新しく設定できないようにしました。 脆弱なパスワードの判定方法 脆弱なパスワードの利用はどのように防ぐことができるで

※本記事に出てくるアニメーションは全てCSSで作られています はじめまして、新卒エンジニアの yui540(@yui540)です。普段は、pixivFANBOXというサービスのCSSエンジニアをしています。 今回は、私がコーディング&ページ演出のアニメーションを担当させていただいたPIXIV TECH FES. の LP(第一弾)の CSSアニメーションの実装方法を一部解説します。 第一弾 conference.pixiv.co.jp 第二弾 conference.pixiv.co.jp とその前に、「PIXIV TECH FES.って何？」という方もいると思うので、簡単にご説明します。 PIXIV TECH FES. は、私たちピクシブのエンジニアが普段からお世話になっている方や、 お話ししてみたい方をお招きして、サービス開発で得た技術的知見とピクシブの未来についてお話しするテックカンフ

こんにちは。iOSアプリ開発のリードをしているFromAtomです。デザイナーさんに「アー写みたいなかっこいい写真撮りたい」と無茶振りしたら、いい感じに撮影と現像をしてくれて感謝感激しています。 2019年9月5日（木）〜9月7日（土）に開催される iOSDC Japan 2019 に、ピクシブから3名のエンジニアが登壇することになりました！まずは、その3つの発表内容に登壇者のコメントを添えてご紹介したいと思います。 スクリーン配信機能の実装が大変だったので知見をお伝えします iOSで画面を収録してライブ配信を行うにはReplayKit2を利用し、Upload Extension経由で画面を配信する必要があります。 さて、そのUpload ExtensionをXcodeで追加すると BroadcastSetupViewController というUIViewControllerが追加されま

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

おばんです、最近買ったボイスチェンジャーの力によって可愛い女の子（の声）になりつつある田中です。 先日1月15日に書籍『iOSアプリ設計パターン入門』の発刊を記念して、弊社主催で「iOSアプリ設計ナイト」という勉強会を開催しました。今回はそのレポートをお送りします。 ビールでカンパイ イベントは乾杯からスタート。iOSDCでビール舌の肥えたiOSエンジニアの方でも満足いただけるように、美味しいビールをご用意いたしました( ˘ω˘ ) 設営完了しました！お待ちしております！ #pixiv_ios_arch pic.twitter.com/bfgqremRja— Atom（アトム） (@FromAtom) 2019年1月15日 ここから先は今回行われた5つの発表の内容と感想をお送りします。 「2つの同期 4つの状態」 @ktanaka117 2つの同期 4つの状態 #pixiv_ios_arc

みなさんこんにちは！ピクシブで唯一のテスト専任エンジニアの @shimashima です。 今日は昨年10月に全社向けに発表を行なった「品質“実質”無料キャンペーン」についてご紹介しようと思います。 キャンペーン開催の経緯 昨年10月より、それまで所属していたpixiv運営本部からコーポレートエンジニアリング部という間接部門に異動し、社内システム改善を行うとともに社内全般の品質向上を目指して動くことになりました。 入社した当時はソフトウェアテスト・品質を専門としているエンジニアは私一人でした。ピクシブのサービス全般についての品質向上を目的として入社したものの、社内での私自身の認知度もまだまだで、品質に関する相談もかなりまばらな状態でした。需要が少ないということもあるかもしませんが、まずは「社内に品質について相談する人・窓口がある・居る」ことを認知してもらおうと思っていました。そのとき、コー

おばんです、博多に行った際に一番美味しかったのは明太子だと思った田中です。「お前はまだ本当の博多グルメを知らない」的なマサカリ歓迎です。 さて、今回は先日博多で開催されたHAKATA Test Night #1で発表した内容についてまとめます。 HAKATA Test Night #1 - connpass 発表について トークンリフレッシュ処理を含むAPIClientのテスト #hakata_test_night from Kenji Tanaka 概要 Access/Refresh Token形式の通信処理は簡単にまとめると以下の手順を踏みます。 Access Tokenが有効期限切れだった場合に、Refresh Tokenを使ってAccess Tokenを更新する Refresh処理が成功したら、新しく取得したAccess Tokenを使って元の通信処理をRetryする これらの一連

こんにちは。saki( @yensaki )です。 社内では pixivFACTORY の開発リーダーとRailsエンジニアをしています。 さて、プロダクト開発では時折、開発メンバー全員で数ヶ月かけるプロジェクトもあると思います。pixivFACTORY でもそのような取り組みはあり、何十個ものタスクが発生します。このようなプロジェクトの進め方は多種ありますが、今回は私が行っている手法を紹介いたします。 フロー 開発フローの概略としては下記のような流れです。 タスクリストを書き出す 見積もりを立てる PERT図を作成する 見直しを繰り返す タスクリストを書き出す まずは開始時点で判明しているタスクリストを書き出します。これはWBSで一般的に行われていることですのでざっくりとだけ紹介します。大まかには洗い出し・細分化を行っています。 洗い出し プロジェクトの初期段階ですべてのタスクを洗い出す

どうもこんにちは @f_subal です。普段は pixivFACTORY のフロントエンドを見ています。 最近は ruby-sass の deprecation に悩みながら dart-sass を調べたりしています。 さてさて、みなさん日々の開発にあたってフロントエンドの悩みや知見、気になるニュースなどが溜まっているかと思います。あのライブラリを試したい、あれアップデートしたらハマったので誰かに相談したい…そんなときに社内に頼れる仲間がいると心強いですよね。 というわけで、本日はピクシブエンジニア組織における「フロントエンド互助会」の取り組みについてご紹介します。 ピクシブにおけるエンジニア互助会 ピクシブでは2017年まで、システムを超えた共有事項や障害報告や最近の挑戦について話す「技術互助会」というミーティングがありました。初期は全社員の参加でしたが、その後エンジニア全員参加・発表

こんにちは。@orekyuuです。Javaが大好きなエンジニアですが、入社してからはずっとRailsエンジニアをやっていました。最近はJDK11+SpringBootでサクッとWebアプリを立ち上げる仕事を始めたので、SpringBootの話を書いてみます。 今作っているアプリではThymeleafというテンプレートエンジンでレンダリングしています。ほとんどのWebアプリではformの内容を入力によって表示を変えたりしたいといったケースでJavaScriptを使ってDOM操作をしたくなります。今はjQueryという時代でもないので、ちょっとしたDOM操作をVue.jsを使って操作できると便利そうです。 Vue.jsを使う準備 webpackの設定を書く package.jsonとwebpack.config.jsを用意します。ほぼ普通のjsプロジェクトと同じだと思います。 ポイントはout

みなさんこんにちは。@FromAtomです。去年のアドベントカレンダーでは、 『【esa】社内ドキュメントツールのホッテントリを分かるようにしたら捗った話 』を書きました。今年もesaの話です。以前、中の人にインタビューしていただいた こともあるのですが、ピクシブではesaという情報共有サービスを利用しています。 社外秘の情報も書かれているためClosedなesaとして運用しており、もちろん外部の人はアクセスすることができません。そのため、Slackにesaの記事URLを貼っても展開機能が使えません。「それはそう」という感じなのですが、下の画像のPublicなesaのように、URLが展開されたほうが便利ですよね。 そこで、Slack AppのUnfurling links in messagesという機能を利用して、社内Slackに貼られたClosedな社内esaのURLでも展開できるよう

こんにちは、 @sue445 です。 今期の推しアニメは ＨＵＧっと！プリキュア と キラッとプリ☆チャン と サザエさん です。 ピクシブでは今までは業務に直接関係ないチャンネル（いわゆる雑談など）は作成しないルールが採用されていました。しかし、ドメイン知識を高めるために業務に直接関係ないこと（たとえばアニメ、ゲーム、ラノベなど）でも情報共有したいという意見があり今年の10月頃にそのルールが緩和されました。 その一環でアニメについて語るチャンネルができたのですが、前職のチャットにあったとあるボットがほしくて作りました。 下のスクショがボット作成直後の同僚の喜びの声です。 見ての通り、これから放映されるアニメの一覧を教えてくれるボットです。 上記は初期バージョンなので色々古いですが、最新だとこんな感じです。 しょぼいカレンダーのAPI では新番組や再放送などの情報も取れるので、新聞の番組欄

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