EY-OfficeではReact入門等のプログラミング教育を行っています。
EY-Officeの教育では座学よりも実習を通じてプログラミングを学んで頂くスタイルです。そのためにはテキストだけでなく、プログラムのコードや作成手順を書いたサポートページが必要になります。
今回ある程度たくさんの人に実習をともなう教育を行う事になり、このサポートページで困ってしまいました。
Bing Image Creatorが生成した画像を使っています
EY-Officeサポートページの歴史
Redmine
以前はサポートページにはRedmineのWikiを使っていました。Redmineは自社サーバーで運用しているのでお客様の会社毎にプロジェクトを作り、プロジェクトにログイン・パスワードで認証を付加する事で、お客さまのみにサポートページを公開する事ができました。
さらに、教育を行っているときにヒントを出すなどの、ちょっとした変更が簡単にできるメリットもありました。
ただし、Redmineはプロジェクト管理ソフトウェアなので、教育で使うにコードが読みやすくないです。またデザインが古くさいのも好きではありませんでした。
GitHub
そこで、使い出したのがGitHubです。最近は開発者は大抵GitHubアカウントを持っているので、プライベートなGitHubリポジトリーに受講者を招待することで受講者のみに公開できます。
GitHubではマークダウンで書いたコンテンツはきれいに表示されます、コード・セクションはシンタックスハイライトされ、コピー・ボタンも付いています。もちろんデザインも今風で良いですね。
今までは受講者の数が少なかったので運用できていました。しかし、今回はある程度たくさんの人が参加します。全員を招待するのはたいへんです・・・・
サポートページを公開リポジトリーにする方法もありますが、Googleでクロールされてしまうのは困ります。
HonKit + Basic認証
今回選んだのは、HonKit + Basic認証です。
- サポートページはHonKitで作る
- スタティックページを生成し、それをサーバーにアップローする
- 公開するページには、Basic認証を設定する
HonKitはマークダウンで書いたコンテンツからスタティックなページ(HTML)やPDFを生成できるツールです。サポートページもマークダウンで書かれているので、作業は短時間で済みました。
公開するページにBasic認証を設定するのは、久々しぶりにnginxの設定ファイルを書いたので手間取りましたが、作業そのものは簡単でした。
教育中に書き換える事もあるかもしれないので、npm run deployで更新できるようなスクリプトを書きました。
デフォルトではHonKitの生成するHTMLのコード・セクションにはコピーボタンはありませんが、gitbook-plugin-copy-code-buttonを使うと追加されます。ただし、見た目が今一つなのでCSSで対応しました。
まとめ
今回はサポートページを「HonKit + Basic認証」でなんとかなりましたが、まだ不満点があるので改善を続けて行きたいと思います。 それとも専用のサイトを作った方が良いのかな？
