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
   ～ハイブリッド時代の技術の伝え方～
   ワンフットシーバス 田中正吾
   

   View Slide

2. 私の話はスライドを後ほど共有します。
   話す内容に注力いただいて大丈夫です！
   

   View Slide

3. 田中正吾（たなかせいご）
   屋号：ワンフットシーバス
   2004年よりフリーランス。以後、FLASH制作を
   中心にインタラクティブコンテンツを主に行い現
   在に至る。
   最近ではWEBフロントエンドをベースにしなが
   らも、情報とインターフェースが合わさるアプ
   ローチという視点でIoTやMixed Realityといった
   技術も取り入れながら活動しています。
   

   View Slide

4. 田中正吾（たなかせいご）
   屋号：ワンフットシーバス
   2018 年より Microsoft MVP と IBM Champion
   のアワードを毎年受賞。外部エバンジェリストと
   して、いろいろな技術を伝えています。
   あとウォンバットが好き。最近 ChatGPT を相手
   にウォンバット会話をえんえんと盛り上がりまし
   た！技術たのしい。
   

   View Slide

5. 学生への技術講師やハッカソンのハンズオン講師で
   ハンズオンドキュメントは大事
   

   View Slide

6. ハッカソンでの obniz ハンズオンや
   テクニカルメンターをしてます
   https://1ft-seabass.github.io/ma-obniz-handson-202212/
   

   View Slide

7. 専門学校学生へハンズオン実習を絡めた授業で
   技術を伝えたりもしてます
   https://zenn.dev/tseigo/books/learning-javascript-with-obniz
   

   View Slide

8. 最近はオンラインもオフライン両方ある
   ハイブリッドな時期
   

   View Slide

9. オンライン＆オフラインどちらへも響くといい
   突然オンライン授業になることもあるし、オフラインでも同じように伝えたい
   

   View Slide

10. オンライン＆オフラインどちらへも響く
    良い仕掛けが見えてきました！
    

    View Slide

11. 今日は、とくに obniz ハンズオンや
    授業での知見を元に話していきます
    https://1ft-seabass.github.io/ma-obniz-handson-202212/
    

    View Slide

12. obniz は JavaScript でつくれる
    たのしい IoT デバイス
    内蔵スイッチをぐりぐり動かす軽くリアルタイムデモをお見せします！
    https://1ft-seabass.github.io/ma-obniz-handson-202212/05-switch.html
    

    View Slide

13. ドキュメントの効果は準備から開催中、開催後まで
    このように色々な TIPS があります
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

14. ではまず開催前の準備から
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

15. URL でドキュメントを見ることができ、
    事前準備にすぐとりかかれる仕掛け
    

    View Slide

16. 事前準備でドキュメント URL を把握してもらい
    当日以前から盛り上げていく
    オンラインは開催前が無風になりがちなのでドキュメントで気持ちをつなぐ。もちろんオフラインでも有効。
    https://1ft-seabass.github.io/ma-obniz-handson-202212/00-preparation/
    

    View Slide

17. オンラインになってから
    スライド形式からドキュメント形式に移行
    スライドは当日の進行には強いがページが分かれナレッジ情報が盛り込みにくくオンラインでは悩ましい。
    ドキュメントはスライド型もナレッジも両方いける
    ナレッジ
    ナレッジ
    

    View Slide

18. スタートでのドキュメントの活用
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

19. スタートを盛り上げるアクション
    

    View Slide

20. とにかく元気良いスタート
    オンライン越しでも顔を出して「やるよー、よろしくですー」と元気よく雰囲気づくり。
    忘れないようにドキュメントにも書いちゃう。
    オフラインでも大事だった要素。オンラインは熱量が伝わりにくいので YouTuber のつもりで。
    https://1ft-seabass.github.io/ma-obniz-handson-202212/
    

    View Slide

21. 楽しんでいきましょうを伝える
    ハンズオンの注意点といいながらポジティブな感じ
    

    View Slide

22. 今日は何をやるかも大事
    タイムスケジュールは下に長くなるので横長のスライドだと表現しづらく縦長のドキュメントは良い。
    オンラインはどう進行するかの方向感覚が混乱しがち。なので最初に宣言。オフラインにも通じる。
    

    View Slide

23. 開催中の進行フォロー
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

24. できるだけ参加者が
    つまづきの少ない手順の案内をする仕掛け
    

    View Slide

25. 手順を全部書いて安心感を出す
    https://1ft-seabass.github.io/ma-obniz-handson-202212/04-display.html
    

    View Slide

26. なるべく丁寧に各章でこんな要素を押さえている
    やってみる手順の抜け漏れで混乱するとオンラインではリカバリしづらい
    対面だとトークや現場力で何とかなったがオンラインではドキュメントに全部盛り込む
    導入 ソースコード 動作結果 エクストラ
    

    View Slide

27. すぐ動くソースコードは盛り上がる！
    オンライン・オフライン限らず手動選択の全コピーもうまくいかないことが多いので
    ソースコード全文コピーボタンもおススメ。このあたりスライドだとコピーミス起きがち。
    

    View Slide

