DevRel/Japan CONFERENCE 2023

DevRel/Japan CONFERENCE 2023「オンライン＆オフラインどちらへも響くハンズオンドキュメント TIPS ～ハイブリッド時代の技術の伝え方～」の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/
・Adobe Stock https://stock.adobe.com/jp

Transcript

1. 20230311_DevRel/Japan CONFERENCE 2023 オンライン＆オフラインどちらへも響く ハンズオンドキュメント TIPS ～ハイブリッド時代の技術の伝え方～ ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2018 年より Microsoft MVP と IBM Champion のアワードを毎年受賞。外部エバンジェリストと して、いろいろな技術を伝えています。 あとウォンバットが好き。最近 ChatGPT を相手 にウォンバット会話をえんえんと盛り上がりまし た！技術たのしい。
5. 学生への技術講師やハッカソンのハンズオン講師で ハンズオンドキュメントは大事
6. ハッカソンでの obniz ハンズオンや テクニカルメンターをしてます https://1ft-seabass.github.io/ma-obniz-handson-202212/
7. 専門学校学生へハンズオン実習を絡めた授業で 技術を伝えたりもしてます https://zenn.dev/tseigo/books/learning-javascript-with-obniz
8. 最近はオンラインもオフライン両方ある ハイブリッドな時期
9. オンライン＆オフラインどちらへも響くといい 突然オンライン授業になることもあるし、オフラインでも同じように伝えたい
10. オンライン＆オフラインどちらへも響く 良い仕掛けが見えてきました！
11. 今日は、とくに obniz ハンズオンや 授業での知見を元に話していきます https://1ft-seabass.github.io/ma-obniz-handson-202212/
12. obniz は JavaScript でつくれる たのしい IoT デバイス 内蔵スイッチをぐりぐり動かす軽くリアルタイムデモをお見せします！ https://1ft-seabass.github.io/ma-obniz-handson-202212/05-switch.html
13. ドキュメントの効果は準備から開催中、開催後まで このように色々な TIPS があります 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
14. ではまず開催前の準備から 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
15. URL でドキュメントを見ることができ、 事前準備にすぐとりかかれる仕掛け
16. 事前準備でドキュメント URL を把握してもらい 当日以前から盛り上げていく オンラインは開催前が無風になりがちなのでドキュメントで気持ちをつなぐ。もちろんオフラインでも有効。 https://1ft-seabass.github.io/ma-obniz-handson-202212/00-preparation/
17. オンラインになってから スライド形式からドキュメント形式に移行 スライドは当日の進行には強いがページが分かれナレッジ情報が盛り込みにくくオンラインでは悩ましい。 ドキュメントはスライド型もナレッジも両方いける ナレッジ ナレッジ
18. スタートでのドキュメントの活用 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
19. スタートを盛り上げるアクション
20. とにかく元気良いスタート オンライン越しでも顔を出して「やるよー、よろしくですー」と元気よく雰囲気づくり。 忘れないようにドキュメントにも書いちゃう。 オフラインでも大事だった要素。オンラインは熱量が伝わりにくいので YouTuber のつもりで。 https://1ft-seabass.github.io/ma-obniz-handson-202212/
21. 楽しんでいきましょうを伝える ハンズオンの注意点といいながらポジティブな感じ
22. 今日は何をやるかも大事 タイムスケジュールは下に長くなるので横長のスライドだと表現しづらく縦長のドキュメントは良い。 オンラインはどう進行するかの方向感覚が混乱しがち。なので最初に宣言。オフラインにも通じる。
23. 開催中の進行フォロー 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
24. できるだけ参加者が つまづきの少ない手順の案内をする仕掛け
25. 手順を全部書いて安心感を出す https://1ft-seabass.github.io/ma-obniz-handson-202212/04-display.html
26. なるべく丁寧に各章でこんな要素を押さえている やってみる手順の抜け漏れで混乱するとオンラインではリカバリしづらい 対面だとトークや現場力で何とかなったがオンラインではドキュメントに全部盛り込む 導入 ソースコード 動作結果 エクストラ
27. すぐ動くソースコードは盛り上がる！ オンライン・オフライン限らず手動選択の全コピーもうまくいかないことが多いので ソースコード全文コピーボタンもおススメ。このあたりスライドだとコピーミス起きがち。
28. 参加者それぞれの進行のばらつきへの ポジティブなフォローをする仕掛け
29. 動作結果は大事。講師と参加者の信頼感が増す。 オンラインだと WEB カメラで「こう動きますよー」というのは表現しづらい。 ドキュメントに動作結果があると、参加者ができたタイミングで確認できる。焦らせない。 やってみて思ったのが、オフラインの対面進行でも、この配慮は優しみがあり大切なポイントと気づけた。
30. 途中でチャット声掛けでインタラクティブに。 進行がそろうのもあるし、なによりも双方向に盛り上がる。うまくいかない人へのケアもできる。 LED がピカっとついたひとは コメントお願いしまーす！ できました！ 光ったーーーーーー！
31. 遅れてもドキュメントで 後から追いかけれるというのは安心感が増す 講師と参加者でお互いの進行自由度が UP！ 話を聞きながら一緒に行うのが得意でない方は一定いるので、その意味でもドキュメントでやれるのは大事。
32. 先に進みすぎたひとのためのエクストラも大事 すごく進んでくれる人もいる。めっちゃうれしい。そういう人のために、より楽しいネタを用意。 制作が進んで「あれしたいな」「これできるかな」にも応えられる仕掛けでもある。
33. オンラインドキュメントを 実際につくるナレッジも公開しています！ 授業資料やハンズオン資料に使っている HonKit の設定メモ 2022 年 12 月版 https://www.1ft-seabass.jp/memo/2022/12/06/honkit-setting-202212/
34. 開催中のリアルタイムデモ 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
35. リアルタイムデモを交えた 参加者が成功しやすいサンプルを伝える仕掛け
36. 「ソースコードがこう動くよ」は 講師が実際にその場でデモするのが最大効果 ドキュメントへの注目が増し参加者が自分もやってみたい！と気持ちが上向く
37. 直前に講師がやっていると あとに続く参加者もイメージが湧きやすい ドキュメント通りにやっても抜け漏れあってできないこともあるので気づきやすいのもポイント
38. 今日も簡単なリアルタイムデモを この場でやってみます！ 赤く光ります！ https://1ft-seabass.github.io/ma-obniz-handson-202212/06-01-led.html
39. 「やったー動いた」はとてもうれしいし リアルタイムデモをしてると同じように動く楽しさが UP LED がピカっとついたひとは コメントお願いしまーす！ できました！ 光ったーーーーーー！
40. 開催後の引用フォロー 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
41. オンライン開催でもオフライン開催でも Slack などでチャットで開催までの交流はよくある これはハイブリッドな現在に進化したところ
42. URL で各ページでナレッジ提供できると チャットにサッと URL で案内できる ハンズオンで伝えているコードをもう一度伝えたり、必要なら追加ネタをつくって載せるとかもできる。 あ！それハンズオンのドキュメントに いいかんじのソースサンプルあります！ http://～～～～～～～～～ こんな仕組みをやってみたいんですが 良いサンプルありますかー？ おおお！いいかんじに参考になりま す！ありがとうございます～。
43. ハイブリッドへの効用 開催前 開催中（ハンズオンや授業） 開催後 スタート 準備 進行フォロー 引用 リアルタイムデモ
44. オンラインは以前のオフラインより手堅くなり 今のハイブリッドに対応できました オフラインでアドリブやトークでカバーできていた部分がオンラインでは難しくなって改良をし 全てのシナリオがオープンになったのでオンラインになっても対応できてます
45. オンライン授業が急遽オフラインになっても 進行が全部書いてあるのでスムーズ むしろ進行や教材強度に余裕がありリカバリーでなく盛り上げに DevRel 力が使えるので良い感じ https://twitter.com/1ft_seabass/status/1590520207394877440
46. オフライン授業が急遽ハイブリッドになっても 同じ感じで進行できた ちょっと情報過多な面もあるが、遅れた人が追いかけやすかったりで、デメリットはなくメリットばかり https://twitter.com/1ft_seabass/status/1628323014332014592
47. まとめ ➔ オンライン・オフラインどちらかに寄せるのではなく「ど ちらでもいける」を目指しハイブリッド時代を対応する ➔ ドキュメントへは事前準備、進行もハンズオン内容もでき る限り丁寧に全部盛り込む。そのうえで生まれた余裕で DevRel 力の運用をする。 ➔ 参加者の交流やリアルタイムデモはハイブリッドで形が変 化するがちゃんとある。柔軟に伝えていく。