give IT a try

プログラミング、リモートワーク、田舎暮らし、音楽、etc.

大阪Ruby会議03でHotwireを使ったモーダルUIを15分で作ってみました＆基調講演裏話 #osrb03

Ruby イベント参加

はじめに

2023年9月9日に開催された大阪Ruby会議03で、基調講演（キーノート）を担当させてもらいました。
regional.rubykaigi.org

当日使った資料はこちらです。
発表のタイトルは"Enjoy Ruby programming, Enjoy Ruby community!"でした。

今回の基調講演ではちょっと攻めた取り組みとして、「Hotwireを使ったモーダルUIを15分で作る」というテーマでライブコーディングもしてみました。

www.youtube.com

ライブコーディングには思わぬトラブル付きものですが、今回は何とかノートラブルで実装できました！
時間も15分以内（たぶん12〜13分ぐらい？）に収まりました〜😄

基調講演をするにあたって意識したこと

今回、基調講演を担当するにあたって「IT系カンファレンスの基調講演はどういうものであるべきか」を自分なりに考えてみました。
僕がこの基調講演で意識したのは以下のような内容です。

  • 始まる前はバラバラになっている参加者の気持ちをひとつにまとめる
  • 場を温めてそのあとの登壇者が発表しやすくする
  • 「Rubyで笑おう」というイベントのテーマに沿った内容にする

また、運営のみなさんに基調講演の内容について相談したとき、「コロナ禍にプログラミングを始めた人は、こうしたオフラインのイベントに一度も参加したことがない人もたくさんいるはず」という話が出てきました。
なので、これまでずっとオフラインのイベントに縁がなかったRuby初心者のみなさんに対して、「ようこそ！」というメッセージも送りたいなと考えていました。

加えて、10年もRubyをやっているとつい「自分の昔話」という安易なネタに走りがちになってしまうので（自分語りはラクですからねw）、「過去ではなく、前を向いた話をする」ということも意識しました。
今回Hotwireでライブコーディングしたのは「みんな、Hotwire使ってる？もっと使っていこうぜ！」という前向きなメッセージを盛り込もうとした結果だったりします。

で、どうだった？

はい、自分としては大成功だったかなと思ってます！
特にライブコーディングはコードが動くたびに「おお〜〜👏👏👏」と拍手がたくさん沸き起こり、予想以上に盛り上がりました😄

拍手喝采で大盛り上がりする会場の様子（笑）

発表としても「初心者も経験者も今日一日大阪Ruby会議03を楽しんで、Rubyで笑いましょう！」というメッセージをちゃんと送ることができたんじゃないかな〜と自画自賛していますw

なので、僕の基調講演がどうこうとか関係なく、こういう感想ツイートが見れたのは嬉しかったですね😊

ライブコーディングを成功させるコツ？

発表後のQ&Aでは「ライブコーディングがとてもスムーズでしたが、何かコツはありますか？」という質問が挙がりました。
その答えはこうです。

はい、練習、練習、練習あるのみです。（身も蓋もない答え）
僕はいつも登壇前に自分のリハーサルを動画に撮って、失敗しやすいポイントや改善点をセルフレビューするようにしています。

今回、自分で撮ったリハーサル動画の本数を数えたら全部で7本ありました。

「しゃべりながらコードが書けるなんてすごい」というツイートも見かけましたが、これも練習を繰り返した成果ですね〜。

練習を繰り返してもときどき失敗してたので、「本番もきっと何かやらかすだろうな」と思っていましたが、幸いなことに本番ではノーミスでライブコーディングすることができました✌️（失敗したように見えたのは全部台本通りです！）

あの「枠」ってどうやって表示してるの？

ライブコーディング中はHotwireの仕組みがわかりやすくなるように、画面にdivタグやturbo-frameタグの「枠」を表示していました。

あの枠を表示する仕組みが気になってる人が何人かいたようですが、あれはふつうにCSSで表示しているだけです。
こんなCSS（sass）を組み込んでいます。

@mixin name-box($name, $color) {
  content: $name ": #" attr(id);
  position: relative;
  top: -14px;
  right: -4px;
  display: inline-block;
  color: $color;
  font-size: 18px;
  background-color: white;
  padding: 4px;
  border: 2px $color solid;
}

$frame-color: red;
turbo-frame {
  border: 2px $frame-color solid;
  display: block;
  padding: 0 10px 10px 10px;
  &::before {
    @include name-box($name: "Frame", $color: red);
  }
}

