QiitaAPI |> Marp-cli |> PPTX = 秒殺でLT資料(の元)をつくる


この記事は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.jsonscript { "build": "./build.sh" } を追加して、スクリプトを準備してあげれば良いです!
試しにこのページをUploadしてみました!
みてやってください。
https://5deedeca334c7decadf6d0d4--infallible-sinoussi-3abb48.netlify.com/

おわりに

まあ、完璧とはいきませんが、めんどくさい作業を少し減らせたと思うといいのかな。。。?

リポジトリです! > https://github.com/TsuMakoto/marp2pptx