WordPress プラグイン LMSを使ってみる

LearnPressを使う

コロナ禍で大人の学習がはやるようになったと思います。逆に「XXXを布教したい」と思う人もいると思います。
そこで、運用しているWordPressのプラグインを使用してウェブ・レッスンを始める人も増えてきたようです。
つまりは、LMSを使用してE-ラーニングを作りそれを公開する人、販売する人が増えてきたということです。

LMSを使う

WordPressのプラグインである。LearnPressをインストールして、動かしてみようと思います。
前回は、ChromeBookにWordPressをインストールしましたのでChromeBook上で動かしてみました。

LeanPressを動かしてみる

まずは動かして見ようと思いました。LearnPressの画面を表示して、右上の部分に下のような「クイック設定(Quick Setup)」という文字があるので、これをクリック

これを入力して進むと下のような感じになります。

今回は、サンプルコースをインストールしました。下のような感じになりました。

LeanPressの使い方を学ぶ

LearnPressのドキュメントページから、「Admin」を開きます。

やはり、英語なので翻訳してみると良いです。

設定

表示するドキュメントの設定、URLの設定などを行います。

LearPress => Settings => Generalを開きます。

ここでは、講師登録のON、OFFを設定できました。

LearPress => Settings => Profileを開きます。

パーマリンクの設定など、それぞれに設定を行います。

コメント

入力されたコメントは、WPの「コメント」として扱われるので、コメント部分で操作する。

メニュー作成


上記のような項目に対してそれぞれ記事を作成します。

そうすると、講座→レッスン(テスト)のように関連付けを行ってくれます。自分の作成したのものは、こちらになります。

椎原い方法など

デフォルトで使用できるのは、Paypalが使えるようです。同様に現金払いもせんたくできるようになっていました。

まとめ

コースを作成、それに付随するレッスンを、クイズ(テスト)を作成すれば、ちゃんと動きました。
CSSの問題で、背景二文字が埋もれてしまうことがあるので注意が必要です。

でわでわ。。。

JS Google Client library ~GoogleのJSクライアントライブラリを使う~

イントロダクション

ここではYoutube Data APIを使用するためのサンプルコードが動かなかったので、それを動かすための調査を行いました。

まずは、下のコードでエラーが出ていなので根本的なところを見直します。

var request = gapi.client.youtube.search.list({
    q: q,
    part: 'snippet'
  });

このコードでは、「gapi.client」以降のプロパティ(youtube以降)が参照できないのでそれを解決するっための調査を行いました。まずは使用している「クライアントライブラリ」に関して調べてみました。

すると、「youtube」というプロパティがなくなったのか。。。まぁ、ありませんでした。詳細は以下に記載します。

クライアントライブラリ

JavaScriptでのGoogle Client libraryを使用して各種Google APIを使用したいと考えています。
githubを参考にしています。

概要

JavaScript用のGoogleAPIクライアントライブラリは、JavaScriptクライアントアプリケーション開発者向けに設計されています。多くのGoogleAPIへのシンプルで柔軟なアクセスを提供します。
JavaScriptクライアントライブラリを使用して、WebアプリケーションからPeople、Calendar、DriveなどのGoogleAPIを操作できます。開始するには、このページの指示に従ってください。

入門

JavaScriptクライアントライブラリを使用してAPIリクエストを作成する方法はいくつかありますが、それらはすべて同じ基本パターンに従います。

  1. アプリケーションはJavaScriptクライアントライブラリをロードします。
  2. アプリケーションは、APIキー、OAuthクライアントID、およびAPIディスカバリドキュメントを使用してライブラリを初期化します。
  3. アプリケーションは要求を送信し、応答を処理します。

APIリクエストを行う方法

Step1: ライブラリをロードする

サンプルコードです。

<script src="https://apis.google.com/js/api.js"></script>
<script>
function start() {
  // 2. Initialize the JavaScript client library.
  gapi.client.init({
    'apiKey': 'YOUR_API_KEY',
    // Your API key will be automatically added to the Discovery Document URLs.
    'discoveryDocs': ['https://people.googleapis.com/$discovery/rest'],
    // clientId and scope are optional if auth is not required.
    'clientId': 'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com',
    'scope': 'profile',
  }).then(function() {
    // 3. Initialize and make the API request.
    return gapi.client.people.people.get({
      'resourceName': 'people/me',
      'requestMask.includeField': 'person.names'
    });
  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });
};
// 1. Load the JavaScript client library.
gapi.load('client', start);
</script>