$blogs-color: blue;
#blogs {
  border: 2px $blogs-color solid;
  display: block;
  &::before {
    @include name-box($name: "div", $color: blue);
  }
}

$blog-color: green;
#blogs > div {
  border: 2px solid $blog-color;
  margin-left: 10px;
  margin-right: 10px;
  &::before {
    @include name-box($name: "div", $color: green);
  }
}

このCSSは「猫でもわかるHotwire入門 Turbo編」に載っていたCSSを少しカスタマイズしたものです。

Turbo Frames｜猫でもわかるHotwire入門 Turbo編

Hotwire初心者の人はこの枠があるかないかで理解のしやすさがかなり変わってくると思います。
実際、この枠の表示はかなり好評だったみたいです。

このCSS以外に限らず、当日作成したサンプルアプリケーションのソースコードはGitHubに置いています。
Hotwireの実装方法が気になる方はぜひチェックしてみてください。

github.com

その他、ライブコーディングで意識したこと

フォントサイズは「これでもか」というぐらい大きくする

普段自分がコードが書くときの感覚でエディタをスクリーンに映すと、とてもじゃないけど客席からは文字が読めません。
ある程度後ろの席からでも読めるようにしようとすると、「こんなフォントサイズでコードなんて書かねーよ！！」って笑うぐらいの大きなフォントサイズにする必要があります。

エディタの表示領域はこれで画面いっぱい

リハーサル時に画面を動画で撮って、再生時にウインドウを小さくすることで「客席から見たときの文字サイズ」を意識することができます。

ターミナルのフォントサイズや、ブラウザの開発ツールのフォントサイズもエディタと同様に「これでもか」というぐらい大きくしておきましょう。

このとき、普段絶対にやらないぐらいのフォントサイズでコードを書くことになるので、実際にやってみると最初はかなり戸惑うと思います。
そのためにも何度もリハーサルを繰り返すことが大事になります。

接続チェックで文字の見え方も確認する

イベントが始まる前のPCの接続チェックではフォントサイズを含めて「スクリーン上のコードが見えやすいかどうか」を確認しましょう。
今回の大阪Ruby会議03では、ダークな背景のカラースキームだとどうしても字がつぶれて見づらく感じたので、急きょ会場でライトな背景のカラースキームに変更しました。

普段はこのカラースキームでコードを書いてますが・・・

会場のスクリーンだとこっちのカラースキームの方が見やすく感じました。

ちなみに今回使ったカラースキームはこちらです。
GitHub - relastle/bluewery.vim: :small_blue_diamond: Blue-based vim colorscheme :beer:

また、発表を始める直前にエディタを映して「みなさん、これで字が見えますか？」と客席のみなさんに問いかけることもしてみました。

マウスポインタを大きく、クリックをわかりやすく

今回のライブコーディングではブラウザを操作して「ここをクリックすると〜」みたいな説明もたくさん入れました。
そのため、以下のような効果も設定しておきました。

  • マウスポインタのサイズを大きくする
  • マウスクリック時に色が付くようにする
大きめのマウスポインタとクリック時の視覚効果

マウスポインタはMacの場合、Accessibility > Display > Pointer > Pointer sizeで変更できます。

マウスクリック時の視覚効果はPresentation Assistantというアプリケーションを使いました。
有料アプリですが、2.99ドルだったので「これぐらいならいいか」と思って購入することにしました。

‎Presentation Assistant on the Mac App Store

GitHub Copilotで速く正確にコードを書く

講演時間が限られているライブコーディングでは普段以上に速く正確にコードを打ち込む必要があります。
最初は全部自力でタイピングしていたんですが、「そんなにフィジカルを鍛えようとしなくても、現代のテクノロジーを借りればいいのでは？」と思い、GitHub Copilotに入力支援してもらうことにしました。

Stimulus用のJavaScriptなんかは「そう、それ！」という百点満点のコードを自動入力してくれるので、非常に時間の節約になりました。


できあがったwebアプリを実際に使ってもらう

これはライブコーディングそのものとは関係ないのですが、いわゆる「ライブっぽさ」というか、客席のみなさんとインタラクティブなコミュニケーションを取りたくて、できあがったwebアプリをHerokuにアップして実際に使ってもらう、という工夫をも取り入れてみました。

