Blog Dice

Educational Products: Month 1

Michael Lynch

教育プロダクト：1ヶ月目

原文は Michael Lynch により に公開されました。 このブログを購読する

一言サマリー

ブログ講座に再び取り組み始めました。

ハイライト

  • 2020年に作ったブログ講座を再始動しています。
  • htmxはなかなか良いですが、期待していたすべてを叶えてくれるわけではありません。
  • 昔運営していたケトジェニック情報サイト「Is It Keto」の買い手を探しています。

「Hit the Front Page」を再始動する

2020年に、私はブログについての動画講座「Hit the Front Page of Hacker News」を作りました。内容には自信があり、受講生からも好評でしたが、十分に力を注げなかったという思いが残っていました。

講座を公開した当時、TinyPilotが急成長しており、講座の宣伝や内容の改善に時間を割く余裕がありませんでした。

前回のブログ記事で、読者に今後やってほしいことをアンケートしました。何かを教えてほしいと答えてくれた人たちの結果は次のとおりです。

次に教えてほしいことへの関心を示す積み上げ棒グラフ。「開発者のライティング力向上を支援」が「ソフトウェア開発に意図的練習の手法を応用する」とともに32票で同率1位。「開発者向けのブログ運営」が31票で3位。

前回のブログ記事での読者アンケートの結果

データの解釈はいろいろ考えられますが、私が読み取ったのは、人々が特にライティングのテクニックを教えてほしいと思っているということです。意図的練習（deliberate practice）がトップの回答だったのも意外でした。熱意はやや控えめでしたが。

既存の講座はほぼ完成していて、数え方によっては2位か3位に入っていたので、この素材に磨きをかけて2024年版として再リリースすることにしました。

パイロットプログラムの受講生を見つける

Rob Fitzpatrickの著書Write Useful Booksは、教育プロダクトへの私の考え方に大きな影響を与えました。彼は、本や動画講座を出す前に必ずそのトピックをライブで教えるべきだと主張しています。実際の受講生からのフィードバックをもとに改善するためです。

妻と私は8月末に第一子が生まれる予定で、その後は数ヶ月間、家族との時間のために活動を休止するつもりです。これを考えていた時点で、出産予定日まで約10週間、講座は6週間なので、余裕はあまりありませんでした。

講座についての簡単な案内文を書き、ブログの購読者にメールで送り、興味があれば短い申込フォームに記入するようお願いしました。申込みがあった人には、記入内容に触れた個別の返信を送り、席を確保するための支払いリンクを案内しました。

結果は次のとおりです。

  • 1,944人の購読者に講座についてのメールが届きました。
  • 11人が関心を示してアンケートに回答しました。
  • 7人が講座を購入しました。
    • アンケート後に申し込まなかった4人のうち、3人は時間帯が合わなかったためでした。

動画配信プラットフォームを探す

ビデオ通話でZoomに代わる現実的な選択肢がほとんどないことに驚きました。Zoomはセキュリティについて嘘をついていたことが発覚して以来避けてきたのですが、ライブ講座では他に選択肢がないのが現状のようです。

ここ数年、仕事のミーティングではJitsi Meetを使ってきて、おおむね満足していましたが、Zoomのミーティングに参加すると品質が良いことに気づきます。Jitsi Meetの有料プランを探してみましたが、すべて「Contact Us」価格となっており、おそらく月額少なくとも1,000ドルはするということでしょう。

というわけで、Jitsiは多少使いにくいものの、使えなくはありません。録画機能がないので、次のような回避策を取っています。

  1. ノートパソコンで授業のビデオ通話をホストする。
  2. デスクトップからその通話に参加する。
  3. デスクトップで通常の画面録画ソフトを使って通話を録画する。
  4. 動画をPicoShareにアップロードする。
  5. PicoShareのリンクをクラスにメールで送る。

理想よりは複雑ですが、良い点もあります。自分が発表するスライドでノートパソコンの画面が埋まっていても、デスクトップのモニターで全員の顔を見られるのです。

Jitsi Meetより良い代替手段をご存知でしたら、ぜひ教えてください。

Hacker Newsから軸足を移すべきか？

講座に参加した受講生の約半数は、Hacker Newsにそれほど興味がないと言っていました。彼らは単に私の文章が好きで、私のプロセスについてもっと知りたいと思い、Hacker News色が強いにもかかわらず申し込んでくれたのです。

アンケート結果を振り返ると、ブログそのものよりも、一般的なライティングへの関心の方が高いように見えます。そして、Hacker Newsを具体的にリクエストした人は誰もいませんでした。

そこで、Hacker Newsから離れて、より一般的な内容に軸足を移すべきか悩んでいます。

