Perlで実装されたLINE NEWSの裏側

34
Perl LINE NEWS LINE (@nipotan)

Transcript of Perlで実装されたLINE NEWSの裏側

Page 1: Perlで実装されたLINE NEWSの裏側

Perl LINE NEWS LINE (@nipotan)

Page 2: Perlで実装されたLINE NEWSの裏側

@nipotan

nipotan

https://github.com/nipotan

LINE 3

http://nipotan.com

Page 3: Perlで実装されたLINE NEWSの裏側

livedoor News LINE NEWS

• •

LINE

Page 4: Perlで実装されたLINE NEWSの裏側

livedoor News livedoor Blog

BLOGOS LINE NEWS

Perl

Sledge Sledge

Pickles Amon2

Page 5: Perlで実装されたLINE NEWSの裏側

LINE NEWS

Page 6: Perlで実装されたLINE NEWSの裏側

● Amon2 ● JSON API ● Web ● Admin CMS

Jul 2013

MAU300

Page 7: Perlで実装されたLINE NEWSの裏側

( 2012 2 )LINE NEWS

Page 8: Perlで実装されたLINE NEWSの裏側

LINE NEWS DIGEST LINE Messaging API - https://developers.line.me/ja/docs/messaging-api/reference/

MAU600

Page 9: Perlで実装されたLINE NEWSの裏側

LINE NEWS DIGEST

Page 10: Perlで実装されたLINE NEWSの裏側

● Perl

● Imager

LINE NEWS DIGEST

Page 11: Perlで実装されたLINE NEWSの裏側

use strict; use warnings; use utf8; use Imager; use Imager::Font; my $header = Imager->new(xsize => 1040, ysize => 140); # $header->box(filled => 1, color => '#ffffff');

my $logo = Imager->new(file => '/path/to/line-news-logo.png'); # $header->compose(src => $logo, tx => 36, ty => 40);

# my $hiragino_w3 = Imager::Font->new(file => ‘/path/to/hiragino-kakugo-w3.otf');

my $hiragino_w6 = Imager::Font->new(file => '/path/to/hiragino-kakugo-w6.otf');

# my $go = 'YAPC::Okinawa '; my $bbox = $hiragino_w3->bounding_box(string => $go, size => 28); # my $x = 1040 - 36 - $bbox->pos_width; # 36 px

$header->string( font => $hiragino_w3, text => $go, x => $x, y => 80, size => 28, color => '#a0a0a0', aa => 1, );

LINE NEWS DIGEST

Page 12: Perlで実装されたLINE NEWSの裏側

LINE NEWS DIGEST

0%

55%

Page 13: Perlで実装されたLINE NEWSの裏側

my $headline = Imager->new(file => '/path/to/yapcjapan2018.png');

# y 370 793 423 px # 0% 55% # 1040x1 my $line = Imager->new( xsize => 1040, ysize => 1, channels => 4, # alpha channel ); $line->box(filled => 1, color => '#000000'); #

my $opacity = 0.00; my $increment_per_line = (0.55 - $opacity) / 423; # 1 px

for my $y (370 .. 793) { $headline->compose( src => $line, tx => 0, ty => $y, opacity => $opacity, ); $opacity += $increment_per_line; }

LINE NEWS DIGEST

Page 14: Perlで実装されたLINE NEWSの裏側

# my $tp = Imager->new( xsize => 1040, ysize => 794, channels => 4, # alpha channel );

# my $title = 'YAPC::Japan '; # my $description = '2018 3 3 OIST@ Perl '; # $tp->string( font => $hiragino_w6, text => $title, x => 36, y => 684, size => 70, color => '#000000', aa => 1, );

$tp->string( font => $hiragino_w3, text => $description, x => 36, y => 748, size => 40, color => '#000000', aa => 1, ); # 43% $headline->compose(src => $tp, tx => 0, ty => 0, opacity => 0.43);

LINE NEWS DIGEST

Page 15: Perlで実装されたLINE NEWSの裏側

$headline->string( font => $hiragino_w6, text => $title, x => 36, y => 682, size => 70, color => '#ffffff', aa => 1, );

$headline->string( font => $hiragino_w3, text => $description, x => 36, y => 746, size => 40, color => '#ffffff', aa => 1, );

LINE NEWS DIGEST

Page 16: Perlで実装されたLINE NEWSの裏側

