ふるてつのぶろぐ

福岡在住のエンジニアです。

写真提供：福岡市

Udemy講座つくりのすすめ - バージョンアップに対応する

Udemy Angular

今日すること

こんにちは😊ふるてつです。

f:id:tetsufuru:20220129224434p:plain:w300

新しいシリーズを開始しました。
昨年 Udemy の講座を公開したので、そのお話をすこしずつしていきたいと思います。
最初の1回目はフレームワークのバージョンアップに講座を対応させる方法についてお話しします。

1. 公開した講座はこちら

わたしが公開したのは Angular の講座です。
こちらになります。
www.udemy.com

2. ポイント

バージョンアップの難しいポイントを挙げてみます。
① 旧バージョンを学習している受講生がいる中で新バージョンがリリースされる
② 新バージョンがリリースされた後なにもアナウンスしないと新規受講生は新バージョンを使い始める
③ 動作を確認できるまで新バージョンを使ってほしくはない
④ 動画は同時に2つのバージョンには対応できない
⑤すぐに動画はバージョンアップできない（わたしは2～3週間かかる）

そこでわたしは新バージョンのリリース後、新規の受講生にはしばらく旧バージョンを使うようにアナウンスします。
そしてその間に動作を確認して動画を修正して新バージョンに対応させます。
ここまでおわったら旧バージョンを使うようにしていたアナウンスを解除します。
これでこのあとから新規受講生は新バージョンを自然と使うようになります。
そして旧バージョンを学習中の受講生にはバージョンアップの手順動画を用意します。

では具体的にどういったことをしているか下に書いてみます。

3. 事前の作業

まずは事前の準備作業です。
Angular のバージョンが上がる時期が近づいてきたら、上がる前にレクチャーを一つ増やします。
テキストのレクチャーで以下のような感じです。
Angular のプロジェクトを作るときのコマンドをバージョン指定して流すようにアナウンスします。
f:id:tetsufuru:20220129025747p:plain

具体的には今回はV13に上がるタイミングなので、ひとつ前のV12を指定してインストールするようにアナウンスします。

// アナウンス前は最新バージョンが入るコマンド
npm install -g @angular/cli

// 上のコマンドをV12指定するようにアナウンス
npm install -g @angular/cli@12

そして受講生がV12を使っている間に、V13の動作確認をして修正があれば資料や動画を修正します。
わたしはある程度余裕をもってバージョンアップの1ヶ月後くらいまでに講座の内容を最新化しています。

4. 今回の作業

a. 自分の環境をバージョンアップ

まずは自分の環境でバージョンを上下てみます。
Anglar の場合はコマンドでバージョンを上げます。
詳しくはこちらの過去ログを参照ください。
tetsufuru.hatenablog.com

b. 自分の環境でソースを修正

今回 Angular Material 絡みで見た目が変わりました。
そこでソースを一部修正しました。
詳しくは同じく上記のわたしの過去ブログを参照ください。👉こちら

c. バージョンアップ作業動画の作成

バージョンアップの手順がわかったところでV12で学習中の受講生向けにバージョンアップ方法を教える動画を作成します。
あとソースも修正箇所があったのでそのやり方も動画にしました。

d. 動画の修正

バージョンアップ作業動画を作る以外に、すでに公開中の動画の内容も修正します。
①これまでに動画で公開したコードの内容をわたしはファイルに残しています。
まずはそのファイルをGrep検索して修正が必要な箇所を探し出します。
②あと話す内容もファイルに残していてそこでも修正が必要な個所を探し出します。

下はわたしが使っている動画編集ソフトの画面で一つのレクチャー分になります。
赤枠で囲んだところが動画を修正した部分で、黄色の枠が話す内容（音声）を修正した部分です。
こういった動画/音声の修正は今回10本ありました。
f:id:tetsufuru:20220129233444p:plain

e. 動画と添付資料を差替え

動画や添付資料の修正が全部終わったところで夜中に一気に差替えます。
Udemyのプラットフォームには一気に差替える機能がないので、ひとつひとつ順々に手作業で行います。
あと新規で作ったバージョンアップ作業動画も公開します。

5. 終わりの作業

a. 事前作業で追加していたレクチャーを「非公開」にする

動画や添付資料をすべて差替えたら最新バージョンで動かして良くなります。
最初に書いた「2. 事前の作業」で追加していたテキストのレクチャーはもう必要ないので非公開にします。
削除はしません、Angularのバージョンアップは年２回あるので、また次のバージョンアップで使うために非公開にするだけです。

これで最新バージョンをインストールするコマンドを受講生はそのまま実行するようになります！

// アナウンス前の最新バージョンをインストールするコマンド
npm install -g @angular/cli

b. 受講生に展開

「お知らせ」で受講生に展開します。
下は Udemy のお知らせ登録画面です、こういった感じで受講生に展開しています。
f:id:tetsufuru:20220130001922p:plain

今日の感想

今回は講座のバージョンアップ作業について、どんなことをしたかを書いてみました。
結構手間がかかってます！😊
Angular は年に２回メジャーバージョンアップがあるのでそのたびに今回のような作業をおこないます。
とはいえ書籍のように古いバージョンのまま放っておくにもいきません。
講座がいつも新鮮な状態を保つようにバージョンアップにはこれからも対応していきたいと思います。

ではでは👋