2014年9月12日金曜日

gentoo+pandoc+google-html5-slide でクールな美人スライドを作る

HTMLで作る、スライド


皆さんはもう知っているかも知れませんが、最近、美人なAPIを最近見つけてしまい、

「これは、APIで画像提供してくれているならば、是非私もいただきたい。」

とおもいまして、頑張って収集スクリプトを作って見ました。

しかし、やっぱり私は後々テキストファイルで編集するような事がしたいので

「markdownとかで編集してスライドを作るようなもんねぇーかなー...」


など思っていたところ、なんと、hackageにgoogle-html5-slideな素晴らしいパッケージがアルではないですか! @tanakhさんがgithubに上げてくださっていましたのでそちらを利用させていただき、gentooのebuilを作成しました。


最初にgoogle-html5-slideをインストールする


これは、私のgentooがローリングインストールになっているので、haskellのパッケージが色々腐った部分が発生していて、オリジナルのリポジトリからのemergeが失敗してしまうのでforkさせていただき、パッチ的なアレを適用してありますので、ご利用は計画的にお願いします。

現リビジョンで出来ないことは

  • divタグの処理が出来ない
  • spanタグの処理が出来てない
  • 色が出ない(これは致命的)

と言う感じになっています、今後修理していきます....ということでインストール


karky7 ~ # layman -a karky7
karky7 ~ # emerge -pv dev-haskell/google-html5-slide

These are the packages that would be merged, in order:

Calculating dependencies... done!
[ebuild  N    ~] dev-haskell/google-html5-slide-9999:0/9999::karky7  0 kB

Total: 1 package (1 new), Size of downloads: 0 kB

 * IMPORTANT: 25 news items need reading for repository 'gentoo'.
 * Use eselect news to read news items.

karky7 ~ # emerge dev-haskell/google-html5-slide


cuomo@karky7 ~ $ /usr/bin/google-html5-slide --help
The html5slide program

html5slide [OPTIONS] FILE

Common flags:
     --script-url=URL         URL of Google HTML5 slide script
     --slide-class=CLASSNAME  CSS class name of slide
     --style-css=FILE         Style CSS file
     --syntax-css=FILE        Syntax CSS file
     --poll                   Poll filesystem for changes
  -? --help                   Display help message
  -V --version                Print version information
cuomo@karky7 ~ $

これで/usr/binにgoogle-html5-slideコマンドが入るはずです!

美人の画像を収集してmarkdownのファイルを作成する

さぁ、画像を集める時間です、今回利用したのは、Bjin.Meっていうサイトの画像ですが、APIを提供していますのでそちらを利用して画像を取得します、でも待って!
人力で収集しなくてもいいんです、秘密のスクリプトがあるんです、他の人には内緒ですよ。

画像取得、markdownファイル作成

