脱サラのすすめ

ダムとバイクとSEの記録

【Moodle】Moodleサイトのカスタマイズ方法

f:id:shibatty:20210311183519j:plain
以前記載した無償e-LearnigツールMoodle(詳細はリンク参照)導入の絡みで、サイトのカスタマイズをしていく話です。

datsusara-susume.hatenablog.com

 

無償であるが故に、操作方法等の資料は一切ありません。

その代わりに、QAや操作に関するフォーラムが存在します。

操作感や、こうしたい、と言った質疑応答が知恵袋形式で行える他、過去のQAの内容などが見れたりします。

ただ、高度なカスタマイズ内容となると、理解が困難になります。

その中で、自分がカスタマイズの際に苦戦した部分をいくつかピックアップして紹介します。

もし悩んでここに辿り着いた方で参考になれば幸いです。

Moodleの設定は各所に散らばっていて、結構わかりづらいのです。。。)

 

 

 

 

目次

 

0.構築環境

・さくらVPNメモリ:1GB、CPU:2コア、SSD:100GB)

 ※有料契約

 ※ハードがどのような環境でも構築手順は大きく変わりません

 

LinuxOS:Ubuntu18.04

 ※最新は20.04ですが、何故かSSL化がうまくいかなかったので、

  個人的に実績がある18.04を選定しました

 

Apache:2.4

MySQL:5.7

PHP:7.2

 

Moodle:3.8

 ※当Verの必須環境は、Apache2以上、MySQL5.6以上、PHP7.1以上

 ※執筆時の最新Verは3.9ですが、リリース間もないということもあり

  安定性という意味でひとつ前の3.8を導入しました

 

 

 

 

1.編集モード

まずトピックの編集の前に、「編集モード」について説明します。

管理者権限があるユーザでログインすると、フロントページなどに歯車マークが多々現れるようになります。

サイトの細かい編集は、この歯車マークより「編集モード」に切り替えることで、行えるようになります。

(下図では右上の赤枠

f:id:shibatty:20210316171929p:plain

 

 

2.ゲストログインの無効化

初期状態だと、ゲストユーザのログインが有効化されています。

(誰でもログインできるページに行くことができる。)

サイトを作りこむことで、ユーザに見せるページを細かにコントロールできますが、ログインIDを持っている人にだけ見せたいことがほとんどだと思われます。

その際の、無効化方法です。

 

①サイト管理→プラグイン→認証→認証管理→共通設定

②ゲストログインボタン=非表示

f:id:shibatty:20210316172807p:plain

この画面は認証時のコントロールを変更できる画面となっています。

緑枠の「メールによるログインを許可する」(ID以外にも登録したメールアドレスでログインできるようにする)の設定も、よく考慮されるものになると思われます。

 

 

 

 

3.画面左ブロックの表示変更

 左ブロックの表示内容を変えることができます。

図では変更済みですが、デフォルトだと「ダッシュボード」「プロファイル」がプラスで表示されています。

消したい理由としては、「ダッシュボード」と「プロファイル」のページ先で、他のユーザ情報が閲覧できてしまうという点です。

オープンにしても良いなら問題ないですが、個人情報を厳しく保護したい場合は非表示の必要があります。

 

f:id:shibatty:20210316184050p:plain

 

①サイト管理→アピアランス→テーマ→Boost→高度な設定

②「SCSS」欄にに下記コードを記載

.list-group-item{
&[data-key='myhome'], &[data-key='privatefiles']{
display:none;
}
}

※SCSSの記載について

「myhome」→ダッシュボード、「privatefiles」→プロファイル、この2つを「display:none」=非表示、にしている、という意味

f:id:shibatty:20210316184745p:plain

 

 

4.フッターの表示変更

フッターに表示される「○○がログインしています。」の表示を消したいという趣旨です。

消したい理由としては、先ほどの項番3と同様、ログイン名をクリックするとそのページ先で、他のユーザ情報が閲覧できてしまうという点です。

f:id:shibatty:20210316190647p:plain

 

①サイト管理→アピアランス→追加HTML

②「ヘッダー内」欄に以下のコードを記載します。

style
    .logininfo{
        font-size:0;
    }
/style

※「style」と「/style」は<>で囲って記載してください

※設定で非表示にすることが不可能でしたので、直接スタイルシートを弄って、対象のフォントサイズをゼロにして見えないようにする、という力技です。。。

f:id:shibatty:20210316191600p:plain

 

 

 

 

 

5.画面上からプロファイルを消す

画面右上のユーザ名の隣の▼ボタンを押すと、Moodleの各機能へ飛ぶ機能が搭載されています。

ここでも項番3,4と同様に、「プロファイル」に飛ぶことができてしまい、他のユーザ情報が見れてしまうことを防止するために消していきます。

f:id:shibatty:20210316192029p:plain

 

 

①サイト管理→アピアランス→テーマ→テーマ設定

②「ユーザーメニューアイテム」の記載を全削除

f:id:shibatty:20210316192251p:plain

 

Moodleのインストールフォルダ→「/moodle/user/lib.php

④約900行目にある下記記載を「//」で全てコメントアウト

f:id:shibatty:20210316192513p:plain

 

 

6.最後に

Moodleは基本的にCSSPHPファイルで 構成されています。

要は、CSSを弄ったりPHPを弄ったりすることで、如何様にも作り変えることが可能という事です。

Moodleに足りない機能を自作PHPで補ったり、CSSを弄って好みにページスタイルを変更したり、etc...

作業工数に見合う範囲で作業していくといいと思いますし、逆にMoodleプラグイン的な機能を自作開発、販売等していくのもアリだと思います。

 

以上。