スキップしてメイン コンテンツに移動
PB-100の宇宙の中の人
PBロッキーの日記

WSL2 で画像表示の出来るテキストブラウジング環境を手に入れる!Ubuntu 20 + w3m + mlterm + sixel

はじめに

PB-100 用 BASIC と Web 技術は得意分野ですが、Linux となると素人レベルです。その素人が書いた記事です。ツッコミはなんなりとどうぞ。

画像 OK!、<table> いける! w3m!!

PB-100の宇宙では様々なフルブラウザに加えて、テキストブラウザによるウェブページの確認を行っています。とはいえ、多種に及ぶテキストブラウザを入手してチェックすることは出来ていません。これまでは Windows 版の Lynx でいくつかのページを巡回する程度でした。

w3m で「ゴーストオブイツシマ」のページを表示する

今回は WSL2 上の Ubuntu 20.04に w3m 他をイストールして、画像付きでインターネット・サーフィンできる環境を用意できましたので、その手順のご紹介です。

w3m は CSS こそ非対応ですが、ターミナルエミュレータの中で起動することで画像のインライン表示が可能です。更に、<table> タグをレンダリングできる珍しいテキストブラウザです。

HTML5 では非推奨になりましたが border="1" 属性付きで <table> を書くと枠線も表示されますから、border="1" 属性をつけ忘れているページがあると、ぐぬぬってなります。

更に、大昔に撮影された w3m のスクリーンショットを見ていくと、テーブルレイアウトと画像を駆使した2000年前後の Web サイトは、フルブラウザとあまり遜色なく表示出来ていたようです。シュゴいです。速やかにインストールする他ありません。

w3m 他をインストールして日本語テキストブラウジング環境を用意する

Windows 10~11に WSL2 と Ubuntu をインストールした後に、次のコマンドを順次実行していきます。

日本語環境の設定

リナスク / Ubuntu環境を日本語化する」を参考にしました。

最初に

apt update しないといくつかのパッケージのインストールができない

sudo apt update

日本語パックをインストールしてタイムゾーンを設定する

sudo apt install language-pack-ja
sudo update-locale LANG=ja_JP.UTF-8
sudo dpkg-reconfigure tzdata

ここで一度 Ubuntu をリブートします。

sudo reboot

リブートしたら、次のコマンドで言語設定とタイムゾーンが変更されたことを確認します。

echo $LANG
locale
date

w3m, mlterm, sixel, 日本語 IME をインストール

sixel をインストールしなくても、w3m-img と mlterm の組み合わせで、画像の表示は可能です。しかし sixel を使った方が、画像の描画の質が向上します。

sudo apt install w3m w3m-img mlterm libsixel-bin

日本語 IME のインストール

日本語で Google 検索などをしたい場合、日本語入力環境をインストールします。

sudo apt install mlterm-im-ibus ibus-mozc
ibus-daemon --daemonize
ibus engine 'mozc-jp'

IPA フォントをインストール

いくつかのフォントを試したところ、mlterm + w3m の組み合わせで、マルチバイト文字に不自然な隙間ができない、枠線が正しく描かれる、のが IPA フォントでした。

sudo apt install -y fonts-ipafont

フォントキャッシュの更新

fc-cache -fv

ここで一度 mlterm + w3m を使ってみる(飛ばしても構いません)

次のコマンドで端末エミュレータを起動する。

mlterm

端末エミュレータから w3m を起動する。-sixel パラメータを付ける事で、sixel を使って画像が描画されます。

w3m -sixel google.com

スクリーンショット右上のコマンドメニュー(Insert で開きます)の枠線が崩れてしまっています。次からの設定で、これを修正したり、カラースキームを変更します。

mlterm の設定

vi を使ってホームディレクトリ(~)/.mlterm 下に各設定ファイルを用意します。vi は操作感の独特なテキストエディタです。操作方法はググって頑張りましょう。

~/.mlterm/aafont の内容

この設定が無いと、プリインストールのフォントが使用されますが、文字の間にスペースが出来てしまいます。