以下のファイルで画像を収集して、markdownファイルを作成する
このスクリプトはどこかディレクトリを掘ってそこへ設置してください。
{-# LANGUAGE OverloadedStrings #-}

import qualified Filesystem as F
import qualified Filesystem.Path as P
import Network.HTTP
import Data.Aeson
import qualified Data.Text as T
import Data.List.Split
import qualified Data.Attoparsec as AP (parseOnly)
import qualified Data.Attoparsec.Number as N (Number(I,D))
import Control.Applicative ((<$>),(<*>))
import Control.Monad
import qualified Data.ByteString.Lazy.Char8 as L8
import qualified Data.ByteString.Internal as I
import Data.Either.Utils (forceEither)

data Format = Xml | Json deriving(Show)
data RType = RRand | RNone deriving(Show)

data Req = Req {
  format :: Format,
  cnt :: Int,
  rtype :: RType
} deriving(Show)

data Vlist = Vlist {
  obj :: [Res]
} deriving(Show)

data Res = Res {
  cid :: Int,         -- コンテンID
  category :: String, -- 特定されている場合は人物の名
  thumb :: String,    -- thumnail
  link :: String,     -- Bjin.Mの表示リン
  pubDate :: String   -- このデータが発行された日
} deriving(Show)

instance FromJSON Res where
  parseJSON (Object val) = Res
                           <$> val .: "id"
                           <*> val .: "category"
                           <*> val .: "thumb"
                           <*> val .: "link"
                           <*> val .: "pubDate"
  parseJSON _            = mzero

req2url :: Req -> String
req2url r = bjnUrl ++ "type=" ++ (getrtype r) ++ "&count=" ++ show(cnt r) ++ "&format=" ++ (getfmttype r)
  where getrtype r = case rtype r of
                      RRand -> "rand"
                      RNone -> ""
        getfmttype r = case format r of
                         Xml -> "xml"
                         Json -> "json"

bjnUrl :: String
bjnUrl = "http://bjin.me/api/?"

bjnImgUrl :: String
bjnImgUrl = "http://bjin.me/images/"

getReq :: Req
getReq = Req { format = Json, cnt = 10, rtype = RRand }

getBjins :: String -> IO String
getBjins url = simpleHTTP (getRequest url) >>= getResponseBody

getRes :: Value -> [Res]
getRes res = do
  case fromJSON res of
    Success r -> r
    _ -> []

detailPics :: [Res] -> [String]
detailPics res = map (\r -> (bjnImgUrl ++ "pic" ++ show(cid r) ++ ".jpg")) res

storePics :: [String] -> IO ()
storePics [] = return ()
storePics (url:xs) = getBjins url >>= writePic file >> (putStrLn $ url ++ "...done") >> storePics xs
                       where file = last $ splitOn "/" url

mdFile :: P.FilePath
mdFile = "tammannai.md"

writePic :: String -> String -> IO ()
writePic file pic = L8.writeFile file (L8.pack pic) >> F.appendTextFile mdFile (createMd file)

createMd :: String -> T.Text
createMd file = T.replace (T.pack "<--PIC-->") (T.pack file) (T.pack center)
  where fill = "## pic1\n\n<article class='fill'>\n\n<img src='<--PIC-->'>\n\n</article>\n\n"
        center = "## pic\n\n<img  class='centered' src='<--PIC-->'>\n\n"

setHeader :: IO ()
setHeader = F.readTextFile mdFile >>= \t -> F.writeTextFile mdFile (T.pack h `T.append` t)
  where h = "% たまんない/gentoo <br>Majide Yabea ee.ee\n% @karky7\n% Sep 11, 2014\n\n君だけの思い出を創るんだっ!\n\nThere is more pictures just beautiful!.\n\n"

setFooter :: IO ()
setFooter = F.appendTextFile  mdFile (T.pack s)
  where s = "## Thank you!\n\n* [karky7.com](http://www.karky7.com)\n"

main :: IO ()
main = do
  res <- I.packChars <$> getBjins (req2url getReq)
  let vlist = getRes $ forceEither (AP.parseOnly json res)
  storePics $ detailPics vlist
  setHeader
  putStrLn "OK complete..."


そしてスライドを作成する 

後は実行するだけ、ランダムに画像を取得する仕組みになっていますが、画像がでかすぎたりするとうまく表示出来ない場合がありますので、その際はmarkdownファイルを修正してください。
実行したら、markdownファイルが作成されますので、google-html5-slideコマンドでhtmlファイルを作成してください。

最後に出来上がるのは、tamannnai,html(たまんない.html)です


cuomo@karky7 ~ $ mkdir ~/bjin
cuomo@karky7 ~ $ cd bjin/
cuomo@karky7 ~/bjin $ runghc bjin.hs 
http://bjin.me/images/pic20952.jpg...done
http://bjin.me/images/pic13645.jpg...done
http://bjin.me/images/pic248832.jpg...done
OK complete...
cuomo@karky7 ~/bjin $ google-html5-slide tammannai.md

さぁ、tamannai.htmlをブラウザで見てご覧

ぬぉぉ、これは、たまんない!でも綺麗につくれます、こんな感じになります


こんなに綺麗に簡単にスライドが作れるなら、PowerPointいらなくね?って感じになりますが...だがしかし、必要です

gentooとhaskellなら、無限の可能性を引き出せる感じがして、たまりません


いま、ドトールで書いているのデスが、隣のおねぇーさんが、こちらをみて不審そうな顔でぇ.....では


0 件のコメント:

コメントを投稿