@ YAPC::Asia 2012 LT-thon.

1. Textile記法とか
Markdown記法とか
2012-09-29 YAPC::Asia 2012 LT-thon
岩田 享 / issm

2. using Markdown?

3. using Textile?

4. ですよねーｗ

5. Textile記法とか
Markdown記法とか
2012-09-29 YAPC::Asia 2012 LT-thon
岩田 享 / issm

6. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

7. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

8. おまえだれよ？
岩田 享 / issm（いわた）
http://blog.iss.ms/
@issm, qr/issmx{,2}/
個人事業
とある「商品」を販売 → 発注 → 発送管理
などするためのシステムを開発していたり
Perl / JavaScript CoffeeScript

9. http://www.imasaramario2.com/

10. 入院！

11. Nagoya.pm の方からきまし
た！

12. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

13. Textile記法
「（軽量）マークアップ言語」の1つ
http://textile.sitemonks.com/
http://en.wikipedia.org/wiki/Textile_(markup_language)
http://en.wikipedia.org/wiki/
Lightweight_markup_language
特定のシンプルな記述によるテキストをHTMLに
変換
Redmine や GitHub (Wiki) 等でもサポート

14. Textile記法
見出し
▼

15. Textile記法
文字装飾
▼

16. Textile記法
リスト
▼

17. Textile記法
テーブル
▼

18. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

19. Text::Textile
http://search.cpan.org/dist/Text-Textile/
“Text::Textile is a Perl-based
implementation of Dean Allen's Textile
syntax. Textile is shorthand for doing
common formatting tasks.”
Text::Textileは，Dean Allen によるTextile記
法のPerl実装である．Textileは共通のフォー
マッティングタスクを簡単にする．

20. Text::Textile
手続き的
use Text::Textile qw/textile/;
my $text = ‘h1. textile syntax’;
my $html = textile($text);
オブジェクト指向
use Text::Textile;
my $textile = Text::Textile->new;
my $text = ‘h1. textile syntax’;
my $html = $textile->process($text);

21. Text::Textile
% perl -MText::Textile=textile
-le 'print textile("h1. textile syntax")'
<h1>textile syntax</h1>

22. 簡単ですね！

23. Text::Textile
Redmineでは．．．
▼

24. 記法の独自拡張は
アプリケーション側で

25. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

26. Text::Textile::Pluggabl
e
Textile → HTML 変換の前後に処理を挟める
プラグイン形式で好きなようにできる
https://github.com/issm/p5-Text-Textile-
Pluggable

27. Text::Textile::Pluggabl
e
手続き的
use Text::Textile::Pluggable qw/textile/;
my $text = ‘h1. textile syntax’;
my $html = textile($text, [qw/Foobar/]);
オブジェクト指向
use Text::Textile;
my $textile = Text::Textile::Pluggable->new(
plugins => [qw/Foobar/],
);
my $text = ‘h1. textile syntax’;
my $html = $textile->process($text);

28. Text::Textile::Pluggabl
e
プラグインモジュール
Text::Textile::Pluggable::Plugin::*
pre メソッド → 変換前に処理
post メソッド → 変換後に処理
それぞれ処理後の文字列を返す

29. Text::Textile::Pluggabl
e
package Text::Textile::Pluggable::Plugin::Foobar;
# 変換前に処理する
sub pre {
my ($textile, $text) = @_;
...
return $text;
}
# 変換後に処理する
sub post {
my ($textile, $text) = @_;
...
return $text;
}
1;

30. 先のRedmineの件を例に

31. Text::Textile::Pluggabl
e
package (ry)::Plugin::RedmineLinks;
# 変換前処理はないので定義は不要
sub post {
my ($textile, $text) = @_;
$text =~ s{(#d+)}{
<a href=”...”>$1</a>
}egx;
$text =~ s{commit:([0-9a-f]{8})}{
<a href=”...”>$1</a>
}egx;
return $text;
}
1;

32. Text::Textile::Pluggabl
e
こんな感じで．．．
use Text::Textile;
my $textile = Text::Textile::Pluggable->new(
plugins => [qw/RedmineLinks/],
);
my $text = << ‘...’;
チケットへのリンク: #1234
コミットへのリンク: commit:abcd1234
...
my $html = $textile->process($text);

33. シンタックスハイライトしてみる

34. Text::Textile::Pluggabl
e
GeSHi - Generic Syntax Highlighter
http://qbnz.com/highlighter/
written in PHP
WordPress プラグイン 「WP-Syntax」

35. Text::Textile::Pluggable::Plugin::SyntaxHighlight::GeSHi
https://github.com/issm/p5-Text-Textile-Pluggable-Plugin-SyntaxHighlight-
GeSHi

36. Text::Textile::Pluggabl
e
(ry)::Plugin::SyntaxHighlight::GeSHi
bc[lang].. で記述されたコードをハイライト
GeSHi な処理をするPHPを `...` で呼び出し

37. Text::Textile::Pluggabl
without plugin
e
before
after

38. Text::Textile::Pluggabl
with plugin
e
before
after

39. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

40. Textile記法なWiki的Webアプリ
SiTeWiki (Simple Textile Wiki)
https://github.com/issm/SiTeWiki
based on Amon2
Textile記法で記述・保存（変更管理なし）
編集時のプレビュー
データディレクトリ指定
データディレクトリ変更監視・表示自動更新

41. Textile記法なWiki的Webアプリ
Textile記法で記述・保存

42. Textile記法なWiki的Webアプリ
編集時のプレビュー

43. Textile記法なWiki的Webアプリ
編集時のプレビュー
use PocketIO;
use PocketIO;
use Plack::Builder;
use SiTeWiki::Web::WebSocketHandler;
builder {
mount ‘/socket.io/’ => PocketIO->new(
class => ‘SiTeWiki::Web::WebSocketHandler’,
method => ‘run’,
);
};

44. Textile記法なWiki的Webアプリ
編集時のプレビュー
デモ

45. Textile記法なWiki的Webアプリ
データディレクトリ指定
config/*.pl
+{
datadir => undef, # default ($basedir/data)
};
+{
datadir => ‘/path/to/your/favorite/directory’,
};

46. Textile記法なWiki的Webアプリ
データディレクトリ指定
ローカルとデプロイ先とを Dropbox で共有
+{
datadir => ‘/Users/issm/Dropbox/sitewiki/data’,
};
ローカルでデータを編集するだけでおｋ

47. Textile記法なWiki的Webアプリ
データディレクトリ変更監視・表示自動更新
Filesys::Notify::Simple → 通知スクリプト
通知スクリプト
written in PhantomJS
WebSocket で「更新された」通知

48. Textile記法なWiki的Webアプリ
データディレクトリ変更監視・表示自動更新
デモ

49. アジェンダ
自己紹介
Textile記法
Text::Textile
Text::Textile::Pluggable
Textile 記法な Wiki 的 Web アプリ
まとめ

50. まとめ
Textile 記法のことも思い出してあげて！
Text::Textile::Pluggable ってモジュールを書いてみ
た
Textile 記法を扱える Wiki 的なものを作ってみた
WebSocketおもしろい！
nginx を前に立てるとうまくいかない＞＜

51. おまけ

53. Text::Markdown::Pluggableもあるよ
https://github.com/issm/p5-Text-Markdown-Pluggable

54. ご静聴ありがとうございました！

55. Q?