LINE Developer Meetup Slide

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