Wordで書いた講義資料をスマホ対応にする2026/03/26（木）

私が担当している有機化学の講義で、「講義資料を事前に読んできてね」と呼びかけています。講義資料は Word で書いて、A4サイズ8-10ページのPDF形式で提供しています。こんな感じのものです。

さて、みなさんこれを読んできてくれるでしょうか。まあ、読まないですよね。何が問題かというと、読みにくいんです。昔は、紙に印刷して読むことを想定していました。それなら、まあ読める。また、今これをパソコンで見ている人は、上の図をクリックしたらブラウザで PDF が開きます。それも、まあ読める。でも、スマホで読むのは無理です。文字が小さすぎる。

スマホで読みやすくすれば、もう少しハードルが下がるんじゃないか、と思ったのです。HTMLで書いて、レスポンシブ対応にしたらいいわけです。Webサイトのレスポンシブ対応は、このサイトでもやっていますし、そう難しいものではありません。

問題は、docx で作成した資料を html に変換するところです。Microsoft Word の html エキスポートはなかなかよくできていて、元の文書の構造をかなりよく反映したファイルを作ってくれますが、タグに属性がめちゃくちゃたくさんついていて、非常に見通しが悪いのです。また、文書内容と直接関係のない情報が非常に多い。下のスクリーンショットは、第１章の冒頭部分ですが、この上の 1677 行が head セクションです。いやそれは長すぎるやろ。

タグを整理する Python スクリプトを頑張って書いて、CSS も頑張って書いて、なんとかレスポンシブ対応までこぎつけました。まあまあいけてるやん。スマホでこの程度に表示できれば、目を通す気に少しはなるんじゃないか、と期待します。

まだ改善の余地があります。PC で見るとこんな風になります。図が小さい感じがします。

Wordによるhtmlエキスポートでは、72 dpi で作成した小さい png と、元の図の情報を持っている emz（Windows 独自形式）のファイルができています。emz を png に変換できないかな、といろいろ探し回って、LibreOffice でできることを発見しました。まず svg 形式に変換して、そこから Python スクリプトで png データを抜き出します。

soffice = "/Applications/LibreOffice.app/Contents/MacOS/soffice"
os.system("{} --headless --convert-to svg --outdir '{}' '{}'".format(soffice, outdir, emz))
if os.path.exists(svg):
  #  Read the svg as text, and extract png data
  with open(svg) as sf:
    ss = sf.read()
    p1 = ss.find("data:image/png;base64,")
    if p1 >= 0:
      p2 = ss.find("\"", p1)
      if p2 >= 0:
        base64str = ss[p1+22:p2]
        decoded = base64.b64decode(base64str)
        with open(png, "wb") as pf:
          pf.write(decoded)
        #  Resize the png to 2x size of the exported png
        os.system("magick mogrify -resize {}x{} '{}'".format(width, height, png))

アルファチャンネルを持つ図はうまく変換できないこともあるのですが、手動で対応していくしかないですね。

また、CSS の @page ルールを使って、印刷用の設定を組み込みました。Chrome しか対応していませんが、PDF を作る時もこれでいけそうです。今後は、docx ではなくて、こちらでテキストを管理するようにしようと思います。