この記事はfusicアドベントカレンダー10日目の記事です。
どうもこんにちは。
会社の先輩により、パワハ...めいれ..どうしても明日と交代してくれと、お願い(脅迫)されて、この記事を書き殴っています。うそです。
今回は、marp cliというjavascriptのツールを使って、あの面倒極まりないスライド作成を爆速。。もとい、秒殺してやろうとおもいます。
前提
- nodeの環境が整っていること
- ある程度の文章の体裁が整っていること
- power pointが使えること(必須ではない)
marp cliの導入
そもそもmarpとは、markdownの記法を使ってslide資料をつくるためのライブラリです。
有名どこだと、reveal.jsとか、remarks.jsとかあるとおもいますが、まあ、その亜種だとおもっておけばいいです。
と、いったら怒られそうなので、神ツールであると、ここに宣言します。
さて、導入ですが、
$ npm i -g @marp-team/marp-cli
でいれたら終わりです。簡単ですね!
使い方
というか、ぶっちゃけ、https://github.com/marp-team/marp-cli のREADMEみたら一発です。
なにか、slide用のmarkdownを作成してmarp slide-deck.md
を実行すればよいです!
超簡単ですね!
ちなみに中身ですが、例えばこんな感じでかいとけばいいです。
---
title: QiitaAPI |> Marp-cli |> PPTX => 秒殺でLT資料をつくる
theme: uncover
class: invert
image: https://marp.app/og-image.jpg
---
## QiitaAPI |> Marp-cli |> power point => 秒殺でLT資料をつくる
---
もうね。テーマとか、いい感じにしてくれた時点でなかなかいいとおもいます。
一回書いた内容を2回として書きたく無いですもんね。
QiitaAPI
そこで登場するのが、QiitaAPIです。
Qiitaで一度書いた記事をSlideへ変換し、スライド資料まで一気に作ってみましょう。
記事の取得
ここがいい感じにまとまってます!
今回は、「ある記事をスライド資料へ変換する」ことが目的なので、https://qiita.com/api/v2/items/:item_id
で取得しましょう。
例えば、僕の以前の記事を取得すると、以下のようにとれます。
「IDA*探索(pattern database)でパズルを解く」
こんな感じでとれるので、このbodyの部分をつかうことにします!
QiitaAPI |> Marp-cli
取得したデータを一旦ファイルヘ保存する必要があります。
まずは、その処理を書きましょう。
$ curl -O https://qiita.com/api/v2/items/7cb49607ce0d146c6697
$ cat 7cb49607ce0d146c6697 | jq -r ".body" >> 7cb49607ce0d146c6697.md
ここで書き込まれたmarkdownファイルをmarpに食わせましょう。
$ marp 7cb49607ce0d146c6697.md
こうすることで、うまくいく。そんなわけないですね!(笑)
#
の文字が入る度にmarpにおける改ページ処理をいれなければなりません。
markdownを整形する
とはいえ、#
の文字がでてくるたびに、改行処理のための---
を挟み込むだけです!
sed -i '/^$/d' 7cb49607ce0d146c6697.md
IFS=''
while read line
do
if [ ${line:0:1} = "#" ]; then
echo "" >> slide.md
echo "---" >> slide.md
echo "" >> slide.md
echo $line >> slide.md
echo "" >> slide.md
else
echo $line >> slide.md
fi
done < 7cb49607ce0d146c6697.md
スライド作成に当たって、空白行はいらないので、sedで消しておきましょう。
ここまでした後にmarp slide.md
を実行しましょう!
結果がこちら!
写真についてはなんだか、うまくいってないみたいです。
ここはローカルで挟み込むか、なんやかんやしてがんばるしかないですかね、たぶん。
Marp-cli |> PPTX
marp slide.md -o pptx
を実行するか、marp -s .
でサーバーをたてれば、以下のように画面から取得できます。
おまけ
netlifyで発表資料をUpload
package.json
へscript { "build": "./build.sh" }
を追加して、スクリプトを準備してあげれば良いです!
試しにこのページをUploadしてみました!
みてやってください。
https://5deedeca334c7decadf6d0d4--infallible-sinoussi-3abb48.netlify.com/
おわりに
まあ、完璧とはいきませんが、めんどくさい作業を少し減らせたと思うといいのかな。。。?
リポジトリです! > https://github.com/TsuMakoto/marp2pptx