Terminalとウェブブラウザでプレゼンテーションの試み

発表: LILO&東海道らぐオンラインミーティング 2020-08-16 https://lilo.connpass.com/event/185258/
source: https://gitlab.com/-/snippets/3643425

Transcript

1. Terminalとウェブブラウザでプレゼンテーションの試 み _______________________________________ / LILO&東海道らぐオンラインミーティング \ | 2020-08-16 | \ KenichiroMatohara(matoken) / --------------------------------------- \ \ .--. |o_o | |:_/ | // \ \ (| | ) /'\_ _/`\ \___)=(___/
2. Kenichiro Matohara(matoken) https://matoken.org/ 鹿児島から参加 ADSL回線 下りは案外どうにかなるけど登り辛い 6月に申し込んだRakuten mini未だ来ない…… お仕事募集 mailto:work@matohara.org
3. 鹿児島らぐ 前回07/26(日) オンライン開催 Discord(音声+text+画面共有) + Eterpad(Note) 参加地域は鹿児島県x3，東京都x1，静岡県x1，岐阜県x1，愛知県x2 「Photon OSを使ってみた話」 「ssh login時の通知を簡単に設定できないか?の相談」 「ArchiveBoxで自分用WebArchive(django版)」 「5月のYoctoLTSの続報」 「ArchLinuxのインストールがうまく行かない相談」 「m3u8のプレイリストからダウンロード」 「Free RADIUSサーバーの構築についての相談」 次回08/23(日) オンライン開催
4. ____________________________________________________ < Terminalとウェブブラウザでプレゼンテーションの試み > ---------------------------------------------------- \ \ |\_/| |o o|__ --*--__\ C_C_(___)
5. なんでTerminal? 細い回線やプアなマシンで画面共有は辛い 家の回線だと3,4回に1回は画面共有に失敗する感じ 解像度をQVGAくらいに落としても失敗することが Linux環境で(低解像度の)画面共有を行うTips | edocr 前もってスライドを共有しておいて他の人に画面共有してもらう ページめくり指示とかお互い大変
6. メリットデメリット 低スペック，低帯域でもOK opencoconのターゲットPCでも行けそう? 内容をコピペできる 基本的に画像や動画は扱えない AsciiArtや Sixel対応 ?
7. mdpを利用してプレゼンテーション GitHub - visit1985/mdp: A command-line based markdown presentation tool. Markdownで記述したプレゼンテーションを表示するツール 詳細はmdp付属の sample.md を Marp Nextとほぼ同じ感じで書ける pdfでの公開はMarpで変換するのが良さそう C製 GPL-3.0 License Debian pkgあり
8. mdp注意点 MarpよりSyntaxが厳しい? 白背景だと見にくい -> -i, --invert 背景が透明で見にくい -> -t, --notrans 縦横のサイズが足りないと終了してしまう 端末サイズを広げるか，改ページしてページ分割したり， Error: Terminal height (19 lines) too small. Need at least 21 lines for slide #30. You may need to add additional horizontal rules (---) to split your file in shorter slides. 改行をして回避 Error: Terminal width (64 columns) too small. Need at least 75 columns. You may need to shorten some lines by inserting line breaks. コメントアウトの方法がわからない? <!--- コメント --->[](コメント)
9. 他のツール kittik 端末上でのプレゼンテーションツール 独自記述なので覚えたり流用がしづらそう(動作未確認) プレゼンテーションに拘らなければMarkdownをmdrとかhtml書き出しw3m/lynxと かでも $ mdr プレゼン.markdown $ markdown プレゼン.markdown | w3m -T text/html $ asciidoctor プレゼン.asciidoc -o - | w3m -T text/html $ mc -v プレゼン.pdf $ pdftotext プレゼン.pdf | lv $ pdftohtml -stdout -i プレゼン.pdf | lynx -stdin $ soffice --invisible --headless --convert-to htm:HTML プレゼン.docx && w3m プレゼン.html :
10. TerminalをWebで共有 telnetやsshなどで繋いでもらうのは慣れてない人には大変そうなのでTerminalを Webで共有する 以前は GoTTY を使っていたが開発が止まっている 今回は ttyd を利用 他に tmate, wetty, termshare なども使えそう
11. ttyd GoTTYインスパイアなC製MITライセンスなTerminal共有ツール モダンブラウザでTerminal画面を共有( Xterm.js 利用)
12. ttyd利用例 $ ttyd -p 8080 bash この状態で http://localhost:8080/ に接続するとshellが操作できる
13. 同じ端末を共有 ttydに繋ぐとセッション毎に新しいshellが起動する -> 全員違う画面 ttydでターミナルマルチプレクサのtmuxを起動して同じshellに接続するようにす る $ ttyd -p 8080 tmux new -A -s ttyd bash docker コンテナ共有とかも $ docker run -it --rm -p 7681:7681 tsl0922/ttyd
14. ttyd設定 ブラウザで接続されるたとリサイズされてしまう -> 未解決(mdpで画面が崩れた ら r keyで再読込) 誰でも操作できてしまう -R, --readonly を利用してウェブブラウザから操作できないようにする $ ttyd --readonly -p 8080 tmux new -A -s ttyd bash
15. インターネットに共有 ポートを明けたり，ルータから転送したり，トンネリングサービスなどでインターネ ットにつなげたりして共有 $ ssh -g -R 8080:localhost:8080 remote-server トンネリングサービスお手軽 $ ngrok http 8080 tor hiddenservice?
16. mdp + ttyd + tunnneling ttydでtmuxセッションを起動 ttydのportをトンネリングしてインターネット上に共有してURLをユーザに共有 tmux上でmdp等を起動 ウェブブラウザでTerminalプレゼン出来た
17. その他使えそうなツール モダンウェブブラウジング 地図表示 ウェブカム表示 画像，動画 図，装飾 tmuxで切り替えたり?
18. モダンウェブブラウジング Browsh Browsh is a fully-modern text-based browser. Firefoxをバックエンドにtextに変換 マルチバイト文字の対応未だだいまいち --http-server-mode + w3mなどが使える $ browsh --http-server-mode & w3m http://127.0.0.1:4333/https://duckduckgo.com/ コンソールでモダンなウェブが閲覧できる Browsh を試す – matoken's meme
19. 地図を表示 mapscii node.js製 MIT License snap版もある OpenStreetMapをtextでレンダリング案外実用的だけど結構重い 引数などで場所指定できないので前もって表示したい場所を別端末で開いておく
20. WebCam ttv でウェブカメラ表示 端末サイズによるがなんとなく何か居るくらい?
21. 画像，動画 cacautilsのimg2text $ img2txt lilopen02.jpg libcacaフィルターで動画再生 $ ffmpeg -i $INPUT_VIDEO -c:v rawvideo -pix_fmt rgb24 -f caca - $ vlc --vout caca $INPUT_VIDEO Webで動画をAsciiAnimeに変換 ASCII ANIMATED ある程度解像度がないと辛い
22. ASCIIFlow AsciiArtでフローがWebGUIで書ける Asciiflow - ASCII Flow Diagram Tool ASCIIFlow Infinity +--------------+ | | | | +-------------+ | +----->+ | | | | | +--------------+ | | | | +-------------+
23. Banner banner(sysvbanner) printerbanner(bsdmainutils) toilet figlet $ figlet -tk -f big "lilo&tokaidolug" _ _ _ _ _ _ _ _ | |(_)| | ___ | | | | (_) | | | | | | _ | | ___ ( _ ) | |_ ___ | | __ __ _ _ __| | ___ | | _ _ __ _ | || || | / _ \ / _ \/\| __|/ _ \ | |/ // _` || | / _` | / _ \ | || | | | / _` | | || || || (_) || (_> <| |_| (_) || <| (_| || || (_| || (_) || || |_| || (_| | |_||_||_| \___/ \___/\/ \__|\___/ |_|\_\\__,_||_| \__,_| \___/ |_| \__,_| \__, | __/ | |___/ 楽しいけど日本語が使えるものは多分無い
24. boxes $ figlet -f small "lilo&tokaidolug" | boxes -d parchment _______________________________________________________________ /\ \ \_| _ _ _ __ _ _ _ _ _ | | | (_) |___ / _|___| |_ ___| |____ _(_)__| |___| |_ _ __ _ | | | | | / _ \> _|_ _| _/ _ \ / / _` | / _` / _ \ | || / _` | | | |_|_|_\___/\_____| \__\___/_\_\__,_|_\__,_\___/_|\_,_\__, | | | |___/ | | __________________________________________________________|_ \_/____________________________________________________________/ boxes - Command line ASCII boxes unlimited! ※日本語を使うと崩れる
25. cowsay/cowthink $ cowsay -W 25 "LILO&東海道らぐオンラインミーティング 2020-08-16" _______________________________________ / LILO&東海道らぐオンラインミーティング \ \ 2020-08-16 / --------------------------------------- \ ^__^ \ (oo)\_______ (__)\ )\/\ ||----w | || || cowsay の COW をランダムに – matoken's meme cowを増やそう | edocr
26. 突然の死 $ ./echo-sd ＿人人人人人人＿ ＞ 突然の死 ＜ ￣Y^Y^Y^Y^Y^Y^￣ ＞突然の死＜ジェネレーター - 拡張 POSIX シェルスクリプト Advent Calendar 2013 - ダメ出し Blog
27. その他 libcaca, bb等 作り込むと表現力はUpしそう (cacademo, bbを実行してみよう) 個々のプレゼンテーションを作るのは手間が掛かって現実的ではないかも
28. まとめ テキスト中心の発表なら十分? プアな回線や古いPCでも実用的(Xも不要!) 他の人に画面共有お願いする場合でもページめくり指示不要 Mumbleなどで音声chatしつつttydを使うようにすると細い回線(MVNO低速な 200kbps)でも問題なさそう Terminalプレゼンを他の人にやってもらうのは難しそう……
29. ツッコミなど 「tmate は GitHub Actions でも使える。」 「数式は出せる?」 画像にしてSixelで行けないかな? SixelといえばXを動かすことも しかしそこまでいくと普通のビデオ共有のほうが軽そう Sixel Graphicsを活用したアプリケーションの御紹介 - Qiita 終了後Sixelを試してみた ttyd 1.6.1 で確認すると未だSixelは使えないようだった zmodemでファイルを送信することは可能 sz <filename> Xterm.jsを確認すると 未だ取り込まれていないaddon(xterm-addon-image) を 組み込むとSixelが動きそう
30. 奥付 発表: 「LILO&東海道らぐオンラインミーティング 2020-08-16」 発表者: Kenichiro Matohara mailto:matoken@kagolug.org powered by VSCodium + mdp + Marp CLI(pdf変換) license: CC BY-NC-SA 4.0