文字レイヤーを支える技術 - pixiv inside
こんにちは、型と複雑GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も可能ですので是非ご利用ください。 https://factory.pixiv.net/item_groups/new 今回は、このテキスト入力機能のフロントエンド実装、 特に React と SVG でいかに文字レイヤーを表現するかについてご紹介したいと思います。 SVG にとって文字レイヤーとは何
#pixivTECHSALON の発表資料をドドーンと大公開！ - pixiv inside
みなさんこんにちは、FromAtomです。 ピクシブ主催のTech Confである「pixiv TECH SALON」が2019年3月5日（火）に開催されました。 イベント全体のレポート記事はまた後日公開予定ですので、この記事では一足先に発表資料と発表者からの一言コメントをご紹介します！ メインセッション 🙌 ピクシブ流データ活用基盤のこれまでとこれから minamitary：トップバッターでした！後に続くセッションと「本番」に繋ぐため、技術よりも組織・企業文化に重点を置いて話しました。ピクシブのよさが少しでも伝わっていたら幸いです。技術面も含め、またどこかで発信していけたらと思っています。データ駆動推進室やっていくぞ〜〜〜 pixivのおすすめを改善する話 mytk：pixivのレコメンドアルゴリズムとその基盤の話をしましたが、どちらにも興味を持っていただけた方がいらっしゃったようで嬉
BOOTH iOSで購入完了時にLottieのアニメーションを実装しました！ #booth #booth_pm - pixiv inside
おばんです、Oxygen Not Includedにハマってしまって、年末年始を溶かすことが確定している田中です。 先日リリースしたBOOTH iOS v2.18.0から購入完了時にアニメーションが再生されるようになりました。 今回はその実装に関する話として以下をまとめていきます。 作ったもののドヤリング Lottieとは BOOTH iOSの購入完了アニメーション実装のざっくり解説 アニメーションの実装時にハマったポイントの解説 作ったもののドヤリング ドヤアアアァァァァ！ 実装に踏み切った経緯としては、「もともとのBOOTHの購入完了画面が殺風景だった」&「これから機能改修が入る」という話があり、機能改修に合わせてデザインもハレ感を出して修正しよう！となったことからでした。 購入するという大切な瞬間をよりリッチなアニメーションによって演出してあげたい想いと、創作好きのユーザーを相手にし
ピクシブSlackの「今日のアニメボット」 - pixiv inside
こんにちは、 @sue445 です。 今期の推しアニメは ＨＵＧっと！プリキュア と キラッとプリ☆チャン と サザエさん です。 ピクシブでは今までは業務に直接関係ないチャンネル（いわゆる雑談など）は作成しないルールが採用されていました。しかし、ドメイン知識を高めるために業務に直接関係ないこと（たとえばアニメ、ゲーム、ラノベなど）でも情報共有したいという意見があり今年の10月頃にそのルールが緩和されました。 その一環でアニメについて語るチャンネルができたのですが、前職のチャットにあったとあるボットがほしくて作りました。 下のスクショがボット作成直後の同僚の喜びの声です。 見ての通り、これから放映されるアニメの一覧を教えてくれるボットです。 上記は初期バージョンなので色々古いですが、最新だとこんな感じです。 しょぼいカレンダーのAPI では新番組や再放送などの情報も取れるので、新聞の番組欄
今日から簡単！Webpacker 完全脱出ガイド - pixiv inside
こんにちは、@f_subal です。普段はおもに pixivFACTORY のフロントエンドを見ています。 今回は pixivFACTORY において、フロントエンドのビルドに Webpacker を利用するのをやめた話をします。 Webpacker をやめよう rails/webpacker は Ruby on Rails のプロジェクトに webpack を導入する際に用いられる gem です。必要な webpack の設定ファイルの生成や、Rails のテンプレートからビルド済みの JavaScript ファイルを読み出すために用いるヘルパー関数など、多数の機能を提供します。 結論から言うと、Webpacker を入れてもあまり良いことがありませんでした。単に必要が無いというより、あることによって面倒が増していると感じたので、剥がしました。以下 Webpacker が導入された Ra
酔っ払ってもコードが書きたい！JavaScriptを書き散らかしてPrettierに介護してもらう方法 - pixiv inside
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
(後半）現役Webディレクターお悩み100本ノック！ マルチタスク問題からエンジニアとのコミュニケーションまで。 - pixiv inside
ピクシブ主催のWebディレクター向けイベント「DIRECTORs' SCRAMBLE」の第2回が、2017年7月20日、代々木のピクシブオフィスで開催されました。 ピクシブ株式会社、ヤフー株式会社、株式会社マッチングエージェント（※ 発表順）のディレクターのLTを前編にてお届けしましたが、後半ではパネルディスカッション「あなたの悩みも解決する…かも？ ディレクターお悩み100本ノック！」の内容をご紹介します。 事前に参加者からディレクション業務に関するお悩みを聞いたところ、120個以上のお悩みが集まりました。 ▲実際に集めたディレクション業務のお悩みリスト。集まった120個以上のお悩みはこちらのスプレッドシートにまとめています。 今回は、同イベントに登壇したヤフー株式会社善積さん、株式会社マッチングエージェント新居さん、ピクシブ株式会社高橋に集まった質問に対して答えていただきました。 （※
Headless Chromeでデザイン変更履歴を追える魚拓を作ってみた - pixiv inside
はじめに こんにちは、普段はPawooの開発を担当している新卒エンジニアのabcangです。 最近話題のHeadless Chromeを使って魚拓を作ってみましたので、その話をします。 結論から言うと、こういうものができました。 以下、詳しくお話していきます。 日々行われるデザイン変更をどう把握するか pixivには毎日新機能やUIの変更がデプロイされており、どんどんページが変わっていきます。 ある日、ディレクターから「デザインの変更履歴を追うための魚拓ツールがほしい」と相談されました。魚拓ツールがあると、なにか数値の変動があったときにデザインの崩れを確認したり、過去のデザインを振り返ったりするときに便利とのことです。 ちょうどそのタイミングでHeadless Chromeが利用できるGoogle Chrome 59がリリースされていたので、試すいい機会だと思い引き受けました。 Headl
pixivを常時HTTPS化するまでの道のり（前編） - pixiv inside
ピクシブ株式会社で開発基盤チームとして働いている @catatsuy です。主にpixivの技術的な改善をしていますが、広告チームも兼任しているので広告周りの開発もしています。 今回pixivの常時HTTPS化を担当したのでやったことを紹介します。 pixivをHTTPS化した理由 現在のインターネット全体の流れとして常時HTTPS化が進んでいます。エドワード・スノーデン - Wikipediaが暴露したNSAの事件発覚や 公衆無線LANの利用拡大により、通信経路上でユーザーの個人情報を保護することがインターネット全体として非常に重要になってきました。Googleが行っている調査によると、HTTPSページの閲覧時間はウェブ全体の利用時間の3分の2にも及びます。 それだけではありません。ブラウザに新しく追加されるAPIや機能（HTTP2/WebRTC/ServiceWorkerなど）はHTT
一筋縄ではいかない、Pawooとマストドンのデータ分析について - pixiv inside
こんにちは。新卒エンジニアのtohhyとpotato4dです。 今回の記事では、新卒研修の一環として行っている、Pawooのデータ解析基盤の整備業務について紹介します。 Pawooのデータとマストドンの思想について Pawooの開発で社として特に意識している事柄として、マストドン本家の思想の尊重があります。 マストドンは成り立ちとして、SNSというもののあり方に対する問題意識からスタートしたOSSであり、設計の根底には開発者の思想があります。 マストドンのランディングページの最下部に特徴として列挙されている項目が、そうした思想の一端を表しています。 この「マストドンの特徴」の中に、トラッキングに関する言及があります。「広告もトラッキングもありません」という記述がそれです。 Pawooは本家マストドンからフォークして実装されており、独自の機能を持ってこそいますが、本家に対して変更を提案したり
実際に運用してみてわかった、大規模Mastodonインスタンスを運用するコツ - pixiv inside
おはようございます、ImageFlux開発責任者のharukasanです。3日前の4月14日、ピクシブではPawooが急にリリースされることになりまして、ここ数日はずっとPawooサーバにログインしていました。このPawooサーバ、既にピクシブの監視体制に入っており、アラート受信後インフラエンジニアが障害対応できる仕組みを整えています。案の定、リリース直後の15、16日は週末にもかかわらずアラートを受け取ることになり、サーバにはりつくことになったわけです。どんなシステムであろうとアラートを受け取ったら対応する、それが我らインフラエンジニアです。 pawoo.netの構成 さて、それではまずPawooの構成を見ていきましょう。digすればわかりますがpawoo.netはAWS上に構成されています。数百台以上の物理サーバを常時運用しているピクシブであっても、さすがにこんなにはやく物理サーバは用
より成長の実感を持てる開発組織をつくる ── 小芝敏明がピクシブの開発本部長へ就任 - pixiv inside
小芝敏明がピクシブの"開発本部長（VP of Engineering）"に就任。小芝敏明とはどんな人物なのか？これからピクシブをどのように変えるのか？その想いを聞いてみましょう。 この2年間、"開発文化を創る"というチャレンジをしてきた "古き良き時代から来ました。真面目なSE、真面目にSE" @bash0C7こと小芝です。どうぞ、よろしくお願いします。 ── 小芝さん、メディアでもブログでも、毎回その挨拶ですね。どういう由来が！？ 自分の職業を一言で表現するなら「システムエンジニア」という言い方がフィットすると考えてます。広義のシステムを扱う仕事が自分の天職と思っていて、そのように名乗りも使っています。言い回しはソロアイドルの寺嶋由芙さんインスパイアです。 ── 仕事の活動だと、今のピクシブの広告配信プラットフォームを手掛けたり、RubyKaigiの運営に関わるなど、最前線のエンジニアと
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
