marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を効率化。marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を効率化。2020-01-03marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。プレゼン作成を効率化。Web開発TwitterFacebookHatenaPocketこんにちは、たわです。今回はmarkdownからスライドを作成し、それを自分でスライド用のウェブサイトとして公開するまでの話です。Messあたりが有名かと思います。僕は、エンジニアの勉強会での登壇資料は、speakerdeckに公開しています。Deckですが、スライドを作るのはなかなかにめんどくさいし、デザインとかで時間を使うのもったいないものです。いつも使っているmarkdownからいい感じに作れて、そのまま公開もする流れを作ってみました。活用したツールmarp-cliFirebase実装mark-cliを導入markdownを用意ディレクトリ構成markdownを書くhtmlを出力する画像を出力する(任意)デプロイFirebase初期化firebase.jsonを編集デプロイ最後に活用したツールこの流れを実現するために使ったツールを紹介します。marp-climarpmarkdownからスライドを作るツールは色々ありますが、今回はmarp-cliを使用しました。convertersmarpはスライドを作るためのツール群でcli以外もあるのでそちらもチェックしてみると面白いと思います。FirebaseFirebase買収されて現在はGoogle配下にあるSaaSです。無料で静的ファイルをデプロイできるのでとても簡単なサイトを置くにはおすすめです。実装したものはテンプレートとしてGitHubにも公開しているので良かったら活用してください。marpを使用したスライドのウェブ公開用のテンプレートあと実際に公開しているページはこちらになります。イメージが湧くと思います。slides.tawa.memark-cliを導入まずmarp-cliをインストール。今回はbaseディレクトリ配下にmarkdownを置くことにしました。index.mdこのディレクトリ構成がそのまま公開サイトのパスになるようにしました。./base/new-page/index.mdという対応になります。該当ファイルがない場合、Firebaseはルートの404.htmlを表示する仕様なのでそれに対応する404.mdも用意しました。markdownを書くあとは、marpに記法に習ってmarkdownを書いていきましょう。GitHubのテンプレートではこのようになっています。2marpの記法では最初に設定を書くことができます。title、description、imageは出力されるhtmlのメタデータになるので必要であれば設定してください。スライドのデザインや、themeやstyleでカスタマイズしてください。詳細はmarpの公式サイトを参照してください。htmlを出力する次に作成したmarkdownを基にhtmlを生成します。生成されたファイルは、./publishedディレクトリに配置されるようにします。baseこうすることで、以下のようにhtmlが生成されるはずです。index.html画像を出力する(任意)次にスライドの一枚目を画像として出力します。僕は個人的にスライドの一枚目をOGPの画像として使いたかったのでこれをしていますが、メタデータにこだわらない人はスキップしても問題ありません。./baseこうすることで、./baseディレクトリ配下に画像が生成されます。それを./published配下にコピーします(かなり雑な書き方です)。./publishedこれで、デプロイするためのファイルは完成です。Hostingを使います。Firebase初期化まずはインストール。firebase-tools次に、初期化をします。次にfirebase.jsonを編集して、./published配下をデプロイするように設定します。}}このとき、cleanUrlsをtrueにするのを忘れないでください。することで、hoge.htmlではなくhogeだけでもアクセスできるようになります。どちらでもよくはあるのですが、URLに.htmlは最近見ないしダサいので入れました。デプロイあとはFirebaseに任せてデプロイするだけです。deployすると1分弱待てば勝手にデプロイされていくはずです。最後に実際の流れはこのような形です。実際にすべての手順をやるのはめんどくさいので、package.jsonのscriptをいい感じにして、一発で変換からデプロイまでできるようにしました(GitHub参照)。することで、markdownを編集deployスクリプト実行とするだけですぐにサイト上のスライドをすべて更新することができます。スライドを作るときは、デザイン文字の配置など内容とは関係ないことに気を使うことが多くめんどくさいですが、こうしたワークフローを整えると発表内容を構造化してmarkdownで記述することのみに集中できるのでかなり効率よくスライドができる用になったと思っています。これからスライドを使う発表のときにはこの環境を活用してやっていきます。よかったら参考にしてみてください。22:00marp-cliを使ってスライドをmarkdownから作成してウェブ上に公開するまで。2020-01-19NotionがヘッドレスCMSになる!ZEIT製のNext.jsベースのテンプレートはお手軽にブログ...こんにちは、たわです。Beanstalk...こんにちは、たわです。僕は2年前にエンジニアに転職しました...2019-10-10【実体験】僕が未経験からWebエンジニアに3ヶ月で転職したときに勉強したことをまとめますこんにちは、たわです。僕は2年前に、経営コンサルタントからW...2019-06-16【Kubernetes】GKE上に配置したアプリケーションにHTTPSでアクセスできるようにする今回自分のただのサイトをFirebaseからGKEに移してみました。»スポンサードリンクプロフィールたわです。東京から福岡移住したWeb開発の人が発信していくブログです!Twitter(たわ)note(たわ)Instagram(あすか)YouTube(あすか)関連記事2020-01-30NestJSでのモジュール分割。相互依存がつらいので細かく分けた話。Web開発2020-01-24NestJSでmiddlewareとguardとdecoratorを活用してcurrentUserを実装した話。流行2020-02-07【2020年】エンジニアフレンドリーシティ福岡フェスティバルに行って来た話。内輪感減ると良さそう。(2)月別アーカイブ検索スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。