Slide 1
Slide 1 text
クリエイターズ着せかえ
を支える技術
LINE Fukuoka
@ueneid
2016-07-20
Slide 2
Slide 2 text
自己紹介
• 上野 英治 @ueneid
• LINE Creators Market
– クリエイターズ着せかえの開発を担当しました
• Server Side Engineer
– 主に Perl
– Elixir 好きだけど最近追えてない
2
Slide 3
Slide 3 text
アジェンダ
• LINE Creators Market
– 環境
– サーバー構成
– サービス構成
• クリエイターズ着せかえ開発
– Apache ThriF
– 画像処理
3
Slide 4
Slide 4 text
LINE Creators Market とは
hHps://creator.line.me/
4
Slide 5
Slide 5 text
LINE Creators Market とは
• 販売スタンプ数：280,000 セット以上
• 販売着せかえ数：11,000 セット以上
• クリエイター登録数：580,000 人以上
（数値はいずれも 2016/07/10 時点のもの）
5
Slide 6
Slide 6 text
環境について
• サーバーサイドの言語は Perl
– Amon2 を採用
• フロントエンドは AngularJS1.x
– Gulp + Babel で ES2015 で記述して modern に
• DB は MySQL
• キャッシュとして Memcached
• Nginx + Starlet
– ユーザー向け静的ファイルは全て CDN 利用
6
Slide 7
Slide 7 text
Internet
Proxy Servers
App Servers
(For Management)
App Servers
(For Users)
DB Servers
Batch Servers
CDN
Log Aggrega\on Servers
Memcached Servers
Sta\c Origin Servers
Proxy Servers
LINE Creators Market
サーバー構成概要
7
Slide 8
Slide 8 text
LINE Creators Market
サービス構成概要
Creators Market
Shop
NEON
Billing
LAN
XLT
Stats
LINE Web Login LINE Pay
8
Slide 9
Slide 9 text
LINE Creators Market
サービス構成概要
Creators Market
Shop
NEON
Billing
LAN
XLT
Stats
LINE Web Login LINE Pay
-> hHps://developers.line.me/
9
Slide 10
Slide 10 text
LINE Creators Market
サービス構成概要
Creators Market
Shop
NEON
Billing
LAN
XLT
Stats
LINE Web Login LINE Pay
10
Slide 11
Slide 11 text
LINE Creators Market
サービス構成概要
Creators Market
Shop
NEON
Billing
LAN
XLT
Stats
LINE Web Login LINE Pay
11
Slide 12
Slide 12 text
LINE Creators Market
サービス構成概要
Creators Market
Shop
NEON
Billing
LAN
(LINE App
No\ce)
XLT
Stats
LINE Web Login LINE Pay
12
Slide 13
Slide 13 text
技術的な話
13
Slide 14
Slide 14 text
Apache ThriF
14
Slide 15
Slide 15 text
Apache ThriF とは
“Apache ThriF（アパッチ スリフト）は、「スケーラブルな
言語間サービス開発」のためにFacebookにて開発され
たRPCフレームワークである。これはソフトウェアスタッ
クとコード生成エンジンを組み合わせることで、C++、C#、
Java、Perl、Python、PHP、Erlang、Rubyなどの言語間に
て効率的かつシームレスに動作するサービスを開発
することを可能とする。”
hHps://ja.wikipedia.org/wiki/Apache_ThriF
15
Slide 16
Slide 16 text
色んな言語で使える
API サーバー作ろうぜ！！
16
Slide 17
Slide 17 text
Creators Market と ThriF
• Shop 側にある ThriF サーバー（armeria で実
装) に対して、リクエストを投げる
armeria については -> hHp://line.github.io/armeria/
• データ操作用の Perl module は自動生成
$ thri' -out /tmp/foo --gen perl /path/to/
your/idl.thri'
$ cat /tmp/foo/Bar.pm # auto-generated
17
Slide 18
Slide 18 text
ThriF: Set と Perl
18
Slide 19
Slide 19 text
ThriF: Set と Perl
• set: An unordered set of unique elements.
Translates to an STL set, Java HashSet, set in
Python, etc. Note: PHP does not support sets,
so it is treated similar to a List
hHps://thriF.apache.org/docs/types#containers
19
Slide 20
Slide 20 text
ThriF: Set と Perl
my $data = $client->get_data;
$client->update_data($data);
20
Slide 21
Slide 21 text
ThriF: Set と Perl
my $data = $client->get_data;
$client->update_data($data); # die
21
Slide 22
Slide 22 text
ThriF: Set と Perl
• こちらからデータをセットするときは Array
$data->{foo} = [‘bar’, ‘bazz’,…];
• データを受け取ったときは Hash
say Dumper $data->{foo}; # { bar=> 1, bazz=>
1,…}
22
Slide 23
Slide 23 text
[RESOLVED] ThriF: Set と Perl
• 自動生成されたモジュールにパッチを当てて
データ書き込み時も Hash で処理するようにし
た
• Apache thriF 側に p-r
hHps://issues.apache.org/jira/browse/THRIFT-3595
• Set 型の値が object の場合
-> Tie::RefHash を使う
23
Slide 24
Slide 24 text
画像処理でコケた話
24
Slide 25
Slide 25 text
PNG chunk: gAMA
• PNG ファイルの構成要素
PNG
25
Slide 26
Slide 26 text
PNG chunk: gAMA
• PNG ファイルの構成要素
PNG
header
26
Slide 27
Slide 27 text
PNG chunk: gAMA
• PNG ファイルの構成要素
PNG
header
chunk
chunk
chunk
chunk
chunk
…
chunk
27
Slide 28
Slide 28 text
PNG chunk: gAMA
• PNG ファイルの構成要素
PNG
header
IHDR
cHRM
gAMA
IDAT
tEXt
…
IEND
28
Slide 29
Slide 29 text
PNG chunk: gAMA
• PNG ファイルの構成要素
PNG
header
IHDR
cHRM
gAMA
IDAT
tEXt
…
IEND
29
Slide 30
Slide 30 text
PNG chunk: gAMA
• gamma = 1 のとき、入力と出力が同じ
rgb(200, 200, 200) -> rgb(200, 200, 200)
• gamma < 1 のとき、入力より暗めの出力に
rgb(200, 200, 200) -> rgb(150, 150, 150)
• gamma > 1 のとき、入力より明るめの出力に
rgb(200, 200, 200) -> rgb(250, 250, 250)
30
Slide 31
Slide 31 text
PNG chunk: gAMA
• gamma = display gamma * gAMA
= 2.2 * gAMA
(本当は、2.2 * gAMA / 100000 が正しい式ですが、説明しにくいので簡易
表記にしています）
• gAMA = 1/2.2 なら gamma = 1
31
Slide 32
Slide 32 text
PNG chunk: gAMA
• 処理後の画像が薄い？
Origin edited
1/4.4 1/2.2
32
Slide 33
Slide 33 text
PNG chunk: gAMA
• 処理後の画像が薄い？
1/4.4 1/2.2
2.2/4.4 = 0.5 2.2/2.2 = 1
33
Origin edited
Slide 34
Slide 34 text
PNG chunk: gAMA
• 処理後に gAMA を 1/2.2 -> 1/4.4 に戻す
Edited Restored
1/2.2 1/4.4
34
Slide 35
Slide 35 text
PNG chunk: gAMA
• 処理後に gAMA を 1/2.2 -> 1/4.4 に戻す
1/4.4
1/2.2
1/4.4
1/2.2 ?
1/4.4 ?
35
Slide 36
Slide 36 text
PNG chunk: gAMA
• 1/2.2 以外の gAMA は混乱を招く
36
Slide 37
Slide 37 text
PNG chunk: gAMA
• 1/2.2 以外の gAMA は混乱を招く
• ガンマ補正をかけて、1/2.2 の gAMA を持っ
ている状態にしよう！
37
Slide 38
Slide 38 text
[RESOLVED] PNG chunk: gAMA
• Imagemagick を使ってガンマ補正
• 補正値は、 gAMA / 2.2 で算出
(本当は、2.2 * gAMA / 100000 が正しい式ですが、説明しにくいので簡易
表記にしています）
$ convert /path/to/src.png \
-gamma 0.5 \ # 2.2 / 4.4
+gamma 0.45455 \ # 1/2.2
/path/to/dst.png
38
Slide 39
Slide 39 text
終わりに
• 次から次へと新機能、嬉しい悲鳴状態
• ガンマ補正みたいなめんどくさい修正でも
ちゃんとレビューしてもらえる！
• オープンソースにコミットする素敵な同僚がい
る！
• Perl 好きな方、お待ちしています！
-> むしろ嫌いでもいいです！！Java 化をとも
に進めましょう！
39
Slide 40
Slide 40 text
We’re Hiring!!
40