blob: 35fb1e6891a9ace652363d5040b3bc75930e8b0c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
<!DOCTYPE html>
<html lang="ja-JP">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="nsfisis">
<meta name="copyright" content="© 2022 nsfisis">
<meta name="description" content="ターミナルに任意の文字のバナーを表示するためのツールを Go で書いた。">
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<title>term-banner: ターミナルにバナーを表示するツールを書いた | REPL: Rest-Eat-Program Loop</title>
<link rel="stylesheet" href="/hl.css?h=208c52e3b7c9db1cad782c5d30b4698f">
<link rel="stylesheet" href="/style.css?h=779b1a3debcaeba619f6fe500e93d525">
<link rel="stylesheet" href="/custom.css?h=38829d5e1dc8776c51bbc34984de8807">
</head>
<body class="single">
<header class="header">
<nav class="nav">
<p class="logo">
<a href="/">REPL: Rest-Eat-Program Loop</a>
</p>
</nav>
</header>
<main class="main">
<article class="post-single">
<header class="post-header">
<h1 class="post-title">term-banner: ターミナルにバナーを表示するツールを書いた</h1>
</header>
<div class="post-content">
<section>
<h2 id="changelog">更新履歴</h2>
<ol>
<li class="revision">
<time datetime="2022-04-24">2022-04-24</time>: 公開
</li>
<li class="revision">
<time datetime="2022-04-27">2022-04-27</time>: -f オプションについて追記
</li>
</ol>
</section>
<section id="section--_はじめに">
<h2><a href="#section--_はじめに">はじめに</a></h2>
<p>
こんなものを作った。
</p>
<pre class="monospaced">
<code>$ term-banner 'Hello, World!' 'こんにちは、' '世界！'</code>
</pre>
<p>
image::https://raw.githubusercontent.com/nsfisis/term-banner/main/screenshot.png[term-banner のスクリーンショット]
</p>
<p>
コマンドライン引数として渡した文字列をターミナルに大きく表示する。
</p>
<p>
リポジトリはこちら:<a xl:href="https://github.com/nsfisis/term-banner">https://github.com/nsfisis/term-banner</a>
</p>
</section>
<section id="section--_motivation">
<h2><a href="#section--_motivation">Motivation</a></h2>
<p>
以前、https://github.com/nsfisis/big-clock-mode[big-clock-mode] という似たようなプログラムを書いた。 これは tmux の<code>:clock-mode</code>コマンドに着想を得たもので、<code>:clock-mode</code>よりも大きく現在時刻を表示する。
</p>
<p>
<code>big-clock-mode</code>を開発したのは、次のようなシチュエーションで使うためである。 弊社では現在リモートワークが基本だが、web 会議などで画面共有しているときに、休憩を挟んで特定の時刻から再開する、ということがある。 こういったケースで、画面上に現在の時刻を大きめに表示しておくと、モニタから離れても遠くから時刻がわかるので便利である。
</p>
<p>
それこそタイマアプリか何かを使えばいいのだが、ターミナルに棲むいきものとしては、住処から離れたくないわけだ。
</p>
<p>
しばらく便利に使っていたのだが、ひとつ不満点が出てきた。それは、再開する時刻がいつだったかを覚えておかなければならないということだ。 どこかにメモしておいてもいいが、せっかくなら現在時刻とともに表示させておきたい。
</p>
<p>
そんなわけで、「任意の文字列をターミナルに表示する」プログラムを書く運びとなった。 まあ、作らなくても探せばあると思うが、作りたいものは作りたいので知ったことではない。
</p>
</section>
<section id="section--_プログラム">
<h2><a href="#section--_プログラム">プログラム</a></h2>
<p>
全体の流れは次のようになっている。
</p>
<ol numeration="arabic">
<li>
<p>
フォントファイルを読み込む
</p>
</li>
<li>
<p>
コマンドライン引数を Shift-JIS に変換する (フォントが Shift-JIS 基準で並んでいるため)
</p>
</li>
<li>
<p>
1文字ずつレンダリングしていく
</p>
</li>
</ol>
<p>
<code>big-clock-mode</code>が Go 製なので、今回も Go で書いた。 PNG が標準ライブラリにあったり、Shift-JIS のエンコーディングが準標準ライブラリにあったりしたのは助かった。
</p>
<p>
フォントファイルは<code>go:embed</code>で実行ファイルに埋め込んでいるので、ビルド後はワンバイナリで動く。 仕事ではスクリプト言語ばかり書いているが、やはりコンパイル言語はいい。
</p>
</section>
<section id="section--_フォント">
<h2><a href="#section--_フォント">フォント</a></h2>
<p>
フリーの 8x8 ビットマップフォントである、https://littlelimit.net/misaki.htm[美咲フォント 2021-05-05a 版] を使わせていただいた。
</p>
<p>
はじめは自分でポチポチ打っていたのだが、「き」くらいまでやって挫折した。 同じく 8x8 で作っていたのだが、平仮名でさえも、この小さなキャンバスにはとても収められない。
</p>
<p>
美咲フォントは、平仮名・片仮名に留まらず、JIS 第一・第二水準の漢字までサポートしている。 第二水準ともなると一生お目にかかることのない字の方が多いくらいだが、これをこの大きさで書くというのは、もはや芸術の域である。
</p>
<p>
さらに言うと、実のところ美咲フォントは実サイズ 7x7 で作られており、余白が設けられている。 これは、単純にそのまま並べても字間・行間を確保できるようにという配慮である。 おかげでコーディングまで楽になった。
</p>
<p>
ゴシック体と明朝体があったが、私の好みで明朝体の方にした。 ただ、ゴシック体の方が見やすい気がするので、フォントを選べるように後ほど拡張するかもしれない。
</p>
<p>
2022-04-27 追記:<code>-f</code>オプションで選べるようにした。
</p>
</section>
<section id="section--_おわりに">
<h2><a href="#section--_おわりに">おわりに</a></h2>
<p>
あなたもターミナルに住んでみませんか？
</p>
</section>
</div>
</article>
</main>
<footer class="footer">
© 2021 nsfisis
</footer>
</body>
</html>
|
