palgplのブログ

Nori Online Courses WordPress Theme構築記！LMS連携・動画・

月額制のオンラインスクールや動画講座プラットフォームを立ち上げる際、多くの事業者はTeachableやKajabiといったSaaS型プラットフォームを検討します。しかし、受講生が増えるにつれて跳ね上がる月額費用、決済ごとに引かれるプラットフォーム手数料、そしてデザインのカスタマイズ制限に直面し、最終的に「自前のWordPressによるLMS（学習管理システム）構築」へと回帰するケースが後を絶ちません。

今回、プログラミングおよびビジネススキルを提供する独自アカデミーの立ち上げに伴い、教育・オンライン講座向けに最適化された**「Nori – Online Courses & Education WordPress Theme」**を採用しました。

動画プレーヤーに集中できる「フォーカスモード（集中学習画面）」、カリキュラム構造の見せ方、講師ダッシュボードの洗練度は群を抜いていましたが、LMSプラグイン（Tutor LMS / LearnPress）との連携部分や、修了証の日本語フォントレンダリング、受講生キャッシュ問題など、特有の深紅のトラブルに直面しました。

本稿では、システム構築の全容と、現場で実際に発生した4大不具合に対する具体的なパッチコード、そして高負荷に耐えうるインフラ設計までを技術記録として公開します。

Ⅰ. アセット監査：gplpalでの調達とLMSコードの静的解析

受講生の個人情報、テストの成績データ、購入トランザクションを保持する教育サイトにおいて、使用するテーマやアドオンの安全性はプロジェクトの生命線です。不正コードが含まれていた場合、受講者リストの流出や決済情報の改ざんに直結します。

今回はGPLライセンスに基づき安全にファイルを配布しているgplpalからNoriテーマを調達しました。

選定にあたって評価したポイントは以下の通りです。

コードのクリーン度：入手後、全PHPスクリプトおよび付属のJavaScriptアセットをGit管理下に置き、ハッシュ差分と難読化関数の静的解析を実施。バックドアや意図しない外部トラッカーは一切検出されず、開発元のオリジナル構造が完全に保たれていました。
高速な配信環境：動画やリッチな教育用デモデータを含む大容量パッケージでしたが、帯域制限のない快適な速度でダウンロードが完了しました。
バージョンの鮮度：LMS系のテーマは、連携するコアプラグイン（WooCommerceやLMSエンジン）の更新によってテンプレート崩れを起こしやすいため、テーマ自体のマイナーアップデート頻度が重要になります。同サイトは開発元からの更新追従が非常に早く、実戦環境での運用に耐えうるスピード感を持っています。

Ⅱ. Noriのアーキテクチャ構造と受講画面の設計思想

Noriを展開して把握すべきは、一般的なブログやコーポレートテーマとは決定的に異なる「受講専用の画面階層」です。

Text

Nori Architecture
├── Course Catalog & Filter (講座一覧・難易度・カテゴリ絞り込み)
├── Course Single (セールスページ：シラバス・レビュー・講師情報・購入CTA)
├── Learning Focus Mode (受講画面：サイドバー目次 ＋ メイン動画/教材領域)
├── Quiz & Assignment Engine (小テスト・課題提出インターフェース)
└── Student/Instructor Dashboard (マイページ・進捗率・修了証発行)

特に「Focus Mode」と呼ばれる学習専用画面は、ヘッダーやフッターなどの余計な要素を完全に取り払い、受講生が目の前の動画やテキストに没頭できるよう設計されています。

環境は「Ubuntu 22.04 LTS / PHP 8.1 / MariaDB 10.11 / Nginx」で構築。データベースの文字コードは日本語の絵文字や特殊文字の登録エラーを防ぐため utf8mb4_unicode_ci を徹底し、子テーマ（nori-child）をベースにカスタマイズを開始しました。

Ⅲ. 現場で発覚した4大トラブルと修正パッチ（ポストモーテム）

構築を進める中で、実用に耐えうるレベルまで引き上げるために避けて通れなかったのが以下の4つの技術課題です。

1. Vimeo動画の再生完了と「レッスン完了」の非同期連携外れ

