LearnPressを使う

WordPressのプラグインである。LearnPressをインストールして、動かしてみようと思います。
前回は、ChromeBookにWordPressをインストールしましたのでChromeBook上で動かしてみました。
しかし、生徒がレッスンを受けるための「Enrollボタン」が表示されず。。。これは別のものを使用する方向で。。。

LeanPressを動かしてみる

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

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

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

LeanPressの使い方を学ぶ

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

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

設定

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

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

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

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

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

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

まとめ

コースを作成、それに付随するレッスンを、クイズ(テスト)を作成すれば、ちゃんと動きました。
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リクエストを作成する方法はいくつかありますが、それらはすべて同じ基本パターンに従います。

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

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++がインストールされている必要があるようです。

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

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

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

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

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

最終結果

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

Moodle

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

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

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

概要の動画らしいです。

インストール

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

このサイトからMoodle本体をダウンロード
XAMMP, Apacheなどのドキュメントルートにコピー、もしくは展開する
※「localhost/」に展開したディレクトリ(index.php)が配置されているようにする
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」を開く
管理者ユーザーの設定を行う

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

再インストールする

作成された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にアクセスして利用します。

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

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

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

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

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

次は、自分の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リクエストを送信して、何かしらの処理を行った後に画面を表示します。

つまり

