• オンラインツール
  • - 計算機
    • 文字数カウント
  • - ダウンロード
    • TikTok ダウンロード
    • Douyin ダウンロード
  • - Webツール
    • BASE64
    • Base64→画像
    • 画像→Base64
    • URLエンコード
    • JavaScript
    • タイムスタンプ
    • ユニコード変換
    • JSON整形
    • 拡張子変更
    • リスト作成
    • CSS最適化
  • - 暗号化ツール
    • MD5暗号化
    • ランダムジェネレーター
  • - 画像ツール
    • 画像圧縮
    • QRコードジェネレーター
    • QRコードリーダー
    • 壁紙プレビュー
  • - 情報シート
    • 血液型遺伝
    • 服のサイズ
  • [email protected]
DopuBox
  • English
  • Español
  • Français
  • 日本語
  • 한국어
  • 简体中文
  • 繁體中文
全部 ニュース Meta Code 文化・アート
LinuxでHTMLスライドを作成する簡単なチュートリアル
2022-01-22

見たところ得られたPPTは比較的低効率なもので、内容とスタイルが分離されていないため、スライドを作るときは半分の精力を内容ではなく外観に置かなければならない。複雑で膨大なファイルフォーマットは、Unixの純粋なテキスト哲学に合致せず、特定のGUIでマウス操作するのに適しており、テキストエディタで修正することはできず、テキストツールのスクリプトで処理することはさらに難しい。さらにマイクロソフトの彼の家のフォーマットが開放されていないことに加えて、各ルートのオープンソースのOffice製品は様々な程度の互換性を作り出し、非常に分裂しています。

したがって,Webというオープンで純粋にテキストベースの業界標準があることが重要である.

準備作業:Pandocのインストール

まず、テキスト変換の神器Pandocをインストールする必要があります。http://johnmacfarlane.net/pandoc/installing.html

具体的なインストール方法については、ここでは説明しないドキュメントを参照してください。

コードのコピー
$ cabal update
$ cabal install pandoc

内容を書く

内容はプレゼンテーションの主体です。PowerPointやOpenOffice Impressの「アウトライン」は、この本体を把握するためのビューです。これにより、著者はスライドの具体的な外観、レイアウトなどの表面化されたものを一時的に忘れ、スピーチ全体の論理的な流れと要綱の要領に集中することができる。

HTMLスライドを書くと、日常のメモのように簡単に書くことができます。実際、これらのスライド自体は軽量レベルのタグ言語で書かれた純粋なテキストであり、Pandocがサポートするタグ言語(Markdown、org-mode、reST、Textile......)を使ってその内容を書くことができます。ここではMarkdownを例に挙げます。
コードのコピー

% Nonsense Stuff

% John Doe

% March 22, 2005

# In the morning

## Getting up

- Turn off alarm

- Get out of bed

## Breakfast

- Eat eggs
- Drink coffee

# In the evening
## Dinner
- Eat spaghetti

- Drink wine
------------------
![picture of spaghetti](images/spaghetti.jpg)

## Going to sleep

- Get in bed

- Count sheep

格付けタイトル、リスト、挿入画像…などの標準的なMarkdown文法がサポートされており、通常のMarkdownノートでブログを書くのと変わらない。
Pandocがメタ情報を含まないMarkdownテキストを処理してスライドを生成するには、テキストの先頭に3行%で始まるメタ情報:タイトル、作成者、日付を含む必要があります。

プレゼンテーション用の適切なHTMLドキュメントを生成するには、デフォルトでは各2段階のタイトルが独立したスライドであることを覚えておいてください。このように書くときは、各2級タイトルの下の内容を適切な長さに抑えることに注意しなければならない。

リストの表示効果は人為的に設定することができ、例えばスライドショーの時に逐条漸入し、後述する。$を使用してTeX式を挿入することもできます。Pandocは、ほとんどの現代ブラウザでサポートされているMathMLに変換したり、MathJaxを使用して古いブラウザに表示したりすることができます。
Markdownなどのタグ言語ではサポートされていないテーブルを表示したり、フォントサイズを制御したり、より複雑なレイアウトをしたりするためのHTMLをテキストに直接埋め込むこともできます。もちろん、HTMLタグが多すぎると、Markdownなどの軽量レベルのタグ言語のせいではなく、スライドを作る方法に問題があるのかもしれません。プレゼンテーション自体が伝える内容なので、複雑なレイアウトには何の意味もありません。
スタイルの定義

