開発初心者のためのMoodleプラグインの開発と利用（第二部） for Moodle Moot...

7th Conference for Moodle Teachers and Developers

開発初心者のためのMoodleプラグインの開発と利用

Time: 2015.2.21 09:30-11:00 Room: 5405

株式会社テクノウォーカー山岡茂治

Moodle moot japan 2015

Page. 1

Part2 : 各種プラグインの開発例（40分）

Page. 2

発表内容 –Agenda- ※2部構成40分＋40分

• Part1：Moodleプラグイン開発の概要（40分）

– はじめに（プラグイン開発について）• Moodleのプラグイン開発についての概要と流れ

– XAMPP、エディタ、DBツールを使った開発環境の整備• Moodleの開発環境を無償のツールで揃える方法

– PHPプログラミング基礎の基礎• 初心者が最低限知っておくPHPの書き方、デバッグの仕方

– プラグインの開発方法• プラグインの仕組みと構成、開発の手順を紹介

– プラグイン開発例（既存ブロックのコピー）• HTMLブロックをコピーし、オリジナルのブロックを作成

Page. 3

発表内容 –Agenda- ※2部構成40分＋40分

• Part2 : 各種プラグインの開発例（40分）

– ブロック開発のポイント• Part1に続き、ブロック開発に必要なポイントの紹介

– テーマの開発とポイント• Cleanテーマをコピーし、オリジナルを作成

テーマ開発の流れと開発に必要なポイントを紹介

– 活動モジュールの開発とポイント• モジュールテンプレートをコピーし、オリジナル「15パズル」を作成

活動モジュール開発の流れと必要なポイントを紹介

– まとめ・質疑応答• 弊社オリジナルの開発事例の紹介（ローカルプラグイン等）

• まとめと質疑応答

Page. 4

■あいさつブロック（第一部で作成したブロック）

単純にメッセージを表示するだけのブロックです。

Part2 : 各種プラグインの開発例

1. ブロック開発のポイント①

Page. 5

ホーム画面の右上に「あいさつ」を

配置したところ

独自の設定項目の追加

こんばんは！ Admin さん！の「こんばんは！」の部分

プラグイン「あいさつ」として認識

■プラグイン「ブロック」の開発手順（第一部の紹介と同じ）

１）目的・機能を決定する（要件）

２）機能の動作やデータを格納する構造を考える（設計）

３）プラグインのテンプレートまたは既存のプログラムをコピーする

４）データ構造定義ファイル（XML）や権限定義を用意する

５）プラグイン内のファイル名やプログラムの関数名などを書き換える

６）version.phpやlang/プラグイン名.phpなどの基本情報を書き換える

７）一旦Moodleへプラグインを配置し、正常登録できるか確認する

８）各プラグインの主要処理を仕様に沿って作成する

⇒ この部分の設計（文書作成）・実装・テストが主な開発作業

９）ブラウザでMoodle上に配置されたプラグインの動作を確認する

10）８～９を繰り返しで完成させたら、７～９の動きをテスト

1. ブロック開発のポイント②

Page. 6

■プラグイン「ブロック」の構成

moodle/blocks フォルダ内にプラグインをフォルダごと置く

※Backup（バックアップ・レストア時の処理）、

DB（データベース、アクセス権定義）、Pix（画像ファイル）、

Test（テストシナリオを置く）等のフォルダ

lib.php、settings.phpなどのファイルは無くても動きます。

1. ブロック開発のポイント③

Page. 7

フォルダ／ファイル説明／役割

lang/言語 /プラグイン名.php 言語定義ファイル（en や ja）を配置する

block_プラグイン名.php メインプログラム（ブロックの表示）

edit_form.php 配置したブロックの設定画面

(lib.php) ブロックの共通処理

(settings.php) ブロックの管理者用設定画面

version.php プラグイン（ブロック）の定義

■言語定義ファイル（lang/言語/プラグイン名.php）●言語ごとにフォルダを作成し、プラグイン名のファイルを作成する

例）lang/en/hello.php

lang/ja/hello.php

●決められた言語定義および独自で利用する言語定義を記述する

$string[“項目名”] = ”値”;

例）項目名 ‘pluginname’ （プラグインの名前）の場合

