こんにちは。福岡オフィスで課題解決部に所属しているエンジニアの petamoriken です。趣味で ECMAScript の動向を追ってたりします。よろしくお願いします。 この記事では私がレガシーだったピクシブ百科事典のフロントエンドを如何にしてリファクタリングし、モダン化していったかを紹介していこうと思います。 まずピクシブ百科事典の構成の調査 ピクシブ百科辞典のフロントエンドのコードは複数の JavaScript がクラシックスクリプト形式で読み込まれ、実行されていました。もっと詳しく説明すると、ページ共通のエントリーポイントの中で今どのページにいるかの判定をし、そのページに必要なスクリプトを LABjs というライブラリを使って動的に <script> タグを追加することによって読み込んでいました。 これにより別のコードで定義されたグローバル変数を使うのが当たり前の状態になっていま

10/22(金) 追記 この記事で解説している内容について解説する勉強会を開催することとなりました。以下のconnpassよりお申し込みください。 pixiv.connpass.com 10/22(金) 追記 pixivのブックマークについて ブックマークDBの問題について 具体的な対策内容 論理削除廃止・index追加・ブックマークタグのテーブル分割 適応ハッシュインデックスの無効化 アプリケーションコードのリファクタリング・全発行クエリの列挙と見直し 大きな更新処理の非同期化 結果 あわせてよみたい pixivではサービスの成長に伴い、気に入った作品に対して付けることができるブックマークの総数が急速に増加しており、ユーザーの皆様に滞りなくサービスを提供し続けるためブックマークに関するデータベース(以後DB)の負荷対策が必要になりました。 2021年2月より対策を行うプロジェクトを発足し

Androidアプリをつくっているkobakenです。DroidKaigi 2019の登壇予告記事を投稿して以来ですね。皆さん元気にしていましたか？ kobakenはというと、Android版 pixiv Sketchをもりもり開発しておりました。Jetpack Composeをプロダクション投入したすぎてウズウズしています。 さて、今回はそんなAndroid版 pixiv Sketchのドロー機能を刷新して（以下、新ドローと呼びます。）新しい体験をお届けできたので、その開発の裏側についてご紹介していこうと思います。 Android版 pixiv Sketchの新ドロー機能をリリースしました！ Androidをお持ちの方は、とりあえず触ってみてください。 play.google.com 今回紹介するpixiv Sketchの新ドロー機能とは、 お絵かき新規勢でも直感的に触れるUI 普段お絵

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

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

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

ピクシブのメディア事業部で広告事業を担当しているdrillです。社内ではアドネットワーク・SSP等の配信広告の運用によるマネタイズを主な業務として行っています。 ウェブページにおけるコンテンツの表示や動作については、それぞれのブラウザの仕様に基づいて正常に働くように気を配るということがウェブ業界の常ですが、これはもちろん広告配信においても例外ではありません。意図したとおりに広告配信が行われていない環境があると、impやclick等の数値の正確性が担保されなくなったり、場合によっては収益的機会損失に繋がってしまうケースもあります。今回は広告配信に関わりそうないくつかの例を挙げつつ、ブラウザの動向に気を配ることの重要性についてお伝えできればと思います。 Better Ads Standards について まずはGoogle Chrome関連で最近騒がれがちな話から。ユーザーに不快感を与えるよう

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