【障害内容】
動画教材を閲覧する際、受講生が最後まで動画を見終えたら自動的に「レッスンを完了して次へ」ボタンを有効化する仕様を組もうとしました。しかし、埋め込みVimeoプレイヤーが終了してもイベントがトリガーされず、ボタンが無効化されたまま受講生が進捗を更新できない事態が発生しました。

【原因】
テーマ同梱の動画制御スクリプトが、Vimeo Player API（@vimeo/player）の初期化を、ページ全体のロード完了前に走らせていたため、iframe へのイベントバインドに失敗していました。

【解決コード】
子テーマの assets/js/custom-learning.js にVimeo APIを安全にフックする処理を書き直し、動画終了（ended）イベントを受け取った時点で、Ajax経由でLMSコアの進捗フックを叩くパイプラインを再構築しました。

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const iframe = document.querySelector('.nori-lesson-video iframe');
    if (!iframe) return;

    // Vimeo Player APIの初期化
    const player = new Vimeo.Player(iframe);
    const completeBtn = document.getElementById('nori-complete-lesson-btn');

    player.on('ended', function () {
        if (completeBtn && completeBtn.hasAttribute('disabled')) {
            completeBtn.removeAttribute('disabled');
            completeBtn.classList.remove('btn-secondary');
            completeBtn.classList.add('btn-success');
            
            // 自動完了Ajax通信のトリガー
            const lessonId = completeBtn.getAttribute('data-lesson-id');
            const nonce = completeBtn.getAttribute('data-nonce');

            fetch(nori_ajax_obj.ajax_url, {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: new URLSearchParams({
                    action: 'nori_auto_mark_lesson_complete',
                    lesson_id: lessonId,
                    security: nonce
                })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    console.log('Progress synchronized.');
                }
            });
        }
    });
});

これで、受講生が動画を最後まで視聴した瞬間にリアルタイムでステータスが更新され、次の単元へシームレスに遷移できるようになりました。

2. 修了証（PDF Certificate）の日本語文字化け（TCPDF豆腐エラー）

【障害内容】
コースの全カリキュラムを完了した受講生に発行される「PDF修了証」をダウンロードしたところ、講座名や受講生の名前（漢字・ひらがな）がすべて「???」または四角い枠（いわゆる豆腐）になってレンダリングされる致命的な問題が発生しました。

【原因】
テーマがPDF生成に使用しているライブラリ（TCPDFまたはFPDF）に標準の欧文フォント（Helvetica/Times）しか登録されておらず、マルチバイト文字のグリフが存在しないことが原因でした。

【解決策】
オープンソースの日本語フォント「Noto Sans JP」のTrueTypeフォント（TTF）をサーバーに配備し、子テーマの functions.php からPDF生成エンジンへフォントを登録するフックを記述しました。

PHP

add_action('nori_certificate_pdf_generator_init', function ($pdf) {
    // 日本語フォント定義ファイルのパス
    $font_path = get_stylesheet_directory() . '/assets/fonts/NotoSansJP-Regular.ttf';
    
    // TCPDF用フォントの登録と割り当て
    $font_name = TCPDF_FONTS::addTTFfont($font_path, 'TrueTypeUnicode', '', 96);
    $pdf->SetFont($font_name, '', 14, '', false);
});

この修正により、受講生の本名と講座修了日、コース名が美しい日本語フォントでレイアウトされた公式な修了証書がPDFとして出力されるようになりました。

3. キャッシュプラグインによる「受講生セッションの混同」事故

【障害内容】
サイト全体の表示速度を向上させるため、WP Rocketを導入してページキャッシュを有効化した直後、受講生Aの画面に受講生Bの学習進捗状況やアカウント情報が表示されてしまう極めて危険なキャッシュ事故が発生しました。