my $img01 = Imager->new(file => '/path/to/ao-no-doukutsu.jpg'); my $line = Imager->new( xsize => 386, ysize => 1, channels => 4, ); $line->box(filled => 1, color => '#000000'); my $opacity = 0.00; my $increment_per_line = (0.55 - $opacity) / 203; for my $y (171 .. 374) { $img01->compose( src => $line, tx => 0, ty => $y, opacity => $opacity, ); $opacity += $increment_per_line; } my $tp = Imager->new( xsize => 386, ysize => 375, channels => 4, ); $tp->string( font => $hiragino_w3, text => ' ', x => 36, y => 338, size => 40, color => '#000000', aa => 1, ); $img01->compose(src => $tp, tx => 0, ty => 0, opacity => 0.43); $img01->string( font => $hiragino_w3, text => ' ', x => 36, y => 336, size => 40, color => '#ffffff', aa => 1, );

LINE NEWS DIGEST

Page 17: Perlで実装されたLINE NEWSの裏側

my @titles = ( ‘ ’, ' ', ‘ ', ' ', ' ', ); my @text_news; for my $i (0 .. 4) { my $text = Imager->new(xsize => 654, ysize => 150); # $text->box(filled => 1, color => '#ffffff'); my $line = Imager->new(xsize => 654, ysize => 2); # $line->box(filled => 1, color => '#dde0e6'); $text->paste(left => 0, top => 148, img => $line); $text->string( font => $hiragino_w3, text => $titles[$i], x => 36, y => 91, size => 41, color => '#000000', aa => 1, ); push @text_news, $text; }

LINE NEWS DIGEST

Page 18: Perlで実装されたLINE NEWSの裏側

# my $footer = Imager->new(xsize => 1040, ysize => 140); $footer->box(filled => 1, color => '#ffffff');

my $arrow = Imager->new(file => '/path/to/arrow.png'); $footer->compose(src => $arrow, tx => 984, ty => 53);

$footer->string( font => $hiragino_w6, text => ' ', x => 36, y => 84, size => 36, color => '#284096', aa => 1, );

LINE NEWS DIGEST

Page 19: Perlで実装されたLINE NEWSの裏側

# my $base = Imager->new(xsize => 1040, ysize => 1824); $base->box(filled => 1, color => '#ffffff');

$base->paste(left => 0, top => 0, img => $header); $base->paste(left => 0, top => 140, img => $headline); $base->paste(left => 0, top => 934, img => $img01); $base->paste(left => 0, top => 1309, img => $img02); my $y = 934; for my $i (0 .. 4) { $base->paste(left => 386, top => $y + $i * 150, img => $text_news[$i]); } $base->paste(left => 0, top => 1684, img => $footer);

LINE NEWS DIGEST

Page 20: Perlで実装されたLINE NEWSの裏側

Imager

Page 21: Perlで実装されたLINE NEWSの裏側

Apr 2016

Apr 2015 LINE

Web App

Feb 2017 LINE 5

Dec 2015 LINE

LINE NEWS

MAU1200

MAU2200

MAU4100

MAU5900

Page 22: Perlで実装されたLINE NEWSの裏側

…● LINE NEWS DIGEST

Page 23: Perlで実装されたLINE NEWSの裏側

Request count1 LINE NEWS

Page 24: Perlで実装されたLINE NEWSの裏側

By Facebook

Instant Articles

By Google

AMP

By SmartNews

Smart View

0.5

Page 25: Perlで実装されたLINE NEWSの裏側

● ● SPA (Single-Page Application)

● HTML

● ● id auto paging

● ● + localStorage

0.5

UIT++

Page 26: Perlで実装されたLINE NEWSの裏側

● ● CDN

● CDN ● ● Cache-Control

● HTTP/2 ● origin HTTP/1.1 CDN ● static content proxy connection reuse

0.5

Page 27: Perlで実装されたLINE NEWSの裏側

● KVS ● HTTP

● PSGI

● ● Primary Key Array

● ● Primary Key get() || get_multi()

0.5

Page 28: Perlで実装されたLINE NEWSの裏側

MISSION COMPLETED

Page 29: Perlで実装されたLINE NEWSの裏側

LINE NEWS

Page 30: Perlで実装されたLINE NEWSの裏側

● LINE NEWS vs Perl ● Perl ● Java ● Perl 5 vs Java 9

● Perl & Java 3 ● Perl ● Perl …

LINE NEWS

Page 31: Perlで実装されたLINE NEWSの裏側

● Perl:Java 6:4 ( )

● ● Web API http://d.hatena.ne.jp/naoya/20060228/1141094456 ●

● ● Java

● Java ● Perl

● Perl Web API Java ● “ ” …

LINE NEWS

Page 32: Perlで実装されたLINE NEWSの裏側

● Perl ● Java GOOD

● Perl ● LINE Perl ●

LINE

Page 33: Perlで実装されたLINE NEWSの裏側

● Shibuya Perl Mongers #1 (Jan 31, 2003) ● 15 20 Perl ● YAPC::Asia (2006 2015) Perl ● 40 …

● Okinawa Perl Mongers ●

Page 34: Perlで実装されたLINE NEWSの裏側

THANK YOU