Skip to content

Instantly share code, notes, and snippets.

@xuwei-k

xuwei-k/gist-slide

Created September 3, 2011 22:35
Show Gist options
  • Save xuwei-k/1191887 to your computer and use it in GitHub Desktop.
Save xuwei-k/1191887 to your computer and use it in GitHub Desktop.
Download ZIP
gist slide
Raw
gist-slide
!SLIDE
# 超簡単にかっこいいSlideを作れるサイトをつくったよぉーー
!SLIDE
こんなことした↓
[Picture Show ためしてみたお（ ＾ω＾） ](http://d.hatena.ne.jp/xuwei/20110903/1315044919)
!SLIDE
<!-- http://twitter.com/#!/xuwei_k/status/109939435134652416 --> <style type='text/css'>.bbpBox109939435134652416 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109939435134652416'><p class='bbpTweet'>githubのgh-pages便利だわぁ<a href="http://t.co/Ltx4Ylf" rel="nofollow">http://t.co/Ltx4Ylf</a> もう全部スライド picture show でつくって、出力結果も github に置くようにしようかな(｀・ω・´) <a href="http://t.co/J6TyZbQ" rel="nofollow">http://t.co/J6TyZbQ</a><span class='timestamp'><a title='Sat Sep 03 10:42:58 +0000 2011' href='http://twitter.com/#!/xuwei_k/status/109939435134652416'>less than a minute ago</a> via web <a href='http://twitter.com/intent/favorite?tweet_id=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
しかしconscript入れなきゃいけないし、公開するにもgithubにコミットしなきゃいけいけないし・・・
[picture-show-introductionのgithubのリポジトリ](https://github.com/xuwei-k/slides/tree/gh-pages/picture-show-introduction)
!SLIDE
もっと簡単にできないか？
!SLIDE
* Picture ShowはScalaで動く
* markdownからhtmlへの出力は、そんなに時間かからない
!SLIDE
<!-- https://twitter.com/#!/xuwei_k/status/109971732554719232 --> <style type='text/css'>.bbpBox109971732554719232 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109971732554719232'><p class='bbpTweet'>picture show を GAE で動かせばいいんじゃね?
利用者側は、ブラウザ上でgist編集して、GAEのシステムに、gistのURL指定するだけで、スライドが表示されるとか。
あとはmarkdownのファイルアップロードすれば生成されたhtmlが返ってくるとか<span class='timestamp'><a title='Sat Sep 03 12:51:18 +0000 2011' href='https://twitter.com/#!/xuwei_k/status/109971732554719232'>less than a minute ago</a> via <a href="http://twitter.com/#!/download/ipad" rel="nofollow">Twitter for iPad</a> <a href='http://twitter.com/intent/favorite?tweet_id=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
一人でテンション上がっている図↓
<!-- https://twitter.com/#!/xuwei_k/status/109972078656106496 --> <style type='text/css'>.bbpBox109972078656106496 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109972078656106496'><p class='bbpTweet'>*･゜ﾟ･*:.｡..｡.:*･'(*ﾟ▽ﾟ*)'･*:.｡. .｡.:*･゜ﾟ･*<span class='timestamp'><a title='Sat Sep 03 12:52:41 +0000 2011' href='https://twitter.com/#!/xuwei_k/status/109972078656106496'>less than a minute ago</a> via <a href="http://twitter.com/#!/download/ipad" rel="nofollow">Twitter for iPad</a> <a href='http://twitter.com/intent/favorite?tweet_id=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
即実行(｀・ω・´)
!SLIDE
その結果がこのSlide !
[https://gist.github.com/1191887](https://gist.github.com/gists/1191887)
!SLIDE
1gist つくる
!SLIDE
2以下のURLにアクセス
```
http://gist-slide.appspot.com/ "gistのid" / "そのgistの中のファイル名"
```
!SLIDE
それだけ !
＼(^o^)／
!SLIDE
シンタックスハイライト効くよ !
```scala
class Hoge{
def hello = "hello"
}
```
!SLIDE
ソース公開しておいた。基本的に
[Picture Show](https://github.com/softprops/picture-show)
の必要なところ切り取ってきたくらいで、あまりなにもしてない。
gistのAPIを呼んでるくらい
[https://github.com/xuwei-k/gist-slide](https://github.com/xuwei-k/gist-slide)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment