1. yami_buta

    Posted

    yami_buta
Changes in title
+電光掲示板シェル芸 その1
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,196 @@
+# 電光掲示板シェル芸とは?
+![営業中.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/9d1250c8-027a-a2bf-18ab-04f81adfe56c.png)
+電光掲示板シェル芸は、こういう電光掲示板風の文字列や画像を生成するシェル芸です。
+シェル芸botでの実行例↓
+<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/u3t58yS1XG">https://t.co/u3t58yS1XG</a> <a href="https://t.co/djpyIDLsuN">pic.twitter.com/djpyIDLsuN</a></p>&mdash; シェル芸bot (@minyoruminyon) <a href="https://twitter.com/minyoruminyon/status/1201293657753546752?ref_src=twsrc%5Etfw">December 2, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+電光掲示板シェル芸を、コマンドを実行しながら理解していきましょう。
+前提として、imagemagickとtextimgがインストールされていること。
+imagemagickだけでもできなくはないですが、textimgを使うと楽です。
+# シンプルな電光掲示板シェル芸
+「あ」一文字を、黒地に赤の電光掲示板で表示してみましょう。
+
+```bash
+$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🍎🌑🌑🍎🌑🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🌑🌑🍎🍎🌑🌑🌑🌑🍎🍎🌑
+🌑🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑🌑🌑🌑🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+```
+動作原理を説明していきます。
+まず textimg で「あ」の画像を作ります。
+
+```bash
+$ textimg あ -o/images/0.png
+```
+![0.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/9d666bfe-b6d8-2266-de15-18e17b416b54.png)
+
+画像を imagemagick(convert) に渡して、周縁の余白をトリムして、無圧縮pbmフォーマットで出力します。
+
+```bash
+$ textimg あ|convert - -trim -compress none pbm:-
+P1
+18 19
+1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
+1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1
+1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1
+1 1 1 0 0 0 0 0 0 1 0 1 1 0 1 0 1 1
+1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1
+1 1 1 1 1 1 0 1 1 1 1 1 1 1 1 1 1 1
+1 1 1 1 1 1 0 0 1 1 1 1 1 1 1 1 1 1
+1 1 1 1 1 1 0 0 0 0 0 0 0 1 1 1 1 1
+1 1 1 1 0 0 0 0 0 1 1 0 0 0 0 1 1 1
+1 1 1 0 0 0 0 1 1 1 1 0 0 1 0 0 1 1
+1 1 0 0 1 1 0 0 1 1 1 0 1 1 1 0 0 1
+1 0 0 1 1 1 0 0 1 1 0 0 1 1 1 0 0 1
+1 0 0 1 1 1 0 1 1 0 0 1 1 1 1 0 0 1
+1 0 1 1 1 1 0 0 1 0 0 1 1 1 1 1 0 1
+1 0 0 1 1 1 0 0 0 0 1 1 1 1 1 0 0 1
+1 0 0 1 1 1 0 0 0 1 1 1 1 1 0 0 1 1
+1 1 0 0 0 0 0 0 1 1 1 1 0 0 0 1 1 1
+1 1 1 1 1 1 1 1 1 1 1 0 0 0 1 1 1 1
+1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1
+```
+1行目の P1 は無圧縮PBMであることを示しています。
+2行目の 18 19 は、画像サイズが 18x19 であることを示してます。
+あとは各ピクセルの色情報で、1が黒、0が白です。
+色情報部分だけを抜き出して少し整形します。
+
+```bash
+$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '
+111111111111111111
+111111001111111111
+111111001111111111
+111000000101101011
+110000000000000011
+111111011111111111
+111111001111111111
+111111000000011111
+111100000110000111
+111000011110010011
+110011001110111001
+100111001100111001
+100111011001111001
+101111001001111101
+100111000011111001
+100111000111110011
+110000001111000111
+111111111110001111
+111111111111111111
+```
+tailコマンドで最初の2行を除去、trコマンドでスペースを除去しました。
+1と0を色表示用の文字で置換します。
+
+```bash
+$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🍎🌑🌑🍎🌑🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🌑🌑🍎🍎🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🌑🌑🍎🍎🌑🌑🌑🌑🍎🍎🌑
+🌑🍎🌑🌑🌑🌑🍎🍎🌑🍎🍎🌑🌑🌑🌑🌑🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑
+🌑🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+```
+これで文字列としては完成です。
+環境によっては文字幅が違って崩れているかもしれません。
+twitterのシェル芸botでは文字数制限で途中で切れてしまいます。
+これらの問題は、もう一度textimgに入れて画像にすることで回避できます。
+
+```bash
+$ textimg あ|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/f479d652-f0d7-cfec-7c3d-0ffc6b0ea204.png)
+# 色の変更
+上のサンプルでは背景色に🌑(新月)、文字色に🍎(りんご)を使用していますが、別の絵文字を使うことで色を変更することができます。
+
+```bash
+$ textimg あお|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍈⚪/'|textimg -s
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/3f641f99-7bab-2954-628b-40f9ec1cadf7.png)
+
+```bash
+$ textimg -z -F40 💩|convert - -trim -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/💩🌕/'|textimg -s -F10
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/759bc4c5-de06-bba2-8ad5-f17238f75151.png)
+
+# thresholdで線をきれいに
+線がガタガタしているのが気になるなら、pbm出力の前にthresholdをかけるときれいになる場合があります。
+
+```bash
+$ textimg あ|convert - -trim -threshold 50% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/27561ab2-3d59-0fe0-cb4b-bb8c95908cdd.png)
+
+-threshold 50% とするとこのようになりました。
+値を変えると、線の太さを変えることができます。
+10%
+
+```bash
+$ textimg あ|convert - -trim -threshold 10% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/c0f9cb5a-bb47-e3f3-f48b-040e54d35a91.png)
+
+70%
+
+```bash
+$ textimg あ|convert - -trim -threshold 70% -compress none pbm:-|tail -n +3|tr -d ' '|sed 'y/01/🍎🌑/'|textimg -s
+```
+![t.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/143996/b20565a2-2be7-4f51-6241-bb160e5b5d73.png)
+
+# dtimgコマンド
+dtimg は以上の操作を一発でやってくれるコマンドです。
+https://github.com/jiro4989/scripts/blob/master/bin/dtimg
+
+```bash
+$ dtimg あ -b 🌑 -g 🍎 -R -F 20 -t 20
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑
+🌑🌑🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑🍎🍎🍎🌑🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🌑🌑🍎🍎🍎🌑🍎🍎🍎🌑🌑🌑🍎🍎🍎🌑
+🌑🍎🍎🍎🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🌑🌑
+🌑🌑🍎🍎🌑🌑🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🌑🌑
+🌑🌑🍎🍎🍎🍎🍎🍎🍎🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🌑
+🌑🌑🌑🍎🍎🍎🍎🌑🌑🌑🌑🍎🍎🍎🍎🍎🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🍎🍎🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑🌑
+```
+シェル芸botにも入っているので活用しましょう。
+次回、駅の電光掲示板再現に続きます。