webアプリのURLはQRコードにしてスクリーンに表示し、手持ちのスマホでQRコードを読み取ってもらいました。

みなさん思い思いにデータ入力してくれて、イベントの楽しい雰囲気を盛り上げてくれました😄

当日のツイートなど

イベント当日のツイートは以下のページにまとめてあります。

togetter.com

僕の登壇に関連するみなさんのツイートは4〜7ページ目に載っています。
ツイートしてくださったみなさん、どうもありがとうございました！

HotwireはRails独自の仕組み？

一点だけ、jokerさんのこちらのツイートに関して補足させてください。

Hotwireを「完全にRails独自の仕組み」と言ってしまうと、初心者の人に誤解を与えてしまうかもしれません。

Hotwire（TurboやStimulus）という技術自体はRailsから独立した存在となっており、Rails以外のフレームワークで利用することもできます。

たとえば、Rails以外だとLaravel（PHP向けのwebアプリケーションフレームワーク）でHotwireを利用するプロジェクトがあります。
github.com

また、以下の記事ではRailsではなくSinatraでHotwireを利用する例が載っています。
note.com

世間一般の認識として「HotwireといえばRails」という傾向があるのは否定できませんが、「完全にRails独自の仕組み」とまで言ってしまうとちょっと語弊があるかもしれません。

なんでVimなの？RubyMineじゃないの？

「伊藤さんってRubyMineユーザーじゃなかったっけ？」というマニアックな疑問を呈している方もいました。
僕が普段RubyMineを使ってるの、よくご存じですね！

Vimを使った理由は以下の通りです〜。

その他、大阪Ruby会議03のエピソードあれこれ

フィヨルドブートキャンプ生との初めての交流

僕は2020年からフィヨルドブートキャンプ（FBC）のメンターをやってますが、その時期にちょうどコロナ禍が始まったため、受講生とはずっとオンラインでやりとりしてきました。
今回、FBCの受講生と卒業生がたくさん集まってくれたため、初めてリアルにFBC生と対面することができました！

それから、Matzさんと二人でサイン会みたいなことも開催しました（笑）。

ソニックガーデン提供（？）の物販コーナー

「物販コーナーがあるので何か販売したいものがあったらどうぞ」と言われたので、チェリー本とEveryday Rails、それと弊社ソニックガーデンのメンバーが書いた技術同人誌を物販コーナーに置かせてもらいました。
といっても、物理的な本を現金で売るのではなく「QRコードを読み取ってオンラインで購入してね」というスタイルでしたが。

そうそう、第2部のLT大会では「コードレビューで学ぶRuby on Rails」を書いた田中がこんなLTをやってましたよ。

ジャンケン大会でチェリー本をプレゼント

見本として物販コーナーに置いていたチェリー本は、最後にジャンケン大会でプレゼントすることにしました。
物理本だけでなく、電子版のギフトコード（無料で電子版が入手できるコード）も同じくジャンケン大会でプレゼントしました。

チェリー本をゲットしたtakaram71さん、おめでとうございます！🎉
（電子版をゲットしたのはいったいどなた？）

まとめ

というわけで、今回のエントリでは大阪Ruby会議03で基調講演してきたよ〜というお話を書いてみました。
発表の中でもお話ししましたが、僕自身も数年ぶりのリアルイベント参加＆リアル登壇でした。

当日はちょっと用事があって、午前中で会場をあとにしなければなりませんでした。
面白そうな発表がたくさんあったので、最後まで見たかった〜😭
見れなかった発表については発表スライドをあとでチェックすることにしますね。

togetter.com

会場に滞在したのはちょっとだけでしたが、それでも久々のリアルイベントで会場の盛り上がりを肌で感じることができて良かったです。
運営のみなさん、来場してくださったみなさん、登壇者のみなさん、どうもありがとうございました！
そしてまた関西のRubyコミュニティを盛り上げていきましょう〜💪

当日付けていた名札と、参加ノベルティとしていただいたキーキャップ

PR: Hotwireの勉強会コミュニティやってます！

Hotwireの勉強会コミュニティ、その名も「Hotwire.love」を運営しています。

hotwire-love.connpass.com

Hotwireの初心者さんから業務でバリバリ使っている人まで、「Hotwireについて何か話したい、相談したい」という人はお気軽にどうぞ！
次回は2023年9月14日（木）18時からオンライン開催します。ちょっとでも興味のある方はぜひ！

hotwire-love.connpass.com