28. 参加者それぞれの進行のばらつきへの
    ポジティブなフォローをする仕掛け
    

    View Slide

29. 動作結果は大事。講師と参加者の信頼感が増す。
    オンラインだと WEB カメラで「こう動きますよー」というのは表現しづらい。
    ドキュメントに動作結果があると、参加者ができたタイミングで確認できる。焦らせない。
    やってみて思ったのが、オフラインの対面進行でも、この配慮は優しみがあり大切なポイントと気づけた。
    

    View Slide

30. 途中でチャット声掛けでインタラクティブに。
    進行がそろうのもあるし、なによりも双方向に盛り上がる。うまくいかない人へのケアもできる。
    LED がピカっとついたひとは
    コメントお願いしまーす！
    できました！
    光ったーーーーーー！
    

    View Slide

31. 遅れてもドキュメントで
    後から追いかけれるというのは安心感が増す
    講師と参加者でお互いの進行自由度が UP！
    話を聞きながら一緒に行うのが得意でない方は一定いるので、その意味でもドキュメントでやれるのは大事。
    

    View Slide

32. 先に進みすぎたひとのためのエクストラも大事
    すごく進んでくれる人もいる。めっちゃうれしい。そういう人のために、より楽しいネタを用意。
    制作が進んで「あれしたいな」「これできるかな」にも応えられる仕掛けでもある。
    

    View Slide

33. オンラインドキュメントを
    実際につくるナレッジも公開しています！
    授業資料やハンズオン資料に使っている HonKit の設定メモ 2022 年 12 月版
    https://www.1ft-seabass.jp/memo/2022/12/06/honkit-setting-202212/
    

    View Slide

34. 開催中のリアルタイムデモ
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

35. リアルタイムデモを交えた
    参加者が成功しやすいサンプルを伝える仕掛け
    

    View Slide

36. 「ソースコードがこう動くよ」は
    講師が実際にその場でデモするのが最大効果
    ドキュメントへの注目が増し参加者が自分もやってみたい！と気持ちが上向く
    

    View Slide

37. 直前に講師がやっていると
    あとに続く参加者もイメージが湧きやすい
    ドキュメント通りにやっても抜け漏れあってできないこともあるので気づきやすいのもポイント
    

    View Slide

38. 今日も簡単なリアルタイムデモを
    この場でやってみます！
    赤く光ります！
    https://1ft-seabass.github.io/ma-obniz-handson-202212/06-01-led.html
    

    View Slide

39. 「やったー動いた」はとてもうれしいし
    リアルタイムデモをしてると同じように動く楽しさが UP
    LED がピカっとついたひとは
    コメントお願いしまーす！
    できました！
    光ったーーーーーー！
    

    View Slide

40. 開催後の引用フォロー
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

41. オンライン開催でもオフライン開催でも
    Slack などでチャットで開催までの交流はよくある
    これはハイブリッドな現在に進化したところ
    

    View Slide

42. URL で各ページでナレッジ提供できると
    チャットにサッと URL で案内できる
    ハンズオンで伝えているコードをもう一度伝えたり、必要なら追加ネタをつくって載せるとかもできる。
    あ！それハンズオンのドキュメントに
    いいかんじのソースサンプルあります！
    http://～～～～～～～～～
    こんな仕組みをやってみたいんですが
    良いサンプルありますかー？
    おおお！いいかんじに参考になりま
    す！ありがとうございます～。
    

    View Slide

43. ハイブリッドへの効用
    開催前 開催中（ハンズオンや授業） 開催後
    スタート
    準備 進行フォロー 引用
    リアルタイムデモ
    

    View Slide

44. オンラインは以前のオフラインより手堅くなり
    今のハイブリッドに対応できました
    オフラインでアドリブやトークでカバーできていた部分がオンラインでは難しくなって改良をし
    全てのシナリオがオープンになったのでオンラインになっても対応できてます
    

    View Slide

45. オンライン授業が急遽オフラインになっても
    進行が全部書いてあるのでスムーズ
    むしろ進行や教材強度に余裕がありリカバリーでなく盛り上げに DevRel 力が使えるので良い感じ
    https://twitter.com/1ft_seabass/status/1590520207394877440
    

    View Slide

46. オフライン授業が急遽ハイブリッドになっても
    同じ感じで進行できた
    ちょっと情報過多な面もあるが、遅れた人が追いかけやすかったりで、デメリットはなくメリットばかり
    https://twitter.com/1ft_seabass/status/1628323014332014592
    

    View Slide

47. まとめ
    ➔ オンライン・オフラインどちらかに寄せるのではなく「ど
    ちらでもいける」を目指しハイブリッド時代を対応する
    ➔ ドキュメントへは事前準備、進行もハンズオン内容もでき
    る限り丁寧に全部盛り込む。そのうえで生まれた余裕で
    DevRel 力の運用をする。
    ➔ 参加者の交流やリアルタイムデモはハイブリッドで形が変
    化するがちゃんとある。柔軟に伝えていく。
    

    View Slide