en … $string[‘pluginname’] = ‘Hello’;

ja … $string[‘pluginname’] = ‘あいさつ’;

●定義はget_string関数を使って取得し利用

$結果＝ get_string(“項目名”, “プラグイン名”)

※言語定義ファイルが無いと既定（en）になります

※英語以外の言語を保存するときは文字コードに注意（UTF8が基本）

1. ブロック開発のポイント④

Page. 8

■メインプログラム（block_プラグイン名.php）

● 配置されたブロックの表示内容を記述する（ひな形がある）

⇒ block_baseを継承（＝機能を引き継いで）して作る

● function get_content() 内に表示する内容を記述する

いろいろやりたいことを書いて、最後に return $this->content

例）

$this->content->text = “”;

$this->content->text .= “<div style=‘color:blue; font-size:24pt;’>";

$this->content->text .= "こんにちは $USER->username さん！";

$this->content->text .= “</div>";

return $this->content;

※「.=」は文字列をつなげるという記述です

1. ブロック開発のポイント⑤

Page. 9

■ブロックの設定編集画面（edit_form.php）

● 設定画面のひな形も予め用意されている

⇒ block_edit_formを継承（＝機能を引き継いで）して作ることで

設定の読み込みや書き込みなどの処理は省略できる（Moodleお任せ）

● フォームAPI「$mform」を利用して入力項目を作成

function specific_definition ⇒

例）

