LiveView JP#5：多人数タイピングゲームで盛り上がろう（2022/03/22）レポート

**朝ぼらけ有明の月と見るまでに吉野の里に降れる白雪**

Advent Calendar 2022 81日目[^1]の記事です。
I'm looking forward to 12/25,2022 :santa::santa_tone1::santa_tone2::santa_tone3::santa_tone4::santa_tone5:
私の[Advent Calendar 2022 一覧](https://docs.google.com/spreadsheets/d/1HQvFjagQLRPjOYAjDVzWp9S4b8dKixxvvaz_TtbZWto/edit#gid=1723448955)。

[^1]: @kaizen_nagoya さんの「[「@e99h2121 アドベントカレンダーではありますまいか Advent Calendar 2020」の改訂版ではありますまいか Advent Calendar 2022 １日目　Most Breakthrough Generator](https://qiita.com/kaizen_nagoya/items/49ebebee3a0377f3b59b)」から着想を得て、模倣いたしました。 

---



# はじめに

本日は2022年3月22日(火)です。
本日は、「[LiveView JP#5：多人数タイピングゲームで盛り上がろう](https://liveviewjp.connpass.com/event/237626/)」が開催されました。

その**愛**と**感動**、**ワクワク**と**ドキドキ**を余すところなくお伝えします。

# 19:30 Let's get started!!!

@piacerex ピアちゃんによる[LiveView JP](https://liveviewjp.connpass.com/)の紹介がありました。
奇数月である3月は、[LiveView](https://github.com/phoenixframework/phoenix_live_view)を取り扱います。
偶数月は[Livebook](https://github.com/livebook-dev/livebook)を取り扱うそうです。

## [Phoenix](https://www.phoenixframework.org/)講座

[Phoenix](https://www.phoenixframework.org/)アプリの基礎を@piacerex ピアちゃんが解説してくださいました。

```bash
mix local.hex
mix archive.install hex phx_new
mix phx.new basic
cd basic
```

### PostgreSQL

PostgreSQLをDockerで動かす例です。

```bash
docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13
```




```bash
mix deps.get
mix phx.gen.live Blogs Blog blogs title:string body:text
mix ecto.create
mix ecto.migrate
mix phx.server
```

Visit: http://localhost:4000


# 19:50 @Yoosuke さんによる「Typing Game 作ってるnowと言ったら、締切効果がついてきた件 w」

@Yoosuke さんが、「Typing Game 作ってるnowと言ったら、締切効果がついてきた件 w」を発表してくださいました。

## デモ

ローカルで動かしている[Phoenix](https://www.phoenixframework.org/)アプリを[ngrok](https://ngrok.com/)でポートフォワードしてみんなで動かしました。

Zoomのチャット欄は

<font color="purple">$\huge{「動いています」}$</font>
<font color="purple">$\huge{「動いています」}$</font>
<font color="purple">$\huge{「動いています」}$</font>

の連発でした :tada::tada::tada: 

## ソースコードの解説

@Yoosuke さんがソースコードを解説してくださいました。

![スクリーンショット 2022-03-22 19.56.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/019cd68d-edcb-cee6-0a85-fa5861c818f1.png)


## 20:05 @tuchiro さんが業務により欠席連絡！！！

後ほど登壇予定の@tuchiro さんが業務により欠席との連絡がありました。
関東地方は電力不足により[停電があるかも！？](https://www.nikkei.com/article/DGXZQOUC225Z80S2A320C2000000/)　とのことで、ドキドキです。
21:00までどうするんだ！？

Zoomのチャット欄は
<font color="purple">$\huge{omg}$</font>
<font color="purple">$\huge{omg}$</font>
<font color="purple">$\huge{omg}$</font>
の連発でした。

<font color="purple">$\huge{Oh\ my\ God}$</font>


## 20:06 質疑応答タイム :clock: 

質疑応答タイムが始まりました。

### どうやって、他の人のタイピングが、私の画面に反映されているのですか？

「どうやって、他の人のタイピングが、私の画面に反映されているのですか？」というお便りが寄せられました。

ひとつひとつ丁寧に@Yoosuke さんが解説してくださいました。

質問者さん
「あー、broadcastを指示しているんですね！　よく分かりました！」とのことです。
解説に大満足！　のご様子でした。

### 漢字は対応していますか？

KeyUp or KeyDownをトリガにしているので単純にはうまくいかないようです。
「よくあるタイピングゲームだと、漢字とローマ字が併記されてて実際に入力するのはローマ字ってのが多かった記憶があります」とのコメントが寄せられていました。

# 20:27 クロージング

「つちろー、改め、たくと先生が教える、LiveViewでSPAの仕組みを学ぶ LiveView＋LiveShareで全員参加モブプログラミング」はお休みです。
後述します通り、モブプログラミングは@piacerex ピアちゃんの代行実演が実はありました。
Zoom参加者のみの特典です。

次回は**2022/4/26(火) 19:30**とのことです。

# 20:28 二次会開催 :beers: :game_die: 

ちょっと早いけれども二次会が始まりました。

## ゲームのアイデアソン

- エアホッケーをつくる

## [piyopiyo.ex](https://piyopiyoex.connpass.com/)でモブプロするつもりだったんすよ〜

@kn339264 nakoさんからコメントがありました。
[piyopiyo.ex](https://piyopiyoex.connpass.com/)の次回イベントでモブプロを実施する予定だったそうです。
今日の[LiveView JP](https://liveviewjp.connpass.com/)で@tuchiroさんによる[Live Share](https://visualstudio.microsoft.com/ja/services/live-share/)の実演を参考にする予定だったそうです。

急遽、@piacerex ピアちゃんによる[Live Share](https://visualstudio.microsoft.com/ja/services/live-share/)講座がありました！
みんなで、[Live Share](https://visualstudio.microsoft.com/ja/services/live-share/)を体験しました。

![スクリーンショット 2022-03-22 20.50.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/131808/63c0819d-6acd-9d58-95a2-7f9958b6347c.png)


以下の話がでました。

- 他の人にはコマンド打たせたくないよね〜
- アカウントBANどうやるんだろうね〜

[Live Share のセキュリティ機能](https://docs.microsoft.com/ja-jp/visualstudio/liveshare/reference/security)

https://docs.microsoft.com/ja-jp/visualstudio/liveshare/reference/security


21:00 イベントは終了しました。
ありがとうございました〜

---

# Wrapping up :lgtm::lgtm::lgtm::lgtm::lgtm:

この記事は2022年3月22日(火)に開催された「[LiveView JP#5：多人数タイピングゲームで盛り上がろう](https://liveviewjp.connpass.com/event/237626/)」のレポートです。

- Typing Gameをみんなで楽しめました
- [Live Share](https://visualstudio.microsoft.com/ja/services/live-share/)でみんなでソースコードをワチャワチャ編集することを楽しみました


次回は**2022/4/26(火) 19:30**とのことです。
Twitterのハッシュタグ[#liveviewjp](https://twitter.com/hashtag/liveviewjp)をお見逃しなく！



以上です。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今回はあっさり目で終わったLiveView JP#5でした💁‍♂️ <a href="https://twitter.com/hashtag/liveviewjp?src=hash&amp;ref_src=twsrc%5Etfw">#liveviewjp</a><a href="https://t.co/8eAj73qdor">https://t.co/8eAj73qdor</a><br><br>来月も遊びに来てくださいませ🙇‍♂️<br><br>Phoenix PubSubとhandle_info()を使えば、LiveViewでのマルチプレイヤーゲームも、あっさりと作れることが共有できましたかね😌<br><br>次回は4/26（火）19:30で、Livebook会です😉</p>&mdash; piacere (love Elixir, Gravity and VR/AR/Metaverse) (@piacere_ex) <a href="https://twitter.com/piacere_ex/status/1506241605237633030?ref_src=twsrc%5Etfw">March 22, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>





---

I organize [autoracex](https://autoracex.connpass.com/).
And I take part in [NervesJP](https://nerves-jp.connpass.com/), [fukuoka.ex](https://fukuokaex.connpass.com/), [EDI](https://fukuokaex.connpass.com/), [tokyo.ex](https://beam-lang.connpass.com/), [Pelemay](https://pelemay.connpass.com/).
I hope someday you'll join us.

[We Are The Alchemists, my friends!](https://www.youtube.com/watch?v=04854XqcfCY)