Twitchでのライブコーディングの最初の1年からの教訓

編集:私の最新のライブストリーミング設定に興味がある場合は、新しい記事「My Twitch Live Coding Setup」でそれについて読むことができます。

昨年7月にストリーミングを初めて行いました。 Twitchの大多数のストリーマーが行うゲームの代わりに、私は自分の時間に行うオープンソースの作品をストリーミングしたかったのです。私はNodeJSハードウェアライブラリにかなり取り組んでいます(そのほとんどは自分のものです)。私はすでにTwitchのニッチにいたので、JavaScriptを搭載したハードウェアのように、さらに小さなニッチにいませんか?)私は自分のチャンネルに登録し、それ以来定期的にストリーミングしています。

もちろん、私がこれを行うのは初めてではありません。 Handmade Heroは私がコードをオンラインで見た最初のプログラマーの1人で、すぐにTwitchでNuclear Throneをライブで開発したVlambeerの開発者がそれに続きました。特にVlambeerに魅了されました。

私が実際にそれを行うことができることを望んでいることの端に私をひっくり返したのは、私の友人であるNolan Lawsonに信じられます。ある週末、彼が彼のオープンソース作品をストリーミングしているのを見ました。彼は途中でやっていることをすべて説明しました。すべて。 GitHubの問題への返信、バグのトリアージ、ブランチでのコードのデバッグなど、名前を付けます。 Nolanが多くの使用と活動を得るオープンソースライブラリを維持しているので、私はそれが魅力的だとわかりました。彼のオープンソースの生活は私のものとは非常に異なっています。

彼のビデオの下に私が残したこのコメントを見ることができます:

Twitchチャンネルをセットアップし、OBSを使用して自分のやり方をぶらぶらした後、1週間ほど後に自分で試してみました。 Avrgirl-Arduinoに取り組んでいると思いますが、ストリーミング中に頻繁に取り組んでいます。大まかな最初の流れでした。私は非常に緊張していたので、夜遅くまで起きて、前の晩にやろうとしていたことすべてをリハーサルしていました。

その土曜日に私が得た少数の視聴者は本当に励みになったので、私はそれを続けました。最近では、1,000人以上のフォロワーがいますが、それらの素敵なサブセットは、「noopkat fam」と呼ばれる定期的な訪問者です。

私たちにはたくさんの楽しみがあり、ライブコーディングパーツを「大規模マルチプレイヤーオンラインペアプログラミング」と呼びたいです。週末ごとに参加してくれたみんなの優しさと機知に心から感動しました。私が経験した最も面白い瞬間の1つは、マイクロチップがボードにないため、Arduinoボードが私のソフトウェアで動作していなかったとファムの一人が指摘したときでした。

ストリームを何度もログオフしましたが、受信ボックスで、誰かが私が開始する時間がないと言ったいくつかの作業のプルリクエストを送信したことを確認しました。 Twitchコミュニティの寛大さと励ましのおかげで、正直に言って、私のオープンソースの仕事はより良くなったと言えます。

Twitchでのストリーミングが私にもたらした利点については、まだまだ言いたいことがありますが、それはおそらく別のブログ投稿のためです。代わりに、この方法でライブコーディングを自分で試してみたい他の人のために、私が学んだ教訓を共有したいと思います。最近、いくつかの開発者からどのように始めることができるか尋ねられたので、私は彼らに与えたのと同じアドバイスを公開しています!

まず、「Twitchでのストリーミングと成功の発見」と呼ばれるガイドにリンクします。特にTwitchとゲームストリームに焦点を当てていますが、関連するセクションと素晴らしいアドバイスがまだあります。チャンネルの開始に関するその他の詳細(機器やソフトウェアの選択など)を検討する前に、まずこれを読むことをお勧めします。

私自身のアドバイスは以下のとおりです。私自身の過ちと仲間のストリーマーの賢明な知恵から得たものです(あなたはあなた自身です!)

ソフトウェア

ストリーミングできる無料のストリーミングソフトウェアがたくさんあります。 Open Broadcaster Software(OBS)を使用しています。ほとんどのプラットフォームで利用可能です。立ち上がって行くのは本当に直感的でしたが、他の人はそれがどのように機能するかを学ぶのに時間がかかることがありました。あなたのマイレージは異なる場合があります! OBSの「デスクトップシーン」設定が今日のように見える画面のグラブを次に示します(クリックすると大きな画像が表示されます)。

基本的に、ストリーミング中に「シーン」を切り替えます。シーンは、「ソース」の集まりであり、レイヤー化され、互いに合成されます。ソースには、カメラ、マイク、デスクトップ、Webページ、ライブテキスト、画像などがあり、リストは続きます。 OBSは非常に強力です。

上記のデスクトップシーンは、ライブコーディングのすべてを行う場所であり、主にストリームの期間中ここに住んでいます。私はiTermとvimを使用しています。また、GitHubなどでドキュメントを調べたり、問題を切り分けたりするために切り替えるのに便利なブラウザーウィンドウもあります。