$mform->addElement(‘text’, ‘config_hello’, ‘あいさつ文字');

$mform->setType(‘config_title', PARAM_TEXT);

※上記コードの意味（細かくは説明しきれません）

1行目: あいさつ文字のテキストボックスを用意

2行目: 入力値は制限なしの文字列

1. ブロック開発のポイント⑥

Page. 10

■プラグイン（ブロック）の定義（version.php）

プラグインに関する定義を記述する（ブロックに限らず共通）

●モジュールの名前を定義

$plugin->component = “mod_モジュール名”;

●モジュールの内部バージョン、リリースバージョン

$plugin->version = 2014051200; // YYYYMMDD00の形式

$plugin->release = “v2.7.x”; // Moodleバージョンと合わせると良い

●Moodleの必須バージョンとプラグイン成熟度

$plugin->requires = 2014051200; // YYYYMMDD00の形式

$plugin->maturity = MATURITY_STABLE; // 安定板

※その他 cron を使ったスケジュール処理や依存関係の記述など

細かな指定がある（無くても良いので省略！）

https://docs.moodle.org/dev/version.php

1. ブロック開発のポイント⑦

Page. 11

■季節のテーマ「Seasons」（これから作成します）

季節（今回は春のみ）をイメージしたテーマ

2. テーマ開発のポイント①

Page. 12

Cleanテーマをコピーして作成

※簡易的に作っているため、フォントや色しか変更されていませんが、レイアウトなども自由に変更できます

普通のテーマなのでもちろん適用前のプレビューもあります。

■テーマの開発テーマもブロックと同じくコピーして直す方が早い（かも）。

Moodle 2.7以降、標準テーマが限定された ⇒ Cleanを真似て作る

■プラグイン「活動モジュール」の開発手順（ブロックと一緒です）

１）デザイン・レイアウトを考える（要件）

２）既存のテーマ（Clean等）のプログラムをコピーする

３）プラグイン内のファイル名やプログラムの関数名などを書き換える

４）version.phpやlang/プラグイン名.phpなどの基本情報を書き換える

５）一旦Moodleへプラグインを配置し、正常登録できるか確認する

６）考案したデザイン・レイアウトに合わせて layouts の中のプログラムやスタイルシート（CSS）などを作成する

７）ブラウザでMoodle上に配置されたプラグインの動作を確認する

８）６～７を繰り返しで完成させたら、５～７の動きをテスト

⇒ テーマはレイアウト（主にHTML）やCSSのスタイル修正

＆ブラウザ表示を繰り返して作業します

2. テーマ開発のポイント②

Page. 13

■季節のテーマ「Seasons」の開発例■手順１）「clean」をコピーして「seasons」にする

■手順２）clean の記述をすべて seasonsに変更

■手順３）ファイル名 clean を全て seasons に変更

2. テーマ開発のポイント③

Page. 14

・langフォルダ内の「theme_clean.php」を「theme_seasons.php」にする

・PHPプログラムの clean を seasonsに書き換える（エディタ一括置換）

Langフォルダのファイル名を変更

フォルダをコピーし、リネームする

エディタの置換機能でclean ⇒ seasons へ

■手順５）MoodleのThemeフォルダにコピーする

■手順６）管理者にてMoodleにログイン、プラグインのインストール

■手順７）最低限の動作を確認できたら、layoutsのデザインやstyleのスタイルを修正

■手順８）完成！

Part1：Moodleプラグイン開発の概要

2. テーマ開発のポイント④

Page. 15

・Themeフォルダに「seasons」を戻す

・管理者でログインするとプラグインのインストール画面が表示される。プラグインをインストール。

・テーマを適用してみる（Cleanと同じになる）

・layouts/xxx.phpやstyle/custom.cssを修正

MoodleのThemeフォルダにコピー

「Moodleデータベースを更新」を押してインストールする

テーマに配置されるので適用してみる（何も変わらない）

custom.cssに独自のスタイル定義を追加（スタイル定義内容については省略）※後ほどMoodle情報サイトからDLできます

春（ピンク）っぽい？デザインに変更されます

■プラグイン「テーマ」の構成

moodle/theme フォルダ内にプラグインをフォルダごと置く

※テーマは他のプラグインと比べ構成が少し異なります

2. テーマ開発のポイント⑤

Page. 16

lang/言語 /theme_プラグイン名.php 言語定義ファイル（en や ja）を配置する

layout/レイアウト名.php 画面表示のレイアウト（外観）の定義

pix/各種画像等、screenshot.jpg 各種画像、テーマプレビュー画像

style/スタイルシート.css テーマに利用するスタイル

config.php テーマのパターン定義（レイアウト等）

lib.php テーマの共通処理

settings.php テーマの管理者用設定画面（共通設定）

version.php プラグイン（テーマ）の定義

■レイアウト定義（layout/レイアウト名.php）

● Moodleの各ページに適用するレイアウト定義

⇒ <html><head><body>の共通部分はここ

■テーマ定義（config.php）

● 外観に関する各種定義を記述する

● どのページがどのレイアウトを使うかはconfig.php および各処理で呼ばれるページAPI（$PAGE）で決定

例）config.php 内の記述

$THEME->layouts = array(

“standard” => array(“file” => “レイアウト.php”,)

特定ページの処理

$PAGE->set_pagelayout(“standard”);

2. テーマ開発のポイント⑥

Page. 17

■スライドパズル（SlidePuzzle）モジュール（これから作成します）

１５パズル（実際９マスですが）をおこない完成タイムで評価？

3. 活動モジュール開発のポイント①

Page. 18

開始前の画面、画像は Moodle moot 2015 Kyoto のチラシです。

クリックするとゲーム開始となります。

画像を元の形に戻すと完成。画面下に経過時間が表示されます。

■プラグイン「活動モジュール」の開発手順（他と一緒です）

１）目的・機能を決定する（要件）

２）機能の動作やデータを格納する構造を考える（設計）

３）プラグインのテンプレート（newmodule）をコピーする

４）データ構造定義ファイル（XML）や権限定義を用意する

８）各プラグインの主要処理を仕様に沿って作成する

⇒ この部分の設計（文書作成）・実装・テストが主な開発作業

3. 活動モジュール開発のポイント②

Page. 19

■プラグイン「活動モジュール」の開発手順の補足既存モジュールのコピーは・・・少し難しい（複雑なものが多い）

セオリー通り「テンプレート」を利用するのがおすすめ。

テンプレートの説明と場所

●テンプレートの説明（moodle.org）

https://docs.moodle.org/dev/NEWMODULE_Documentation

●テンプレート newmodule のダウンロード先https://github.com/moodlehq/moodle-mod_newmodule

右下の「Download ZIP」をクリックしてダウンロード

3. 活動モジュール開発のポイント③

Page. 20

■稼働とモジュール「スライドパズル」の開発例■手順１）newmodule.zip を展開し「slidepuzzle」にする

■手順２）「newmodule」の記述をすべて slidepuzzle に変更

■手順３）ファイル名 newmodule を全て slidepuzzle に変更

■手順４）（大変なので）今回はとりあえず使わないファイルは残す（消してもOK）

3. 活動モジュール開発のポイント④

Page. 21

ファイル名を変更するのは langフォルダ位です

ZIPを解凍し、リネームするエディタの置換機能で

newmodule ⇒ slidepuzzle へ※対象ファイルの量が多い

・newmodule.phpをslidepuzzle.phpにする

・PHPプログラムの newmodule を

sildepuzzle に書き換え（エディタの一括置換）

■手順５）MoodleのModフォルダにコピーする

■手順６）管理者にてMoodleにログイン、プラグインのインストール

■手順７）最低限の動作を確認できたら、PHPのコードを記述（スライドパズル埋込）

■手順８）完成！

3. 活動モジュール開発のポイント⑤

Page. 22

・Modフォルダに「slidepuzzle」を戻す

・管理者でログインしプラグインをインストール。

・コースに「スライドパズル」を配置（エラーでない）

・素材（画像・音楽・スクリプト）を配置

・view.php内に「スライドパズル」を埋め込む

MoodleのModフォルダにコピー

「Moodleデータベースを更新」を押してインストールする

コースに活動モジュールの追加から「スライドパズル」を配置してみる

view.phpにスライドパズル用のHTMLソースを埋め込む※スライドパズルそのものはMoodleと関係なくHTML5で作成

「スライドパズル」の完成（遊べます）

■プラグイン「活動モジュール」の構成

moodle/mod フォルダ内にプラグインをフォルダごと置く

3. 活動モジュール開発のポイント⑥

Page. 23

backup/moodle2/xxx.php コースのバックアップ・リストア時の処理

db/access.php、install.xml DBのテーブル定義、権限、ログ処理等

lang/言語 /プラグイン名.php 言語定義ファイル（en や ja）を配置する

pix/各種画像等、icon.png 各種画像、プラグインのアイコン

index.php 活動モジュールの共通ページ（管理向け）

lib.php 活動モジュールの共通処理

mod_form.php 活動モジュールの設定画面

view.php メイン画面のプログラム

version.php プラグイン（活動モジュール）の定義

■活動モジュールの共通処理（lib.php、locallib.php）コースへの追加・削除時等のプラグインで定義された振る舞いを記述する

● モジュールの追加・変更・削除イベント（Moodle本体から呼ばれる）

function モジュール名_add_instance (モジュール情報)

function モジュール名_update_instance (モジュール情報)

function モジュール名_delete_instance (モジュールのID)

● その他のイベント（こちらも記述があればMoodle本体から呼ばれる）

function モジュール名_complete

⇒ 受講者が完了させたときの処理

function モジュール名_cron

⇒ スケジューリング処理

function モジュール名_extend_navigation

⇒ ナビゲーションの処理（独自メニューを追加等）

3. 活動モジュール開発のポイント⑦

Page. 24

■メインプログラム（view.php）

●活動モジュールのメイン画面（講師や受講者がコース内で閲覧する画面）

⇒ 記述内容は自由だが、ある程度流れが決まっている。

プログラムの流れ

１）Moodleの設定（config.php）、ライブラリ（lib.php）の読み込み

２）コース内モジュールIDの取得とモジュール・コース情報のロード

３）ログイン・権限チェック

４）ページURL・タイトル・ヘッダー情報のセットと出力

５）モジュール独自の処理と出力（ここがメイン）

６）フッター情報の出力

3. 活動モジュール開発のポイント⑧

Page. 25

・echo $OUTPUT->header(); から

echo $OUTPUT->footer();の間に記述

・HTMLを埋め込んでも良い

（スライドパズルの場合はHTMLを埋込みクライアントJavaScriptで動作させる）

■DBのテーブル定義、権限、ログ処理等（db/）●独自のDBテーブルを利用する場合の定義ファイル（install.xml）

⇒ XMLで記述するとプラグインインストール時にDBの表を自動生成

（MoodleのXMLDBEditorを使って作ると簡単です）XMLDBの構成例<XMLDB …>

</FIELDS></TABLE></TABLES>

</XMLDB>

●その他のファイル

・ access.php ⇒ 権限（アクセス制御）の定義を記述

・ install.php、upgrade.php、uninstall.php

⇒ プラグインのインストール・更新・アンインストール時に独自の処理を追加可能

・log.php ⇒ プラグインのログ（イベント）の種類を定義

3. 活動モジュール開発のポイント⑨

Page. 26

■補足）開発中に陥りやすい？こと

●Moodle画面が急に真っ白になった！

【原因】作成したプログラムの構文エラー等でMoodleが停止

対応① 直前に修正したファイルをMoodleフォルダから移動

それでもダメならプラグインのフォルダごと移動

対応② サイト管理 ≫ 開発 ≫ デバッグの設定を変更

デバッグメッセージを NONEからNORMAL等に変更

4. まとめ・質疑応答①

Page. 27

行（ステートメント）の終端「 ; 」が無い → 構文エラー

■補足）開発中に陥りやすい？こと

●プログラムやJS・CSSを修正したはずなのに動作が変わらない！

【原因】Moodleまたはブラウザがキャッシュしている

対応① ブラウザのキャッシュを消去

対応② サイト管理 ≫ 開発 ≫ すべてのキャッシュを削除するを実行

対応③ サイト管理 ≫ アピアランス ≫ テーマ ≫ テーマ設定

「テーマデザインモード」にチェックを入れる（テーマ開発時）

4. まとめ・質疑応答②

Page. 28

■弊社の過去の開発例（自社内利用含む）

Moodleの構築、バージョンアップ、移行、コース・コンテンツデザインの

他に以下のような開発対応をおこなっています。

● コンビニ・カード決済機能（活動モジュール、ブロック、ローカル）

● 組織階層管理機能（活動モジュール、ブロック、ローカル複合）

● フランチャイズ（総代理店・代理店）管理機能（〃複合）

● メール一斉配信（DM）機能（ローカル、メッセージ）

● コースを跨いだ進捗レポート機能（ローカル、レポート）

● Moodle画面のフルカスタマイズ（テーマ、本体修正）

● レーダーチャート表示プラグイン（活動モジュール、ローカル）

● プログラムソースコード判定プラグイン（問題タイプ）

● 自動出欠モジュール、共有カードのカスタマイズ

● オリジナルテーマおよびUIフルカスタマイズ

● MoodleとMaharaの連携プラグイン（※別会社委託）

4. まとめ・質疑応答③

Page. 29

■第１部・第２部のまとめ

本日の発表では、「プログラミングの知識が無くてもプラグイン開発の第一歩を踏み出せること」が目標でした。

●開発をするにあたって必要なこと

１）Moodleに関する基礎知識（コースやモジュール、ユーザーなどの概念）

２）HTMLおよびPHP（プログラミング）の知識

３）開発をするための環境・ツールの用意

４）やってみようという好奇心・やらなきゃいけない状況に追い込む

●プラグインの開発方法

１）Moodle.org からテンプレートをダウンロードして利用する

２）既存のモジュールをコピーしてオリジナルにする

4. まとめ・質疑応答④

Page. 30

●開発の流れ

１）目的・機能を決定し、プラグインの種類を決める

２）必要なデータ構造を考える（独自にデータを格納する場合）

３）プラグインのテンプレートまたは既存のプログラムをコピー

４）自動インストール用のデータ構造定義ファイル（XML）を用意する

８）各プラグインの主要処理を記述する

4. まとめ・質疑応答⑤

Page. 31

これをきっかけにMoodleのプラグイン開発に興味を持っていただけたら幸いです（ちょっと堅いですが…）

Page. 32

■参考出典元・著作物利用

● Moodle.org（Moodle公式サイト）http://moodle.org/

ダウンロード、開発者向け情報を主に紹介。

● EmEditor（テキストエディタ）https://jp.emeditor.com/

Moodle開発ツールとして紹介。弊社で利用しているテキストエディタです。

● さくらエディタ（テキストエディタ）http://sakura-editor.sourceforge.net/

Moodle開発ツールとして紹介。弊社で利用しているテキストエディタです。

● A5:SQL Mk-2（matsubara様）

http://www.wind.sannet.ne.jp/m_matsu/developer/a5m2/

Moodle開発ツールとして紹介。弊社で利用しているDB設計・監理ツールです。

● いらすとや様（かわいいフリー素材集） http://www.irasutoya.com/

京都・金閣寺のかわいいイラストをお借りしました。

● 甘茶の音楽工房様 http://amachamusic.chagasi.com/

スライドパズルの音楽に「小さなおもちゃ箱」「チョコレート大作戦」を

お借りしました。

Page. 33

内容に関するお問い合わせは、以下へお願い致します。

moot期間中は展示ブースにおります。お気軽にお声をおかけください。

ご静聴ありがとうございました

株式会社テクノウォーカー

担当: システム企画部山岡茂治

電話: 03-5155-1830（東京） 052-453-3393（名古屋）

メール: sol@twalker.co.jp

テクノウォーカーHP: http://www.twalker.co.jp

Moodle情報サイト: http://www.twalker.co.jp/moodle/

Page. 34

開発初心者のためのMoodleプラグインの開発と利用（第二部） for Moodle Moot...

Education

Moodle情報サイトと無償管理ツールの紹介 for Moodle Moot 2014

Moodle の基本機能を強化したｅラーニングシステム fs_moodle の開発

Moodle - tkita.nettkita.net/moodle/itsien2006-kita.pdfMoodle（ムードル）とは GNU GPLの形態で配布されているLMS。オーストラリアのパース在住のMartin

Moodleとはオンラインで授業を⾏うには Moodle活⽤編...Moodleを活したオンライン授業の流れ（例） 1.Moodleの設定を実施 2.CNSで各回の学習内容を指

Moodle マニュアル - 熊本大学 · ～Moodleの概要～熊本大学教授システム学研究センター eラーニング推進室 ... ※このマニュアルの対象バージョンは、Moodle3.4です。アップデートに伴って現行のMoodleとマニュアル内の文

Moodle eラーニングサイト利用マニュアル（教師用） · 2. Moodleの利用 3 2. Moodleの利用 2.1 ログイン Moodleにログインするためには、学内システムの共通IDとパスワードが必要です。

ILC のためのビームサイズモニタの開発

縦縦ケーブルラックケーブルラック布設後のの開口養生開口 ......縦縦ケーブルラックケーブルラック布設後のの開口養生開口養生について

Moodle 学生マニュアル...2 2. Moodleへのログインとログアウト 2.1. Moodleへログインする ① Moodle へアクセス ② ログインブロック内にユーザ名とパスワー

Moodle 1.9 eラーニングサイト利用マニュアル（教 …...2. Moodleの利用 3 2. Moodleの利用 2.1 ログイン Moodleにログインするためには、学内システムの共通IDとパスワードが必要です。

jadsa.or.jp · Web view開口部の様子開口部の様子開口部の様子

Osaka University Knowledge Archive : OUKA · 2. Moodleと「日誌j について MoodleはMartinDougiamas氏が開発したオープンソースのe-learningプラットフォームで、

Proceedings of Moodle Moot Japan 2013 · 2015. 3. 26. · Proceedings of Moodle Moot Japan 2013 ⓒ2013 Moodle Association of Japan 4 序文日本ムードル協会主催のMoodle

Web開発のためのWebGLフレームワーク …MITOU 石井翔氏 Web開発のためのWebGLフレームワーク「Grimoire.js（グリモア.ジェーエス）」の開発

VR 開発環境の開発

失敗しないためのエンタープライズ開発のきほん… · # 開発影響要素スタートアップ開発エンタープライズ開発エンタープライズ開発の特徴

スマートフォンアプリ開発のトレンド〜アプリはどのように開発されるのか〜

MOODLE の使い方その 3...2020/04/19 · MOODLEの使い方その3 Ver.2(2020.04.19) 1 MOODLE の使い方その 3 ― レポート提出－ moodle 上で履修者に課題を提示し、指定した期限に提出物をpdf

TUFS Moodle Manual ver5.4 · 2019-04-09 · 1.2.moodleへのアクセスとログイン Moodleを利⽤するための⽅法 ①下記URLからのアクセス ②東京外国語⼤学Webページからのアクセス