インフラ整備 つぼラボ


 ホームページを作るにあたっては、自分の好みに合わせて次のようなものを理想として掲げ、それらを実現しやすいように各種ツールを整備しました。

数式は綺麗に表示する

 以前から利用されてきた画像ファイルによる数式表示には、
・文字の境界がぼやける
・色調が本文文字とは微妙に異なる
・画像化に手間がかかる
などの問題があります。 これらを解決するには、オンラインの数式表示ツールMathJaxを使って、TeX形式で表現するのが便利です。
 しかし、たまに使うだけでは、すぐには使用方法が思い出せません。そこで準備したのが MathJax早見ページ です。(MathJaxのTeX文字を多量に含むため、ページの表示完了までに少々の時間を要します。高性能パソコンでも数秒、遅いパソコンでは1分以上かかります。)
 また、プログラムでTeX文字を対話的に操作しようとすると、TeX文字のhtml内部構造の情報が必要になることがあります。そのときに使えるのが TeX文字→HTMLコード変換 です。

図も綺麗に表示する

 ビットマップ形式の図は、画素が荒いと、拡大したときにギザギザが目立って美しくありません。 そこで、写真などは別として、グラフや説明図などの線画はできるだけベクトル形式のsvg図を使うことにします。
 私が作図に使用しているJW-CADやMATLABなどのソフトから、svg形式のファイルを作るのは次の方法によれば可能です。

  JW-CAD, MATLAB → Acrobatでpdfファイルに出力 → Inkscapeでsvgファイルに変換

 しかし、次の工程のトリミング作業となると、jpg形式の写真などのためのアプリは多数あるものの、svg図用のツールはなかなか見当たりません。あったとしても、文字書き込み用のスペースを確保しながらのトリミング作業は意外に難しいものです。 そこで作成したのが SVG図のトリミング です。(MATLABから直接出力したviewBox情報を含まないsvg図には対応していません)

図中文字の書体を本文と合わせる

 一般に、作図ソフトで使用できるフォントの種類は限定的です。そのため、図中文字と本文文字のフォントが一致しないケースが多々見られます。できることなら一致させたいものです。そこで、本サイトでは、作図ソフトで作るのは文字なしの図の本体だけとし、文字は図上にhtmlで重ね書きすることにしました。
 しかし、いざやってみると大変な作業です。文字の位置情報の数値を書き替え、ブラウザで試表示しながら、目的の位置に落ち着かせるには何回もの試行錯誤が必要です。文字数が多い図では、1枚仕上げるだけでも一日作業になってしまいます。この作業の効率化のために作ったのが 図中文字の編集 です。(jpg写真や、MATLABから直接出力したsvg図にも対応しています)

対話形式で面白いページにする

 以上で紹介したインフラ用の各種ツールのページは、すべて対話形式で操作できるように作ってあります。これをできるだけ他のページにも拡大したいと考えています。対話操作を実現するためのJavaScript言語については、ネット上に既に多くのお役立ちサイトがあり、私も頻繁にお世話になっています。ただ、「正規表現」は覚え難く躓くことも多いので、自分なりに分かり易い 正規表現 早見ページ を作ってみました。

拡大時も、横スクロールは不要

 最近のホームページは、ページのレイアウトをスタイルシートで固定化し、拡大縮小やウィンドウ幅の変更などをしても、頑としてレイアウトを崩さないものが多くなっています。しかも、小さ目の薄墨色の文字でコントラストが低いものが目立ちます。これでは老眼の年寄りには大きなストレスになります。
 文字を読みやすくしようと画面を拡大すると、ページの両端が画面外にはみ出し、横スクロールしないと見えなくなります。横スクロールできればまだ良い方で、できないページも少なくありません。縦スクロールだけで全体を閲覧できる環境に比べると、かなりの不自由さを感じます。
 このような問題をなくすため、本サイトでは画面幅に応じてレイアウトが適宜変わるような、昔ながらの画面構成にしています。

閲覧環境を限定する

 これは、理想とは逆の、自分の能力に合わせた目標レベルの緩和です。プロの方々はできるだけ多くの閲覧環境を想定し、それらに対応できるページ作りに努力します。しかし、プロ並みの配慮をしていては、いつになったら公開できるかわかりません。当サイトでは、閲覧用のブラウザとして Windows 10 パソコン上の Chrome, Firefox, Edge, IE11 しか想定しておりません。それぞれのブラウザの長短などについては、推奨環境を参照ください。
 なお、対応外ではあっても、試用してみると、Android とか iOS のスマホや iPad でも一見それらしく表示されます。しかし使用を進めると、レイアウト崩れの発生、操作性の低さなど、色々な不備が目立ってストレスを感じてきます。力不足で申し訳ありません。


© TsuboLabo 2019
当サイトの閲覧や記載内容から生じる如何なる問題も免責とさせていただきます。
リンクは歓迎ですが、ページ構成の変更によりリンク切れすることもあります。

改訂履歴
2019A: 
初アップロード (2019-12-26)