はじめに
こんにちは、まさやんです。
■運営サービス一部
https://smart-wordpress.com
業界特化、スマートなWordPressテーマ販売サイト『SMART WP』
【今回作成したサービス】
https://teachingplan.msy-a.com/
今回は、以前Laravel＋Vue.jsで作成した授業計画（指導案）作成サービスをご紹介したいと思います。
要件概要
○導入
日々多忙な教員にとって毎回の授業内容（指導案）をスピーディーに作成することはとても重要になります。
特に、教育実習生や教員になったばかりの先生は、授業の経験値がなく、毎時間授業の計画を考えることは大きな負担です。自分自身の教育実習に行った経験、教員の友人からのヒアリングから間違いないと思います。
授業計画を効率的に作成することは、授業の質に関わり、それは授業を受ける子どもたちの成長にも関わってきます。
○そもそも？（問題点）
世の中にタスク管理アプリはたくさんありますが、
「指導案を作成する」ことに特化したサービスはありません。現場の先生方は、効率的に指導案を作成することができていません。
○なぜなら？（問題点の裏付け）
指導案を作るために、紙やWordの雛形に毎回書き込んでいるのが現場の現状です。
（ひと昔前の教育実習生は、手書きで書いた指導案がボツになり、指導教官に目の前で破り捨てられ、書き直しさせられたなんて話も…）
○だから？（課題）
そのため、WEBサービスを利用し、
「効率的に指導案を作成するべき」だと考えます。
○そこで！（改善策）
効率的に指導案が作成できるサービスがあったらどうだろうか？と考えサービスを作成しました。
サービス概要
1.授業を登録
ユーザー登録後にマイページから授業を登録します。
単元名、日付、時限、本時の目標を登録します。
2.授業の詳細を登録
授業詳細画面で、授業計画を作成していきます。
デフォルトで、「導入」、「展開」、「まとめ」の構成になっています。
追加ボタンを押してタスクを追加していきます。
3.タスクの注意事項を確認
タスクにはそれぞれ、学習活動、時間、留意点が登録できます。
今回は、サクッと授業計画を作ることが目的なので最低限のものだけにしました。
使用技術
- PHP 7.4.12
- Laravel 5.8.38
- JavaScript
- Vue.js 2.5.17
CSSフレームワーク
- Bootstrap
フロントライブラリ
- jQuery
- axios
- lodash
- chart.js
- vue-chartjs
- vuedraggable
テスト
- PHPUnit
- mocha
テーブル設計
工夫した点
非同期処理でユーザビリティを上げる
Vue.jsでaxiosを使用し、タスクの登録・削除を行なっています。
非同期で処理を行うことでサクサク動き、ユーザーにストレスを与えないようにしました。
ドラッグ＆ドロップで直感的な操作
タスクをドラッグ＆ドロップで移動できるようにしました。
vuedraggableを使って、ドラッグ＆ドロップされるたびに、タスクの並び順を非同期通信で書き換えています。
授業の計画を変更したい場合にも、直感的に変更できます。
授業の時間配分をグラフで可視化
「導入」、「展開」、「まとめ」の時間配分を円グラフで可視化しています。
vue-chartjsを使用し、タスクを登録・削除・移動したときにリアルタイムでグラフが描画されます。
おわりに
最後までお読みいただきありがとうございました！
ITには社会の問題を解決する力があると思っています。
これからも学んで色んな問題を解決できたらと思います。
それでは！