値	フィルタリング形式	なに
0	None	そのまま出す
1	Sub	左ピクセルとの差分
2	Up	上ピクセルとの差分
3	Average	左ピクセル・上ピクセルの平均をとったものとの差分
4	Paeth	左ピクセル・上ピクセル・左上ピクセルを Paeth predictor したものとの差分

上に貼った事故画像は None と Sub を正しく実装したもので、1 行目だけ正しく表示されている。

None だと「圧縮とは？？」ってなるしまあ Sub しかねーかって感じがした
— やましー (@yamasy1549) 2017年9月13日

Paeth predictor

Paeth predictor はざっくり言うと、左・上・左上のうちどれが一番近いかなーというのを調べる。縦方向と横方向で変化の小さいほうを選び、縦と横で全く違う感じに変化してたら中間として左上をとるような…

# a: 左
# b: 上
# c: 左上

def paeth_predictor(a, b, c)
  p = a + b - c
  pa = (p - a).abs
  pb = (p - b).abs
  pc = (p - c).abs
  
  if pa <= pb && pa <= pc then a
  elsif pb <= pc then b
  else c
  end
end

雰囲気こんなかんじで、これを R / G / B についてやる。

PNG Specification: Filter Algorithms

かんそう

たのしかった。気が向いたら、実装飛ばしてるところをもうちょっと書きたい。

2017-09-12

ピクシブさんでお世話になりました

intern

recruit.pixiv.net

この夏前半は pixiv SUMMER BOOTCAMP 2017 というものに参加していました。

応募

春のインターンに受かってたんだけど、留学計画とか諸々の事情で都合が合わず断念した過去…
夏は絶対行くぞと思っていて、 GitHub 選考で応募して受かった
- 大雑把にアカウント貼り付けるだけで良かったので最高
- 応募してから急に不安になって、意味もなく private にしていたリポジトリを public にしたり topics を追加したりそわそわしていた
一次選考（通常 or GitHub）が終わるとオンライン面接がある
- 普通にお話するだけかなぁと思っていたらその場でコード書いてって言われて頭が真っ白
- 内容自体は新しい言語を勉強するときに1日目で当然やるような簡単な内容なんだけど、初めてだったものであわあわしていた
総応募人数を聞いた、よく受かったなぁとびっくりした
- 大体こういうところには高専生が数人いるものですが、今回は自分だけでした
- かなしいよ〜〜 :sob:

やったこと

初日は準備体操みたいに軽微な修正タスク
2日目から4日目はそれぞれ課題を決めてやっていく感じ
最終日は成果発表の資料を作っていた
面接でデザインに興味ありますと言ったので、エンジニア出身のデザイナーさんにメンターになってもらった
5日間で3回、30分ずつ Pawoo / インフラ / 基盤についての講義を受けた

リリースされたもの

www.pixiv.net

f:id:yamasy1549:20170912115619p:plain

おすすめユーザーを作品中心に紹介するページをつくった
- 今はABテスト状態で一応リリースまでいけました :tada: ~~月曜日から全員に公開されるみたいです！~~ →された
- https://www.pixiv.net/discovery/users
自分が支部ライトユーザーで、ジャンルによらずひたすら作品を眺めたい気持ちがあった
- ランダムな出会いを推していきたい感
- それを実現させてもらえた感じで、うれしい
- おすすめユーザーなんだけど、作品がメイン（作品が全体に占めるスペースが大きくなった）
実装したいけど間に合わなかったところもある
- 今は5作品しか見れないけど、同じユーザーの作品を横スライドでカルーセル的に見れるようにする
- ユーザーの趣味に合う「おすすめユーザー」以外にも、「人気ユーザー」を出すタブをつくりたい
- いつか実装されたらめっちゃうれしいです :pray:

技術的なやつ

React && TypeScript
- React は普段使ってて TS もほんのちょっと触ったことはあったので、全く新しい技術が来てやべぇ…とならずに済んだ
- でもバックエンドの PHP を書いて commit したのは初めてだった
自分の良くないところがオープンになってｳｯ!ってなった
- 既存のコードを読むのが下手でずっと同じところをぐるぐるしてたり
- 命名が雑だったり
- それでも生きてます！！！
これからもメンテしていく可能性があるコードなので、細かいところまでレビューをもらえた
- うれしい
px 単位できっちり組んでいくのが楽しかった
- いろいろなサイズは 4 とか 8 の倍数で決めるといい感じになるのを知った
- Intro to The 8-Point Grid System – Built to Adapt とか

ピクシブさんのすきなところ

