Ruby on Browser に続いて Ruby WASM/WASI で電卓っぽいものを作りました。 ongaeshi.hatenablog.com

テキストボックスの内容を入力としてRuby スクリプトに渡して評価し実行結果を出力します。つまり入力→変換→出力するRubyアプリケーションがブラウザ上で簡単に作れます。コードはURLに記録されるので簡単に共有することができます。

基本

Rconv.set()メソッドに渡したブロックの中身が変換プログラムになります。ブロック引数に渡されるのはテキストボックスの内容がevalされたものです。Always string = true のときは常に文字列になります。ブロックの戻り値、もしくは標準出力に何か出力されたときはその内容が、そうでないときはブロックの戻り値が出力されます。

例えば irb 風の挙動を作りたいときはこんな感じ。(入力途中で出てくるエラーメッセージも大変分かりやすくてここはCRubyの蓄積が効いているなぁと思います)

Rconv.set(title: "Rconv", default: 1) do |e|
  p e
end

自分はRubyでいくつかのキーワードをまとめて置換するテキストフィルターみたいなやつをよく書くのですが、そういうのも得意です。

Rconv.set(title: "テキスト置換", default: 1) do |e|
  e.gsub(/\bProgress\b/, "Progressssss")
  .gsub(/@color\b/, "@colorrrr")
  .gsub(/@tty\b/, "@ttyyyyyy")
end

応用

10進数を16進数、2進数に変換したり、

def to_hex_bin(num)
  puts num
  puts "0x" + num.to_s(16)
  puts "0b" + num.to_s(2)
end

Rconv.set(title: "10進数を16進数、2進数に変換",
          default: 4660) do |e|
  to_hex_bin(e)
end

byteからKiB, MiB, GiBに変換とか。

def b2k(byte, n)
  (byte / (2 ** n).to_f).round(2)
end

def puts_b2k(byte, n, unit)
  v = b2k(byte, n)
  puts "#{v} #{unit}" if v != 0
end
  
def byte_to_kib(byte)
  puts "#{byte} byte"
  puts_b2k(byte, 10, "KiB")
  puts_b2k(byte, 20, "MiB")
  puts_b2k(byte, 30, "GiB")
  puts_b2k(byte, 40, "TiB")
  puts_b2k(byte, 50, "PiB")
  puts_b2k(byte, 60, "EiB")
end

Rconv.set(title: "byteからKiB, MiB, GiBに変換") do |e|
  byte_to_kib(e)
end

またRuby/WASMはCRubyなのでちまたにあるRuby スクリプトを移植することができます。自分は昔作ったcaseninjaというgemを移植しました。(変数名を任意のケースに変換することができるプログラム) 結構愛用しています。

(これは長いのでリンク貼ります) Caseninja -rconv

おわりに

rconv/sample.ja.md at main · ongaeshi/rconvにここで紹介したサンプルコードも置いてあるので是非遊んでみてください。よいものができたら #rconv とかで教えてくれると喜びます。

2022-07-19

毎日簡単に更新できてサクサク閲覧できるブログシステムを作った

Jekyll + GitHub Actions で構築。ブログの開設から記事の更新まで全てWebインターフェース上で完結します。

github.com

https://day.ongaeshi.me/ が実際に自分が使っているやつなので、これを見るとどんな感じのものが作れるか分かると思います。

記事の投稿

