Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2012 09-29.yapcasia2012ltthon

1,266 views

Published on

@ YAPC::Asia 2012 LT-thon.

  • Be the first to comment

2012 09-29.yapcasia2012ltthon

  1. 1. Textile記法とか Markdown記法とか2012-09-29 YAPC::Asia 2012 LT-thon 岩田 享 / issm
  2. 2. using Markdown?
  3. 3. using Textile?
  4. 4. ですよねーw
  5. 5. Textile記法とか Markdown記法とか2012-09-29 YAPC::Asia 2012 LT-thon 岩田 享 / issm
  6. 6. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  7. 7. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  8. 8. おまえだれよ?岩田 享 / issm(いわた)http://blog.iss.ms/@issm, qr/issmx{,2}/個人事業 とある「商品」を販売 → 発注 → 発送管理 などするためのシステムを開発していたりPerl / JavaScript CoffeeScript
  9. 9. http://www.imasaramario2.com/
  10. 10. 入院!
  11. 11. Nagoya.pm の方からきまし た!
  12. 12. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  13. 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. 14. Textile記法見出し ▼
  15. 15. Textile記法文字装飾 ▼
  16. 16. Textile記法リスト ▼
  17. 17. Textile記法テーブル ▼
  18. 18. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  19. 19. Text::Textilehttp://search.cpan.org/dist/Text-Textile/“Text::Textile is a Perl-basedimplementation of Dean Allens Textilesyntax. Textile is shorthand for doingcommon formatting tasks.”Text::Textileは,Dean Allen によるTextile記法のPerl実装である.Textileは共通のフォーマッティングタスクを簡単にする.
  20. 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. 21. Text::Textile% perl -MText::Textile=textile -le print textile("h1. textile syntax")<h1>textile syntax</h1>
  22. 22. 簡単ですね!
  23. 23. Text::TextileRedmineでは... ▼
  24. 24. 記法の独自拡張はアプリケーション側で
  25. 25. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  26. 26. Text::Textile::Pluggabl eTextile → HTML 変換の前後に処理を挟めるプラグイン形式で好きなようにできるhttps://github.com/issm/p5-Text-Textile-Pluggable
  27. 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. 28. Text::Textile::Pluggabl eプラグインモジュール Text::Textile::Pluggable::Plugin::* pre メソッド → 変換前に処理 post メソッド → 変換後に処理 それぞれ処理後の文字列を返す
  29. 29. Text::Textile::Pluggabl epackage Text::Textile::Pluggable::Plugin::Foobar; # 変換前に処理するsub pre { my ($textile, $text) = @_; ... return $text;} # 変換後に処理するsub post { my ($textile, $text) = @_; ... return $text;} 1;
  30. 30. 先のRedmineの件を例に
  31. 31. Text::Textile::Pluggabl epackage (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. 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. 33. シンタックスハイライトしてみる
  34. 34. Text::Textile::Pluggabl eGeSHi - Generic Syntax Highlighter http://qbnz.com/highlighter/ written in PHP WordPress プラグイン 「WP-Syntax」
  35. 35. Text::Textile::Pluggable::Plugin::SyntaxHighlight::GeSHi https://github.com/issm/p5-Text-Textile-Pluggable-Plugin-SyntaxHighlight- GeSHi
  36. 36. Text::Textile::Pluggabl e(ry)::Plugin::SyntaxHighlight::GeSHi bc[lang].. で記述されたコードをハイライト GeSHi な処理をするPHPを `...` で呼び出し
  37. 37. Text::Textile::Pluggablwithout plugin ebeforeafter
  38. 38. Text::Textile::Pluggablwith plugin ebeforeafter
  39. 39. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  40. 40. Textile記法なWiki的Webアプリ SiTeWiki (Simple Textile Wiki) https://github.com/issm/SiTeWiki based on Amon2 Textile記法で記述・保存(変更管理なし) 編集時のプレビュー データディレクトリ指定 データディレクトリ変更監視・表示自動更新
  41. 41. Textile記法なWiki的Webアプリ Textile記法で記述・保存
  42. 42. Textile記法なWiki的Webアプリ 編集時のプレビュー
  43. 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. 44. Textile記法なWiki的Webアプリ 編集時のプレビュー デモ
  45. 45. Textile記法なWiki的Webアプリ データディレクトリ指定 config/*.pl+{ datadir => undef, # default ($basedir/data)};+{ datadir => ‘/path/to/your/favorite/directory’,};
  46. 46. Textile記法なWiki的Webアプリ データディレクトリ指定 ローカルとデプロイ先とを Dropbox で共有+{ datadir => ‘/Users/issm/Dropbox/sitewiki/data’,}; ローカルでデータを編集するだけでおk
  47. 47. Textile記法なWiki的Webアプリ データディレクトリ変更監視・表示自動更新 Filesys::Notify::Simple → 通知スクリプト 通知スクリプト written in PhantomJS WebSocket で「更新された」通知
  48. 48. Textile記法なWiki的Webアプリ データディレクトリ変更監視・表示自動更新 デモ
  49. 49. アジェンダ自己紹介Textile記法Text::TextileText::Textile::PluggableTextile 記法な Wiki 的 Web アプリまとめ
  50. 50. まとめTextile 記法のことも思い出してあげて!Text::Textile::Pluggable ってモジュールを書いてみたTextile 記法を扱える Wiki 的なものを作ってみた WebSocketおもしろい! nginx を前に立てるとうまくいかない><
  51. 51. おまけ
  52. 52. Text::Markdown::Pluggableもあるよ https://github.com/issm/p5-Text-Markdown-Pluggable
  53. 53. ご静聴ありがとうございました!
  54. 54. Q?

×