Upgrade to Pro — share decks privately, control downloads, hide ads and more …

LINE Developer Meetup Slide

0e9897acc5534e5cf6b5329cc9035154?s=47 ueneid
July 27, 2016

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.

0e9897acc5534e5cf6b5329cc9035154?s=128

ueneid

July 27, 2016
Tweet

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