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 ではなくて、こちらでテキストを管理するようにしようと思います。

日本化学会第106春季年会2026/03/20（金）

日本化学会の第106春季年会に行ってきました。会場は日本大学理工学部船橋キャンパスです。日本化学会の春季年会は、基本的には「関東・関東・関西」の順で担当されていて、以前はわりといろいろな大学で開催されていたのですが、関東地区は最近「日大船橋キャンパス」か「東京理科大野田キャンパス」の二択になってきていますね。会場を提供していただける大学が少なくなってきているのかもしれません。

今回は、１日目が卒業式と重なったため、２日目からの参加です。ここのところ毎回回っていた「カーボンニュートラル」関連のシンポジウムは、今年は１日目にしかなかったため、別のところを回ってきました。

光化学関係のシンポジウムは、「あーこういうことやりたい（やりたかった）んだよなあ」という発表がいくつかありました。しかし、よく話を聞いてみると、「９年かかりました」とか話されていて、なかなか成果が上がらなくても諦めないことが大事だ、ということがよくわかりました。ただ、別のシンポジウムで、「再現性が出ないので学生のやる気が上がらず、方針転換した」というようなお話もありましたので、やはりそこはバランスをとっていかないといけません。

面白かったのは、3/19午前の「水の科学と技術が開く持続可能な未来」というシンポジウムでした。自分の専門とはかけ離れた内容だったのですが、思いのほか興味深い話がいろいろありました。トヨタ自動車の陶山博司氏のご講演で、トヨタのハイブリッド車はずっとニッケル水素電池が主流だった、とさらっと紹介されていて、ああそうだったんだ、と認識を新たにしました。確かに、初代プリウスの頃は、リチウムイオン電池よりもニッケル水素電池の方が製品化に近いところにあったのでしょう。ご講演の主題はピロリン酸カリウムの濃厚水溶液を電解質として使う、という話で、学術的にも非常に面白かったです。動作中に pH が変動すると思うんだけど、ピロリン酸が加水分解や縮合を起こしてオルトリン酸やトリリン酸ができたりしないのかな、と思いました。³¹P NMR を測定したらわかりそうですが、どうなのでしょうか（質問するチャンスがなかった）。

あと、最近ペロブスカイト太陽電池が話題なので、「次世代太陽電池の基盤技術と実用化」というシンポジウムも覗いてきました。コストと耐久性が課題だ、というのは認識していたのですが、第一人者の宮坂先生（桐蔭横浜大）が「ペロブスカイト材料よりも、透明電極・封止剤など周辺要素のコストが高い」とお話しされていたのは印象的でした。また「化学と物理の両方がわかる人がこれから必要になる」というお話もあって、うちの学科（４月から「化学・物質学科」になります！）がドンピシャやん、とも思いました。司会者から「若い人に何を伝えたいですか」と問われて、宮坂先生が「電池って、発電って、おもしろいな、と思ってほしい、わたしたち教員がそういうメッセージを送っていきたい」と答えられたのは、さすがでした。宮坂先生は、研究の話をするとき楽しそうですもんね。

有機化学１の成績2026/02/19（木）

有機化学１の成績が確定しました。集計した結果を報告します。（前年度の結果はこちら）

前年度と比べると、平均点が2.8点、合格率が4ポイント下がりました。大まかに言うと、前期の有機化学基礎の成績分布をそのまま10点ぐらい左に動かしたような分布になっています。

ただ、中身を見ると、有機基礎と有機１の点数の間にはあまり相関がありませんでした。要は、有機基礎の点が高くても有機１の点が低い人がかなりいるし、その逆も成り立つ、という状況です。毎回調べているわけではないのですが、こんなに相関が低いことってある？と戸惑っているところです。

採点していて感じたのは、今回は「特定の単元を捨てている人がけっこう多いな」ということです。全体的にかなりできている人でも、１つの問題がまるまる白紙、というケースがわりとありました。解答時間が足りなかった、というのもあったようですが、全体的に消化不良を起こしているのかな、とも感じました。