ISO10646_UCS4_1 = IPAGothic:100;
ISO10646_UCS4_1_BIWIDTH = IPAGothic:100;

~/.mlterm/main の内容

ubulog / ubuntu の端末を mlterm にする」を参考にしました。正直、よく分からないパラメータが大半です。

# 端末縦横サイズ(文字)
geometry=80x58

#ーーーーー文字関係ーーーーーーー
receive_string_via_ucs = true
# Unicode記号文字幅を半角2文字にする。
# col_size_of_width_a = 2
# アンチエイリアス(Xft)時、JISX0208 の Unicode 変換に CP932 の変換テーブルを使う
use_cp932_ucs_for_xft=true
# UNICODE を適当な文字集合にmapして、UNICODE フォントを使わずに表>示する
not_use_unicode_font=false
# すべての文字を UNICODE フォントだけを使って表示する
only_use_unicode_font=false
# US_ASCII の表示には、必ず ISO8859-1 フォントを使用する
iso88591_font_for_usascii=false
# DEC_SPECIAL フォントの罫線文字のグリフを動的に合成
compose_dec_special_font=false
# インプッドメソッドの設定
input_method = ibus:anthy

# https://github.com/hamano/locale-eaw
# 絵文字も全角にするには
unicode_full_width_areas = U+2600-27FF,U+1F000-1FFFF

#ーーーースクロールバーーーーー
scrollbar_mode = none
# 使いたいスクロールバーの名前
# (*simple* / sample / sample2 / next / motif / athena / mozmodern)
# scrollbar_view_name=sample2

#ーーーー色設定ーーーーーーーー
# 端末画面の前景色
fg_color=green
# 端末画面の背景色
bg_color=#0f0604
# スクロールバーの前景色
# sb_fg_color=#222222
# スクロールバーの背景色
# sb_bg_color=black
# 紙にする画像ファイルのパス
# wall_picture
# Focus から外れたときの前景/背景色の Fade 率(百分率)
fade_ratio=70
# 背景画像(透過処理含む)の輝度調整(百分率)
# brightness=80

~/.mlterm/color の内容

atominux / mlterm は文字化けやレイアウト崩れに強い端末エミュレータです / 色の設定」の値をほぼそのまま使いました。

black=#333333
red=#e5786d
green=#95e454
yellow=#cae682
blue=#8ac6f2
magenta=#ec448c
cyan=#99968b
white=#f6f3e8
hl_black=#444444
hl_red=#e68686
hl_green=#95e454
hl_yellow=#cae682
hl_blue=#808bed
hl_magenta=#fd559d
hl_cyan=#aaa79c
hl_white=#e6e6e6

w3m にも設定ファイル

~/.w3m/config の内容

# https://github.com/hamano/locale-eaw
east_asian_width 1

コマンドメニューの枠線が正しくなり、カラーリングもダークで目に優しいものになりました。

検索ボックスで日本語の入力ができる事も確認します。

以上です、お疲れ様でした。

白源フォントで枠線が残念だった件

【Linux】フォントをインストールする」を参考に、日本語などのマルチバイト文字でも余計な空白が現れないという報告のあった「白源フォント」をインストールしました。

しかし、テキスト UI で横の枠線が点線になります。設定で簡単に直るものなのか?フォント側で対応が必要なのか?よく分かりません。出来れば、絵文字をモリモリサポートする「白源フォント」を使いたいところでした。

白源フォントのインストール

sudo apt install unzip
wget https://github.com/yuru7/HackGen/releases/download/v2.9.0/HackGen_NF_v2.9.0.zip
unzip HackGen_NF_v2.9.0.zip
sudo mv HackGen_NF_v2.9.0 /usr/local/share/fonts/
rm HackGen_NF_v2.9.0.zip
fc-cache -fv

~/.mlterm/aafont の内容

ISO10646_UCS4_1 = HackGen Console NF:100;
ISO10646_UCS4_1_BIWIDTH = HackGen Console NF:100;

この他には、「細明體」という明朝体フォントでも空白が現れないとの情報を目にしています。しかし普段使いのフォントはユニバーサルデザインフォントかゴシック系が良いかなと思います。