下の黒い長方形は私のウェブカメラなので、人々は私の仕事を見て、より個人的なつながりを持つことができます。
 
私のシーンにはいくつかの「ラベル」があり、その多くはトップバナーの統計と情報に関係しています。バナーは個性を追加するだけで、ストリーミング中の情報の素晴らしい永続的なソースです。 GIMPで作成した画像であり、シーンのソースとしてインポートします。一部のラベルは、最新のフォロワーなど、テキストファイルから取得するライブ統計です。もう1つのラベルは、私が作成したカスタムラベルで、ストリーミングする部屋のライブの温度と湿度を示しています。

また、シーンには「アラート」が設定されており、誰かがお金をフォローしたり寄付したりするたびに、ストリームの上部にかわいいバナーが表示されます。 WebサービスStream Labsを使用してこれを実行し、ブラウザーWebページソースとしてシーンにインポートします。 Stream Labsは、最近のフォロワーのライブテキストファイルも作成して、バナーに表示します。

ライブを開始するときに使用するスタンバイ画面もあります。

さらに、秘密トークンまたはAPIキーを入力するときのシーンが必要です。ウェブカメラでは表示されますが、面白いウェブページでデスクトップが非表示になるため、プライバシーで作業できます。

ご覧のとおり、ストリーミングするときはあまり真剣に考えていませんが、視聴者がストリームを最大限に活用できるように適切な設定をしたいです。

しかし、実際の秘密は次のとおりです。私はOBSを使用して、画面の下端と右端を切り取りながら、Twitchが期待するものと同じビデオサイズ比を維持します。そのため、下部にイベント(フォローなど)を見るスペースがあり、右側にあるチャンネルチャットボックスを見て応答するスペースがあります。 Twitchでは、チャットウィンドウを新しいウィンドウで「ポップアウト」できます。これは非常に便利です。

これは私のフルデスクトップが本当にどのように見えるかです:

数か月前にこれを始めましたが、振り返ることはありません。これが私の設定の仕組みであると視聴者が認識していることすらわかりません。プログラミングで忙しいときに実際にストリーミングされているものを見ることができないとしても、彼らは私がすべてを見ることができると当然だと思います!

なぜ私がモニターを1つしか使用しないのかと疑問に思われるかもしれません。これは、ストリーミング中に行っていた他のすべての操作を管理するのに2台のモニターが多すぎたためです。私はこれをすぐに理解し、それ以来1つの画面で立ち往生しています。

ハードウェア

安いものを使って始めて、ストリーミングが私が行き詰まったものになるだろうと気づいたので、ゆっくりと良いものを買いました。ノートパソコンのマイクとカメラが内蔵されている場合でも、使い始めたら何でも使用できます。

最近では、Logitech Pro C920ウェブカメラとマイクアームにマイクショックのあるBlue Yetiマイクを使用しています。あなたがそれを費やす必要がある場合、最終的には完全にお金の価値があります。それは私のストリームの品質に違いをもたらしました。

前に述べたように、2台のモニターを使用してもうまくいかなかったため、大きなモニター(27インチ)を使用します。走行距離はここで異なる場合がありますが、1つの画面にすべてを表示することは、発生しているすべてに注意を払うために重要です。

それはハードウェア側のほとんどです。それほど複雑な設定はありません。

もし興味があれば、私の机は不快な迫り来るマイクを除いてかなり普通に見えます:

ヒント

この最後のセクションには、私が取り上げたいくつかの一般的なヒントがあり、全体的に私のストリームをより良く、より楽しいものにしました。

パネル

素晴らしいパネルの作成に時間を費やしてください。パネルは、全員のチャンネルページの下部にある小さなコンテンツボックスです。それらは新しいMySpaceプロファイルボックスとして表示されます(笑)パネルのアイデアには、チャットルール、ストリーミングのタイミング、使用するコンピューターと機器、好きな猫の種類などがあります。個人的なタッチを作成するもの。他のチャンネル(特に人気のあるチャンネル)でアイデアを探してください!

私のパネルの1つの例:

チャット

チャットは本当に重要です。途中で人々がストリームに参加するときと同じ質問を何度も受けるので、「マクロ」とチャットすることは本当に役立ちます。 「何に取り組んでいますか?」は、コーディング中によく聞かれる質問です。 Nightbotで作成したチャットショートカットの「コマンド」があります。 !whatamidoingのような小さな1語のコマンドを入力することで、事前に入力した内容の説明を表示します。

人々が質問したり、素敵なコメントを残したりしたら、彼らに話を戻してください! Twitchのハンドルを言ってくれて感謝します。彼らは本当に注意と謝辞に感謝します。これは、最初にストリーミングを開始するときに常に把握するのが非常に困難ですが、マルチタスキングを行うほど簡単になります。数分ごとに数秒かけて新しいメッセージのチャットを確認してください。

