DevRel/Japan CONFERENCE 2023

by 1ft-seabass

Slide 1

Slide 1 text

20230311_DevRel/Japan CONFERENCE 2023 オンライン＆オフラインどちらへも響くハンズオンドキュメント TIPS ～ハイブリッド時代の技術の伝え方～ワンフットシーバス田中正吾

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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