サンプルコードの「'YOUR_API_KEY'」と「'YOUR_WEB_CLIENT_ID.apps.googleusercontent.com'」の部分にそれぞれの値を入力する。
各API(今回はYoutube Data API)の認証情報ページからAPIキーとクライアントIDを設定、取得ができます。

しかし、エラーが。。。

参考サイトのコードでは下のようになっていましたが。。。

}).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason.result.error.message);
  });

それを修正して、次のようにしたら、原因がわかりました。

  }).then(function(response) {
    console.log(response.result);
  }, function(reason) {
    console.log('Error: ' + reason);
  });
};

【出力結果】

{error: 'idpiframe_initialization_failed', details: "Not a valid origin for the client: https://zenryok…egister this origin for your project's client ID."}
details: "Not a valid origin for the client: https://zenryokuservice.com has not been registered for client ID XXXXXXXX.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."
error: "idpiframe_initialization_failed"

つまりは実行するURLが登録されていないということでした。

調べてみるとOAUTH2.0の設定ができていないのが原因であろうということでした。

OAUTH2.0の設定

googleのページを参考にします。
認証情報を設定してやると結局は、クライアントIDが作成されるので、初めに作成したクライアントIDで問題はなさそうです。
改めてエラーメッセージを見てみるとJSONで、返却されていました。その内容は下のようになっていました。

{
  "error": {
    "code": 403,
    "message": "People API has not been used in project XXXX before or it is disabled. 
    Enable it by visiting https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX then retry. 
    If you enabled this API recently, wait a few minutes for the action to propagate to our systems and retry.",
    "status": "PERMISSION_DENIED",
    "details": [
      {
        "@type": "type.googleapis.com/google.rpc.Help",
        "links": [
          {
            "description": "Google developers console API activation",
            "url": "https://console.developers.google.com/apis/api/people.googleapis.com/overview?project=XXX"
          }
        ]
      },
      {
        "@type": "type.googleapis.com/google.rpc.ErrorInfo",
        "reason": "SERVICE_DISABLED",
        "domain": "googleapis.com",
        "metadata": {
          "consumer": "projects/XXXX",
          "service": "people.googleapis.com"
        }
      }
    ]
  }
}

調べてみると「Google People API」を使用するようです。そしたら、そのままリクエストを送信したほうが良いので、Googleクライアントライブラリを使用しない形で実装することにします。

普通にGETリクエスト

こちらの動画を参考に検索リクエストを送信してみました。
すると、クォータが超過したようで、テストできなくなりました。

error:
code: 403
errors: [{…}]
message: "The request cannot be completed because you have exceeded ...

これは日を改めて実行すれば、大丈夫なので、今日はここまでにしようと思います。

XAMMP 動かない ~Error: Apache shutdown unexpectedly.~

エラーが起きた状況

久しぶりに、XAMMPを起動して自分のホームページを回収・増築しようと考えました。
しかし、テスト用のXAMMPが動かないので、本番環境(レンタルサーバー)にアップする以前の状態になってしまいました。。。

Error: Apache shutdown unexpectedly.

下のようなエラーメッセージが出ました。

11:33:45 [Apache] Error: Apache shutdown unexpectedly.
11:33:45 [Apache] This may be due to a blocked port, missing dependencies,
11:33:45 [Apache] improper privileges, a crash, or a shutdown by another method.
11:33:45 [Apache] Press the Logs button to view error logs and check
11:33:45 [Apache] the Windows Event Viewer for more clues
11:33:45 [Apache] If you need more help, copy and post this
11:33:45 [Apache] entire log window on the forums

そして、下のようなエラーダイアログが表示されました。

VCRUNTIME140.dllが見つからないため、コードの実行を続行できません。」というメッセージが書いていました。つまりは、このファイルがあればよいと判断します。

VCRUNTIME140.dllを調べる