Hacker Newsから離れることへの懸念は、自分の強みを失うことです。ブログやライティングを教えている人は星の数ほどいるので、その中では埋もれてしまう気がします。Hacker Newsに特化して教えれば、その分野では誰もやっていないので、世界で一番の講師になれます。

もう一つの問題は、ブログでの成功を示す証拠のほとんどがHacker News絡みだということです。個人ブロガーの中では、Hacker Newsで異例の成功を収めてきました。より一般的なライティング講座をやるとなると、誇れる実績は弱くなります。ブログで稼いでいるわけでも、膨大な購読者数を誇っているわけでもありません。

同時に、講座を購入してくれた人のほとんどは、まず私を見つけてから講座を見つけた人たちだと思います。彼らが「Hacker Newsの世界的権威」を検索してたどり着いたわけではないでしょう。

もしかすると、大勢の競合を気にしすぎる必要はないのかもしれません。いずれにせよ、講座への導線は私自身か口コミ経由になる可能性が高いのですから。

講座は元のHacker News版で95%完成しているので、今回はこのままHacker Newsにフォーカスした形でリリースします。それが終わったら、素材をより一般的な講座向けにアレンジするつもりです。

htmxを学ぶ

この2年間、htmxがどんどん視界に入ってくるようになりました。友人のCory Zueがhtmxを使っていることもあり、興味を惹かれました。

長い間、一番のハードルはhtmxの存在意義が理解できなかったことでした。

htmxのランディングページの冒頭には、「なぜ<a>と<form>だけがHTTPリクエストを送れるべきなのか？」と書かれています。これを読んだとき、「確かにそうなれば便利だけど、JavaScriptならどんなHTML要素からでもあらゆるリクエストを送れるのに。数行のJavaScriptを節約するために新しい方法論まで導入する必要があるのか？」と感じました。

最終的にhtmxが腑に落ちたきっかけは、Hypermedia Systemsという本でした。htmxと同じ著者たちが書いた本で、htmxの動機が説明され、使える具体的なシナリオが詳しく解説されています。

もし4年前の自分にhtmxを売り込むとしたら、こう言うでしょう。

過去の自分へのhtmxのピッチ

ウェブサイトの作り方を学び始めた頃、こんなHTMLを書いていたのを覚えていますか？

<form action="/users" method="POST">
  <input name="first-name" placeholder="First name" />
  <input name="last-name" placeholder="Last name" />
  <input type="submit" value="Add user" />
</form>

今なら、こんな書き方はしないでしょう。フォーム送信のたびにページ全体を再読み込みしたくないからです。フルリロードは遅く、ユーザーを戸惑わせます。特に「ユーザーを追加しました」というメッセージを表示したいだけなのに、です。サーバーが入力を拒否したときに入力内容をすべて消してしまいたくもありません。

そこで代わりにJavaScriptを使って、こんなことをするでしょう。

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("form").addEventListener("submit", (evt) => {
    evt.preventDefault(); // Block default submit.
    fetch(`/users`, {
      method: "POST",
      credentials: "include",
      headers: {
        Accept: "application/json",
      },
      body: JSON.stringify({
        firstName: document.querySelector("[name='first-name']"),
        lastName: document.querySelector("[name='last-name']"),
      }),
    })
      .then((response) => {
        if (response.ok) {
          return response.json();
        }
        // TODO: Handle errors too.
      })
      .then((result) => {
        // TODO: Handle success.
      });
  });
});

それほど大量のJavaScriptではありませんが、フォームが必要になるたびに同じようなコードを書き直すことになります。重複をリファクタリングすることもできますが、そうするとUIロジックが複数のファイルに分散します。サーバーとのやり取りのたびに余計な摩擦が生じるのです。

あるいはReactやVueのような重いフレームワークに頼るかもしれません。そうなると、自分のコードとブラウザに表示されるものの間に、無数のJavaScript抽象化レイヤーが挟まることになります。

htmxが約束するのは、ウェブページの作り方を初めて学んだ頃のシンプルさへの回帰です。HTMLを書いてからロジックのすべてをReactや手書きのイベントハンドラに押し付けるのではなく、htmxをアプリに組み込み、フォームをこんなふうに書けるようになります。

<form hx-post="/users" hx-target="this">
  <input name="first-name" placeholder="First name" />
  <input name="last-name" placeholder="Last name" />
  <input type="submit" value="Add user" />
</form>

あとはhtmxが、カスタムJavaScriptを一切書かなくても、すべてをうまく動かしてくれます。

これまでのhtmx体験

htmxを試すために、書き直しているのがScreenJournalの一部です。ScreenJournalは私が作っているオープンソースの映画レビューアプリで、映画版Goodreadsのようなものです。あるいはLetterboxdのオープンソース版で、見た目はダサいバージョンと言ったほうがわかりやすいかもしれません。

