Markdownだけでスライドを作るCLIの大規模アップデートをした

前回の記事

blog.hiroppy.me

この一週間は、自分のOSSのみをやっていました。
そして、以下の機能を実装したのでまとめて紹介したいと思います。

スターが3000越しました🌟 やった！

github.com

変更点

機能追加

• zero-config
  • initして設定ファイルを生成する必要がなくなった
  • SEOやスライドの設定するときは生成してください
• mdxの利用が可能に
  • markdownの中でreact componentsを扱う
• Live Modeの追加
  • 登壇中にツイートをリアルタイムで流せる
• SidebarのUIを変更
  • 全体的に色を落とした
• スライドの動きをタイムラインとして可視化
  • いつページ送ったかわかる
• Recording Modeの追加
  • 音声を録音して、登壇時の状態を再現できる

内部

• monorepo化
  • https://github.com/hiroppy/fusuma/pull/101
• azure-pipelinesへの移行
• md-loader, html-loaderを抜き、MDXASTを走査する独自ローダーを追加

その他

• 画像がwebpになったため、IEとSafariでは画像が表示されなくなった
  • ブラウザ対応はやる気が出たら。(<picture> に変換するのが大変)
• 本番ビルドの最適化が行われた
• repositoryのurlを自動的に特定するように変更
• name -> title へキー名を変更(互換のためnameも使用可能)
• :smile: -> 😁 の変換が可能になった

mdxの追加

github.com

Markdownの中で、Reactコンポーネントを書けるようになりました。
これにより、Markdownではできなかったモジュールの再利用性が高まり共通化が行いやすくなります。

以下の例は、styled-componentsを使った例です。

<!-- index.mdx -->
import { Sample } from '../scripts/sample';

<Sample />

// sample.js

import React from 'react';
import styled, { keyframes } from 'styled-components';

const rotate = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
`;

const Rotate = styled.h2`
  display: inline-block;
  animation: ${rotate} 3s linear infinite;
`;

export const Sample = () => <Rotate>Hello from jsx!!</Rotate>;

スライド: hiroppy.github.io

Live Modeの追加

登壇中にツイート等を流したい場合は、このモードで起動するといいと思います。
Twitterからのツイートと fusuma本体のapiエンドポイントがあるので2つの方法でスライドに投稿が可能です。

fusuma本体がサーバーとして起動します。
もし、本体のapiを使いたい場合はどこかのサーバーにデプロイするかprivate ipに投げてください。

Twitterの取得はローカルホストからで大丈夫ですが、起動時にapiを叩くために開発者トークンを要求します。

# create .env
$ npx fusuma init -s live
# add keys to .env
$ npx fusuma live -w '@nodejs'
$ open http://localhost:3000

SidebarのUI変更

全体的に青を中心に見やすい感じにしました。

登壇者の行動をトラッキングする

lacolacoの案です。ありがとうございます。

どのページの時点で何分経過していたかの記録がほしい。だいたい終わったときに何分だったかしかわかんなくて、ページめくりとタイムスタンプのペアを後で確認できると練習に良さそう

— lacolaco / Suguru Inatomi (@laco2net) 2019å¹´6月21æ—¥

いつスライドを切り替えたかの記録を取れるようになりました。
この機能はタイマーを開始してからリセットするまで記録します。

音声を録音してタイムトラベルする

上記に加えて、音声を録音することが可能となりました。
WebRTCに対応しているchrome, firefoxのどちらか使ってください。
これにより、上記のタイムラインと音声が紐付き登壇時と同じ状態を再現できます。

また、シークバーを動かすとその時のスライドに戻れるため登壇の練習にも役に立つと思います。

Recording Mode pic.twitter.com/KCHJpureFE

— hiroppy 🇮🇪 (@about_hiroppy) 2019å¹´6月22æ—¥

機能を試したい場合は、サンプルで確認できます。

hiroppy.github.io

左下の三をクリックして、その後に上にあるディスプレイのマークをクリックするとプレゼンターモードになります。
その後に下にあるマイクのアイコンをオンにしてスタートすれば録音が開始されます。

パフォーマンス

本番ビルドでのパフォーマンスが向上されました。
FusumaではPWAの対応は行いません。(SWぐらいは入れてもいいけど、manifestは予定なし)

これ以上はgithub pagesとライブラリに依存した問題で修正ができないためこれが最高の値となります。
あとやれることは、purgecss-webpack-pluginで使ってないcss消すぐらいかな？

https://github.com/hiroppy/fusuma#performance

さいごに

かなり良くなってきているのでぜひ使ってみてください。
バグ・機能追加等のフィードバック、PRをお待ちしております。

github.com

ついったー

twitter.com