プログラミングするときは、何をしているのか説明してください。よくしゃべる。からかう。私が立ち往生しているときでさえ、「ああ、くそ、このメソッドの使い方を忘れてしまいます。Googleit haha​​ha」と言います。楽しくて魅力的で、人々が見続けています。

ストリーマーが沈黙のタイピングコードに座っているプログラミングストリームを見ていると、チャットとその新しいフォロワーアラートを無視して、すぐに興味を失います。

チャンネルへの道を見つけた人の99%が友好的で好奇心が強い可能性が高いです。私は時折荒らしを受け取りますが、TwitchとNightbotが提供するモデレートツールはこれを防ぐのに役立ちます。

準備時間

可能な限りセットアップを自動化します。私の端末はiTermで、ウィンドウの配置とフォントサイズを保存できるため、後で元に戻すことができます。ストリーミング用と非ストリーミング用の1つのウィンドウ配置があります。時間を大幅に節約できます。 1つのコマンドを押すと、すべてが完璧なサイズで正しい位置にあり、すぐに使用できます。

アプリウィンドウのすべての配置を自動化する他のアプリがあり、それらのいずれかが役立つかどうかを確認してください。

端末とコードエディターでフォントサイズを本当に大きくして、誰もが見えるようにします。

規則性

あなたのスケジュールを定期的にしてください。私は週に一度だけストリーミングしますが、常に同時にストリーミングします。通常の予想時間内にストリーミングできない場合は、人々に知らせてください。これは私に定期的な聴衆を獲得しました。一部の人々はルーチンを愛し、それはまさに友人に追いつくのに似ています。あなたはコミュニティとソーシャルサークルに参加しているので、そのように扱ってください。

もっと頻繁にストリーミングしたいのですが、旅行のために週に1回しかコミットできないことを知っています。私は外出中に高品質でストリーミングする方法を考え出そうとしています。または、たぶんカジュアルなチャットをして、定期的な日曜日のストリームのプログラミングを保存します。私はまだこれを解明しようとしています!

ぎこちない

始めると変に感じます。あなたがコードを見ている人に緊張するでしょう。それは正常です!人前で話す経験はありますが、最初は本当に強く感じました。私はどこにも隠れる場所がないように感じました、そしてそれは私を怖がらせました。 「誰もが自分のコードが悪いと思うだろうし、私は悪い開発者だと思うだろう」と思った。これは私のキャリア全体を悩ませている思考パターンですが、目新しいものではありません。これにより、GitHubにプッシュする前にコードを静かにリファクタリングできなかったことがわかりました。これは一般に、開発者としての私の評判にとってはるかに安全です。

Twitchでのライブコーディングにより、プログラミングスタイルについて多くのことを学びました。私は間違いなく「動作させてから、読みやすくしてから、速くしてください」というタイプであることを学びました。私はもう前の夜のリハーサルをしていません(最初の3つか4つのストリームの後でそれをあきらめました)。そのため、Twitchでかなり大まかなコードを書いて、それで大丈夫です。私は自分の考えだけで、チャットボックスを見たり声を出して話すのではなく、最高のコードを書きます。それは大丈夫です。私は何千回も使用したメソッドシグネチャを忘れ、ほとんどすべてのストリームで「愚かな」間違いを犯しています。ほとんどの場合、最高の状態になるための生産的な環境ではありません。

私のTwitchコミュニティはこれについて私を決して裁きません。彼らは私を大いに助けてくれます。彼らは私がマルチタスキングであることを理解しており、実際的なアドバイスや提案について本当に素晴らしいです。時々彼らは私を救い出し、他の時には彼らの提案がうまくいかない理由を彼らに説明しなければなりません。本当に普通のペアプログラミングのようです!

この媒体に対する「いぼとすべて」のアプローチは、弱さではなく強さだと思います。それはあなたをより親しみやすくし、完璧なプログラマーや完璧なコードのようなものがないことを示すことが重要です。おそらく、新しいコーダーが見るのはかなり新鮮で、より経験豊富なコーダーとしての私にとっては謙虚です。

結論

Twitchでライブコーディングを行いたい場合は、ぜひ試してみることをお勧めします。あなたがどこから始めたらいいのか疑問に思っているなら、この投稿があなたのお役に立てば幸いです。

日曜日に私に参加したい場合は、Twitchで私のチャンネルをフォローしてください:)

最後のメモで、私は個人的にマティアス・ヨハンソンの知恵とストリーミングの旅の早い段階での励ましに感謝したいと思います。彼は非常に寛大で、FunFunFunction YouTubeチャンネルは継続的なインスピレーションの源です。

更新:多くの人々が私のキーボードやワークステーションの他の部分について尋ねてきました。ここに私が使用しているものの完全なリストがあります。関心をお寄せいただきありがとうございます!