「言語やフレームワークを統一する会社もあるが、そうしないのか？」

（pixiv 本体は PHP だけど他のプロダクトでは色々使ってる、という文脈で…）統一する動きはない。もしあるフレームワークを使っていて、それが死んだときにみんな一緒に死んでしまうといったことがないから。仮に PHP が絶滅しても他のプロダクトでイケてるものを使っていれば会社としては生き延びることができる。あと大事なのは「テンションのアガるやつを使う」。

そのときどきで、チームとして効率よく速く価値を届けられる言語やフレームワークを選んでいるということでした。

エンジニアさんの勢いがつよい

エイってやってバーンで HTTPS 化してしまったり、よっしゃやるぞって言って Pawoo ができてしまったり、技術力とエネルギーで殴りかかってる感じが超絶かっこよくて痺れます。憧れる〜

オフィスかわいい

とにかく賑やかだった。明るくてすき

f:id:yamasy1549:20170911205417p:plain

新宿御苑が近い

インターン期間中は会社の方でホテルを用意してもらえて、毎朝新宿御苑を抜けて通勤していました。緑いっぱいあるし朝は人が少ないです。ピクシブさんに就職する人は新宿門か大木戸門の近くに住んだら最高だと思います。¥2000で年パスがゲットできるので10日通えば元がとれます。

感想

開発中にたくさんのイラストを見る→自分も描きたいなぁと思って、帰ってからペンを握る→挫折する（ループ）
自分のよわいところがいたいほどわかった
pixiv 本体だけじゃなくて、他のサービスの開発の様子も見れたら楽しそうと思った
講義では違う分野の話が聞けて勉強になった
- 画像を大量に扱うのでそのあたりのサーバー構成のお話とか聞けて良かった
- はやいすごい
圧倒的猛者に囲まれてしあわせな5日間でした。このような機会をいただき、ありがとうございました！

デザイナさんがメンターだったのでそういうお話をできてめっちゃ良かった

自社サービスをデザインするときに考えること
ユーザーが増えると、どの層にアプローチするかでやり方が全然変わってきて難しい話
- 画面の向こうにはユーザーというかコミュニティーがいるみたいな責任感
デザインするのもエンジニアリングするのも、情報を整理するという点で同じ
- 論理的だしパズル組んでる感じがする、エンジニアさんがデザイナさん的な仕事をするのも全然ありなんじゃないか？
サービスを見て「なんでこんなデザインになってるんやろ」を考えるのが好きならたぶんデザイナに向いてる
こういうお話大好きなのでもっと聞きたい！

やっぱりこれ

エイってやってバーンで HTTPS 化してしまったり、よっしゃやるぞって言って Pawoo ができてしまったり、技術力とエネルギーで殴りかかってる感じが超絶かっこよくて痺れるよなぁ
— やましー@38/100 (@yamasy1549) 2017年9月8日

5日間は短かったです。力をつけて、いつかもうちょっと長い間ピクシブさんでお世話になりたいなぁなんて思っています。

2017-09-11

このブログのデザインをちょっといじった

design programming

気が向いた

昔書いた雑な CSS をそのまま使ってたんだけど、気が向いたのでもう少し書いてみることにした。

雰囲気で書いてるので、ちゃんとなってないところがありそう。また気が向いたら調べてみる。書き方も超絶汚いので、これも気が向いたら書き直す。

github.com

思ったこと

普通に # 見出し ってすると <h1>見出し</h1> になる
- 各記事のタイトルが <h1> かなぁと思っているので、記事内の一番大きな見出しを <h2> にするには ## 見出し みたいにふたつ書かなきゃいけない
他の記事を貼ったときとかは <iframe> にされるんだけど、中の CSS は直接いじれないので放置してる
記事のタイトル近くにある日付 2017-9-11 のハイフンは <span class='hyphen'> になってて最高（半角ではハイフンがちょっと下がっててきもちわるい）なんだけど、他のところでは class がついてなくてもにょる
やってないけど、広告のところをそーっと display: none にしてたら怒られるんかな
スマホで見た時は、はてなデフォのやつで良さそう
- 気力がない
- 最近はn周回って極端に「スマホってテキスト読めたら良くない？（NO CSS）」って思ってる

ブログタイトルの青い落書きがいい感じにキマった。この落書きは適当にぐちゃぐちゃーってやっただけなので、特に意味はない。

ようじょのおえかきちょう

ふぇぇお医者さんにペン持ったらダメっていわれた〜〜

PNGをよんで表示したい！

動機

つくったもの

PNG の中身（超ざっくり）

シグネチャ

チャンク

フィルタリング