blog hacks 2011
TRANSCRIPT
![Page 1: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/1.jpg)
Blog Hacks 2011Kamakura.pm Techtalk #01
yusukebe
![Page 2: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/2.jpg)
土地紹介
![Page 3: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/3.jpg)
![Page 4: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/4.jpg)
Back toYAPC::Asia 2010
![Page 5: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/5.jpg)
Photo by ya-ko http://ya-ko.com/blog/
“Blog 書いてる?”
I said
![Page 6: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/6.jpg)
Blog Hacks
by naoya and miyagawa
![Page 7: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/7.jpg)
2004 2011
![Page 8: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/8.jpg)
“Blogの楽しさは、日々のBloggingそのものに加えて、Hackする楽しさがあってこそです” on Blog Hacks (2004)
Blog Hacks 2011
![Page 9: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/9.jpg)
Blog なに使ってる?
![Page 10: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/10.jpg)
もちろん、MovableTypeだよね!
もしくは、Blosxom、Perl製の何か...
![Page 11: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/11.jpg)
CSS関係のHack
![Page 12: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/12.jpg)
Hack#01 CSS Frameworkを利用する
![Page 13: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/13.jpg)
Blogのオリジナルテーマを簡単に作ろう
• Grid Layout• Reset• Font
![Page 14: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/14.jpg)
I love Bluetrip!
Simple Markup24-column grid
An empty starter kitCool font style
![Page 15: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/15.jpg)
Markup with Bluetrip
![Page 16: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/16.jpg)
<div class="container"> <div id="header" class="span-24 large fancy"> <h1>Welcome!</h1> </div> <hr /> <div id="wrapper" class="span-24"> <div id="content" class="span-17 colborder"> <h2>This is h2 title.</h2> <p> description... </p> </div> <div id="side" class="span-6 last"> <h3 class="thin">Side menu</h3> </div> </div> <hr class="space" /> <div id="footer" class="span-24"> <hr /> <address>Here is footer</address> </div> </div>
![Page 17: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/17.jpg)
Result!
![Page 18: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/18.jpg)
Hack#02 簡単にiPhoneに対応させる
![Page 19: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/19.jpg)
use Media Queriesユーザーの状態を調べ、それにあった特定のCSSを適応できる
![Page 20: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/20.jpg)
/* media queries */@media only screen and (max-width: 479px) { body { margin: 1.5em; } #header h1 { font-size: 200% } #content { font-size: 170%; line-height: 1.5em; } pre { overflow:auto; }}
![Page 21: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/21.jpg)
Result!
![Page 22: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/22.jpg)
JavaScriptを使ったHack
![Page 23: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/23.jpg)
Hack#03 YouTubeの動画のブログパーツを作る
![Page 24: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/24.jpg)
“自分がアップロードした動画をプレイヤー付きで見せたい”
![Page 25: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/25.jpg)
YouTube Data API
+JW Player
![Page 26: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/26.jpg)
var url = 'http://gdata.youtube.com/feeds/api/videos?' + 'author=yusukebe&v=2&alt=jsonc&callback=?';
$.getJSON(url,function(json){ var playlist = new Array(); $.each(json.data.items,function(){ var video = { file : 'http://www.youtube.com/watch?v=' + this.id, title : this.title, description : this.description }; playlist.push(video); }); play(playlist);});
![Page 27: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/27.jpg)
function play(list){ jwplayer('player').setup({ 'flashplayer': 'player.swf', 'id': 'playerID', 'width': '950', 'height': '400', 'playlist.position': 'right', 'playlist.size': '440', 'controlbar': 'bottom', 'playlist': list });}
![Page 28: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/28.jpg)
Result!
![Page 29: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/29.jpg)
PerlでMovableTypeをHackする
![Page 30: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/30.jpg)
Hack#04 エントリー上のPerlコードをハイライトさせる
![Page 31: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/31.jpg)
MovableTypeでエントリーを再構築
preタグでくくった内容をText::VimColorでタグ付けし直す
表示の際、Text::VimColor付属のCSSで色づけ
MovableType Plugin
![Page 32: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/32.jpg)
package MT::Plugin::VimColor;use Text::VimColor;use HTML::Entities qw/decode_entities/;use MT::Template::Context;
MT::Template::Context->add_global_filter(vim_color => &highlight );
sub highlight { my $text = shift; my @codes = $text =~ m!<pre.*?>(.+?)</pre>!igms; for my $code (@codes) { my $syntax = Text::VimColor->new( string => decode_entities($code), filetype => 'perl' ); my $new_code = $syntax->html; $text =~ s/\Q$code\E/$new_code/; } return $text;}
1;
![Page 33: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/33.jpg)
Result!
![Page 34: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/34.jpg)
Blog周辺技術のHack
![Page 35: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/35.jpg)
Hack#05 pubsubhubbubへ通知をする
![Page 36: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/36.jpg)
非常に更新の速いフィードをpubsubhubbubに通知したい
![Page 37: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/37.jpg)
フィードを一定間隔で監視
更新があった場合、pubsubhubbubに通知を送る
AnyEvent::Feed
AnyEvent::HTTP
![Page 38: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/38.jpg)
use URI::Escape;use AnyEvent;use AnyEvent::HTTP;use AnyEvent::Feed;my $cv = AnyEvent->condvar;my $feed_reader = AnyEvent::Feed->new( url => 'yourfeedurl', interval => 10, on_fetch => sub { my ( $feed_reader, $new_entries, $feed, $error ) = @_; if ( defined $error ) { warn "ERROR: $error\n"; return; } publish_pings(); });$cv->recv;
![Page 39: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/39.jpg)
sub publish_pings { my %form = ( "hub.mode" => 'publish', "hub.url" => 'yourfeedurl', ); my $body = join "&", map { "$_=" . URI::Escape::uri_escape( $form{$_} ) } keys %form; for my $hub ( qw( http://pubsubhubbub.appspot.com )) { http_post $hub, $body, sub { warn "$hub:$_[1]->{Status}"; } }}
ref: http://github.com/miyagawa/cpan-realtime-bot
![Page 40: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/40.jpg)
Result!
![Page 41: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/41.jpg)
紹介していないHack
★DISQUSでコメント欄を設置する★Facebookと連動する★BlosxomをCMSとして利用する★オリジナルのBlogツールを作る
![Page 42: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/42.jpg)
Enjoy Hacking Blogand ...
![Page 43: Blog Hacks 2011](https://reader033.vdocuments.site/reader033/viewer/2022050613/588656a81a28ab26598b518b/html5/thumbnails/43.jpg)
“Keep on Blogging”by コグレマサト