ANSIエスケープシーケンスで遊ぶ
発表者 次郎
目次
自己紹介
ANSIエスケープシーケンスとは
ANSI escで遊ぶ
textimgと実装
まとめ
自己紹介
発表者 次郎 @jiro_saburomaru
https://lh4.googleusercontent.com/-j_KBtztsqEc/AAAAAAAAAAI/AAAAAAAAAFE/vBJ2jwo9y30/photo.jpg
社会人2年目のサーバサイドエンジニア
GoとNimでCLIツールを作ったりするのが趣味
2019年4月に前職を退職
2019年7月に転職先が決まりました /icons/クラッカー.icon
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
textimg テキストを画像に再現
今回話す
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
textchatチャットアプリのUIをテキストで再現
$ ojichat | textchat
https://gyazo.com/87135f634cb5b8b169b529070cbf2188
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
edfsay 地球防衛軍のセリフを叫ぶ
$ edf words shout screem
前進ーっ！
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
align テキストの位置を揃える
$ (echo あ; echo あい; echo あいう)|align right
code:bash
あ
あい
あいう
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
rect テキストを矩形で切り貼りする
$ unko.shout | rect crop -x 10 -y 5 -W 6 -H 10
https://gyazo.com/acedc91b50ff5e2eaae44f5afa0c3a51
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
5ktrillion だいたい5000兆円欲しがる
$ 5ktrillion
年給5無量大数円欲しい！
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
rainbow 虹色のANSIエスケープシーケンスを出力する
$ rainbow -f ansi_f -t こんにちは
https://gyazo.com/0febacf303240071d545f6761196b826
自己紹介
ジョークCLIコマンドを作ったりしてる
シェル芸botに入れていただいたもの
taishoku テキストで退職届を出力する
$ taishoku
https://gyazo.com/64b450fbdd2f5d37433ca17cb2c7a2cd
自己紹介
清楚系シェル芸人
ゆるふわ難読化シェル芸人
ANSIエスケープシーケンスを使った画像シェル芸をすることが多い
今日はこれについて話す
ANSIエスケープシーケンス
一例
$ env | grep --color=always HOME
https://gyazo.com/76f751f17058bc664c93280dc08973a4
他にもlsとかやったときに出力される文字に色がついているのはANSIエスケープシーケンスによるもの
ANSIエスケープシーケンス
ANSI escape code - Wikipedia
ビデオテキスト端末および端末エミュレータのカーソル位置、色、およびその他のオプションを制御するための帯域内シグナリングの標準
色を付ける以外にも色々できる
ANSIエスケープシーケンス
code:ansi_esc.sh
for i in {1..9}; do
echo -e "\x1b[${i}m $i TEST \\\\x1b[${i}m \x1b[m"
done
ANSIエスケープシーケンス チートシート - Qiita がまとまってて参考になる
$ color 1f 1b # メモ
ANSIエスケープシーケンス
エスケープシーケンスの種類は多岐にわたる
エスケープシーケンスだけで１年稼げるくらい話せる内容がある
今日は色に関するエスケープシーケンスだけを扱う
ANSI escで遊ぶ
とりあえず、各自の端末で出力を確認してみる
code:color.sh
color() {
seq $1 $2 | while read i; do
echo -ne "\x1b[${i}m \\\\x1b[$(printf %03d ${i})m \x1b[m"
done
echo
}
color 30 37 # 文字色
color 40 47 # 背景色
color 90 97 # 文字色
color 100 107 # 背景色
赤の例
$ echo -e "\x1b[41m RED \x1b[m"
ANSI escで遊ぶ
以下のシェルをターミナルにコピペして実行してみる
code:creeper.sh
cat << EOS | sed -e 's/g/\x1b[42m \x1b[m/g' -e 's/b/\x1b[40m /g'
gggggggg
gbbggbbg
gbbggbbg
gggbbggg
ggbbbbgg
ggbbbbgg
ggbggbgg
gggggggg
EOS
#シェル芸
ANSI escで遊ぶ
ターミナルで絵を表現できて楽しい
別に楽しくするのがこの機能の本質ではない
人間を視覚的な支援をするのに使える
ANSI escで遊ぶ
実務で役に立つ使い方
以下のようなログ
code:/var/log/httpd/access.log
2019-01-01 00:00:00 prd-web INFO 192.168.0.101 - - 12/May/2014:20:41:48 +0900 "GET /index.html HTTP/1.1" 200 114 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0"
2019-01-01 00:00:00 prd-web WARN 192.168.0.101 - - 12/May/2014:20:41:48 +0900 "GET /index.html HTTP/1.1" 404 114 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0"
2019-01-01 00:00:00 prd-web ERROR 192.168.0.101 - - 12/May/2014:20:41:48 +0900 "GET /index.html HTTP/1.1" 500 114 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0"
ANSI escで遊ぶ
パット見、読めない
色を付けて読みやすくする
code:color_log.sh
cat access.log | sed -E \
-e 's/.*INFO.*/\x1b[32m&\x1b[m/g' \
-e 's/.*WARN.*/\x1b[33m&\x1b[m/g' \
-e 's/.*ERROR.*/\x1b[31m&\x1b[m/g'
ANSI escで遊ぶ
CSVに色を付けてみたり
code:human.sh
(
echo "ID,名前,年齢,性別,職業,趣味,備考"
for i in {1..10}; do
echo -e "$i,$(faker name),$(shuf -en1 {1..100})歳,$(shuf -en1 男 女 シェル芸人),$(shuf -en1 学生 教師 警官 エンジニア 学者 医師 教授 作家 記者 超心理学者 ディレッタント 探偵),$(shuf -en1 実用シェル芸 難読化シェル芸 うんこシェル芸 画像シェル芸),なし"
done
)
code:color_csv.sh
sed -E 's/(^,+),(^,+),(^,+),(^,+),(^,+),(^,+),(^,+)/\x1b[31m\1,\x1b[32m\2,\x1b[33m\3,\x1b[34m\4,\x1b[35m\5,\x1b[36m\6,\x1b[37m\7\x1b[m/g'
ANSI escで遊ぶ
端末上ではテキストに色を付けられた
これを画像に起こしたい
さらには、シェル芸botで見られるようにしたい
そこで、textimg
textimgとは
端末上に表示されるテキストを画像に再現する自作のコマンド
ANSIエスケープシーケンスによる色装飾を再現する
リポジトリ GitHub - jiro4989/textimg
Go言語製
絵文字も画像に起こせる
アニメーションGIFにもできる
textimgとは
使い方
先程のCSVにtextimgをつなげてみる
echo hogefuga | textimg -o out.png
基本的にパイプで渡して使うケースを想定
textimgとは
インストール
https://github.com/jiro4989/textimg/releases でバイナリを配布してるのを使う
Dockerを使える方は docker run -v $(pwd):/images -it jiro4989/textimg テキスト
textimgとは
こんな感じで、ターミナル上でテキストに色を付けてイラストを表現する系のコマンドをシェル芸bot上で見られるようになった
$ screenfetch | textimg -s
https://gyazo.com/f50ffa28904c2521f923ac3f834fd56e
textimgとは
こんな感じで、ターミナル上でテキストに色を付けてイラストを表現する系のコマンドをシェル芸bot上で見られるようになった
$ unko.tower -s シェル芸 8 | lolcat -f --freq=0.5 | textimg -s #シェル芸
https://gyazo.com/e96dbcceaec8c1b7c477d8347cebdb31
textimgとは
こんな感じで、ターミナル上でテキストに色を付けてイラストを表現する系のコマンドをシェル芸bot上で見られるようになった
$ ls -lah | ccze -A | textimg -s #シェル芸
https://gyazo.com/f90995e05dae965f24f9f086a88397cb
textimgとは
こんな感じで、ターミナル上でテキストに色を付けてイラストを表現する系のコマンドをシェル芸bot上で見られるようになった
$ bigunko.show | textimg -s #シェル芸
https://gyazo.com/77b569e26123363c21815c9ff4f7801b
textimgとは
-aというオプションと-lというオプションを組み合わせて色々アニメーションできる
-aはアニメーション画像を生成する という宣言
-lは何行の入力データを１フレーム画像に描画するか
code:anime.sh
eval 'unko.shout '{こんにちは,こんばんは}';' | textimg -a -o /images/b.gif
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/d267516a4f0c87f69208caa5bd13a89e
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/948b212dc410b030cc970c5a80937b3c
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/223acc494b1c8be63259c8ce0d829c38
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/b69da0365622aafed06369c2f0046d4e
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/58d3ae2dadc1e54d507b2e3b9b069ead
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/553b9d9ebdb16a9b6eecfa386f67e5f2
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/5ab287dd7fdcf7d44b354537846d4954
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/b952ffb68c6032246cc738442cbc9fd0
textimgの実装
ざっくり話すテキスト分解
https://gyazo.com/8e101f8c7958308aa6bed228cdc094d7
textimgの実装
フローチャートにすると以下
PlantUML Web Server
https://gyazo.com/54da60536bd0f33f835c05e445e22290
textimg開発の経緯
bigunko.showをシェル芸botで見られるようにしたかった
bigunko.showが存在するリポジトリ super_unko
これにつきる
https://gyazo.com/77b569e26123363c21815c9ff4f7801b
textimg開発の経緯
今は普通に絵文字も描画できるが、最初はできなかった
textimg開発の経緯
今は普通に絵文字も描画できるが、最初はできなかった
できるようした経緯はojichatショック
https://gyazo.com/2c9a7fc9db1c1354b310f70466f73fb4
textimg開発の経緯
ojichatが描画できるようになったことによってみんなのアイドルキングウンコも画像として描画できるようになった
$ unko.shout | textimg -s
https://gyazo.com/6c31c7a78aedf481f99b41bc1edf4b64
嬉しい想定外として、画像シェル芸で様々な使われ方をしている
想定外の使われ方の一例
https://twitter.com/minyoruminyon/status/1154971537096658944
https://twitter.com/minyoruminyon/status/1152234241771487233
まとめ
ANSIエスケープシーケンスは楽しくて、便利
画像シェル芸楽しいよ
謝辞
textimgが誕生したことも、多機能になっていったことも、そうしたいと思うようになったことも、すべてはこのシェル芸botとそのコミュニティが存在したからこそ、起こり得たことです
そもそも僕がシェル芸botを知ったきっかけも、blacknonさんがたまたま僕のつぶやきを見かけたからでした
次郎のつぶやき
Blacknonさんのシェル芸
シェル芸botの開発、運用をされているふるつきさん、上田先生、そしてtextimgを作るきっかけをくださったシェル芸人の皆様に心から感謝します
まとめ
code:owari.sh
(owari funnySunday | head -n 8 && owari big) | align left | owari kan -gi -a $(echo 終了{,,,,,,,,,,}|tr -d " ") | echo-sd -s | cat <(echo) - <(echo)|align center -p 終 -n 80 | sed -E 's/(終|たのしい休日)/\x1b[31m&\x1b[m/g;s/了/\x1b[32m&\x1b[m/g;s/　/終/g'
https://gyazo.com/ff8c47a90ee50940b3cc897b99baefbd
#text #image #cli #シェル芸 #slide #第43回_シェル芸勉強会振り返り