はじめに
PB-100 用 BASIC と Web 技術は得意分野ですが、Linux となると素人レベルです。その素人が書いた記事です。ツッコミはなんなりとどうぞ。
画像 OK!、<table>
いける! w3m!!
PB-100の宇宙では様々なフルブラウザに加えて、テキストブラウザによるウェブページの確認を行っています。とはいえ、多種に及ぶテキストブラウザを入手してチェックすることは出来ていません。これまでは Windows 版の Lynx でいくつかのページを巡回する程度でした。
今回は 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
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;
この他には、「細明體」という明朝体フォントでも空白が現れないとの情報を目にしています。しかし普段使いのフォントはユニバーサルデザインフォントかゴシック系が良いかなと思います。