マークダウンに日付を付けた見出し(# 2022-07-19)を作ると中身がその日の投稿になります(例: _days/2022.md)
# 2022-07-19 今日の出来事のように日付の後ろに空白を開けて記事にタイトルを付けることもできます
_days/ディレクトリ以下の全ての.mdファイルが投稿対象になります(ファイルの分割単位は自由です)

記事の投稿に新規ファイルの追加が不要なため、編集用のURLをブックマークしておいて一番上に見出しを追加すれば記事の投稿が完了します。 1ファイルから複数の記事を発行できるので、コンテンツの移動や統合も簡単です。

新規ブログの開設の仕方

https://github.com/ongaeshi/day#%E3%83%87%E3%83%97%E3%83%AD%E3%82%A4 の手順に沿って進めます。

GitHubにtemplateという仕組みを使っているため、Use this templateボタンをクリックして自分のレポジトリを作って、あとは自分の設定をしてください。

カスタマイズ

中身は Jekyll なので好きにやってください。

うまく動かない、使ってみたなどありましたら@ongaeshiまで教えていただけると喜びます。

2022-04-17

Ruby on Browser 1.0 リリース

ruby

窓の杜で取り上げていただいた後も実装は少しずつ続けていて、ひとまずブラウザ上で最新のRubyを試すのに必要な機能は一通り実装できたんじゃないかと思う。リファレンスマニュアルへのリンクを貼ってシンタックスハイライトを入れたりCtrl+Enterで実行できるようにした。(自分が書いたサンプルコードはScrapboxにあるのでコピペして試せます)

https://rubyonbrowser.ongaeshi.me/

f:id:tuto0621:20220417001111p:plain

モバイルでも簡単なコードだったら書けるように色々工夫したのでちょっとしたコードを書きたいときにぜひ試してみてほしい。(Select Allボタンは結構こだわった)

f:id:tuto0621:20220417001229p:plain

他のブラウザ言語処理系と大きく違うこととして「ファイルを読み書きするAPIも使える」ということがある。元々WASIがWASMにファイルIOや通信を持せたることを目的にしたものなのでRuby WASM/WASI自体がファイルIOを持っており、そこにWasmerFSというブラウザ上に仮想ファイルシステムを持たせることができるライブラリと組み合わせて実現している。

おかげで以下のようなサンプルコードをブラウザ上で実行できる！PC上で実行するよりもはるかに安全に色々試せるのはとてもよい。(ファイルはブラウザリロードで消える)

https://docs.ruby-lang.org/ja/latest/class/File.html#I_TRUNCATE

f:id:tuto0621:20220417001133g:plain

まだまだ伸びしろを感じているのでもうしばらくRuby WASIで遊ぶ予定。

2022-03-26

Ruby On BrowserとRuby WASM/WASIの雑感

Ruby WASM/WASI の発表にえらくテンションが上がったので、勢いで作ったものが窓の杜で紹介されてびっくりしました。(それだけ注目されているということですね)

Ruby On Browserは51行しかないHTMLでまだまだ荒削りなのでもっとちゃんとしたものを試したい方は是非TryRuby playgroundのCRuby 3.2.0dev をお試しください。

Ruby On Browser自体もまだまだ発展させていくつもりですが、現状Ruby WASM/WASIを触ってみていいなあと思ったことです。

1. 簡単に自分好みのブラウザRubyが作れる

Try Rubyのようにブラウザ上でプログラミング言語が試せること自体は現在はそこまで珍しくないですが、クライアントサイドだけで(しかもとても短いコードで)動かせるのは大変魅力的です。個人のPCやイントラネット上に好みのカスタマイズを加えたブラウザRubyを簡単に構築することができます。

2. wasmファイルの入れ替えが簡単

Webアプリ自体はそのままにバイナリファイルの ruby.wasm を入れ替えるだけで別バージョンのRubyを試すことができます。

3. 最新版がすでにNightlyビルドされている

すでにCRubyのレポジトリに取り込まれているため常に最新の.wasmが動くのも大きいです。Nightlyビルドを使えば一番簡単に最新版を試せる環境となりそうです。(2022-03-25現在のruby.wasmは9.8MiBなので1週間分保管しておいても70MiB程度)

f:id:tuto0621:20220326231418p:plain

4. ファイルAPIが使える

内部で使っている @wasmer/wasmfs はメモリ上に仮想ファイルシステムを構築できるため、File.read, File.write のようなファイルAPIもブラウザ上で動かすことができます。(今実験中です)

WASI自体はファイルシステム以外にソケット通信などもサポートしているため、将来的には require "net/socket"やrequire "net/http"もできるようになるかもしれません。夢が広がりますね。

2022-03-12

gifアニメにお絵描きできるGifDrawerをリリースしました

リモートワークでスクショやgifアニメに手書きコメントを付けて共有する機会が増えたのですが、手書きコメントにもアニメーションがつけられたら便利なんじゃないかと思い作りました。

インストール

https://github.com/ongaeshi/GifDrawerのtagsから最新版をダウンロードして適当なところへ展開してexeをダブルクリックすれば動きます。gitレポジトリを直接cloneしてもよいです。

お絵描きしながらタイムラインを動かすことでアニメーションがつけられます。コマ送りを使うと書きやすいです。ペンタブで書きたい人はWindows InkをOFFにしてください。

gifや画像をドラッグ＆ドロップするとそれを背景にしてお絵描きできます。

ソフトウェア構成

ClipScriptというタイムラインに連動したアニメーションをスクリプトで記述できるアプリケーションの上で作っています。 ClipScriptはOpenSiv3DのAPIをmrubyにバインドして動いています。

大部分がスクリプトで動いているためmain.rbのパラメータを変更すると色セットやペンの太さを変更することができます(本当はもっと色々できます)。

# 調整用パラメータ

# ペンの色
# "navy", "blue", "aqua", "teal", "olive", "green", "lime", "yellow", "orange"
# "red", "fuchsia", "purple", "maroon", "white", "silver", "gray", "black"
PEN_COLORS = ["red", "blue", "green", "black"]

# ペンの太さ
PEN_THICKNESSES = [1, 2, 4, 8]

# 消しゴムの太さ
ERASER_THICKNESS = 32

# gifアニメが未設定のときの終了時間
DEFAULT_END_TIME = 3

# コマ送りの再生レート(1が60fps、3で20fps)
FRAME_ADVANCE_RATE = 3

.
.

おわりに

感想や質問など #gifdrawer ハッシュタグを付けたりしてつぶやいてもらえたら嬉しいです。

2022-01-10

残りゲーム体力が少なくてもブラウザゲームをRubyで簡単に書きたい

crisp-game-libというゲーム制作体力が残り10%でもゲームが書けるJavaScriptのライブラリがあるのだが、それをOpal に移植してRubyで書けるようにした。(画面クリックで遊べます)

2色のりんご🍎が落ちてくるので、同じ色を取ると得点、違う色は避ける、画面タップでプレイヤーの色が変わるので状況によって使い分けよう。モバイルの場合は両手プレイで移動と色替えの操作の手を分けると遊びやすいかも。

コード

https://github.com/ongaeshi/crisp-opal-test/blob/master/fall/main.rb

setup(
  title: "FALL",
  description: <<~EOS,
    [SWIPE] Move
    [TAP] Color
  EOS
  characters: [
    <<~EOS,
      llllll
      ll l l
      ll l l
      llllll
       l  l
       l  l
    EOS
    <<~EOS,
       pp
       pp
     rrrrrr
     rrrrrr
     rrrrrr
     rrrrrr
    EOS
    <<~EOS,
       yy
       yy
     llllll
     llllll
     llllll
     llllll
    EOS
  ],
  options: {
    isPlayingBgm: true,
    isReplayEnabled: true,
    seed: 200
  }
)
 
class Falling
  def initialize(string, x, y)
    @string = string
    @pos = vec(x, y)
  end

  def update(player_color)
    @pos.y += 1
  
    if char(@string, @pos).is_colliding.char.a
      if player_color == "red" && @string == "b" ||
        player_color == "black" && @string == "c"
        add_score(1, @pos)
        return true
      else
        end_game
      end
    end

    @pos.y > 102
  end
end

@player_color = nil
@fallings = nil

def update
  if ticks == 0
    @player_color = "red"
    @fallings = []
  end

  if input.is_just_pressed
    @player_color = @player_color == "red" ? "black" : "red"
  end

  color(@player_color)
  char("a", input.pos.x, 95)

  color("black")
  @fallings.push(Falling.new(rndi(2) == 1 ? "b" : "c", rnd(100), 0)) if ticks % 5 == 0
  @fallings.delete_if do |e|
    e.update(@player_color)
  end
end

crisp-game-libはupdateという関数の中に処理を書いてゲームが作れる。初期化処理はif ticks==0の中に書く。

crisp-game-libの特徴として描画処理と当たり判定が一体化しているところがある。対象と重なっているかは描画したときの戻り値を使って判定する(まだ描画されていない対象との当たり判定は当然取得できないので描画順に気をつける必要がある)。これは極力短く書くための仕組みで、ゲームは通常ロジックと描画が分かれて記述することが多いが確かにこれならコード量が半分になり余計なことを考えずに済むと思った。テクスチャも貼れない(ドットは配列作れば打てる)、サウンドは自動生成されたものを番号指定するだけ、効果音組み込みで数種類の中から選択、とライブラリ全体としてゲームを高速に作るために特化していて書いていると心地よい。(このゲームも書き始めてから30分位で書けたと思う) 後リソースを一切要求しないのでコードだけで配布できるのもよい。

もっとたくさんのゲームを触ってみたい方は、crisp-game-lib作者のABAさんがすでに大量の面白いゲームを作られているので是非遊んでみて欲しい。ほぼ全てのAPIがOpalに移植できていると思うのでブラウザゲームをRubyで記述したい、という趣味の方がいましたら是非お使いください。

2021-10-13

Humankindを読んでニュースの読み方を変えた

book

話題になっている「Humankind」を読み終わった。

Humankind　希望の歴史　上　人類が善き未来をつくるための18章 (文春e-book)

作者:ルトガー・ブレグマン
文藝春秋

Amazon

Humankind　希望の歴史　下　人類が善き未来をつくるための18章 (文春e-book)

作者:ルトガー・ブレグマン
文藝春秋

Amazon

読む前は人間は基本いい人だから世の中は考え方１つで変わるよ、みたいな楽観的なことが書いてあるのかと思っていたがそれは前置きで、むしろ大半の人間は本来善良なのに

民衆が愚かで悪人が多いと認識されている方が都合が良い
事実と異なるデータや一面的な思想を伝えて他の人を思い通りの方向に誘導したい
自分の地位や資産を増やせるならどんな手段を取っても構わない

といった目的を持つ少数の人間によって「冷笑的な社会だと思い込まされている」ことに警鐘を鳴らしているのだと理解した。すごく面白かった。これから少しずつ自分の中の認識も見直していきたいと思う。

ニュースを避ける

少しの間、想像してみよう。新しい薬が市場に出る。その薬は中毒性が高く、誰もがすぐ夢中になる。科学者は調査して、その薬は「リスクの誤認、不安、気分の低下、無力感、他者に対する軽蔑と敵意、感情の麻痺を引き起こす」という結論を下す。
この薬をわたしたちは使おうとするだろうか。子どもたちが摂取するのを許すだろうか。政府は認可するだろうか。答えはすべてイエスだ。なぜなら、その薬はすでに、現代の最大の依存症の一つを引き起こしているからだ。わたしたちが毎日摂取し、多額の助成金を受けていて、子どもたちに大量に配られている薬。その薬とは、ニュースである。

書籍内には沢山の興味深いトピックがあるがその中でも「ニュースを避ける」はすぐに自分の中に取り入れられそうで色々試している(元々自分のスマホのアクティビティの中でニュースサイトの閲覧率が高めで、また調子が悪いときほどニュースばかり見る傾向があると感じていた)。

平日はニュースを見ない

平日にニュースを見るのをやめて、暇なときは漫画読んだりゲームやったり好きなことをするようになった。

世代的に日々新聞を読まないと社会人としてよくない、という思想を受けてきたので何となく心理的な束縛があったがHumankindのおかげで開放された。

手持ち無沙汰になったときに無意識的にニュースサイトにアクセスしてしまうので、体操など体を動かすことも含めて、暇なときにやることをもう少し揃えておくのがよさそう。

テレビもプライムタイムに付けると大体ニュース番組がやってる確率が高いのでその場合はチャンネルを切り替えるか、録画した別の番組を見るようにしている。

日曜版の新聞を読む

本当にニュースを何も見ないとさすがに世間から切り離されてしまうので、最小回数で効率的に情報を取得したい。

新聞の土曜版や日曜版は平日よりも比較的ゆったりしており、インパクトのある見出しでセンセーショナルに読者をゆさぶる度合いも少なめでよい。また今週あった主なニュースをまとめた記事があったりするので、ここだけ見ておけば重要なニュースを取りこぼすこともなさそう。

一部180円位なのでこれなら月1000円以内で済む。毎週違う新聞を買ったりもできる。

特定のニュースを深掘りしたくなったら後でインターネットで検索する。(これは能動的な調べものなのでニュースを読むとは違うという認識)

まとめ

今はこんな感じの作戦でやっている。まだまだ調整が必要そうだが自由時間が増えたような感触があるのが嬉しい。(この記事を書く時間も捻出できた)

まずは毎日それなりにあったニュースを見ていた時間を、それ以外のことに割り当て直していこうと思う。

ブログのおんがえし

rconv - Ruby WASMでプログラム電卓を作りました

基本

応用

おわりに

毎日簡単に更新できてサクサク閲覧できるブログシステムを作った

記事の投稿

新規ブログの開設の仕方

カスタマイズ

Ruby on Browser 1.0 リリース

Ruby On BrowserとRuby WASM/WASIの雑感

1. 簡単に自分好みのブラウザRubyが作れる

2. wasmファイルの入れ替えが簡単

3. 最新版がすでにNightlyビルドされている

4. ファイルAPIが使える

gifアニメにお絵描きできるGifDrawerをリリースしました

インストール

ソフトウェア構成

おわりに

残りゲーム体力が少なくてもブラウザゲームをRubyで簡単に書きたい

コード

Humankindを読んでニュースの読み方を変えた

ニュースを避ける

平日はニュースを見ない

日曜版の新聞を読む

まとめ