Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
個人で出来るWebサービスの作り方(YAPC::ASIA 2013)
Search
koba04
September 20, 2013
32
19k
個人で出来るWebサービスの作り方(YAPC::ASIA 2013)
個人で出来るWebサービスの作り方(YAPC::ASIA 2013) @koba04
koba04
September 20, 2013
Tweet
Share
More Decks by koba04
See All by koba04
フロントエンドの現在地とこれから
koba04
10
4.8k
Standing on the shoulders of giants
koba04
0
2.7k
React/Next によるアプリケーション開発のこれから
koba04
62
17k
フロントエンド刷新をプロジェクトとして進める際に気をつけていること
koba04
3
1.8k
How useEvent would change our applications
koba04
1
2.9k
kintoneフロントエンド刷新によるモノリスからの脱却とその先に目指す未来
koba04
3
15k
Make it Declarative with React
koba04
0
1.5k
Ready for React in 2019
koba04
2
1.6k
Algorithms in React
koba04
14
16k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
427
64k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Building Applications with DynamoDB
mza
90
6.1k
Thoughts on Productivity
jonyablonski
67
4.3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
65k
GitHub's CSS Performance
jonrohan
1030
460k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Transcript
ݸਓͰग़དྷΔWebαʔϏεͷ࡞Γํ YAPC::ASIA 2013 @koba04 139݄20༵ۚ
ࣗݾհ • @koba04 • #1982 • MobileFactory • Perl, JavaScript
... • http://about.me/koba04 139݄20༵ۚ
Web Service Petatube 2012/10ʙ (YAPC::ASIA2012) http://petatube.koba04.com/ CountDown LastFMRanking 2011/08ʙ http://cdlm.koba04.com/
139݄20༵ۚ
Slide WebαʔϏεΛ ࡞Δͱ͖ʹߟ͑ͨ͜ͱ http://koba04.com/slide/perl-casual-5/ ΤϯδχΞʹͳͬͯΈͯߟ͑ͨ͜ͱ http://koba04.com/slide/perl-casual-5/ 139݄20༵ۚ
WebαʔϏεΛ࡞Ζ͏ 139݄20༵ۚ
PerlͰΞϓϦέʔγϣϯΛ࡞ΕऴΘΓʁ • ެ։͢ΔڥͲ͏͠Α͏ʁυϝΠϯʁ • ࡞ͬͨΞϓϦέʔγϣϯԿͰಈ͔͢ͷ͔ʁ • σβΠϯɺϑϩϯτΤϯυͲ͏͠Α͏ʁ • ΞϓϦέʔγϣϯͷӡ༻Ͳ͏͠Α͏ʁ 139݄20༵ۚ
PerlͰΞϓϦέʔγϣϯΛ࡞ΕऴΘΓʁ • ެ։͢ΔڥͲ͏͠Α͏ʁυϝΠϯʁ • ࡞ͬͨΞϓϦέʔγϣϯԿͰಈ͔͢ͷ͔ʁ • σβΠϯɺϑϩϯτΤϯυͲ͏͠Α͏ʁ • ΞϓϦέʔγϣϯͷӡ༻Ͳ͏͠Α͏ʁ ʁʁʁ
139݄20༵ۚ
ٕज़తબ Nginxʁ Amon2ʁ MySQLʁ Redisʁ Apacheʁ Grunt.jsʁ Backbone.jsʁ Chefʁ Vagrantʁ
Bower.jsʁ sassʁ memcachedʁ Angular.jsʁ supervisorʁ daemontools? Cartonʁ Starletʁ Tengʁ CentOSʁ Ubuntuʁ 139݄20༵ۚ
ٕज़తબ Nginxʁ Amon2ʁ MySQLʁ Redisʁ Apacheʁ Grunt.jsʁ Backbone.jsʁ Chefʁ Vagrantʁ
Bower.jsʁ sassʁ memcachedʁ Angular.jsʁ supervisorʁ daemontools? Cartonʁ Starletʁ Tengʁ CentOSʁ Ubuntuʁ ԿΛ͍͍͑ͷʁ 139݄20༵ۚ
ͦͯ͠ɺফ͍͑ͯ͘ΞϓϦέʔγϣϯ... 139݄20༵ۚ
Ͱɺͪΐͬͱ·ͬͯ 139݄20༵ۚ
ݸਓͰ࡞Δͷ͔ͩΒΧδϡΞϧʹָ͠͏ • ৭ʑߟ͑ͯΒͳ͍ͳΒɺ·ͣͬͯΈͨํָ͕͍͠ • ໘നͦ͏ͳٕज़ΛऔΓೖΕͯΈΔͱָ͘͠։ൃग़དྷΔ • ϒϩάgithubQiitaͳͲɺใͨ͘͞Μ͋ΔͷͰಛघͳ͜ͱΛ͠ͳ͚Ε ͳΜͱ͔ͳͬͨΓ͢Δ • ࠷ॳ͔ΒᘳΛٻΊΔͷͰͳ͘·ͣࢼͯ͠ΈΔ
139݄20༵ۚ
ग़དྷΔ͜ͱ͔Βண࣮ʹ 1. Nginx + Starlet(Plack::Builder) + KyotoTycoon 1. Nginx +
Starlet(Amon2) + MySQL+ memcached Grunt + Backbone.js + Compass 2. KyotoTycoon to Memcached 3. Grunt & CoffeeScript 2. MySQL + memcached to Redis 3. Carton & Bower & CoffeeScript 139݄20༵ۚ
ͦΜͳҰาʹ 139݄20༵ۚ
ެ։͢ΔͨΊͷڥ 139݄20༵ۚ
ެ։͢ΔͨΊͷڥ • Ϩϯλϧαʔόʔ ... ࣗ༝͕ྼΔ • ࣗαʔόʔ ... ӡ༻͕େม(&ిؾ) •
VPS ... rootͰࣗ༝ʹग़དྷΔ͠ɺՁ֨Ϧʔζφϒϧ • AWS ... VPSʹൺΔͱߴ͍ɻAWSʹ͍ͭͯͷࣝඞཁʹͳΔɻ • Paas ... ͓खܰʹެ։ग़དྷΔ͕ɺPlatform͕ఏڙ͍ͯ͠Δൣғʹ੍ݶ͞ΕΔ ୯७ʹΞϓϦέʔγϣϯΛ1ͭެ։͢Δ͚ͩͳΒɺPaasΞϦ͚ͩͲɺͪΐͬͱ ͨ͠botஔ͍ͨΓɺ࣮ݧ͍ͨ͠ͳΒVPS͕͍͍ɻ ͪΌΜͱӡ༻͍ͨ͠ͳΒ࠷ॳ͔ΒAWSͰΔͷΞϦ 139݄20༵ۚ
ެ։͢ΔͨΊͷڥ • Ϩϯλϧαʔόʔ ... ࣗ༝͕ྼΔ • ࣗαʔόʔ ... ӡ༻͕େม(&ిؾ) •
VPS ... rootͰࣗ༝ʹग़དྷΔ͠ɺՁ֨Ϧʔζφϒϧ • AWS ... VPSʹൺΔͱߴ͍ɻAWSʹ͍ͭͯͷࣝඞཁʹͳΔɻ • Paas ... ͓खܰʹެ։ग़དྷΔ͕ɺPlatform͕ఏڙ͍ͯ͠Δൣғʹ੍ݶ͞ΕΔ ୯७ʹΞϓϦέʔγϣϯΛ1ͭެ։͢Δ͚ͩͳΒɺPaasΞϦ͚ͩͲɺͪΐͬͱ ͨ͠botஔ͍ͨΓɺ࣮ݧ͍ͨ͠ͳΒVPS͕͍͍ɻ ͪΌΜͱӡ༻͍ͨ͠ͳΒ࠷ॳ͔ΒAWSͰΔͷΞϦ 139݄20༵ۚ
υϝΠϯ • ࠷ͰಠࣗυϝΠϯͱ͓ͬͯ͜͏ • VPSͩͱwwwXXXu.sakura.ne.jpΈ͍ͨͳυϝΠϯ͕͑Δ͚Ͳɺ koba04.comͳͲࣗͷυϝΠϯΛऔͬͯɺαϒυϝΠϯͰͬͨ΄͏͕ѹ తʹϞνϕʔγϣϯ͕ߴ·Δɻex. petatube.koba04.com • ຊؾͰӡ༻͍ͨ͠αʔϏεͳΒಠࣗυϝΠϯΛऔ͍͍ͬͯͬͯͱࢥ
͏ɻex. petatube.com 139݄20༵ۚ
ҰൠతͳWebΞϓϦέʔγϣϯͷߏ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
ҰൠతͳWebΞϓϦέʔγϣϯͷߏ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 1ͷαʔόʔͰ શ෦ͬͯΒͬͯେৎͳͷͰɺ ·ͣ1ʹશ෦ೖΕͯنʹԠͯ͡
ׂ͍ͯ͘͠Ͱͳ͍ 139݄20༵ۚ
Webαʔόʔ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
Webαʔόʔ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
Webαʔόʔඞཁʁ • Ϣʔβʔ͔ΒϦΫΤετΛड͚ͯɺΞϓϦέʔγϣϯαʔόʔʹࣄΛ͓ئ ͍ͨ͠Γɺը૾CSSJSͳͲͷ੩తϑΝΠϧΛฦ͢ࣄΛ͢Δ • ͿͬͪΌ͚ͳͯ͘ΞϓϦέʔγϣϯಈ࡞͢Δ • ͱ͍͑ɺ੩తͳHTMLΛެ։ͨ͠Γ͢Δͱ͖ʹඞཁʹͳΔͷͰૉʹ༻ҙ ͢Δͷ͕͍͍ 139݄20༵ۚ
Apache? Nginx? • Apacheͷํ͕ଟػೳʢෳࡶʁʣ • NginxγϯϓϧɻࠓճͷΑ͏ͳϦόʔεϓϩΩγˍ੩తϑΝΠϧ৴ͷ༻్ ͩͱेɻ http://news.netcraft.com/archives/2013/09/05/september-2013-web-server-survey.html 139݄20༵ۚ
Apache? Nginx? • Apacheͷํ͕ଟػೳʢෳࡶʁʣ • NginxγϯϓϧɻࠓճͷΑ͏ͳϦόʔεϓϩΩγˍ੩తϑΝΠϧ৴ͷ༻్ ͩͱेɻ http://news.netcraft.com/archives/2013/09/05/september-2013-web-server-survey.html ͱ͍͏Θ͚ͰNginxΛ࠾༻ 139݄20༵ۚ
Nginxͷઃఆ server { listen 80; server_name petatube.koba04.com; location / {
proxy_pass http://localhost:9001; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; break; } location ~ .*\.(jpg|gif|png||css|js|ico)$ { root /home/koba04/app/petatube; break; } } https://github.com/koba04/p5-petatube/blob/master/server/development/vagrant/chef/site-cookbooks/ petatube/files/default/nginx/petatube.conf 139݄20༵ۚ
Nginxͷઃఆ server { listen 80; server_name petatube.koba04.com; location / {
proxy_pass http://localhost:9001; proxy_set_header X-Real-IP $remote_addr; proxy_set_header Host $host; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; break; } location ~ .*\.(jpg|gif|png||css|js|ico)$ { root /home/koba04/app/petatube; break; } } 9001portͷ ΞϓϦέʔγϣϯɾαʔόʔʹ ϓϩΩγͯ͠Δ https://github.com/koba04/p5-petatube/blob/master/server/development/vagrant/chef/site-cookbooks/ petatube/files/default/nginx/petatube.conf 139݄20༵ۚ
ΞϓϦέʔγϣϯαʔόʔ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
ΞϓϦέʔγϣϯαʔόʔ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
PerlʹΑΔWebΞϓϦέʔγϣϯ 139݄20༵ۚ
PerlʹΑΔWebΞϓϦέʔγϣϯ • PerlͷόʔδϣϯɺϞδϡʔϧཧ • WebΞϓϦέʔγϣϯϑϨʔϜϫʔΫ • WebΞϓϦέʔγϣϯαʔόʔ • σʔλετΞͷΞΫηε 139݄20༵ۚ
Perlͷόʔδϣϯཧ(plenv) • plenv • https://github.com/tokuhirom/plenv • ؾܰʹ࠷৽ͷόʔδϣϯΛࢼͤΔϝϦοτେ͖͍ • ຊ൪ڥͩͱɺxbuildperlbrewͰͳ͍ 139݄20༵ۚ
Perlͷόʔδϣϯཧ(anyenv) % git clone https://github.com/riywo/anyenv ~/.anyenv % echo 'export PATH="$HOME/.anyenv/bin:$PATH"'
>> ~/.your_profile % echo 'eval "$(anyenv init -)"' >> ~/.your_profile % exec $SHELL -l % anyenv install plenv % exec $SHELL -l % plenv install 5.18.1 % plenv global 5.18.1 % plenv install-cpanm % cpanm Carton • anyenvΛ͏ͱ*envܥΛ·ͱΊͯཧͯ͘͠ΕΔ • https://github.com/riywo/anyenv 139݄20༵ۚ
Ϟδϡʔϧཧ(carton) • Carton • https://metacpan.org/module/Carton • ΞϓϦέʔγϣϯຖʹCPANϞδϡʔϧΛཧͰ͖Δ • ҧ͏ڥͰ͙͢ʹΞϓϦέʔγϣϯΛಈ͔͢͜ͱ͕Ͱ͖Δ %
git clone https://github.com/koba04/p5-petatube % cd p5-petatube/app % carton install Installing modules using /home/koba04/p5-petatube/app/cpanfile Successfully installed Sub-Identify-0.04 Successfully installed Module-Functions-2.1.3 : 109 distributions installed Complete! Modules were installed into /home/koba04/p5-petatube/app/local % carton exec plackup -r Watching ./lib app.psgi for file updates. HTTP::Server::PSGI: Accepting connections at http://0:5000/ 139݄20༵ۚ
Ϟδϡʔϧཧ(carton) • cpanfile % cat cpanfile requires 'perl', '5.008001'; requires
'Amon2', '3.85'; : requires 'Coro' ,6.31; requires 'Furl' ,2.18; requires 'Redis' ,1.961; requires 'JSON::XS' ,2.34; requires 'Starlet' ,0.20; requires 'Server::Starter' ,0.15; on 'configure' => sub { requires 'Module::Build', '0.38'; requires 'Module::CPANfile', '0.9010'; }; on 'test' => sub { requires 'Test::More' , '0.98'; requires 'Test::RedisServer', '0.12'; }; on 'develop' => sub { requires 'Proclet', '0.31'; }; % carton install % carton exec plackup ... 139݄20༵ۚ
WebΞϓϦέʔγϣϯϑϨʔϜϫʔΫ • Amon2 ·ͨ Mojolicious ลΓ͕Αͦ͞͏ (ݸਓతʹAmon2Λ͍ͬͯΔ) • શମ૾ΛѲग़དྷΔن(ιʔεΛಡΊΔ)ͳͷ͕͍͍ %
tree lib lib !"" PetaTube # !"" Redis.pm # !"" Video.pm # !"" Web # # !"" Dispatcher.pm # # !"" View.pm # # $"" ViewFunctions.pm # $"" Web.pm !"" PetaTube.pm $"" WebService -> ../../submodules/p5-webservice-youtube-lite/lib/WebService https://github.com/koba04/p5-petatube/tree/master/app/lib 139݄20༵ۚ
σʔλετΞͷΞΫηε • MySQL (Teng) • O/R Mapperͱͯ͠ͷׂ͚ͩͰͳ͘ɺTransactionଓͷཧͳͲ໘ ͳ෦ͬͯ͘ΕΔͰศར(SQLॻ͘͜ͱग़དྷΔ) • Memcached
(Cache::Memcached::Fast) • namespaceɺγϦΞϥΠζͳͲͬͯ͘Ε͍͍ͯ͢ • Redis (Redis.pm) • AUTOLOADͰRedisͷAPI͕࣮͞ΕͯΔͷͰɺυΩϡϝϯτʹͳ͍API ͑ͨΓ͢Δ 139݄20༵ۚ
σʔλετΞͷΞΫηε (get_callback) • ΩϟογϡΛ͏࣌ʹɺͳ͚ΕcallbackΛ࣮ߦͯ͠Ληοτͭͭ͠ฦ͢ɺ get_callbackؔΛ࡞͓ͬͯ͘ͱ৭ʑศར • RedisͰexpireΛ͏͜ͱͰΩϟογϡతͳ͍ํͰ͖Δ sub get_callback {
my $self = shift; my ( $key, $code, $expire ) = @_; my $data = $self->get( $key ); unless ( defined $data ) { $data = $code->(); $self->set($key, $data, $expire); } return $data; } https://github.com/koba04/p5-cdlm/blob/master/lib/CDLM/Cache.pm#L23-L34 139݄20༵ۚ
σʔλετΞ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
σʔλετΞ Webαʔόʔ ΞϓϦέʔγϣϯ αʔόʔ Ωϟογϡαʔόʔ DBαʔόʔ Ϣʔβʔ͔ΒͷΞΫηε 139݄20༵ۚ
σʔλετΞ • MySQL • ӬଓԽ͍ͨ͠σʔλ͕ඞཁͳ࣌ͷୈҰͷબࢶ • memcached • ֎෦APIͷσʔλΛ͏࣌ͳͲʹ༗ޮɻmemcached͕ͳͯ͘ಈ͘ΞϓϦ έʔγϣϯͷઃܭͰ͋Δ͜ͱ͕ඞཁ
• Redis • ϋογϡͱ͔Ϧετͱ͔ϓϩάϥϚϒϧͳσʔλܕͰอଘ͓ͯ͘͜͠ͱ͕ ग़དྷΔɻϥϯΩϯάͱ͔ͰΑ͘ΘΕͯΔҹɻݕূதɻ 139݄20༵ۚ
ϑϩϯτΤϯυ 139݄20༵ۚ
ϑϩϯτΤϯυ • 100ߦҎ্JavaScriptॻ͘ͳΒԿΒ͔ͷJavaScriptͷϑϨʔϜϫʔΫΛݕ౼͠ ͯΈ͍͍ͯ • Scss(Compass)ͷಋೖίϯύΠϧ͕ඞཁʹͳΔҎ֎ʹσϝϦοτ͕ͳ͍ͷ ͰੵۃతʹಋೖΛߟ͍͑ͨ • GruntΛಋೖ͢Δ͜ͱͰग़དྷΔ͜ͱେ͖͘ͳΔͷͰɺ্هͷͲͪΒ͔͕ͯ ·Γͦ͏ͳΒಋೖΛߟ͑ͯΈ͍͍ͯ
• https://github.com/styleguide 139݄20༵ۚ
JavaScript (AltJS) • TypeScript, JSX, CoffeeScriptͳͲ৭ʑ͋Δ͚ͲɺݸਓతʹCoffeeScriptΛ ؾʹೖ͍ͬͯͬͯΔ • อकੑͷ্͕తͰͳ͘ɺؾ࣋Α͘ॻ͚Δ͜ͱΛతʹ͍ͯ͠ΔͷͰ •
classͷαϙʔτ ޙஔͷif͕͑ͨΓ ɺ=> ͰͷؔએݴͰ֎ଆͷίϯς Ωετʹग़དྷͨΓ(ϝιουͰΠϕϯτΛઃఆ͢Δ࣌ʹ༗ޮ)... • http://koba04.com/slide/introduction-of-coffeescript/ 139݄20༵ۚ
JavaScript (CoffeeScript) PetaTube.View.Video = Backbone.View.extend : loadPlayer: -> video =
@videos.current() # already create video player return @player.loadVideoById video.id if @player # https://developers.google.com/youtube/iframe_api_reference tag = document.createElement 'script' tag.src = "//www.youtube.com/iframe_api" firstScriptTag = document.getElementsByTagName('script')[0] firstScriptTag.parentNode.insertBefore tag, firstScriptTag window.onYouTubeIframeAPIReady = => @player = new YT.Player 'video', height: '425' width: '760' videoId: video.id events: onStateChange: (e) => state = e.data @next() if state is YT.PlayerState.ENDED onError: => @skip() https://github.com/koba04/p5-petatube/blob/master/app/coffee/view/video.coffee 139݄20༵ۚ
JavaScript (Backbone.js or Angular.js) Backbone.js Angular.js ࠷Α͘ΘΕͯΔϑϨʔϜϫʔΫͰຊޠʹΑΔ ใଟ͍ ຊޠʹΑΔใ͋·Γଟ͘ͳ͍ JavaScriptΛϞσϧϏϡʔʹ͏·͘ߏԽͯ͠ॻ͖
ͯ͘͘͢͠ΕΔϑϨʔϜϫʔΫ jQueryunderscoreͷศརػೳ͑Δ͕ɺָʹॻ͚ ΔͨΊͷϑϨʔϜϫʔΫͰͳ͍ ൺֱతࣗ༝ͳͷͰಋೖ͍͢͠ ໎ͬͨΒͱΓ͋͑ͣBackbone.jsʹ͓͚ͯؒ͠ҧ͍ ͳͦ͞͏ ଟػೳͰɺWebΞϓϦέʔγϣϯ։ൃ͢Δͱ͖ʹඞ ཁͦ͏ͳػೳҰ௨ΓೖͬͯΔ JSON APIͷ݁ՌΛදࣔ͢ΔΑ͏ͳ୯७ͳΞϓϦέʔ γϣϯͷ͘͢͝؆୯ʹॻ͚Δ ಠࣗͷ֓೦ଟֶ͘शίετߴ͍͚Ͳɺ׳ΕΔͱ ؾ࣋ͪΑ͘ॻ͚Δ ςετΛॻͨ͘ΊͷΈ͋ͬͯ؆୯ʹςετΛ ॻ͚Δ ModelɺViewΛEventΦϒδΣΫτʹΑΔΦϒβʔό ʔύλʔϯΛ༻͍ͯ࿈ܞ͞ΕͯɺςϯϓϨʔτΛϨϯ μϦϯά͢Δ ControllerΫϥεʹϩδοΫΛॻ͍ͯɺ$scopeΦϒδ ΣΫτʹΑΓɺHTMLΛ֦ுͨ͠Viewʹରͯ͠ํ ͷσʔλόΠϯσΟϯάΛߦ͏ DI 139݄20༵ۚ
JavaScript (Backbone.js) • PetaTubeͰ࠾༻ % tree !"" app.coffee !"" collection
# !"" pages.coffee # $"" videos.coffee !"" model # !"" page.coffee # $"" video.coffee $"" view !"" popular.coffee !"" search.coffee $"" video.coffee https://github.com/koba04/p5-petatube/tree/master/app/coffee 139݄20༵ۚ
JavaScript (Backbone.js) • Viewͷྫ PetaTube.View.Video = Backbone.View.extend play : ->
video = @videos.current() if video.get('title') @$el.find("#video-info").text(video.get('title')) $('title').text(video.get('title') + "(PetaTube)") else video.fetch success: => @$el.find("#video-info").text video.get('title') $('title').text "#{video.get('title')}(PetaTube)" @loadPlayer() tmpl = $('#tmpl-button').html() $panel = _.template tmpl, current: @videos.currentIndex + 1 total: @videos.length @$el.find("#video-panel").html $panel @$el.show() https://github.com/koba04/p5-petatube/blob/master/app/coffee/view/video.coffee 139݄20༵ۚ
JavaScript (Angular.js) <html ng-app> <head> <script src="lib/angular/angular.js"></script> <script> function HogeCtrl($scope)
{ $scope.frameworks = ["Backbone.js", "Angular.js", "Ember.js"]; } </script> </head> <body ng-controller="HogeCtrl"> <ul> <li ng-repeat="framework in frameworks">{{framework}}</li> </ul> </body> </html> • ࣮ࡍʹΞϓϦͰͬͨΈͨͳͲԼͷεϥΠυΛ • http://koba04.com/slide/get-started-angularjs/ 139݄20༵ۚ
Grunt • nodeͷTask Runner • http://gruntjs.com/ • coffeescript, scssͷίϯύΠϧuglify, concatɺlivereload·ͰϓϥάΠϯ
Λ͏͜ͱͰઃఆॻ͚ͩ͘Ͱ؆୯ʹ͏͜ͱ͕ग़དྷΔ • GruntʹϑΝΠϧΛwatchͤͯ͞coffeescriptscssͷίϯύΠϧΛ͢Δ͜ͱ ͰίϯύΠϧΛҙࣝͤͣʹcoffeescriptscssΛ͑Δ 139݄20༵ۚ
Grunt module.exports = (grunt) -> "use strict" grunt.initConfig pkg: grunt.file.readJSON
"package.json" watch: coffee: files: ["src/coffee/**/*.coffee"] tasks: ["coffee2js"] coffee: compile: files: 'htdocs/js/<%= pkg.name %>.js': 'src/coffee/**/*.coffee' uglify: dist: src: "htdocs/js/<%= pkg.name %>.js", dest: "htdocs/js/<%= pkg.name %>.min.js" # load grunt plugings grunt.loadNpmTasks "grunt-contrib-watch" grunt.loadNpmTasks "grunt-contrib-uglify" grunt.loadNpmTasks 'grunt-contrib-coffee' # tasks grunt.registerTask "coffee2js", ["coffee", "uglify"] https://github.com/koba04/p5-petatube/blob/master/app/Gruntfile.coffee 139݄20༵ۚ
Bower • TwitterࣾͷϑϩϯτΤϯυ༻ͷύοέʔδϚωʔδϟ • http://bower.io/ • jQueryBackboneɺAngularɺunderscoreͳͲϑϩϯτΤϯυͰ͏ϥΠ ϒϥϦͷґଘؔΛཧͯ͘͠ΕΔ • CDNʹஔ͍ͯ͋ΔϥΠϒϥϦΛ͏߹ෆཁ
• Ωϟογϡಉ࣌ଓΛߟ͑ΔͱɺCDNʹஔ͍ͯ͋Δͷ͕͋ΔͳΒ ͦͬͪΛ͓ͬͯ͘ํ͕͍͍͔ʢΦϑϥΠϯͰ։ൃ͠ͳ͍ͳΒʣ 139݄20༵ۚ
Bower • bower.json ࡞ͬͯ bower install ͢Δͱɺࢦఆͷॴ(σϑΥϧτ bower_components)ʹࢦఆόʔδϣϯͷϥΠϒϥϦ͕Πϯετʔϧ͞ΕΔ % cat
bower.json { "name": "p5-petatube", "version": "0.0.2", "main": "statis/js/petatube.js", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "tests" ], "dependencies": {}, "devDependencies": { "jquery": "~2.0.3", "backbone": "~1.0.0", "underscore": "~1.5.1" } } https://github.com/koba04/p5-petatube/blob/master/app/bower.json 139݄20༵ۚ
CSS(Compass) • CompassΛͬͯɺScssͷه๏ͰૉͷCSS͔Βঃʑʹɺมɺωετɺmixin ͳͲΛͬͯϓϩάϥϚϒϧʹॻ͍͍ͯ͘ͷ͕͍͍ @import "compass/reset"; @import "compass/css3"; $main-color: #B65F58;
$highlight-color: #76231D; $base-color: #EED4D2; @mixin line-bottom($op1: .2, $op2: .3){ border-bottom: 1px solid rgba(0, 0, 0, $op1); @include box-shadow(rgba(255, 255, 255, $op2) 0 1px 0); } html { height: 100%; width: 100%; a { font-weight: bold; text-decoration: none; } 139݄20༵ۚ
ιʔείʔυཧ 139݄20༵ۚ
ιʔείʔυཧ • αʔϏεެ։લʹϦϙδτϦΛެ։͢ΔͷΞϨͳͷͰɺެ։લBitbucket ͷprivate repositoryͰཧͯ͠ɺެ։ޙgithubͷpublic repositoryͱͯ͠ ཧ • DBͷύεϫʔυͳͲɺެ։ͨ͘͠ͳ͍ใ͕͋Δͱ͖ɺConfig::PitΛ͏ ͱӅͤͯศར
• https://metacpan.org/module/Config::Pit 139݄20༵ۚ
։ൃڥ 139݄20༵ۚ
։ൃڥ • खݩͷMacʹhomebrewͰϛυϧΣΞΛΠϯετʔϧͯ͠։ൃڥΛ࡞Δ • http://brew.sh/index_ja.html • VirtualBoxͰԾϚγϯ্ʹڥΛ࡞Δ • https://www.virtualbox.org/ 139݄20༵ۚ
։ൃڥ(Proclet) • kazeburo͞Μ࡞ͷϓϩηεཧϞδϡʔϧ • https://metacpan.org/module/Proclet • redis, plackup, grunt watchͳͲΞϓϦέʔγϣϯ։ൃʹඞཁͳϓϩηεΛί
ϚϯυҰͭͰશ෦্ཱͪ͛Δ͜ͱ͕ग़དྷΔ • ϩά৭͚͞Εͯ·ͱΊͯݟΕΔͷͰͱͯศརʂ • HomebrewͳͲͰMiddlewareͷཧΛ͢Δඞཁ͋Δ͚ͲɺखܰʹΞϓϦ έʔγϣϯͷ։ൃΛग़དྷΔΑ͏ʹͳͬͯΦεεϝɻ 139݄20༵ۚ
։ൃڥ(Proclet) use strict; use warnings; use Proclet::Declare; env( PLACK_ENV =>
'development', LM_COLOR => 1, ); service('app', 'carton exec plackup -r app.psgi'); service('grunt', 'grunt watch'); service('redis', 'redis-server ../server/development/proclet/redis.conf'); color; run; https://github.com/koba04/p5-petatube/blob/master/app/start_develop 139݄20༵ۚ
։ൃڥ(Proclet) 139݄20༵ۚ
։ൃڥ(ԾϚγϯ) • Vagrant ... VirtualBoxͳͲͷԾϚγϯΛίϚϯυϥΠϯ͔Βૢ࡞ग़དྷΔ • http://www.vagrantup.com/ • Chef (Knife
Solo) ... ڥߏஙΛRubyͷίʔυϕʔεͰߦ͏ࣄ͕Ͱ͖Δ • http://www.opscode.com/chef/ • serverspec ... αʔόʔͷઃఆɺߏͷςετRSpecͰॻ͘͜ͱ͕ग़དྷΔ • http://serverspec.org/ 139݄20༵ۚ
։ൃڥ(ԾϚγϯ) • Chef(Knife Solo)ɺserverspecͱ͔Ͱ࡞Δ·ͰΓͩ͢ͱ݁ߏେม • αʔόʔڥΛίʔυॻ͍ͯςετͯ͠Λ܁Γฦͯ͠࡞ͬͯͷ݁ߏָ͠ ͍(·ͣbash_resource͔Β) • ڥΛηοτΞοϓͯ͋͠ΔԾϚγϯΛ࡞ΓɺͦΕΛ͍·Θ͘͢Β͍ͳΒ ൺֱతखܰʹग़དྷΔ
• खݩͷϚγϯʹ৭ʑΠϯετʔϧͨ͘͠ͳ͔ͬͨΓɺ৭ΜͳڥͰಈ͔ͨ͠ ͍࣌ʹvagrantͰԾϚγϯ࡞ͬͯΔͷΑͦ͞͏ 139݄20༵ۚ
։ൃڥ(ԾϚγϯ) • Chef(Knife Solo)ɺserverspecͱ͔Ͱ࡞Δ·ͰΓͩ͢ͱ݁ߏେม • αʔόʔڥΛίʔυॻ͍ͯςετͯ͠Λ܁Γฦͯ͠࡞ͬͯͷ݁ߏָ͠ ͍(·ͣbash_resource͔Β) • ڥΛηοτΞοϓͯ͋͠ΔԾϚγϯΛ࡞ΓɺͦΕΛ͍·Θ͘͢Β͍ͳΒ ൺֱతखܰʹग़དྷΔ
• खݩͷϚγϯʹ৭ʑΠϯετʔϧͨ͘͠ͳ͔ͬͨΓɺ৭ΜͳڥͰಈ͔ͨ͠ ͍࣌ʹvagrantͰԾϚγϯ࡞ͬͯΔͷΑͦ͞͏ खֻ͔ؒΔ͚Ͳ ίϚϯυ1ͭͰApplication͕ ىಈͨ͠ঢ়ଶͷԾϚγϯΛ ࡞ΕΔͷ݁ߏײಈ͢Δ 139݄20༵ۚ
ຊ൪ڥ 139݄20༵ۚ
ຊ൪ڥ(supervisor) • A Process Control System. • http://supervisord.org/ • ΞϓϦ͚ͩͰͳ͘nginxredisͳͲϛυϧΣΞsupervisorͰཧͯ͠Δ
• ϓϩηε͕མͪͯࣗಈతʹ࠶ىಈͯ͘͠ΕΔͷͰݸਓͰͷ։ൃʹ༏͍͠ • daemontools͋Δ͚Ͳɺݸਓతʹͪ͜Βͷํ͕Θ͔Γ͔ͬͨ͢ͷͰ ͬͯΔ 139݄20༵ۚ
ຊ൪ڥ(supervisor) [program:petatube] user=koba04 command=sh /home/koba04/petatube/server/production/supervisor/petatube.sh redirect_stderr=true stdout_logfile=/var/log/petatube/app.log autostart=true autorestart=true #!/bin/sh
cd /home/koba04/petatube/app exec /home/koba04/perl5/perlbrew/perls/perl-5.18.1/bin/carton exec -- start_server --port=9001 \ -- plackup -s Starlet -E production \ --max-workers=3 \ /home/koba04/petatube/app/app.psgi https://github.com/koba04/p5-petatube/blob/master/server/production/supervisor/petatube.conf https://github.com/koba04/p5-petatube/blob/master/server/production/supervisor/petatube.sh 139݄20༵ۚ
ຊ൪ڥ (ө) • git pullͯ͠ϓϩηε࠶ىಈ • εΫϦϓτʹ͢Δ͜ͱͰ͖Δ͚ͲɺࠓҰͭҰͭखಈͰ͍ͬͯΔ • ෳѻ͏Α͏ʹͳ͖ͬͯͨΒɺcapistranocinnamonͳͲΛݕ౼͍ͨ͠ %
cd petatube % git pull % sudo supervisorctl restart petatube petatube: stopped petatube: started 139݄20༵ۚ
࠷ޙʹ 139݄20༵ۚ
࠷ޙʹ • ؆୯ͳͷͰ࣮ࡍʹΞϓϦΛ࡞ΔͱTutorialͰಘΔ͜ͱͷग़དྷͳֶ͍ͼ͕ ͨ͘͞Μ͋Δ • ࢼ͍ٕͨ͠ज़ΛೖͰ͖ΔॴΛ͓࣋ͬͯ͘ • ࠷ॳ͔ΒΓΓʹΓ͗͢ͳ͍Ͱɺ༷ٕज़εϞʔϧελʔτͰ 139݄20༵ۚ
͝ਗ਼ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ https://github.com/koba04/p5-petatube 139݄20༵ۚ