文字レイヤーを支える技術 - pixiv inside
こんにちは、型と複雑GUIが大好きな @f_subal です。 普段は pixivFACTORY というサービスでフロントエンドをやっています。 さて、早速スクショでお見せしていますが、 今年の3月に pixivFACTORY のグッズ編集画面はリニューアルしました。 すでにこちらの記事でも紹介がありましたが、 新しい画面では、画像のみならず文字を使ったデザインができるようになっています。 フォントワークス および MonoType の書体が 100 スタイル分利用可能です。 文字だけでの制作も可能ですので是非ご利用ください。 https://factory.pixiv.net/item_groups/new 今回は、このテキスト入力機能のフロントエンド実装、 特に React と SVG でいかに文字レイヤーを表現するかについてご紹介したいと思います。 SVG にとって文字レイヤーとは何
「自社で勉強会ってどうやるの？」おさえておきたいポイントとピクシブ独自のこだわり - pixiv inside
こんにちは！ディレクターのyukirby_です。 ピクシブでは、月に1回のペースでディレクターやエンジニアの勉強会が開催されています。 今回は、ピクシブ社で開催されている社外向け勉強会の運営体制についてご紹介します。 勉強会の頻度と運用体制 昨年まで、ピクシブで開催されるディレクターやエンジニアの勉強会は3ヶ月に1回くらいの頻度でした。 しかし今年から徐々に開催頻度が増え、ついには1ヶ月に1回という頻度で開催されるようになってきました。 頻度が少なかった昨年までは新卒メンバー中心に都度設営準備をしていましたが、開催頻度も増えてきたため役割に名前をつけて、運用体制を明確化しました。 役割は2つあります。1つは、主に社外とのやりとりを担当する『主催者』です。もう1つは、社内で備品や人員・スケジュールの調整を担当する『まとめ役』です。それぞれ1人ずつ別の人をアサインすることにしました。 役割を分
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 | さくらインターネット
さくらインターネットとピクシブが業務提携し、画像の変換・配信サービス「ImageFlux」を提供 〜ファーストユーザーとして、メルカリが利用開始〜 自社運営のデータセンターでインターネットインフラサービスを提供するさくらインターネット株式会社（本社：大阪市中央区、代表取締役社長：田中 邦裕）とイラスト投稿・交流サイト「pixiv」を運営するピクシブ株式会社（本社：東京都渋谷区、代表取締役社長：片桐 孝憲）は業務提携し、画像処理や画像配信において必要となる画像変換機能とコンテンツ配信をワンパッケージ化したサービス「ImageFlux（イメージフラックス）」を2016年12月13日より提供開始します。また、サービス契約前に全ての機能を試すことができる「無料トライアル」を併せて提供します。 「ImageFlux」は、レンタルサーバーやクラウドなどのインターネットインフラサービスやコンテンツ配信な
pixivにアクセス解析機能が付きましたよ（前編） - pixiv inside [archive]
こんにちは。UI大好きフロントエンド担当の@ykskです。主な仕事はコメントを書くことです。。 さて、先日pixivにプレミアム会員限定のアクセス解析機能が付きました。 プレミアム会員の方はこちらからご自分のレポートを見ることがきます。会員でない方はこちらに登録ページが、また、こちらにサンプルページがあります。主な機能は現在のところ以下の通りです。 イラストの全作品とそれぞれの作品についての閲覧数、総合点/評価回数、コメント数、ブックマーク数と被フォローユーザー数を直近1週間のグラフで見ることができる 作品のリファラー（pixiv内外のどこから訪問されたか）を見ることができる 最近反応のあった作品のリストを見ることができる 今回僕はUIの設計とJS、HTML、CSSの実装を担当したのですが、その際メイン機能のグラフを描く部分ではD3というデータのビジュアライズに特化したライブラリを使ってみ
![pixivにアクセス解析機能が付きましたよ（前編） - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a577b35d1a6c5ee98e11e5ac643959a307edc542/height=288;version=1;width=512/http%3A%2F%2Fdev.pixiv.net%2Fimg%2Finside%2Fyksk.png)
二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]
こんにちは、エンジニアのみどです。 ピクシブは、イラスト1枚で簡単にオリジナルグッズが作れるサービス pixivFACTORY を開発しています。 そのpixivFACTORYのプレビューに焦点を絞った勉強会を社内で行いました。 今回は、その勉強会の内容を公開したいと思います。 プレビューとは pixivFACTORYでは、グッズの仕上がりのイメージを確認する機能を提供しています。 この機能は、チーム内でプレビューと呼ばれていて、pixivFACTORYの売りのひとつになっています。 今回の勉強会では、ピクシブのエンジニアがこのプレビューに関する技術やノウハウについて発表を行いました。 pixivFACTORYのプレビューを支える技術 まず、私がアプリケーションサーバ側の処理について発表しました。 ImageMagickやBlenderといったソフトウェアをどのように使い分けているかが見所
![二次元から三次元を作る方法 — サーバ内でBlenderを動かしてみたら意外にもイケていたという話 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/c0eaf03191447a1f2ff35760bd0a271a3233031c/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20150924%2F20150924161502.png)
pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]
はじめましてこんにちは。pixivでアルバイトをしているhakatashiです。 さる6月10日、パソコン版pixiv小説にて縦書き表示機能がリリースされました。この開発のあらかたを担当したので、今回の縦書き機能開発における裏側を紹介いたします。 構想 縦書き機能開発にあたり、設計段階からその大部分を一任されました。小説機能開発において自分の中に絶えず理念として存在していたのは、ユーザーに最高の読書体験を提供することです。縦書きによって得られる利益を最大化し、快適な閲覧を支援するために、以下のような構想を置きました。 縦書き横書きの組版の差異における違和感を可能な限り軽減すること。 スクロールとページングを融合した、柔軟で快適な閲覧インターフェイスを提供すること。 この2点について詳しく解説します。 縦組版 まず、ウェブブラウザで縦書き表示を実現するにあたり、どのような手法をとるかという問
![pixiv小説縦書き機能 開発の裏側 ～横のものを縦にする～ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/8cb8c8e15c630ee29bd00c32234b431a93a2053d/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhakatashi%2F20150615%2F20150615155753.png)
ブラウザ上で画像処理 ～漫画のコマを領域分割する～ - pixiv inside [archive]
はじめに こんにちは、pixiv でアルバイトをしていた arayuji です。 今回はこれまでやってきたことのまとめとして、漫画やイラストに対する画像処理についてご紹介します。 一口に画像処理といっても様々なものがありますが、ここでは漫画のコマや白黒のイラストを簡単に領域分割する手法についてお話しします。 基本的な画像処理から高度な最適化処理まで、すべての処理をブラウザ上で 実現しました。 実際のコードも、pixiv/manga-segment · GitHubにあるので、興味がある方は見てみてください。 デモ トップに載せた画像が動作イメージなのですが、わかりにくいと思うのでデモを用意しました。（Chrome 40 / Firefox 35 / IE 11 で動作確認しましたが、IE では非常に遅いので注意してください） 右側のパレットで色をひとつ選んで、左側の画像の上にマウスで線を描
pixivのサムネイル事情 - pixiv inside [archive]
この記事はピクシブ株式会社Advent Calendar 12/10の記事です。 こんにちは、インフラチームの@harukasanです。 さて、今日はpixivで使用しているサムネイル変換サーバについて紹介しようと思います。 pixivにはたくさんのサムネイルがある pixivにはうんざりするほどたくさんの種類のサムネイルがあります。 これは対応しているプラットフォームが多く、また画面毎にもサイズが異なるからです。 PC版であるwww.pixiv.netだけでも10種類以上のサムネイルが使用されています。 また、サムネイルにはアスペクト比を固定したものと、スクエアにクロップした2種類があります。 (Ugoira Tech Talks: Ugoku Backendより) 従来の方法ではこれらのサムネイルをアップロード時に生成していたため、サムネイル生成を非同期化するなどして対応していました。
![pixivのサムネイル事情 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a7795bb63b5f0ec25d6ef004b131815b4baf0e9f/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fharukasan%2F20141210%2F20141210214738.png)
カゲプロの二次創作をニコ動とpixivのデータから調べてみた (1/3)
独自に収集したデータを使って、みんな知ってるようで知らないニコニコ動画の現在を紹介していきます。第23回はアニメ化で話題の「カゲロウプロジェクト」を取り上げてみたいと思います。連載一覧はこちら。 明治大学米沢嘉博記念図書館スタッフでニコニコ学会β幹事。趣味で同人誌やニコニコ動画関連の研究をしてる人。記事に使ったデータ元の『ニコニコ統計データハンドブック2014』など同人誌をコミケで頒布。ブロマガでは連載記事の補足も。 Twitterアカウントは@myrmecoleon。関わった近著に『進化するアカデミア 「ユーザー参加型研究」が連れてくる未来』（イースト・プレス刊）。右の画像は筆者を擬人化？して描いてもらったキャラ「ありらいおん子」。男の娘。 ■Amazon.co.jpで購入 ボカロ曲から始まったメディアミックス 「カゲロウプロジェクト」 「カゲロウプロジェクト」は「カゲロウデイズ」をはじ
超大量絵馬ができるまで - pixiv engineering blog
こんにちは。pixivのデザイナー@yspです。 おかげ様でpixivのユーザー数が10,000,000を突破しました。 そのタイミングで、2月22日に超大量絵馬という物をリリースしました。 今日はサクッと「超大量絵馬」企画がどんな感じで始まり、何故この形に着地したのかを書いておきます。 そもそもpixivは、ユーザー数の切りがいい所で何かしらのイベントをやってます。 今回もその一環なんですが、10,000,000という大事な節目です。 @yksk先生とUIについて侃々諤々の議論をしている最中に、 弊社のディレクターのスーさんが遠慮しがちにこう言ってきたわけです。 スーさん「Yさん、10,000,000ユーザー企画お願いします」 僕「えっ、、、お、、おう、、（白目」 10,000,000ユーザー企画という大事な企画にご指名とあらばもうやるっきゃない☆ こんな運びでこの企画は始まりました。
「超大量絵馬」の裏側 (1) - pixiv engineering blog
こんにちは、@harukasanです。 普段はpixivのインフラチームでpixivのインフラや画像配信インフラを担当しています。 今回は社内でおもしろそうな話をしてたので聞いていたところ、1,000万ユーザー記念企画をやることになっていました。 さて、今日は「超大量絵馬」企画がどのように動いているかをさくっと解説したいと思います。 「超大量絵馬」の主な機能 今回の「超大量絵馬」は3人のエンジニアがフルコミットで開発しました。 プロトタイピングが始まったのは1月の中旬くらいでしたが、 前回の記事にあったとおり、絵馬の形が決まってから本体の開発期間は2週間少ししかありませんでした。 開発しないといけないことはたくさんありましたが、次の3つがメイン機能です。 隣の人が描いているのがわかるリアルタイムお絵かき サーバで生成したサムネイル画像をスクロールして閲覧できるビューア 誰が描き始めたかわか
pixivにアクセス解析機能が付きましたよ（前編） - pixiv engineering blog
こんにちは。UI大好きフロントエンド担当の@ykskです。主な仕事はコメントを書くことです。。 さて、先日pixivにプレミアム会員限定のアクセス解析機能が付きました。 プレミアム会員の方はこちらからご自分のレポートを見ることがきます。会員でない方はこちらに登録ページが、また、こちらにサンプルページがあります。主な機能は現在のところ以下の通りです。 イラストの全作品とそれぞれの作品についての閲覧数、総合点/評価回数、コメント数、ブックマーク数と被フォローユーザー数を直近1週間のグラフで見ることができる 作品のリファラー（pixiv内外のどこから訪問されたか）を見ることができる 最近反応のあった作品のリストを見ることができる 今回僕はUIの設計とJS、HTML、CSSの実装を担当したのですが、その際メイン機能のグラフを描く部分ではD3というデータのビジュアライズに特化したライブラリを使ってみ
トップページを刷新した話 - pixiv engineering blog
こんにちは。Redmineのバックログ・プラグインが好きで「Redmine使いやすいですよね！」と言ったら「Redmineを使いやすいって言ってる人を初めて見た」と言われたedvakfです。今年はバックログの年にしたいです。 最近pixivのログイン前トップページが新しくなりましたね。イラストを全面に押し出したクールなデザインと、ウィンドウをリサイズしたりするとウニウニ動くアニメーションは新鮮だったのではないでしょうか。常にログインする設定の人も一度はログアウトして見てみてください。(アニメーションはCSSアニメーションに対応してるブラウザだけですが) 僕はその部分のリリースには関わってないんですが、コードを読んだりしてどんなことをしているのか解説したいと思います。 （注：2013年1月末時点での実装についての解説です） イラストデータ 使用するイラストは、現在は直近のランキングからランダ
ネットから世界に羽ばたく20代の“プロ絵師”たち (1/5)
アースが初音ミクとのコラボレーションをはじめたのは今年3月から。それまで宮崎あおいをイメージキャラとしていた同社。「ミク」を扱うのはリスクもあったが、どうせなら全力でぶつかろうと、商品第1弾を全国191店舗で展開し、勝負をかけた（関連記事）。 結果は、完売の店舗が続々とあらわれるほどの大人気。第2弾も大好評で、今回発表された新作は第3弾にあたる。間もなくアジアを中心に海外でも商品を展開していくという。 アースが仕事を頼んできたイラストレーターは、ちほPさん、ちゃもーいさん、雨さんの3人。全員女性で20代前半、ネットでイラストを発表してきた「絵師」と呼ばれる作家たちだ。若くして仕事をまかされ、いわばプロ絵師となった彼女たちにとって、ネットはどんな場所なのだろう。そしてこれからの時代、作家たちの仕事はどう変わっていくのだろうか。 今回は3人に加え、「初音ミク」開発元であるクリプトン・フューチャ
「アルティメットセブンイラストコンテスト」受賞作発表
pixiv事務局です。 8月2日（火）～9月20日（火）に開催されたインパクト×pixiv「アルティメットセブンイラストコンテスト」の受賞作品が決定いたしました。 本企画は「ファンタジー部門」「マシン部門」「モンスター部門」の三部門でイラストを募集するコンテストで、優秀作品は株式会社インパクトより今秋リリース予定の新作カードゲーム、「アルティメットセブン」にカードとして登場します。 実際のゲームでの作品の登場を楽しみにお待ちください。 それでは、最優秀作品と入選作品を発表します。 【ファンタジー部門 最優秀賞】 Amazonギフト券3万円分 タイトル：『不撓の騎士ロダン』 受賞者：TAKA-Fさん 【マシン部門 最優秀賞】 Amazonギフト券3万円分 タイトル：『ヒアデス』 受賞者：高円寺の痩せ駝鳥さん 【モンスター部門 最優秀賞】 Amazonギフト券3万円分 タイトル：『バロン』 受
Pixivと株式会社インパクトの共同企画が許されるべきではない理由 - 未来私考
ソーシャルゲーム「HARLEM HEART」イラストコンテストの応募要項へのツッコミ - Togetter こちらの件。正直、初見では簡単に善悪の付く問題ではないかもしれないな、と思った。Pixivでオリジナルイラストを集めてそれでカードゲームを作るという企画自体は上手くすれば面白いものになるかも？とも思うし、確かに応募要項は怪しげだが、こういった要項に過剰防衛的なお約束文言が入るのは、まあ良くないこととは言え良くあることでもある。実際に額面通りに運用されるようなことはまずないし…とも思ったのだが、同社が2011年の8月に同様の企画を立ち上げており、その顛末を調べるにつれ、これは許されざる邪悪な行為だと確信したので、あえてブログ記事にすることとした。 最低限の約束すら守っていない まず外堀を埋めておこう。2011年8月に開催されたアルティメットセブンイラストコンテストの応募要項に次のような
ソーシャルゲーム「HARLEM HEART」イラストコンテストの応募要項へのツッコミ
株式会社インパクト @impact_e 本日より、pixivにて弊社新作「HARLEM HEART」イラストコンテストが開催となりました。皆様奮ってご参加頂ければ幸いです。 【公式企画】HARLEM HEARTイラストコンテスト | pixiv事務局 #pixiv http://t.co/uQT6Tht5 2012-04-10 18:11:49 三日月沙羅 @sara_crescent なんかpixivのHARLEM HEARTイラストコンテストっての。あれって低価格でイラストを手に入れようとしている企業側の思惑がぷんぷん臭うのだけど気のせいかしらねーー ただの入選が数点（しかも未定）で採用だけってあたりとか。なんだかなぁーと(º﹃º) 2012-04-10 15:57:14
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
#メイキング #壁紙 SVGコードのサンプル - equal Oneの小説 - pixiv
#艦これ 第１話「邂逅」 - 某氏屋のマンガ #艦これ漫画 #本当は怖い艦これ #艦これ5000users入り - pixiv
飛田ニキイチ