こちらのページを参考にするとVC++がインストールされている必要があるようです。

  1. こちらにアクセス
    下のほうにこんな一覧があるので、赤悪の部分をクリックします。

    対象になるパッケージをダウンロードします。
  2. VC_redist.x64.exeをダウンロード
  3. ダブルクリックでインストール

そしたら、Moodleというものを、インストールしていたので、そのほかに下のようなエラーが出ました。

$CFG->dataroot is not configured properly, directory does not exist or is not accessible! Exiting.

Moodleは使用しないので、XAMMPを再インストールすることにしました。

最終結果

下のように起動確認が取れました。

XAMMP Controllerでエラー

下のようにMySQLを起動したときにエラーが出ました。

8:46:34  [mysql]    Error: MySQL shutdown unexpectedly.
8:46:34  [mysql]    This may be due to a blocked port, missing dependencies, 
8:46:34  [mysql]    improper privileges, a crash, or a shutdown by another method.
8:46:34  [mysql]    Press the Logs button to view error logs and check
8:46:34  [mysql]    the Windows Event Viewer for more clues
8:46:34  [mysql]    If you need more help, copy and post this
8:46:34  [mysql]    entire log window on the forums

エラーログを見てみると。。。※「Log」ボタンをクリックすると見れます。
下のようなログが出ていました。XAMMPはDドライブにインストールしています。

2024-01-02  8:46:31 0 [Note] InnoDB: Creating shared tablespace for temporary tables
2024-01-02  8:46:31 0 [Note] InnoDB: Setting file 'D:\Apps\XAMMP\mysql\data\ibtmp1' size to 12 MB. Physically writing the file full; Please wait ...
2024-01-02  8:46:31 0 [Note] InnoDB: File 'D:\Apps\XAMMP\mysql\data\ibtmp1' size is now 12 MB.
2024-01-02  8:46:32 0 [Note] InnoDB: Waiting for purge to start
2024-01-02  8:46:32 0 [Note] InnoDB: 10.4.22 started; log sequence number 4934514; transaction id 3240
2024-01-02  8:46:32 0 [Note] InnoDB: Loading buffer pool(s) from D:\Apps\XAMMP\mysql\data\ib_buffer_pool
2024-01-02  8:46:32 0 [Note] Plugin 'FEEDBACK' is disabled.
2024-01-02  8:46:32 0 [ERROR] InnoDB: Page [page id: space=0, page number=243] log sequence number 4992696 is in the future! Current system log sequence number 4934523.
2024-01-02  8:46:32 0 [ERROR] InnoDB: Your database may be corrupt or you may have copied the InnoDB tablespace but not the InnoDB log files. Please refer to https://mariadb.com/kb/en/library/innodb-recovery-modes/ for information about forcing recovery.
2024-01-02  8:46:32 0 [Note] Server socket created on IP: '::'.

下のように、「backup」フォルダ内のファイルをコピーして「data」フォルダに展開してやりました。
※XAMMPフォルダ直下です。このフォルダはXAMMPをインストール(展開)したラ作成されるフォルダです。

PHP LMS2 ~Moodleのインストール~

Moodle

MoodleというLMS(ラーニング・マネジメント・システム)で、早い話が、以下のような事ができます。

  • 学生に告知する情報の一覧
  • 授業(科目毎)の授業内容やドキュメントの登録
  • その他いろいろ

詳細に関しては本家のサイトをご覧ください。日本のページもあります。

概要の動画らしいです。

インストール

日本語のドキュメントを参考にしました。

  1. このサイトからMoodle本体をダウンロード
  2. XAMMP, Apacheなどのドキュメントルートにコピー、もしくは展開する
    ※「localhost/」に展開したディレクトリ(index.php)が配置されているようにする
  3. DBを作成する(MySQLの場合は、下のSQLで作成しました。)

    CREATE DATABASE moodle DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

    GRANT SELECT,INSERT,UPDATE,DELETE,CREATE,CREATE TEMPORARY TABLES,DROP,INDEX,ALTER ON DATABASENAME.* TO 'ユーザー名'@'localhost' IDENTIFIED BY 'パスワード';
    4.ウェブサーバーを起動して、ブラウザから「展開フォルダ/install.php」=「localhost」を開く

  4. 管理者ユーザーの設定を行う

これで、うまくいってデータの追加などを行ったのですが、また動かなくなりました。。。

