XAMMP + PHPでウェブサーバー～環境構築とBracketsでコーディング～

イントロダクション

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

ローカルWordPressの構築

結局は、ローカルでWordPressを起動します。使用するエディタはなんでもOK！VSCodeなどが流行っているようですな(2024/01/02現在)
ここでのポイントは以下の通りです。

XAMMPを公式サイトからダウンロード
WordPressを公式サイトからダウンロードしてくる
XAMMPのダウンロードしたZIPファイルを展開する
展開したXAMMPの中にある「htdocs」フォルダにWordPressを展開する

WordPressのインストール

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をインポートすれば、環境構築完了です。

手順１

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

DBユーザーについて

phpMyAdminにアクセスするユーザーのことだと思ってよいです。
下のように確認できます。
)

この後は失敗談なのでエラーが起きたときなどに参照ください。

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

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

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

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

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

インストール

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

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

サーバーの設定

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

指定したときの例

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

もしも不具合があったら

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

Brackets

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

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

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

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

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

でわでわ。。。

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

行った操作

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

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

そのほかの事象

その他に、WordPressの稼働しているサーバー(レンタルサーバー)などで、本来であれば、WordPress(PHP)からフォルダを作成する処理が走るのだけど
フォルダが作成されていないとアップロードできなかったり、普通にフォルダが作成できなかったり。。。
様々な問題がありました。運用会社に聞くべきこともあるので、ユーザー(お金を払っている方)としては質問するのが手っ取り早い方法かもしれません。

アップロードできない

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

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

懸念点

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

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

パーミッションの味方

＜ファイルの種類＞
- => 通常ﾌｧｲﾙ
d=>ﾃﾞｨﾚｸﾄﾘ
l => ﾘﾝｸﾌｧｲﾙ
c => 特殊ﾌｧｲﾙ(ｷｬﾗｸﾀﾃﾞﾊﾞｲｽﾌｧｲﾙ)
b =>特殊ﾌｧｲﾙ(ﾌﾞﾛｯｸﾃﾞﾊﾞｲｽﾌｧｲﾙ)

でわでわ。。。

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で指定しています。
この場合は連想配列になります。

でわでわ。。。