Upload
yusuke-wada
View
5.347
Download
0
Embed Size (px)
Citation preview
Blog Hacks 2011Kamakura.pm Techtalk #01
yusukebe
土地紹介
Back toYAPC::Asia 2010
Photo by ya-ko http://ya-ko.com/blog/
“Blog 書いてる?”
I said
Blog Hacks
by naoya and miyagawa
2004 2011
“Blogの楽しさは、日々のBloggingそのものに加えて、Hackする楽しさがあってこそです” on Blog Hacks (2004)
Blog Hacks 2011
Blog なに使ってる?
もちろん、MovableTypeだよね!
もしくは、Blosxom、Perl製の何か...
CSS関係のHack
Hack#01 CSS Frameworkを利用する
Blogのオリジナルテーマを簡単に作ろう
• Grid Layout• Reset• Font
I love Bluetrip!
Simple Markup24-column grid
An empty starter kitCool font style
Markup with Bluetrip
<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>
Result!
Hack#02 簡単にiPhoneに対応させる
use Media Queriesユーザーの状態を調べ、それにあった特定のCSSを適応できる
/* 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; }}
Result!
JavaScriptを使ったHack
Hack#03 YouTubeの動画のブログパーツを作る
“自分がアップロードした動画をプレイヤー付きで見せたい”
YouTube Data API
+JW Player
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);});
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 });}
Result!
PerlでMovableTypeをHackする
Hack#04 エントリー上のPerlコードをハイライトさせる
MovableTypeでエントリーを再構築
preタグでくくった内容をText::VimColorでタグ付けし直す
表示の際、Text::VimColor付属のCSSで色づけ
MovableType Plugin
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;
Result!
Blog周辺技術のHack
Hack#05 pubsubhubbubへ通知をする
非常に更新の速いフィードをpubsubhubbubに通知したい
フィードを一定間隔で監視
更新があった場合、pubsubhubbubに通知を送る
AnyEvent::Feed
AnyEvent::HTTP
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;
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
Result!
紹介していないHack
★DISQUSでコメント欄を設置する★Facebookと連動する★BlosxomをCMSとして利用する★オリジナルのBlogツールを作る
Enjoy Hacking Blogand ...
“Keep on Blogging”by コグレマサト