ScreenJournalは、映画のレビューをするための趣味のウェブアプリです。

書き直しの良い例が、通知設定ページをhtmxで再実装したことです。ユーザーが受け取りたいメールを指定できるページがあります。

ScreenJournalで通知を管理するページ

通知ページでは、次のことを行うために大量のカスタムJavaScriptが必要でした。

  • ページを再読み込みせずにfetchでフォーム内容を送信する。
  • リクエスト送信中はフォームの入力を無効化する。
  • リクエスト送信中にステータススピナーを表示する。
  • リクエストが失敗したらエラーメッセージを表示する。

そして、バニラJavaScriptからhtmxへの移行は次のとおりです。

全体的にコード行数が減り、特にJavaScriptの行数が大幅に減りました。ロジックがフロントエンドからバックエンドに移るのも気に入っています。バックエンドのコードの方がUIコードよりテストしやすいと感じているからです。

htmxを使ってみて得た気づきをいくつか挙げます。

htmxは抽象化レイヤーを追加するが、直感的だ

  • VueやAngularでは、自分のコードがどうウェブアプリに変換されているのかさっぱりわかりませんでした。
  • htmxでは、動きが十分直感的なので、見た通りの動作から自分でも再実装できそうな気がします。

htmxのエラーハンドリングはいまひとつ

  • htmxのモデルでは、サーバーにリクエストを送り、そのレスポンスをページ上の単一の要素に配置することを前提としています。
  • 問題は、成功時にはHTMLフォームを置き換えたいのに、エラー時にはフォームはそのままにして、フォームの下にエラーを表示したいという点です。
  • htmx側の回答は、サーバーがユーザーの入力をすべて含めてHTMLフォームを再レンダリングすればよいというものですが、私はそれが好きではありません。すでに存在していたものを一から再レンダリングすることになり、XSS脆弱性の攻撃面も広がってしまうからです。
  • 自前のイベントハンドラを書けば回避できますが、そうなると少しフレームワークと戦っている感じがします。

htmxはContent Security Policy（CSP）を弱める

  • 私はクロスサイトスクリプティング（XSS）を防ぐ最後の砦としてCSPを気に入っています。
  • htmxは概ねCSPと互換性がありますが、htmxができることが多すぎるため、攻撃者がカスタムHTMLを書き込めるようになることは、実質的に任意のJavaScriptを書き込めるようになることと同じです。
  • 例
    • <form action=/delete-account" method="post" onload="this.submit()">
      • CSPによりこのコードの実行はブロックされます。
    • <form hx-post="/delete-account" hx-trigger="load">
      • CSPはこの同等のコードの実行を許可してしまいます。
  • htmxを使っても安全なアプリケーションを書くことはできますが、CSPがXSSに対する信頼できる最後の防御線として機能しなくなるのは確かです。

Is It Ketoを売却する

今週気づいたのですが、Amazonがいつの間にかアフィリエイトリンクの仕様を変更したため、Is It Ketoのアフィリエイトリンクの90%が壊れていました。サイト自体はGoogle AdSenseで今も収益を上げていますが、もうメンテナンスする時間がありません。

サイトを購入してくれる人を探しています。インディーファウンダーや起業を目指す人から魅力的なオファーがあれば、相場より安く売るつもりです。

まとめ

何ができたか？

  • 少人数のコホートにブログ講座を教え始めました。
  • ScreenJournalの多くをhtmxに移植して、htmxを学びました。
  • 講座の最初のボーナスコンテンツを収録しました。

学んだこと

  • Hacker Newsという切り口に、自分が思っていたほど縛られていない。
    • 講座を受けてくれる人は、Hacker Newsでの成績よりも、私の文章が好きだから受けてくれる可能性が高い。だから、その顧客像についてもっと考えるべきだ。

来月の目標

  • 講座の4つのレッスンについて、公開可能なバージョンを収録する。
  • 新バージョンの講座の販売を開始する。

ヘルプのお願い

ビデオ通話プラットフォーム

次の条件を満たすビデオ通話プラットフォームについて、おすすめがあれば教えてください。

  • 必須：90分間の通話で最大10名の参加者をサポートすること。
  • 必須：参加者が新しいアカウントを作成したり、デバイスにソフトウェアをインストールしたりせずに参加できること。
  • 必須：月額80ドル以下であること。
  • あれば嬉しい：ビデオ通話を録画できること。

講座プラットフォームの経験

MavenやUdacityのような講座プラットフォームで、講師または受講生としての経験があれば教えてください。

この記事は「muse-spark-1.2-contributor」を使用して翻訳されました。

コメント