blob: 64cf418c1e1a899178f310ed3b123abb69f7d1d9 (
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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
|
<!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="© nsfisis">
<meta name="description" content="ターミナルに任意の文字のバナーを表示するためのツールを Go で書いた。">
<meta name="keywords" content="">
<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?208c52e3b7c9db1cad782c5d30b4698f">
<link rel="stylesheet" href="/style.css?779b1a3debcaeba619f6fe500e93d525">
<link rel="stylesheet" href="/custom.css?a649ea3528d4b626fb636505d94c1144">
</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 class="section-1">
<h2 id="" class="section-header">
はじめに
</h2>
<div class="section-body">
<div class="paragraph">
<p>こんなものを作った。</p>
</div>
<div class="literalblock">
<div class="content">
<pre>$ term-banner 'Hello, World!' 'こんにちは、' '世界！'</pre>
</div>
</div>
<div class="paragraph">
<p>image::https://raw.githubusercontent.com/nsfisis/term-banner/main/screenshot.png[term-banner
のスクリーンショット]</p>
</div>
<div class="paragraph">
<p>コマンドライン引数として渡した文字列をターミナルに大きく表示する。</p>
</div>
<div class="paragraph">
<p>リポジトリはこちら: <a href="https://github.com/nsfisis/term-banner" class="bare">https://github.com/nsfisis/term-banner</a></p>
</div>
</div>
</section>
<section class="section-1">
<h2 id="" class="section-header">
Motivation
</h2>
<div class="section-body">
<div class="paragraph">
<p>以前、https://github.com/nsfisis/big-clock-mode[big-clock-mode]
という似たようなプログラムを書いた。 これは tmux の <code>:clock-mode</code>
コマンドに着想を得たもので、<code>:clock-mode</code>
よりも大きく現在時刻を表示する。</p>
</div>
<div class="paragraph">
<p><code>big-clock-mode</code>
を開発したのは、次のようなシチュエーションで使うためである。
弊社では現在リモートワークが基本だが、web
会議などで画面共有しているときに、休憩を挟んで特定の時刻から再開する、ということがある。
こういったケースで、画面上に現在の時刻を大きめに表示しておくと、モニタから離れても遠くから時刻がわかるので便利である。</p>
</div>
<div class="paragraph">
<p>それこそタイマアプリか何かを使えばいいのだが、ターミナルに棲むいきものとしては、住処から離れたくないわけだ。</p>
</div>
<div class="paragraph">
<p>しばらく便利に使っていたのだが、ひとつ不満点が出てきた。それは、再開する時刻がいつだったかを覚えておかなければならないということだ。
どこかにメモしておいてもいいが、せっかくなら現在時刻とともに表示させておきたい。</p>
</div>
<div class="paragraph">
<p>そんなわけで、「任意の文字列をターミナルに表示する」プログラムを書く運びとなった。
まあ、作らなくても探せばあると思うが、作りたいものは作りたいので知ったことではない。</p>
</div>
</div>
</section>
<section class="section-1">
<h2 id="" class="section-header">
プログラム
</h2>
<div class="section-body">
<div class="paragraph">
<p>全体の流れは次のようになっている。</p>
</div>
<div class="olist arabic">
<ol class="arabic">
<li>
<p>フォントファイルを読み込む</p>
</li>
<li>
<p>コマンドライン引数を Shift-JIS に変換する (フォントが Shift-JIS
基準で並んでいるため)</p>
</li>
<li>
<p>1文字ずつレンダリングしていく</p>
</li>
</ol>
</div>
<div class="paragraph">
<p><code>big-clock-mode</code> が Go 製なので、今回も Go で書いた。 PNG
が標準ライブラリにあったり、Shift-JIS
のエンコーディングが準標準ライブラリにあったりしたのは助かった。</p>
</div>
<div class="paragraph">
<p>フォントファイルは <code>go:embed</code>
で実行ファイルに埋め込んでいるので、ビルド後はワンバイナリで動く。
仕事ではスクリプト言語ばかり書いているが、やはりコンパイル言語はいい。</p>
</div>
</div>
</section>
<section class="section-1">
<h2 id="" class="section-header">
フォント
</h2>
<div class="section-body">
<div class="paragraph">
<p>フリーの 8x8
ビットマップフォントである、https://littlelimit.net/misaki.htm[美咲フォント
2021-05-05a 版] を使わせていただいた。</p>
</div>
<div class="paragraph">
<p>はじめは自分でポチポチ打っていたのだが、「き」くらいまでやって挫折した。
同じく 8x8
で作っていたのだが、平仮名でさえも、この小さなキャンバスにはとても収められない。</p>
</div>
<div class="paragraph">
<p>美咲フォントは、平仮名・片仮名に留まらず、JIS
第一・第二水準の漢字までサポートしている。
第二水準ともなると一生お目にかかることのない字の方が多いくらいだが、これをこの大きさで書くというのは、もはや芸術の域である。</p>
</div>
<div class="paragraph">
<p>さらに言うと、実のところ美咲フォントは実サイズ 7x7
で作られており、余白が設けられている。
これは、単純にそのまま並べても字間・行間を確保できるようにという配慮である。
おかげでコーディングまで楽になった。</p>
</div>
<div class="paragraph">
<p>ゴシック体と明朝体があったが、私の好みで明朝体の方にした。
ただ、ゴシック体の方が見やすい気がするので、フォントを選べるように後ほど拡張するかもしれない。</p>
</div>
<div class="paragraph">
<p>2022-04-27 追記: <code>-f</code> オプションで選べるようにした。</p>
</div>
</div>
</section>
<section class="section-1">
<h2 id="" class="section-header">
おわりに
</h2>
<div class="section-body">
<div class="paragraph">
<p>あなたもターミナルに住んでみませんか？</p>
</div>
</div>
</section>
</div>
</article>
</main>
<footer class="footer">
© 2021 nsfisis
</footer>
</body>
</html>
|
