Webでシェルを実行するwebshを作った

#slide #nim #シェル芸勉強会 #GitHubActions #webアプリ #自作

発表者次郎

https://gyazo.com/a97fac5fec737ca86d5f315c605a4395 デザイン新しくした (追記 2020/2/1)

https://gyazo.com/2b3112daf95741ade55eeaaa2f8b9d56 初期UI

自己紹介

webshとは

デモ

作った経緯

開発の話

今後の課題

まとめ

自己紹介

発表者次郎 @jiro_saburomaru

https://lh4.googleusercontent.com/-j_KBtztsqEc/AAAAAAAAAAI/AAAAAAAAAFE/vBJ2jwo9y30/photo.jpg

サーバサイドエンジニア (Go)

最近は家でも仕事でもCIで自動化フロー組んだりしている

GoとNimでCLIツールを作ったりするのが趣味

webshとは

ブラウザからシェルが実行できるWebアプリ

シェル芸botのDockerイメージを利用してる

#シェル芸でツイートする前の検証ができる

リポジトリ: https://github.com/jiro4989/websh

デモ

https://websh.jiro4989.com/

code:正弦波泳法.sh

muscular shout 正弦波泳法 -p front-relax|tee >(cat) >(cat) >(cat) >(cat)|tee >(cat) >(cat) >(cat) >(cat)|awk '{PI=4*atan2(1,1);for(i=0;i<(sin(NR/25*PI*2)+1)*5;i++){printf " "}{print $0}}'|textimg -asl25 -d5

ちょっとまて

SGWebがあるでしょ

はい

何だこのやる気のない画面は

フロントエンド何もわからないので勘弁して

作った経緯

SGWebは最新のシェル芸botに追従してなかった

あとNimでWebアプリを作って運用したかった

これが一番大きい

開発の話

長くならないように努めます

長くならないとは言っていない

システム構成

こんなかんじ

https://gyazo.com/f96ccb379c65098864688e060de47bb9

貧乏なのでサーバ1台で運用してる

初めはAWSを考えてた

高い

フルスクラッチから1日でCMSを作るシェルスクリプト高速開発手法入門改訂2版でさくらVPSを使ってたのとセットアップの話が載ってたのでさくらVPSにした

開発言語

/icons/nim.icon Nimを使ってる

フロントエンドもバックエンドもNim

フロントエンドSPAフレームワーク: pragmagic/karax

Webフレームワーク: dom96/jester

インフラはAnsibleで管理

Nimって何

構文はPythonライクで、静的型付け言語であり、コンパイルすることでC、JS、ObjectC、C++のコードを出力することができる言語

ネイティブコードを吐ける

超高速

競合はGo, Rust

2019年9月に 1.0.0 がリリースされた最近の言語 (12年目)

ちなみにGoは10年目

このあたりの記事で雰囲気が伝わる

至高の言語、Nimを始めるエンジニアへ - Qiita

Nim言語の日本コミュニティの紹介 - Qiita

今年のアドベントカレンダー

Nim Advent Calendar 2019 - Qiita

とりあえずNim触ってみてほしい

スイスイ書けて楽しいよ

とりあえずunko.towerを実装してみたので動かしてみて

Nim Playgroundでコードを試しに動かせる

code:nim

import strutils

proc unkoTower(n: int): string =

var rows: seqstring

# 先端の追加

let topPad = "　".repeat(n+2)

rows.add(topPad & "人")

# うんこの段を追加

for i in 1..n:

let pad = "　".repeat(n - i + 1)

let row = "（" & "　".repeat(i * 2 + 1) & "）"

rows.add(pad & row)

# 結合して返却

return rows.join("\n")

echo unkoTower(3)

シェル芸bot内のNim

しれっとNim製のコマンドがいくつかいる

僕がいれた

rect 矩形を切り取ったり貼り付けたりするコマンド

$ unko.shout | rect crop -x 10 -y 5 -W 6 -H 10

https://gyazo.com/acedc91b50ff5e2eaae44f5afa0c3a51

edens 独自の辞書を使用して文字列をエンコーディングする

$ edens kakikokera <<< かきとこけら

杮杮杮柿柿柿杮杮杮柿柿柿柿柿柿杮杮柿柿柿杮柿杮杮杮杮杮柿柿柿杮杮杮柿柿柿柿柿柿杮杮柿柿柿杮杮柿杮杮杮杮柿柿柿杮杮杮柿柿柿柿柿柿杮杮柿杮柿杮柿柿柿杮杮杮柿柿柿杮杮杮柿柿柿柿柿柿杮杮柿柿杮柿柿杮杮杮杮杮柿柿柿杮杮杮柿柿柿柿柿柿杮杮柿柿杮柿柿柿杮杮杮杮柿柿柿杮杮杮柿柿柿柿柿杮柿杮柿柿柿杮柿柿杮

$ edens unko <<< かきとこけら

ウンウこうんこんウウンウこうんこんコウンウこうんこコうウンウこうんここウウンウこうんここんウンウこうここんん

maze ランダムに迷路を生成するコマンド

$ maze -H:21

code:text

#######################################

# # # # # # # # #

### ####### ### # # ### # ##### #######

# # # # # #

# # ################### # ##### #######

# # # # # #

# # ### ##### # ####### # # ### #######

# # # # # # # # # # # # # # #

# # # ### # # # # # ### # ##### #######

# # # # # # # # # # #

### # ##### ##### # ### # ##### #######

# # #

### ################# ######### # # ###

# # # # # # # # # # # #

##### ########### ##### # # # # ### ###

# #

# # # # # # # # # # # # # # # # # # ###

#######################################

今後の課題

UI周り

フロントエンド何も分からない

パフォーマンス

2コアじゃ詰まりすぎる

札束で殴れ

バグ

シェルのパイプの最初のコマンドでファイルを開くと固まる

なんで起きるのかわからん

セキュリティ対策

インフラは非公開にしてるので僕がやるしかない

まとめ

webshの紹介

改善点があればissuesまたはPRください

webshの実装まわりの話

はじめてのおつかいならぬ、はじめてのWebアプリ

Nimの紹介

Nimは良い言語

流行ってほしい

終わり

https://gyazo.com/377bfd53d9cedfea3b7f13cbb4946e56