Blog Hacks 2011

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 コグレマサト