ImageMagickで88x31ボタンブックを作成する
Making a 88x31 button book using ImageMagick (k.sosnierz.me)
要約
この記事では、ImageMagickとテキスト処理ツールを使用して、88x31ピクセルのアニメーションGIFボタンに『白鯨』全文を表示させる方法を解説しています。低解像度でも可読性の高いフォントの選定や、コマンドラインでのテキスト整形、GIF生成の手順が具体的に示されています。さらに、Pythonスクリプトを用いたテキスト中央揃えのボーナス例も紹介されています。
全文翻訳
ImageMagickで88x31ピクセルのボタンブックを作成する
ホームページ 最終編集: 2024年11月16日
(POSIXシステム上で)
はじめに
インターネット(特にスモールウェブ)を長時間サーフィンしていれば、88x31ピクセルのボタンをいくつか見かけたことがあるかもしれません。それらのいくつかは以下のようになっています。
[画像: どのHTMLブラウザでも最良の表示]
しかし、コンピュータディスプレイの良い点は、急速に変化するビジュアルに対応できることです。そのため、アニメーションを備えたものもあります。
[画像: Vimで編集 — 改良され無料 — 私は私のエディタを愛しています]
非常に多くの例の中で、この軸(幅)に関してそれほど遠くまで行っているものを見かけないことに気づきました。通常、アニメーションは目を引くためか、いくつかの単語を連続して表示するために使われます。しかし、なぜ『白鯨』ではダメなのでしょうか?
サイズの制約
GIFファイルに格納できるフレーム数に制限がなく、最大解像度が2^16 x 2^16、つまり4295メガピクセルであることに驚きました。もちろん、私たちは88x31ピクセル(または0.003メガピクセル)に限定しています。これは、通常のテキストフォントがあまり輝くスペースを得られない可能性があることを意味します。例えば、Arialは最低10ピクセルの高さで判読可能になるようで、一度に約11語を表示できます。
[画像: One two three four five six seven eight nine ten eleven.]
代替フォント
コンピューティングでよくあるように、一般的な慣習は誰かを十分に不快にさせるため、彼らは代替手段を開発します。この場合、私たちが探している代替手段は、非常に小さなフォントサイズでも判読できるように設計されたフォントです。3x3ピクセルのものもありますが、個人的にはTomThumbがここで黄金の中庸だと考えています。TomThumbはトゥルータイプで入手できます。
[画像: TomThumbフォントのすべてのグリフ]
『白鯨』の入手
まず、本のコンテンツのプレーンテキストコピーを入手したいでしょう。アクセスできるフォーマットによって方法は異なります。例えば、物理的な本からテキストを取得するためにOCRを使用することができます。.EPUBや.PDFからは変換できます(または手動でテキストをコピーすることもできます)。あるいは、運が良ければ、『白鯨』のように、すでにプレーンテキストの.txtファイルとして提供されているものを見つけるかもしれません。
ファイルをダウンロードし、先頭と末尾のライセンスを削除しました。最初の章より前のすべてを切り取りました。
作品のフォーマット
ボタンが88x31ピクセル、フォントが6x4(5x3 + スペーシング)だとすると、それぞれ22文字の5行を収めることができることがわかります。使用するツールであるImageMagickは、テキストの配置があまり得意ではないため、自分で処理するのが賢明でしょう。これを行うにはいくつかの方法がありますが、最もきれいなのは3つのPOSIXツールを使用することです:cat、tr、fold:
cat input.txt | tr ' ' ' ' | tr -d ' ' | fold -s -w 22 > 22w.txt
catはテキストをtrに送信するために使用されます。trは各改行をスペースに変換し、テキストファイルを1行に圧縮します。次にfoldはその1行を取り、22文字幅までの複数の行に分割し(-w 22)、単語を途中で分割しないように試みます(-s)。
この時点で、テキストはうまく表示されている可能性が高いです。私の場合はfoldがマルチバイト文字をうまく処理できないため、少し文字化けしていました。input.txtに含まれる非ASCII文字を確認し、sedを使用して削除しました。例:`sed -i 's/”/