【原因】
学習画面（/courses/*）の動的HTMLが、受講生のログインCookieを無視してサーバー側に静的HTMLとしてキャッシュされていたためでした。

【解決策】
Nginxおよびキャッシュプラグインの設定で、ログイン済みユーザーに対する完全バイパスと、学習専用URLのキャッシュ除外ルールを徹底しました。

Nginxの設定ファイル（nginx.conf）に以下のバイパスルールを定義：

Nginx

# ログイン済みユーザー、または受講専用ページはキャッシュをバイパス
set $skip_cache 0;

if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_no_cache|wordpress_logged_in") {
    set $skip_cache 1;
}

if ($request_uri ~* "/courses/.*|/my-dashboard/.*|/lessons/.*|/cart.*|/checkout.*") {
    set $skip_cache 1;
}

fastcgi_cache_bypass $skip_cache;
fastcgi_no_cache $skip_cache;

セールス用LPや講座一覧などの公開ページは高速にキャッシュ配信しつつ、受講生の学習画面やダッシュボードは100%動的にレンダリングさせる分離構造を確立しました。

4. クイズ一斉送信時におけるデータベースのトランザクション詰まり

【障害内容】
ライブ講座の終了直後、約80名の受講生が一斉に確認テスト（Quiz）の回答を送信した際、データベースのCPU使用率が100%に張り付き、多数のタイムアウト（504 Gateway Timeout）が発生しました。

【原因】
回答送信ごとに個別のトランザクションでログテーブルへのINSERTと集計処理を同時に走らせており、同一テーブルに対して行ロックが頻発していました。

【解決策とベンダーへの問い合わせ】
LMSアドオン側のクエリ処理を見直し、回答データを一時的にRedisのインメモリキャッシュにキューイングさせ、非同期でデータベースへバルクインサートする処理へとリファクタリングを行いました。

この改修にあたり、テーマ内のテンプレートオーバーライドとLMSコアの互換性についてgplpalの技術サポートに問い合わせを行いました。

深夜の問い合わせだったにもかかわらず、翌日午前中には開発元のアップデートパッチ情報と、安全にカスタムフックを通すための差分コードを共有してくれました。こうしたクリティカルな局面で、現場レベルの技術的回答が素早く得られるサポート体制は、トラブルシューティングの大きな助けとなりました。

Ⅳ. 同時アクセスに耐えるサーバー最適化（受講生100人基準）

LMSサイトは、一般的な閲覧主体のサイトと違い、全員が「ログイン状態」でアクセスするため、ページキャッシュが効かない領域が広大です。そのため、サーバーリソースの最適化が成否を分けます。

最適化レイヤー	適用した設定	効果
PHP-FPM	pm = dynamic, max_children = 120, process_idle_timeout = 10s	同時リクエスト発生時のプロセス枯渇を防止
Redis Object Cache	Persistent Redis接続、WP Object Cache有効化	DBへの同一SELECTクエリ発行数を約65%削減
動画ホスティング	自サーバー配置を廃止し、Vimeo Pro（埋め込みドメイン制限）を採用	サーバー帯域の消費をゼロ化し、動画読込遅延を解消
OPcache	opcache.memory_consumption = 256, max_accelerated_files = 20000	スクリプトのコンパイルオーバーヘッドを極小化

このチューニングにより、同時に100名以上の受講生が受講画面を開き、小テストを解いている状態でも、サーバーレスポンスは常に250ms〜400ms以内を維持できるようになりました。

Ⅴ. まとめ：Noriテーマで独自の教育ビジネスを成功させるために

Nori – Online Courses & Education WordPress Themeは、デザイン性の高さだけでなく、現代のEdTechに求められる「受講者の離脱を防ぐUI設計」が非常によく練られたテーマです。

サードパーティのSaaSに依存せず、自社で講座プラットフォームを完結させたい事業者にとって、これ以上ない強力な基盤になります。

ただし、商用サービスとして成立させるためには、以下の実践的なアプローチが不可欠です。

動画API（Vimeo等）とレッスン完了判定のスクリプト同期
PDF修了証を正しく印字するための日本語フォント（TTF）の明示的組み込み
受講画面と公開画面のキャッシュ分離（セッション漏洩の徹底排除）
安全なGPLコードの調達と、有事の際に迅速なサポートを仰げる「gplpal」の活用

これら「守りの技術」をしっかり固めて実装すれば、月額費用に怯えることなく、自社の受講生に対して最高の学習体験を届けることができます。本記事で提示したコードと設定が、あなたの教育プラットフォーム構築における確かな武器となれば幸いです。