LaTeX_to_PDFfile_and_htmlfile の変更点

追加された行はこの色です。
削除された行はこの色です。
LaTeX_to_PDFfile_and_htmlfile へ行く。
LaTeX_to_PDFfile_and_htmlfile の差分を削除
#author("2020-05-14T12:57:04+09:00","","")
#author("2020-05-14T20:30:42+09:00","","")
*LaTeX から PDFファイルと htmlファイルを作る 2020年5月13日 [#o28c573c]

#contents

** 遠隔授業の準備で少し学んだこと [#rff46735]

テキストを作るときには、まずは \( \LaTeX \) で作成する。
\( \LaTeX \) source file をコンパイルして、
PDFファイルを作る。
これが正本。

同じ \( \LaTeX \) source file を T&subsc{T};H で処理して、
htmlファイルを作成する。
これが、htmlコンバート版の元ファイル。
この、html ファイルを少し触って完成させる。

このやり方が作り易いと思ったのでした。


** LaTeX source file から PDFファイルを作る [#ted8cf37]

\( \LaTeX \) source file の作り方は……（省略）。
[[このあたり>LaTeXめも]] にメモはある。

 $ uplatex source; dvipdfmx source

これで PDFファイルが完成。


** LaTeX source file から htmlファイルを作る [#n82ba414]

\( \LaTeX \)  source file から htmlファイルを作成するのには
いくつかプログラムがあって、例えば、htlatex は TeX Live に
元々入っている。
しかし、htlatex は、いい感じの PDFファイルが出来るように
調整した \( \LaTeX \)  source file をそのまま処理するのは不得意
（事実上不可能）。
ずっと以前は latex2HTML を使っていたのだけれどインストールが面倒で
（今はマシンが違うのでインストールし直さなければならなかったのです）。

そこで、今回、別なプログラムを使ってみた。~
それが、T&subsc{T};H。

ホームページは↓~
http://hutchinson.belmont.ma.us/tth/

プラズマ物理学を専門としている Ian H. Hutchinson さん
（http://www.psfc.mit.edu/people/faculty/ian-h-hutchinson
または
http://hutchinson.belmont.ma.us/hutchinson/ian.html
Plasma Science and Fusion Center,
Massachusetts Institute of Technology）の作。

数式も簡単な方法で html に変換してくれる。
また、html の文法が厳しくなるに従って、タグがややこしいのはイヤだよね&#12316;、
との考えもあって、デフォルト設定では &lt;head&gt; と &lt;body&gt;
のタグさえ出力しない。
でも、これくらいはほしいという人（←ワタシも、です）にはと、-w1 
オプションを付ければ出力するよ、として下さっている。ありがたや。

*** インストール [#wbf0d179]

http://hutchinson.belmont.ma.us/tth/distribution.html
にある [[link to download list>http://hutchinson.belmont.ma.us/tth/tth-noncom/download.html]]
から Windows executable（zip圧縮）をダウンロード

解凍し、tth_exe フォルダ毎、/usr/local/bin/ に置いた。~
exeファイル本体は 
 /usr/local/bin/tth_exe/tth.exe
にあるので、path を通す
（Windows10 では再起動しなくてよい((さすがにネタが古過ぎるか……))）。


*** htmlファイルの作成 [#pe4231b4]

PDFファイルと一緒に作成すればいいので

 $ uplatex source; dvipdfmx source; tth -w1 source

でおっけい

 \( \LaTeX \)  で hyperref を使ってリンクを作っておくと、
\( \LaTeX \)  で hyperref を使ってリンクを作っておくと、
きちんと &lt;a href="○○"&gt; としてページ内リンクや外部リンク
を作ってくれる。
目次から小見出しへ、また本文から文献やフッタに飛びます。

T&subsc{T};H で処理して作った htmlファイルには図は取り込まれず
（&lt;img src="○○"&gt; などにはならず）、
図へのリンクが作成される
（ &lt;a href="○○"&gt;Figure&lt;/a&gt; となる）。
そこで、クリック（タップ）不要の１枚物（？）の htmlファイルにするためには、
図のリンクを <img src="○○"> に変更しなくてはならない。
この置換は簡単。
これだけ修正すれば最低限はOK。

** Water.css：クラスなしCSSフレームワーク [#yd67b4c3]

クラスなしCSSフレームワークとして Water.css を利用すると
読み易さが向上する。
使ったのは lightテーマ（light.css）。

Moodle に置かれたテキストをPCで読むなら、または、印刷して読むのなら、
PDFファイルは適切だと思うのだけれど、
スマートフォンで読むにはあまりよろしくない。
そこで、単純な htmlファイルを作っておけば、一応は読めるけれども、
今度はPCでは読みづらい。

Moodle に置いた htmlファイルは、
ほぼ単独で読めるものを作っておく必要があるので
（Moodle は html の環境を作らないため）、
クラスなしCSSフレームワークは便利なのです。
いくつか試したところ、Water.css はなかなかよかったので
これを使うことにした。

Moodle に置いた htmlファイルを
スマートフォンで開くと、
少し右のマージンが大きくなってしまうので、
少し拡大したほうが読み易くなるのが玉に瑕。
でも、それ以外は、素のhtmlファイルよりずっとよい。
何より、レシポンシブル対応になる。
文字の大きさや英語のフォントなど全体もいい感じになるし、
また、table は１行毎に色が白と薄いグレーの縞々になるし、
quote もカッコいい。

Water.css のデモは↓~
https://kognise.github.io/water.css/

ソースファイルは↓から取得~
https://github.com/kognise/water.css	

htmlファイルの &lt;head&gt; と &lt;/head&gt; の間に
 <link rel="stylesheet" href="light.css">
と書き、htmlファイルと同じディレクトリに light.css を置けばよい。
Moodle なら、ほかの図のファイルと一緒にアップロードすればよく、
ディレクトリ構造を気にする必要がない。

|Today:&counter(today); |Yesterday:&counter(yesterday); |Total:&counter(); since 13 May 2020|