LINE Developer Meetup Slide

This slide written about "LINE Creators Market" and "Creators' Theme" was used at LINE Developer Meetup in Fukuoka #15 on 2016/07/20.

Transcript

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