ブログラミング学習サイトDonbler

2021年1月にリリースされたDonblerというサービスが気になっている。このサイトどうやらエディタを内臓(Progateのような？)していてサイト内で完結するらしい。
Progateとなにが違うのか検証してみたところレッスンは公式ではなくユーザが投稿できてさらに有料にもできる仕様らしい。この点はUdemyと似ているがUdemyは動画のレッスンに対してDonblerはテキストベースのレッスンである。これはエンジニアにとっては嬉しい仕様なのではないだろうか。
今回はProgateとUdemyの融合体であるDonblerに試しに有料レッスンを投稿してみることにする。

今回投稿したレッスンのリンクを貼っておきます！興味のある方は買ってみてください！
VUEで使える様々なライブラリ紹介

投稿方法

Donblerのレッスンの投稿方法は公式のnotionに書いてある。以下リンク。
Donbler公式Creator Wiki | レッスン投稿手順
こちらにある通り進めてみる。

1.テンプレートダウンロード

https://github.com/donbler/lesson-template/releases
公式wikiにある上記URLから好みのテンプレートをダウンロードする。
テンプレートは2種類あるが内容は変わらないので自分の環境にあった方をダンウンロードした方がいいと思われる。

2.投稿可能なレッスンの種類

現在Donblerでは以下3種類のレッスンが投稿できるそう

HTML/CSS
JS
PHP

今回はこの中からHTML/CSS、JSを選んでVUEのライブラリを紹介するレッスンを作ってみる

3.setting.ymlの編集

setting.ymlでは

タイトル
詳細
ターゲット
各チャプターのタイトル

の4つを設定する。
ymlファイルなのでとても編集しやすかった。
また、文字数はどれくらいいけるのか気になったので検証してみたがタイトルは100文字程度らしい。
以下実際に投稿したsetting.ymlである

setting.yml

# レッスンのタイトルを入力してください
title: vueで使える様々なライブラリ紹介
# レッスンの説明を入力してください
description: |-
  このレッスンではvueで使えるライブラリを紹介しています！チャプター1ではvueの導入、そのあとのチャプターから様々なライブラリを紹介していきます！
  vueを触ったことがない人でも気軽に扱える内容になっています！ぜひ受講してしみてください！
# レッスンの対象ユーザーを入力してください
target: |-
  JavaScript初心者やフレームワークに興味がある人
# チャプターのタイトルを入力してください
chapter:
  - VUEを導入してみよう！
  - vue-scroll-toで美しいページ内リンク！
  - vue-social-shareingでSNSの人気者！
  - vue-selectで簡単にセレクトボックス！

4.実際にレッスンを作る

ここからは実際にレッスンの中身を作っていく。
公式では

markdown
サムネイル
ソースコード

の順になっているが個人的には

ソースコード
markdown
サムネイル

の手順の方が自分にはあっているのかなと感じたので後者の手順で解説していく。

4-1.ソースコード

自分が選択したテンプレートのHTML/JS/CSSにおいて少し注意することがあった。
普段ならHTMLにJSやCSSを不紐付ける必要があるがDonblerの場合それが不要らしい。投稿時かレッスンの実行時かに補正してくれているのであろう。

少し不安だったのがCDNでのライブラリやフレームワークが使えるかどうかである。vueを使うにはnpmかyarnが主流だと思われるがDonblerではそれが使えない。となると残るはCDNである。
結果からいうとなんの問題もなくvueを導入することができた。これはなかなか拡張性があるのではないだろうか。

また、当レッスンではvueの導入方法とライブラリ3種類の説明をしたレッスンを作成した。この時少しアドバイスがあるとすれば先ほども言った通りHTML/CSS/JSそれぞれリンクさせる必要はないと言ったが逆に編集しづらいという弱点もあった。しかし、これはレッスンの作成を投稿ページのプレビューでやってしまえばなんの問題もなくサクサク作ることができた。

最後にここが一番大事な要素だと思われるコメントアウトによるソースコード隠しである。
これはみていただいた方がよい。

var app = new Vue({// :cut
  el: '#app',// :cut
  data: {// :cut
    message: 'Hello Vue!'// :cut
  }// :cut
})// :cut

以上のようにコメントアウトに:cutと入れることで見本には表示されるが受講時には非表示になるので問題を作る時やユーザーに入力してほしい部分には積極的に使っていきたい。
注意点があるとしたら答えには表示されるので２重で表示されない工夫が必要になる。具体例をあげると