現在Pandocには、5つのHTMLスライドフレームワークのサポートが含まれています。

    DZSlides

    Slidy
    S5

    Slideous

    reveal.js
カスタムHTMLテンプレート
要素が動いたり、良いHTMLスライドテンプレートがあったりすると、PandocにMarkdownを純粋なHTMLクリップに変換して、自分のテンプレートに埋め込むことができます。

コードのコピー

$ pandoc slides.md -o slides.html

ラベルと各種メタ情報):

コードのコピー
$ pandoc slides.md -o slides.html -s
DZSlides

もちろん、Pandocが複数のスライドテンプレートをサポートしているため、独自のHTMLテンプレートを書く必要はありません。DZSlidesはその中で最も簡単なもので、キーボード操作→/←ページをめくること、PgUp/PgDn、Home/Endをサポートしています。

Pandocが生成したDZSlidesスライドには、外部ファイルに依存することなく、必要なCSSとJavaScriptが含まれています。

デフォルトテンプレートを使用して、DZSlidesスライドを個別にレンダリングします。

コードのコピー
$ pandoc slides.md -o slides.html -t dzslides -s
テンプレートのスタイルを調整するには、--templateでカスタムテンプレートを指定します。デフォルトのテンプレートはdefaultです。dzslidesなので、上記のコマンドは次のようになります。

コードのコピー

$ pandoc slides.md -o slides.html -t dzslides --template default.dzslides

Slidy

HTML SlidyはW 3 Cが開発した極簡主義HTMLスライドテンプレートで、余分なスタイルはなく、マウスクリックでページをめくること、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートしています。

既定のテンプレートを使用して、独立したSlidyスライドをレンダリングします。
コードのコピー

$ pandoc slides.md -o slides.html -t slidy -s

またはカスタムテンプレートを指定します。
コードのコピー

$ pandoc slides.md -o slides.html -t slidy --template default.slidy

S5
S 5(Simple Standards-Based Slide Show System)は、公有分野のHTMLスライド仕様である。マウスクリックでページをめくり、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートします。

S 5をスライドフレームとして使用するためには、ここからS 5をダウンロードする必要がある。解凍後、S 5フォルダのui/defaultをスライドのあるパスにコピーし、s 5/defaultと名前を変更すればよい。

スライドのレンダリング:

コードのコピー

$ pandoc slides.md -o slides.html -t s5 -s
Slideous
Slideousはもう一つの古いHTMLスライドフレームワークです。マウスクリックでページをめくること、キーボード操作→/←、PgUp/PgDn、Home/Endをサポートします。

ダウンロードhttp://goessner.net/download/prj/slideous/slideous.jsおよびhttp://goessner.net/download/prj/slideous/slideous.cssこの2つのファイルは、ローカルディレクトリslideous/の下に置けばいいです。

スライドのレンダリング:
コードのコピー

$ pandoc slides.md -o slides.html -t slideous -s

reveal.js

reveal.jsというものはもう赤くならないほど赤くなって、最近火をつけ始めたWYSIWYGオンラインスライドツールslid.Esもそれに基づいている。

reveal.jsのデザインスタイル(フォント、HTML 5/CSS 3効果)は前のフレームワークよりも現代的なので、特別な理由(旧ブラウザ互換性)がなければreveal.jsはやはり一番お勧めの1つです。

といってもjs自体はMarkdown構文のサポートを提供していますが、Pandocのメリットは明らかです。それは、ユーザーがHTMLに触れる必要がないコマンドで問題を解決することです。

まずGitHubから取得する必要がありますhttps://github.com/hakimel/reveal.js、reveal.jsと同じ名前のフォルダをスライドのディレクトリの下に置けばいいです。

コードのコピー
$ git clone https://github.com/hakimel/reveal.js

スライドのレンダリング:

コードのコピー

$ pandoc slides.md -o slides.html -t revealjs -s