「Server.php」にPOSTリクエストを送信
「Server.php」が処理を行った結果HTMLをレスポンスでクライアント(ブラウザ)に返す
ブラウザ(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; ?>

全体的な処理フロー

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

前提

XAMPPを使用して起動するPHPアプリケーションを考える
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のまとめ

サーバーは目に見えない裏側で動くアプリケーション
クライアントは目に見える表側で動くアプリケーション
クライアント側はブラウザで表示
サーバー側は、コマンドプロンプトなどで状態などを表示できる
サーバーを起動するとドキュメントルートが「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>

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

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

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の学習に関しては

Eclipseのセットアップ

PHP Brackets ～XAMP + PHPでウェブサーバー～

イントロダクション

Bracketsを使用してPHPのウェブ開発のローカル環境を構築しようと考えました。

インストール

softnicのサイトからダウンロードできます。
MAMPのサイトからMACとWindowsを選択してダウンロードできます。PROはインストール時にチェックボックスにチェックを入れることでインストールできるようです。が自分のWindowsではうまく動かなかったので、XAMPPに変更しました。
XAMPPのインストールサイトからインストーラーをダウンロードします。

Brackets

インストールするときにCドライブでないとうまく動かないようです。あとは、インストーラーがMSIファイルなので、ダブルクリック一発でOK

XAMPPでウェブサーバー

MAMPのインストールは出来たけど、MySQLがちゃんと起動しないので、あきらめてXAMPPを入れることにしました。失敗の内容として下の記事を残しておきます。

上にもありますが、こちらのページからインストーラーをダウンロードできます。

起動確認

XAMPPのコントロールパネルを起動します。

Apache(ウェブサーバー) とMySQL(DBサーバー)を起動し手問題のないことを確認します。

＜ウェブサーバーの確認＞
ブラウザで「localhost」にアクセスしてください。

＜DBの確認＞
上のページから「phpMyAdmin」というメニューがあるのでそれをクリックしてください。

XAMPPのインストール後

レンタルサーバーにPHPなどのファイルをアップロードしている人は、ZIPファイルの形でそれらの資源をダウンロードできると思います。
そして、ダウンロードした資源をドキュメントルートに展開します。
ドキュメントルートは、XAMPPの場合「XAMPPインストールフォルダ/htdocs/」になります。
WordPressなどを使用している人の場合も、同様です。
そして、ダウンロードしたZIPファイルをドキュメントルートに展開します。

次に、ドキュメントルートの場所を確認、もしくは変更する場合は下のファイルを修正します。

xampp\apache\conf\httpd.conf

上記の

"D:/Apps/XAMPP/htdocs"

の部分を確認、修正します。

ちなみに、自分はドキュメントルートをもう一つ下の

web

フォルダに変更したいので次のように修正しました。

"D:/Apps/XAMPP/htdocs/web"

そんなわけで、MySQLが参照しているドライブの設定では動きませんでした。

出力されたエラーは以下のようなものです。

Can't change dir to 'c:\xampp\mysql\data\

なので、本来参照するべきディレクトリにあるmy.iniファイルを修正しました。
ファイルのディレクトリは

D:\Apps\XAMPP\mysql\data

です。

そしたらうまく起動できました。おそらくMAMPの場合も同様です。

次のエラー

Using unique option prefix 'key_buffer' is error-prone and can break in the future. Please use the full name 'key_buffer_size' instead

こんなエラーが出ました。

なのでこちらのページを参照して修正しました。

＜解決法＞
xampp/mysql/bin/my.iniを修正
↓
（35行目、168行目、174行目）
「key_buffer」を「key_buffer_size」にする。

ちなみに、DBのユーザー名とパスワードの変更方法は、こちらのページを参考にしました。
実行したSQLは下のものです。

ALTER USER 'user-name'@'localhost' IDENTIFIED BY 'NEW_USER_PASSWORD';
FLUSH PRIVILEGES;

注意点としては、ユーザー名(user-name)とホスト名(localhost)にシングルクォーテーションがついているところです。エラーが出ます。

ユーザーの権限などのチェック

レンタルサーバーではDBのユーザーなどの設定が行われているが、ローカルではそう行きません。
なので、DBを起動して「phpMyAdmin」を起動して権限などを設定しましょう。

WordPressのインストール

実際には、WPのファイルなでゃそろっているのですが、設定部分が面倒なので、インストールからやり直してしまおうという考えです。

あとは、実行後にレンタルサーバーから出力したXMLをインポートすれば、環境構築完了です。

手順１

WordPressのフォルダ直下にある「wp-config.php」を名前変更し「_wp-config.php」にする。

そうして、ブラウザでアクセスすると下のように初期設定画面が見れます。

WindowsにMAMPをインストールして使用しようとしたときに記載したものです。こちらの記事は失敗していますが、どのような失敗だったのかを記載しました。

最終的には、MySQLの設定がうまくいかなかったというところです。

失敗 MAMPでウェブサーバー(for Windows)

ワードプレスを使用してレンタルサーバーを運用しているので、
テスト環境として、自分のPC上にレンタルサーバーと同じような環境を構築しようと考えました。

MAC版の記事はこちらに記載しています。

インストーラーのダウンロード

インストール

ダウンロードしたファイルを起動します。次へをクリック
プロ(有償)は使用しないのでチェックを外します。次へをクリック
ライセンス条項に同意します。
インストール先を指定します。
そのまま次へをクリック
同様に次へをクリック
インストールのボタンが見えるのでそれをクリック

※インストール時にエラーが出ることがありましたが、これはダウンロードの失敗のようなので、Try ageinで再度行えば解消できるようです。しかし、それでもダメな場合は、インストーラを再度ダウンロードしてやり直してみてください。

サーバーの設定

MAMPを起動すると下のような画面が見れますので、環境設定を選択します。
そしてドキュメントルート、サーバーを起動したときにURLでアクセスできるディレクトリのルートです。
具体的には、localhost:8080でアクセスしたときにindex.phpが開けると思いますが、このファイルが置いてあるディレクトリのことです。
このドキュメントルートを指定します。

指定したときの例

サーバーが起動するようです。※Nginxを使用するときは設定する項目が多くなるので、起動しませんでした。
サーバーが起動したら、ブラウザで、localhost:80にアクセスしてみましょう

もしも不具合があったら

再インストールをしてみるのが、有効な手段らしいです。⇒まだ確認できていません。

Brackets

IDEとしてこのアプリを使用します。どうやらAtomと同様にテキストエディタらしいので、コードを書いてあとはコマンドで。。。

というのをイメージしていたのですが、拡張機能(Extention)があるようなので、それを使用する方向で。。。

このアイコンをクリックします。拡張機能ボタンのようです。

そして、下のような画面が開きます。Elipseのマーケットプレイスに似ています。

つまり、検索してインストールが可能ということです。

でわでわ。。。

WordPress ワンポイント～画像ファイルがアップロードできない、パーミッション～

行った操作

WordPressを使用して、ファイルのアップロードができなくなりました。

レンタルサーバーのパスワードを変更したためです。

アップロードできない

この現象に対する対処方法は、以下の通りです。

レンタルサーバーのファイルパーミッション(権限)を変更する。
再度、ファイルをアップロードする。

懸念点

ファイルパーミッションを変更するのはよいが、何に変更するか？
パスワードを変更した後にファイルパーミッションを確認したところ「707」になっていました。変わったのかどうかもわかりませんでしたが、ここのサイトを参考にしたところ、パーミッションは下のように「755」で行けました。

上記の図は、覚えてもよいかもしれません。

でわでわ。。。

Java関連ページ

WordPress プラグイン作成〜アンケート挿入〜

WordPressのプラグインを作成中です。ようやくアンケート挿入が出来上がって来たところです。

アンケート挿入

今回作成しているプラグインの大まかな処理は以下の通りです。

プラグインを有効にした時、アンケートに必要なデータを保存するDB(テーブル)を作成する
ダッシュボードで投稿に挿入するアンケートを作成する
作成したアンケートを記事が表示する時にDBから作成したアンケート情報を取得する
取得したアンケート情報をJSONでしHTMLに出力する(scriptタグ)
プラグインから読み込んだJSで画面がロードされた時にJSONからランダムに表示するアンケート情報を取得する
取得した情報からアンケート入力フォームを作成する

サンプル

作成したデータ(CSV)は以下のようなものです。

question_id, question, answer1, answer2, answer3, answer4, answer5, html_class, html_style, click_count
15, あなたの性別はどちらですか？, 男, 女, , , , respond, , 0
16, あなたの年齢は？, 10才以下, 10代, 20代, 30代, 40以上, site-navigation, , 0
17, あなたの職業は？, 学生, フリーター, 自営業, 社員(非IT関連), 社員(IT関連), main, , 0
18, あなたの趣味は？, 音楽系, ゲーム系(将棋など), アウトドア系, スポーツ系, 学問系(文学や歴史など), reply-title, , 0
19, あなたはブロガーですか？, はい, いいえ, , , , primary, , 0, 
20, あなたは日本人ですか？(Are You Japanese?), はい(Yes), いいえ(No), , , , comments, , 0

これでとりあえずは、アンケートが表示できました。

まとめ

プラグインを有効にした時の処理(index.php)
キモになるのは下の部分です。

add_action('admin_menu', 'addCustomQuestionary' );
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

WordPressで使用できるアクションフックに以下のメソッドを登録します。

addCustomQuestionary(ダッシュボードのメニュー)
insertQuestionary(これはアンケート挿入する時)

そしてaddCustomQuestionaryを実行するように設定します。do_action( 'addCustomQuestionary' );

これで、ダッシュボードで作成したアンケート情報を投稿記事に挿入します。
ちょっと長くなりましたが、ここら辺で失礼いたします。

でわでわ。。。

    // HTML挿入用のJSを読み込む
    echo '';

Java関連ページ

WordPressプラグイン作成〜HTML挿入まで完了〜

WordPressプラグインの作成中です。このプラグインを有効にしたときに、作成したアンケート(HTML)を投稿画面の指定した部分に挿入するのが目標です。

大まかに作成したものを画面のmainクラス(HTMLクラス)の下に配置したのが下のキャプチャーです。

はっきり言って使い物になりません。。。

しかし、作成したアンケートを挿入することができたのでとりあえずは一区切りです。ここまでのソースはgitに登録してあります。

HTML挿入

HTMLを挿入するのに実装したものは以下のものになります。

プラグイン.php

/*
Plugin Name: CustomQuestionaryPlugin
Plugin URI: (プラグインの説明と更新を示すページの URI)(未決定)aaa
Description: アンケートを作成、ブログ記事の中に埋め込むことができ、集計結果をダッシュボードで確認ができる。
Version: 1.0
Author: ZenryokuService
Author URI: https://zenryokuservice.com/
License: GPL2
*/
// 表示する内容
function helloCustomQuestionary() {
}

// アンケートを記事に挿入するスクリプト
function insertQuestionary() {

}

// ダッシュボードに追加するための関数(プラグイン有効時)
function addCustomQuestionary() {
    // ダッシュボードにこの表示が出るように追加する
    add_menu_page( 'Test Plugin', 'CustomQuestionary', 'manage_options' , 'test-plugin' , 'helloCustomQuestionary' );
    // 投稿記事にアンケートを表示するスクリプトをリンクする
    add_action( 'wp_enqueue_scripts', 'insertQuestionary' );
}
// プラグインをダッシュボードに表示する
add_action('admin_menu', 'addCustomQuestionary' );
// プラグイン用のJSを読み込むようにする
add_action('wp_enqueue_scripts', 'insertQuestionary' );
do_action( 'addCustomQuestionary' );

ダッシュボードに表示.php

これは普通のPHPファイルで、サーバーサイド処理をPHPで、クライアント側に表示するものをHTMLで実装します。

<?php サーバーサイド ?>

<h1>Custom Questionary Plugin</h1>

・

・

・

InsertQuery.php

これは、ダッシュボード画面からDBに作成したアンケート情報を登録するためのphpです。
JS側から、非同期リクエストを送信しそれを受けてDB登録処理を行います。

DeleteQuery.php

上と同様に、削除処理を行います。

表示位置に関して

上のように表示している部分は、アンケートのボタンと質問です。
いかんせんダッシュボードではBootStrapを使用していたのですが、WordPressにあるstyle.cssが使用されているので、上のような表示になります。部分的にスタイルを適用できると良いのですが。。。

表示位置を変えるにはHTMLクラスの指定を変えます。

初めはid="main"のタグの後ろ。。。つまりは、記事の一番下にアンケートを追加しました。
上の表示はDBに登録している”hrml_class"（スペルミス)のデータ部に対応するidを持つタグの下に配置するようにしていますのでヘッダーメニューの下に来ました。

アンケートの表示がイマイチですが、とりあえずはアンケート登録〜表示(挿入)までの実装ができました。

でわでわ。。。

Java関連ページ

WordPress プラグイン作成〜$wpdbでのSELECT〜

今回は、WordPress($wpdb)でのDBからデータの取得を行います。

$wpdbとは？

前回の記事にも記載していますが、まぁBugFix（バグ退治)なので細かいところは記載しませんでした。

$wpdbは便利クラス

早い話が、DBへのコネクションをすでに持っているDBアクセス用のクラス(オブジェクト)です。

これを使用するのにはわけがあります。

$wpdbを使用しない場合

使用しているDBがMySQLなのでmysqlのDBコネクションを取得するためにユーザー名とパスワードをセットしてコネクションを取得します。
そして取得したオブジェクトからSQLを発行します。
取得したデータを実装します。

$wpdbを使用する場合

上記の手順1が要らなくなります。

実装サンプル

データの件数を取得する場合

global $wpdb;
$dataCount = $wpdb->get_var('SELECT count(question_id) FROM QUESTIONARY');

データを取得する場合

$result = $wpdb->get_results('SELECT * FROM QUESTIONARY', ARRAY_A);

取得するときにどの型で取得するか？をARRAY_Aで指定しています。
この場合は連想配列になります。

でわでわ。。。