diff options
Diffstat (limited to 'services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal')
2 files changed, 157 insertions, 0 deletions
diff --git a/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/index.html b/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/index.html new file mode 100644 index 00000000..0b8b6d14 --- /dev/null +++ b/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/index.html @@ -0,0 +1,157 @@ +<!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 で書いた。"> + <meta property="og:type" content="article"> + <meta property="og:title" content="term-banner: ターミナルにバナーを表示するツールを書いた｜REPL: Rest-Eat-Program Loop"> + <meta property="og:description" content="ターミナルに任意の文字のバナーを表示するためのツールを Go で書いた。"> + <meta property="og:site_name" content="REPL: Rest-Eat-Program Loop"> + <meta property="og:locale" content="ja_JP"> + <link rel="icon" type="image/svg+xml" href="/favicon.svg"> + <title>term-banner: ターミナルにバナーを表示するツールを書いた｜REPL: Rest-Eat-Program Loop</title> + <link rel="stylesheet" href="/style.css?h=9513229b52eb2041b99ba1b959305633"> + </head> + <body class="single"> + <header class="header"> + <div class="site-logo"> + <a href="/">REPL: Rest-Eat-Program Loop</a> + </div> + <nav class="nav"> + <ul> + <li> + <a href="/about/">About</a> + </li> + <li> + <a href="/posts/">Posts</a> + </li> + <li> + <a href="/slides/">Slides</a> + </li> + <li> + <a href="/tags/">Tags</a> + </li> + </ul> + </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 id="changelog"> + <h2><a href="#changelog">更新履歴</a></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--intro"> + <h2><a href="#section--intro">はじめに</a></h2> + <p> + こんなものを作った。 + </p> + <div class="codeblock"> + <pre class="shiki github-light" style="background-color:#f5f5f5;color:#24292e" tabindex="0"><code><span class="line"><span>$ term-banner 'Hello, World!' 'こんにちは、' '世界！'</span></span></code></pre> + </div> + <p> + <img alt="term-banner が動作している様子のスクリーンショット" src="/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/screenshot.png"> + </p> + <p> + コマンドライン引数として渡した文字列をターミナルに大きく表示する。 + </p> + <p> + リポジトリはこちら: <a href="https://github.com/nsfisis/term-banner" rel="noreferrer" target="_blank">https://github.com/nsfisis/term-banner</a> + </p> + </section> + <section id="section--motivation"> + <h2><a href="#section--motivation">Motivation</a></h2> + <p> + 以前、<a href="https://github.com/nsfisis/big-clock-mode" rel="noreferrer" target="_blank"><code>big-clock-mode</code></a> という似たようなプログラムを書いた。 これは 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--program"> + <h2><a href="#section--program">プログラム</a></h2> + <p> + 全体の流れは次のようになっている。 + </p> + <ol> + <li> + フォントファイルを読み込む + </li> + <li> + コマンドライン引数を Shift-JIS に変換する (フォントが Shift-JIS 基準で並んでいるため) + </li> + <li> + 1文字ずつレンダリングしていく + </li> + </ol> + <p> + <code>big-clock-mode</code> が Go 製なので、今回も Go で書いた。 PNG が標準ライブラリにあったり、Shift-JIS のエンコーディングが準標準ライブラリにあったりしたのは助かった。 + </p> + <p> + フォントファイルは <code>go:embed</code> で実行ファイルに埋め込んでいるので、ビルド後はワンバイナリで動く。仕事ではスクリプト言語ばかり書いているが、やはりコンパイル言語はいい。 + </p> + </section> + <section id="section--font"> + <h2><a href="#section--font">フォント</a></h2> + <p> + フリーの 8x8 ビットマップフォントである、 <a href="https://littlelimit.net/misaki.htm" rel="noreferrer" target="_blank">美咲フォント 2021-05-05a 版</a> を使わせていただいた。 + </p> + <p> + はじめは自分でポチポチ打っていたのだが、「き」くらいまでやって挫折した。同じく 8x8 で作っていたのだが、平仮名でさえも、この小さなキャンバスにはとても収められない。 + </p> + <p> + 美咲フォントは、平仮名・片仮名に留まらず、JIS 第一・第二水準の漢字までサポートしている。第二水準ともなると一生お目にかかることのない字の方が多いくらいだが、これをこの大きさで書くというのは、もはや芸術の域である。 + </p> + <p> + さらに言うと、実のところ美咲フォントは実サイズ 7x7 で作られており、余白が設けられている。これは、単純にそのまま並べても字間・行間を確保できるようにという配慮である。おかげでコーディングまで楽になった。 + </p> + <p> + ゴシック体と明朝体があったが、私の好みで明朝体の方にした。ただ、ゴシック体の方が見やすい気がするので、フォントを選べるように後ほど拡張するかもしれない。 + </p> + <div class="admonition" editat="2022-04-27" operation="追記"> + <div class="admonition-label"> + 2022-04-27 追記 + </div> + <div class="admonition-content"> + <p> + <code>-f</code> オプションで選べるようにした。 + </p> + </div> + </div> + </section> + <section id="section--outro"> + <h2><a href="#section--outro">おわりに</a></h2> + <p> + あなたもターミナルに住んでみませんか？ + </p> + </section> + </div> + </article> + </main> + <footer class="footer"> + © 2021 nsfisis + </footer> + </body> +</html> diff --git a/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/screenshot.png b/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/screenshot.png Binary files differnew file mode 100644 index 00000000..c527879a --- /dev/null +++ b/services/blog/public/posts/2022-04-24/term-banner-write-tool-showing-banner-in-terminal/screenshot.png |
