スライド投稿の作り方

[jrgong]

現在、私も選択肢を検討中です。テーマコンポーネントとして実装することは可能ですよね？

例えば、Markdownからスライドへのライブラリが利用できます。

これらは、Discourseテーマコンポーネントへの適応の容易さによってランク付けされた、最高のGitHubリポジトリです。

1. Remark.js（Discourseに強く推奨）

• GitHub: gnab/remark

• 仕組み: Remarkは、ブラウザ内で完全に実行されるように設計されています。Markdown文字列（スライドが --- で区切られているもの）をフィードすると、プレゼンテーションに必要なHTML/CSSを動的に生成します。

• Discourseに適している理由: ビルドステップが一切不要なため、テーマコンポーネント経由で remark.min.js スクリプトを簡単にロードできます。ユーザーの投稿からMarkdownを取得し、Remarkエンジンに直接渡すことができます。

2. Reveal.js

• GitHub: hakimel/reveal.js

• 仕組み: Reveal.jsはWebプレゼンテーションの強力なツールです。主にHTMLプレゼンテーションフレームワークですが、Markdownプラグインが組み込まれています。

• Discourseに適している理由: 非常に機能が豊富です（スピーカーノート、PDFエクスポート、アニメーション、数式組版）。クライアントサイドで実行可能ですが、Remark.jsよりもはるかに重いです。コアのRevealライブラリ、Markdownプラグイン、Reveal CSSテーマをテーマコンポーネントにロードする必要があります。

3. Marp（Markdownプレゼンテーションエコシステム）

• GitHub: marp-team/marp

• 仕組み: MarpはMarkdownスライドの現代的な標準であり、「ディレクティブ」の概念を利用して、Markdownのフロントマター内で直接CSSテーマ設定を処理します。

• Discourseに適している理由: MarpはレンダリングのためにCLIツールとNode.jsに大きく依存しています。ただし、Markdownを解析してHTML/CSSを出力できるコアフレームワークであるMarpit（@marp-team/marpit）を提供しています。これをDiscourseに実装するには、WebpackやRollupなどのツールを使用してMarpitをクライアントサイドJavaScriptファイルにバンドルしてから、テーマコンポーネントとしてアップロードする必要があります。

---

Discourseテーマコンポーネントとしての実装方法

これらのいずれか（Remark.jsなど）をDiscourseテーマコンポーネントに再利用するには、DiscourseプラグインAPIを使用して、ページにレンダリングされる前に特定のMarkdownブロックをインターセプトする必要があります。

以下に、構築方法の概要を示します。

1. トリガーの定義: ユーザーがいつスライドをレンダリングするようにDiscourseに指示するかを決定します。優れた方法は、特定のコードブロック言語（例: ```slides）またはDiscourse BBCodeラッパー（例: [wrap=slides]）を使用することです。

2. ライブラリのロード: テーマコンポーネントの about.json で、ユーザーがフォーラムを訪れたときにロードされるように、Remark.jsまたはReveal.jsの外部スクリプトを含めます。

3. Cookedコンテンツのデコレート: Discourse JavaScript API (api.decorateCookedElement) を使用して、投稿がレンダリングされるたびにトリガーブロックを探します。

4. レンダリング: APIが ```slides ブロックを見つけた場合、デフォルトのコードブロックを非表示にし、新しい <div> コンテナを作成し、そのコンテナ内でスライドライブラリを、コードブロックの生のテキストを使用して初期化します。