再インストールする

作成されたDBと設定したい下のフォルダにある「cashe」「session」を削除
<config.php>

$CFG->dataroot = 'D:/Apps/moodle-latest-310/moodledata';

MySQLのDBを削除

DROP DATABASE 作成したDB

改めて、localhost/install.phpを実行する

あと、初期表示するHOMEのURLを覚えておいたほうがよいです。

でわでわ。。。

プログラミング ワンポイント~サーバーとクライアントってなに?~

サーバーとクライアントの関係

ウェブアプリケーションを作成、実装しようとしたときに、理解に困るのが「サーバー」と「クライアント」だと思われます。「サーバー」と「クライアント」という言葉はよく聞くけど実装しているときにどんな関係があるのか?
これを目に見えるように解剖したいと思います。

サーバーってなに?

大まかな話
サーバーとは、早い話が「常駐アプリケーション」のことです。常駐(画面に見えなくても裏側で動いている)アプリケーションなので、目に見えないアプリケーションです。

それに対して、目に見えるアプリケーションがクライアントになります。

サーバーの役目

ウェブアプリケーションでのサーバーは、まさに「この人がいないとはじまらない。」というほど大事な部分を担っています。

通常、ウェブアプリケーションを使用するときは携帯や、PCで特定のURLにアクセスして利用します。

具体的な例として、以下のような手順で操作を行った場合。これは自分の作成したページにアクセスするときを例にして、サーバークライアントの関係を説明するものです。

  1. Chrome(ブラウザ)で"https://zenryokuservice.com"にアクセスします。
  2. アクセスしたURLは、サーバーが起動しているIPアドレスの参照を示します。
  3. サーバーはリクエストを受けてレスポンスを返します。

この時にやり取りする情報(メッセージ)をHTTPメッセージと呼びます。

  1. クライアントからサーバーへのメッセージをリクエストと呼ぶ。
  2. リクエストに対してサーバーがクライアントに向けて送るメッセージをレスポンスと呼ぶ。

レンタルサーバーへアクセスした場合なので、あまり実感がわかないと思います。

次は、自分のPC上にサーバーを立ち上げて、ブラウザからサーバー(ローカルサーバー)にアクセスするケースで説明します。

HTMLからサーバーへ(PHPの時)

  • ・PHPはサーバーサイドプログラムです。
  • ・クライアントサイトプログラムはHTML(+Javascript)です。

PHPで画面遷移をするケース

XAMPPなどのツールを使用してローカルサーバーを起動してからPHPを起動する場合で説明します。
具体的に以下のコードを使用して画面遷移をするとします。

<HTML>

<!DOCTYPE html>
<html>
<head>
<title>001.html</title>
<meta charset="utf-8">
</head>
<body>

<p>↓GETメソッドで送る</p>
<form action="Server.php" method="get">
名前を入力:<input type="text" name="yourname">
<input type="submit" value="送信">
</form>

<p>↓POSTメソッドで送る<p>
<form action="Server.php" method="post">
名前を入力:<input type="text" name="yourname">
<input type="submit" value="送信">
</form>

</body>
</html>

ことの期にポイントになるのは以下の部分です。具体的に「action="Server.php"」と「method="post"」と書いてあるところです。

<POSTリクエストを送信する>

<form action="Server.php" method="post">

画面遷移を行うときには、POSTリクエストを送信して、何かしらの処理を行った後に画面を表示します。

つまり

  1. Server.php」にPOSTリクエストを送信
  2. Server.php」が処理を行った結果HTMLをレスポンスでクライアント(ブラウザ)に返す
  3. ブラウザ(Chromeなど)でサーバーから受け取ったHTMLを表示する

という流れがあります。

上の処理を全部書くと下のようになります。※ HTMLは省略します。

<?php
   // クライアントからの送信Form(リクエスト)を受け取る
   $yourName = $_POST['yourname'];
?>
<!DOCTYPE html>
<html>
<head>
<title>Server.php</title>
<meta charset="utf-8">
</head>
<body>

あなたの名前は:<?php echo $yourName; ?>

</body>
</html>