デフォルトの外観トピック以外はreveal.jsはまた、複数のトピックを選択できます。

コードのコピー
$ pandoc slides.md -o slides.html -t revealjs -s -V theme=beige

default:(デフォルト)濃いグレーの背景、白い文字

beige:ベージュ背景、濃い文字
sky:空色の背景、白い細い文字
night:黒い背景、白い太い文字

serif:薄い背景、灰色のセリフ文字

シンプル:白い背景、黒い文字

solarized:クリーム色の背景、濃い青色の文字 LaTeX Beamer

最後に、HTMLではありませんが、PandocはMarkdownファイルをLaTeX beamerスタイルのPDFスライドにレンダリングするためにも使用できます。プレゼンテーションではなく印刷が必要な場合に特に役立ちます。

コードのコピー

$ pandoc slides.md -o slides.pdf -t beamer

その他の設定 前文の例では コードのコピー # In the morning

## Getting up


ソース元URL:https://dopubox.com/article/p/c09cda415f5f7852

その他のツール
  • 文字数カウント TikTok ダウンロード Douyin ダウンロード BASE64 Base64→画像 画像→Base64 URLエンコード JavaScript タイムスタンプ ユニコード変換 JSON整形 拡張子変更 リスト作成 CSS最適化 MD5暗号化 ランダムジェネレーター 画像圧縮 QRコードジェネレーター QRコードリーダー 壁紙プレビュー 血液型遺伝 服のサイズ
  • 週末見たい展覧会5選。今週は木下佳通代の個展、テルマエ展、UESHIMA MUSEUMなど。【2024年6月第1週】
    2024-05-29

    森鷗外の教師像に迫る 研究の「盲点」、記念館で特別展 学生の評判も紹介
    2024-06-01

    ビルケンシュトック、創業から250年の歴史を振り返る2冊を出版
    2024-06-01

    大阪はアートとデザインの街となるか? Osaka Art & Design 2024の見どころをレポート
    2024-06-03

    峰不二子役の増山江威子さん死去 声優、艶ある声でルパン翻弄
    2024-06-03

    河合隼雄賞に八木詠美さん「休館日の彼女たち」、湯澤規子さん「焼き芋とドーナツ」
    2024-06-02

    “20世紀音楽”の発展に貢献した指揮者、クーセヴィツキー。その偉業とは【クラシック今日は何の日?】
    2024-06-03

    写真家たちは強大な権力の抑圧にどう抗ったのか。バルト三国の写真家に焦点を当てる展覧会をレポート
    2024-06-04

    アレクサンダー・カルダー個展「カルダー:そよぐ、感じる、日本」が開催
    2024-06-04

    「TRIO パリ・東京・大阪 モダンアート・コレクション」(東京国立近代美術館)開幕レポート。トリオで再発見する3館のコレクション
    2024-06-05

    お台場エリアを舞台に新芸術祭「東京お台場トリエンナーレ 2025」が誕生
    2024-06-05

    「梅津庸一 エキシビションメーカー」(ワタリウム美術館)開幕レポート。きっとあなたも展覧会をつくりたくなる
    2024-06-04

    石川九楊の個展「石川九楊大全」が上野の森美術館で2ヶ月連続開催へ
    2024-06-05

    「KOGEI Art Fair Kanazawa 2024」開催決定
    2024-06-04

    書評:「日本美術史」を書き換える100年単位の挑戦。『この国(近代日本)の芸術──〈日本美術史〉を脱帝国主義化する』
    2024-06-05

    美しくて“かわいい”結びの技  1400年の歴史を誇る「水引」の可能性を探って
    2024-06-06

    「Osaka Art & Design 2024」(大阪市内)開幕レポート。何気ない日常のなかで多様なカルチャーに触れる
    2024-06-06

    藤井八冠、5連覇へ白星発進 将棋棋聖戦、山崎八段破る
    2024-06-06

    京都・祇園祭の「長刀鉾」稚児決まる 記者会見で「頑張ります」
    2024-06-06

    もしあの時に戻れたら…歌人・穂村弘が話題書『迷子手帳』で明かす、今も忘れられない「失敗」
    2024-06-07

    ©  Dopu Box
    💛