今回はレポートに質問を書いてきた人もけっこう多かったし、講義中はわりと手応えはあったんですけど、なかなかうまくいかないものですね。ある程度内容をスリム化することも考えた方がいいかなとは思っています（少しずつ進めていますが）。ただ、やっぱり大学の化学科として譲れない一線はありますので、そこの兼ね合いをどうするか、考えていきたいと思います。

ChemRxivのデザイン変わった？2026/01/30（金）

卒研生たちの発表スライドをチェックしていて、修論を引用するところを ChemRxiv のプレプリントの引用に差し替えてもらおうとサイトを確認したところ、ページのデザインが変わっていてびっくりしました。いつから？

えらくすっきりしたモダンなデザインになりました。以前の、ちょっと無骨なデザインがわりと好きだったんですけどねえ。

少し見づらくなった気がします。"Published" の情報が雑誌名しかなくて、年・巻・ページを見ようとするとリンクを辿らないといけない。デザイン優先で機能が犠牲になってるんじゃないかなあ。最近のウェブサイトって、そういうデザインが増えてますよね。オシャレを優先すんなよ、と思うんですけど、考え方が古いんかなあ？？

なお、この記事の最初に引用したのは、去年の11月に出した新作です。査読を通すことを考えなくてよければ、論文書くのって楽しいんですよね……でも査読通さないと研究を完成させたことにならないので、まあ今年は頑張ります（毎年言ってる）。

デジタルサイネージを作る2025/11/27（木）

ある事情で、デジタルサイネージ（っぽいもの）を作ることになりました。複数の画像を準備しておいて、自動で切り替えながら表示します。こんな感じです。（何を表示しているかは、ご想像にお任せします）

さくっと作れるだろう、と思っていたのですが、ファイルの内容を表示するところでつまづきました。掲示内容は PDF で用意してあるのですが、PDF の表示がどうも微妙です。ブラウザの中でいろいろ複雑なことをやっているようで、周りに枠がついたり、表示が少し遅れたりします。

今回の目的には、PDFの「文書」としての機能は不要です。そうすると、画像に変換して表示する方がよさそうです。そこで、ImageMagick を使って、288 dpi の PNG ファイルに変換しました。１個 150 KB ぐらいのサイズになってしまいますが、まあ今どきこの程度のサイズは許容範囲でしょう。ついでに、PDF ファイルの周りの空白も削除しました。

$ for i in *.pdf; do magick -density 288 $i -trim ${i/pdf/png}; done

表示の自動切り替えは、JavaScript の setTimeout 関数を使って実装します。このとき、CSS の transition 属性を使うと、「フェードアウト→フェードイン」という機能も実現できます。<html> の背景色を黒、<body> の背景色を白に設定して、通常は <body> が見えるようにしておきます。切り替えの時は、<body> の opacity を 0 にすると、<body> が消えて <html> の真っ黒な背景に変わりますが、このとき <body> に transition: 0.5s を指定しているため、0.5 秒かけて徐々に変化します。その後、表示内容を切り替えて、opacity を元に戻すと、また 0.5 秒かけて <body> の表示が復活します。

/* JavaScript */
/*  スライドショー  */
function onTimer() {
  /*  次の画像  */
  let v = nextImage();
  /*  body を徐々に消す  */
  body.classList.add("hide");
  timerID = setTimeout(() => { /* 1.5秒後に呼び出す */
    /*  表示する画像を切り替える  */
    let img = document.getElementById("img");
    img.src = "images/" + encodeURIComponent(v) + ".png";
    /*  body を徐々に表示する  */
    body.classList.remove("hide");
    timerID = setTimeout(onTimer, 30000);
  }, 1500);
}

/* CSS */
html {
  background-color:black;
}
body {
  background-color:white;
  margin:0;
  padding:0;
  transition: 0.5s;
}
body.hide {
  opacity:0%;
}

今どきの学生さんなら、AI を使ったら一発でできるのかもしれません。私はAIコーディングを全く使えないので、すべて手書きです。AIコーディング覚えた方がいいのかなあ……それを勉強している間に手書きで書けてしまう気がするので、なかなか意欲が湧かないんですよね。本業とはまったく関係ないし（苦笑）