<div id="app">
    <button v-scroll-to="'#element'">ここから</button>
    <div id='element'>ここにスクロール</div>
  </div>

これは　vue-scroll-toを使う時のHTMLである。
この時ユーザーにはv-scroll-to="'#element'"だけをを入力してもらいたいがbuttonタグ丸ごと非表示にしてその下に見せておきたいコードを書くと答えで表示される時にダブって表示されるのであまりよろしくない。
この時は以下のように解決することができる

<button 
  v-scroll-to="'#element'" <!-- :cut -->
  >ここから</button>
<div id='element'>ここにスクロール</div>

上記のようにすることでピンポイントで非表示にすることができるようになる。

4-2.markdown

解説や問題等の作成は皆さまお馴染みmarkdownで作成することができる。この時気をつけることは特になかった。

4-3.サムネイル

サムネイルは登録しなくてもDonblerがデフォルトで設定してくれるらしいので無理して作る必要はなさそう。しかし、サムネイルはレッスンの購入数に直接影響があるので作れるのであれば作った方がいいと思われる。

5.有料レッスンの投稿

ここで有料レッスンの投稿手順について説明しておく。

5-1.有料レッスン投稿申請

有料レッスンを投稿するにはどうやら別サイトのアカウントを登録して審査を通す必要があった。
Donblerにログインした後、下記リンクから有料レッスン投稿申請が可能である。
https://donbler.com/userinfo/sales
この申請は個人情報を入力するくらいで特に難しい点はなかった。また、審査は入力後すぐに終わった。

5-2.振込講座登録

振込口座を登録するフォームを入力する必要がある。当たり前といえば当たり前である。ただ、ここもフォームに入力して登録さえしてしまえば良いだけなので問題はなかった。

有料レッスン申請から振込口座登録まで数分で終わった。
特につまるところもなく登録できるので有料レッスンを投稿する可能性がある人は登録しておいて損はないかもしれない

5-3.レッスン投稿

ここでやっと有料レッスンが投稿できる。
投稿ページは右上のアイコンからレッスンを投稿メニューを押すと飛べる。
ここにあるフォームでは

レッスンレベル
レッスンのカテゴリ
テンプレートのsetting.yml
価格設定
サムネイル
テンプレートのcontens

の6つである。

5-3-1.レッスンのレベル

このフォームではレッスンのレベルを選択することができる。
今回のレッスンは何も知識ない人でも受講できるレッスンなので初心者向けとする。

5-3-2.レッスンのカテゴリ

レッスンのカテゴリは3つあって

HTML/CSS
JS
PHP

の3つである。
当レッスンはHTML/CSS/JSなので今回のカテゴリはhtmlcssとjsの2つである

5-3-3.setting.yml

ここにはテンプレートで編集したsetting.ymlを投稿する。
何かしら問題があるときちんとエラーが出てくれるので助かる。

5-3-4.価格設定

今回一番大事な価格設定である。
今回は価格は1000円に設定し、無料枠の設定もできるようなので設定してみた。
無料枠はとりあえず最大数の3に設定した。

5-3-5.サムネイル

画像のサイズや比率の違いが気になって投稿してみたがどうやらきちんと整形してくれてるっぽい。
今回はフリー画像を使用した。

5-3-6.contens

これがないと話にならない！
ここではテンプレートのcontentsファイル丸ごとを選択して投稿する。
ファイルを選択した後、間違えたファイルを投稿した場合のためか再度チェックしてくれるのでOKを押す。

以上で投稿完了である。

今回のレッスンの投稿確認ページを参考に添付しておく。

6.レッスンの審査

どうやらDonblerにレッスンを投稿するには審査が必要らしい。
とりあえず審査が終わるまで待った後、無事公開された。

以上で有料レッスンの投稿の流れは終了である。

7.終わり

今回Doonblerにレッスンを投稿してみたが、受講者側に立って考えた時Udemyのように動画レッスンもいいが自分の場合動画を見るよりテキストの方が早く進めるので自分にとっては嬉しい。また、環境構築不要で買った瞬間勉強ができるので初心者にはオススメのプログラミング学習サイトになりそうである。今はリリース後ということもありレッスン数はあまり多くないが今後増えて行くのではないかと思う。
今後Donblerで生計を立てるような亡者が現れて来ると思うとワクワクしてきた筆者であった。

ブログラミング学習サイトDonblerに有料レッスンを投稿してみた