LoginSignup
12
2

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-12-09

この記事は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)でパズルを解く」

スクリーンショット 2019-12-09 23.14.46.png

こんな感じでとれるので、この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を実行しましょう!

結果がこちら!

output.gif

写真についてはなんだか、うまくいってないみたいです。
ここはローカルで挟み込むか、なんやかんやしてがんばるしかないですかね、たぶん。

Marp-cli |> PPTX

marp slide.md -o pptxを実行するか、marp -s .でサーバーをたてれば、以下のように画面から取得できます。

スクリーンショット 2019-12-10 1.31.41.png

おまけ

netlifyで発表資料をUpload

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

おわりに

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

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

12
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
2