動画で学べるeラーニングサイト(LMS)を自分自身で構築してみましたので、
eラーニングを選定している方に参考にして頂ければ幸いです。
目次
以下の様なe-ラーニングサイトを作成しました。(情報処理技術者試験対策講座)
サンプル講座としてログインできるようにしましたので、
実際にログインして使ってみてください。
以前から、情報処理技術者試験の対策講座をDVDで提供していましたが、
以下の理由よりeラーニングへの乗り換えを考えました。
一言でいうと、e-ラーニングシステムを提供している業者は多々ありますが・・・
お値段「高すぎる!」
「e-ラーニングシステム 格安」でググってみると ・・・
格安で・・7万円・・・一か月あたり!!!
360円・・・1名1か月 年間一人3600円でも受講生1000人になったら
年間360万円!!
う~ん、そんなに売れてません 大赤字でございます(涙
仮にUdemy等の動画教育サイトに登録すれば、eラーニングシステムは提供されていますが、、、
ほとんどの利益を持っていかれる上に自由度がない。
元々、飲食業で経営をしてた時に、家賃やらの中間コストをいかに減らせるかということが大切と感じている。
だから、コンテンツ提供する場合、自分の土地で売る
つまり 自分自身でeラーニングサイトを持つのが最も受講生に安く提供でき、自身も儲かるというWINWIN結論である。
オープンソースで「moodle」というのがありますが、設定が難しそう・・
やりたいことに対してオーバースペックで受講生からしてみたらどういう風に
操作していいかわかりずらい。
【実現したいこと】
•受講生情報の管理(ログイン管理)
•受講生の講座区分に応じた動画の閲覧
•メニューで動画をカテゴリで分けて詳細画面へ遷移
•見た目かっこよくしたい
•閲覧実績がある動画を受講生ごとに管理したい
•動画を時短再生(最大3倍速)にしたい
•タブレット・スマートフォンの画面にも対応したい
•すきま時間有効利用できるようにしたい!!
多分これだけの要件でも、
外部発注すると3人月(300万円)以上はとられるでしょうね、、
でも、システム業界は大半が「人件費」
JAVA、PHP、HTMLなどは無料で
それをどうコーデングするかの費用 なので、、、、
勉強もかねて自分でやってみることにした。
システムができた後にどこのサーバーに乗せるかでランニングコストが大きく違ってくる。
JAVAで開発してしまうと、AWSなどでサーバー領域もあわせて構築することになる。
クラウドサービスはたくさんあるが、
サーバーから構築となるとこれもお高い!
現状のホームページは、ロリポップを用いており 月額たったの250円!!(固定)
※受講生に快適な環境を提供するため
今は1,000円(月)のプランに切り替えていますが、それでも安い。
ただ、動的コンテンツを載せるために以下の言語を使う必要がある。
・PHP
・MySQL
最近はやりのPysonとかJAVAとか考えたが色々制約があるため、
あまり経験のないPHPを使うことにした。
で、デザイン面も重要になってくるので HTML、CSSの知識も習得要
必要な言語知識は以下
•PHP
•HTML
•CSS
•SQL(MySQL) •
JavaScript
ありきたりな言語ではあるが、当方長年(10年以上)上流工程(システム設計)がメインであるため、
PHP、CSS(デザイン)は かなり久しぶり。
なので、以下の講座を受講して基礎学習した(全部で5日程度)
月額たったの980円で学びたい放題!
めちゃめちゃわかりやすい
ドットインストール
こちらも月額1000円くらいで動画で学びたい放題
昔は書籍何千円も出して買っていたのに、便利な時代ですね。
書籍が売れない時代・・・動画eラーニング時代!!
やばい!急がねばと基礎学習を終えて実践に入る。
休みの片手間で構築を行うため、可能な限り早く作業できるようにした。
本来は基本設計・詳細設計があるべきだが、(自分自身の要件的に)小規模であることから
設計はデータベース設計レベルの最小限に抑えて、
コーディングしながら構築することにした。
(会社ではNG発言。でも、この業界後付け設計よくありますよね!)
ログイン画面
↓
↓⇒⇒ユーザー情報変更画面
↓
講座一覧画面
↓
詳細画面(動画閲覧)
※各画面ではセッション管理を行う
動画の登録に関しては、
ロリポップで無料でPHPadminの
GUIデータベース変更ツールが提供されている(使いやすい)ので、
動画はFTPでアップロードし、
パスや講座名をデータベースに直接設定する方法とした。
CSVでの流し込みなどもできるので、
エクセルでデータ作って流し込みも可能
(初期のDVDデータ移行はそれを利用)
ここは長年経験はあるができるだけシンプルにするようにした。
ユーザ情報 | ||
日本語 | 英語 | 型 |
購入者ID | kounyuusya_id | VARCHAR |
メールアドレス | VARCHAR | |
パスワード | password | VARCHAR |
講座ID | kouza_id | VARCHAR |
受講年度 | zyukou_year | VARCHAR |
講座情報 | |||
日本語 | 英語 | 型 | 値 |
講座ID | kouza_id | VARCHAR | PM、SC、 |
講座名称 | kouza_name | プロジェクトマネージャ試験7つの突破口、 | |
並び順 | sort | NUMBER |
講座分類 | ||
日本語 | 英語 | 型 |
講座ID | kouza_id | VARCHAR |
講座分類ID | kouza_bunrui_id | VARCHAR |
講座分類名称 | kouza_bunrui_name | VARCHAR |
講座分類詳細 | kouza_bunrui_syousai | VARCHAR |
講座分類説明 | kouza_bunrui_setumei | VARCHAR |
並び順 | sort | NUMBER |
講座詳細 | ||
日本語 | 英語 | 型 |
講座ID | kouza_id | VARCHAR |
講座分類ID | kouza_bunrui_id | VARCHAR |
講座詳細ID | kouza_syousai_id | VARCHAR |
講座詳細名 | kouza_syousai_name | VARCHAR |
講座詳細説明 | kouza_syousai_setumei | VARCHAR |
追加年度 | add_year | VARCHAR |
時間 | time | VARCHAR |
ファイル種類 | file_syurui | VARCHAR |
ファイルパス | file_path | VARCHAR |
ファイル名 | file_name | VARCHAR |
並び順 | sort | NUMBER |
省略(受講詳細とユーザーと日時の組み合わせ)
省略
これだけ!シンプルだけど将来拡張性は高い!
講座の動画の数分、for分回して、JavaScriptで差別化できるようにした。
PHP+HTML
出力されるHTML
VIDEOタグのデフォルト機能で速度変換ができるので、
以下の様にJavaScriptと組み合わせでスクリーンに連動した
動画再生しながらチェックボックスクリック時(又は動画再生30秒後)に、
受講情報テーブルを非同期で更新するようにした。
Ajaxを利用
逆にチェックを外した時に削除情報を流す。
今回CSSを学ぶ中で見た目に可能な限りこだわってみた。
スタイルシートってすごい!!!
例を以下にあげる
マウスカーソルをあてた時に行の色を変えるのと同時に徐々に色を変化させる
あとは境目を薄い黒の点線にする
border-bottom: dotted rgb(122, 122, 121);
構築にかかった時間 6日(土日利用)×8時間≒50時間
合計80時間
1人月150時間として0.5人月位
当方の客先との契約単価が当時130万円くらいだったはずなので、
原価ベースでは65万くらいかな
会社で発注すると設計・数人レベルでの打合せ・テスト・各種ドキュメントの作成で
多分6倍の工数3人月(300万)は取られるはず
自作して正解でした。
デザインはココナラ(個人スキル)で発注しようと思ったのですが、
以前デザインお願いした人が体調不良とのことで辞退・・
結果、自身でCSSも学んで基礎は身についたので自作して正解でした。
この記事投稿時に有料での
ソースコード提供依頼(データベース定義dll含む)、
構築提供依頼を頂いています。
ご希望の方はココナラで出品しましたので
以下で確認頂けると幸いです。
等々お気軽にお問い合わせください。