PHPファイルなのにHTMLも一緒に書いています。ここが混乱するポイントです。あくまでもPHPはサーバーサイドスクリプトなので、サーバーサイドで動きます。つまり、ブラウザ上では動かないのです。

では、なんでブラウザで表示する事ができるのか?

これは、PHPがHTMLを出力しているからです

上のコードを見てみましょう。

<?php ... ?>

で囲まれている部分がPHPスクリプトです。このPHPの処理は「print」や「echo」などの関数を使用して文字列を出力しないとブラウザ側で値を確認する事ができません。

なので、Server.phpを表示すると下のコードの部分のみがブラウザで表示されます。

あなたの名前は:<?php echo $yourName; ?>

全体的な処理フロー

くどいようですが、全体的にリクエスト~レスポンスを受け取るまでの流れを見てみます。

前提

  1. XAMPPを使用して起動するPHPアプリケーションを考える
  2. WebサーバーはApache, DBサーバーはMySQLを使用している

XAMPPはWebサーバーとMySQL(DB)がセットになっているパッケージです。

ドキュメントルートとは

XAMPPを起動したときに、Apacheの行にあるConfigをクリックすると設定ファイル(httpd.conf)を開けるので
ドキュメントルートの指定を確認、変更する。

「Document Root」と記述している行でドキュメントルートを指定している。
XAMPPの場合はhtdocsがデフォルト(初期状態)でドキュメントルートに設定されている。

このドキュメントルートに、index.htmlファイルがあったとします。

URL localhost/index.htmlでこのファイルにアクセスする事ができます。

フォルダ構成としては、「C:Apps\XAMMP\htdocs」となっているとします。
httpd.confには、下のような記述があるはずです。

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/Apps/XAMPP/htdocs"
<Directory "C:/Apps/XAMPP/htdocs">

XAMPPをインストールするときにAppsフォルダの下を指定したのでこの様になりました。

DocumentRootのまとめ

  1. サーバーは目に見えない裏側で動くアプリケーション
  2. クライアントは目に見える表側で動くアプリケーション
  3. クライアント側はブラウザで表示
  4. サーバー側は、コマンドプロンプトなどで状態などを表示できる
  5. サーバーを起動するとドキュメントルートが「localhost」で表示するファイルを配置するディレクトリになる
    ⇒DocumentRootは「localhost直下」になる。

PHPファイルの見た場合

PHPファイルにはややこしいことに以下のプログラムが同居しています。

  • サーバーサイドプログラム(PHP)
  • クライアントサイドプログラム(HTML, JS)

具体的には下のようなものです。

<?php
    if (!empty($_SERVER['HTTPS']) && ('on' == $_SERVER['HTTPS'])) {
        $uri = 'https://';
    } else {
        $uri = 'http://';
    }
    $uri .= $_SERVER['HTTP_HOST'];
    header('Location: '.$uri.'/dashboard/');
    exit;
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>PGBox Top Page</title>
  </head>
  <body ng-app= "pgBoxAG" class="bg-light"  ng-controller="pgboxCtrl">
  あなたがアクセスしたURLは<?php print $url; ?>です。
  </body>
</html>

細かい話をすると、以下のようになります。

  1. サーバー側でPHPの処理が走る
  2. PHPがHTMLを出力
  3. 出力したHTMLをPC側で受信
  4. ブラウザで表示

WordPressを使った場合

多くの人が利用しているWordPress、略して「WP」と記載します。

PHP + MySQLで動くCMSで、ウェブサーバーに配置、ブラウザからインストール入力を行うことで使用することが可能になります。

ディレクトリ構成としては、ドキュメントルート直下にインストールすることが多いようです。
インストール先XAMPP/htdocs/WordPress

この様にWPをインストールした場合、ローカルであれば「localhost」でブラウザからアクセスすればWPを開くことができます。

逆に「XAMPP/htdocs/web/WordPress」とした場合はどうでしょうか?

そうです。「localhost/web/」とアクセスしたときにWPを開くことができます。

これは、ドキュメントルートはWP用ではなく、HTML+JS+PHPでの実装をしたかったのでこの様にWPを一階層下げました。

作成したものとしては、以下のようなものがあります。
・サイトマップ
・基本情報技術者試験問題
・楽天APIでの、商品読み込みと表示

でわでわ。。。

Javaの学習に関しては