AngularJS + PHP 〜AngularJSの実装2〜

AngularJSで横スクロールメニューの実装ができましたので、今度はメニュー選択をしたら、それを画面に表示する実装を行います。

AngularJSの実装2

実現したい操作は下の通りです。

  1. 横スクロールメニューをクリックする
  2. 選択したメニューにひもづく記事一覧を取得
    3, 記事一覧の書く記事のタイトル部分をクリックすることで対象の記事を開く(window.open())

以上のような実装を行いたいと思います。

現状の問題1

横スクロールの定義がルートコントローラーにしてあるので、再度コントローラーを起動すると横スクロールメニューがクリア(初期化)されてしまう。。。

これに関しては、ルートコントローラーの呼び出しを行なっても、子供コントローラーを呼び出すように実装することで回避しました。

対象方法

横スクロールメニューをクリックすると「changeView()」を呼び出すように実装していますが、これを使用して$scopeの値を変更すると横スクロールメニューがクリアされてしまうので、直接子供の画面(<div ng-view></div>で表示する画面)のコントローラーを起動するように実装しました。
<実装>
イベント処理の通知、受信を行うように関連付けを行いました。処理を通知(親画面から子画面)

// pgbox.js: 画面上の処理(通知もと)
$scope.changeView = function (catId) {
   $scope.$broadcast('getCategoryPosts', catId);
};

からこ画面のコントローラー(siteMapCtrl.js)へイベントの通知を受け取る

/** サイトマップの表示部分コントローラー */
app.controller('siteMapCtrl',['$scope', 'SiteMapService', function($scope, SiteMapService){
    $scope.title = "Hello";
    const service = SiteMapService;
    $scope.$on('getCategoryPosts', function(event, catId, SiteMapService) {
        alert("testOn");
        service.getCategoryPosts(catId).then(function(response, status, headers, config){
          $scope.categories = response.data;
        }), function(data, status, headers, config) {
          alert(data);
        };
    });
}]);

上のコントローラー内で、$scope.$on('getCategoryPosts', function(event, catId) {のように"getCategoryPosts"イベントの通知を受け取ったときに処理が動くように定義しておきます。
こうすると、$bloadcastで通知されたイベントを受け取れます。
ちなみに、逆方向の処理を行うときは"emit()"を使用するようです。実装する機会があったら記載しますが、この実装はあまり多用しない方が良いように思います。
なぜかというと「どこからどこへ・・・」というのがソース上でしかわからないからです。あまり複雑になるようであれば、何かしらのマッピングを行わないと「意味わからねぇ!」となります。(その人にしかわからないコードは危険です。)

とりあえずは、ここまで実装しました。
現状のソースはGithubにアップロード(差分表示)してあります。

でわでわ。。。



AngularJS + PHP 〜AngularJSの実装〜

前回はWordPressとAngularJSを連携してサイトマップの作成をする計画(設計プラン)を作りましたので、今回はクライアント部分、AngularJSでの実装及び、サーバーサイドへのアクセス方法に関して記載したいと思います。

AngularJSの実装

実装したい要件は以下の通りです。

  1. 初期表示時に、サイトマップの画面を表示する(他の画面も表示できるように作成)
  2. ヘッダー部分に横スクロールメニュー(サイトマップ用)を表示する(WordPress連携部分)
  3. カテゴリ選択した時に対象カテゴリの記事一覧(タイトルと説明(できれば)と画面表示するURL)を表示する

上のような要件を満たすように実装したいと思います。

大まかなフレームワーク

「フレームワーク」と言ってもAngularJSなどのようなフレームワークではなく、「処理の概要」という意味での処理フローです。
具体的には。。。

初期表示

土台にするHTMLファイルにAngularJSの機能を埋め込みます。(土台にするHTMLはBootStrapのテーマです。)

ファイル構成はGithubにアップしてあるのでそちらを参照ください。
まずは「index.html」です。
このHTMLファイルを下のように(一部)編集してやります。

<body ng-app= "pgBoxAG" class="bg-light"  ng-controller="pgboxCtrl">

こうすることでAngularJSの下のコード部分が、モジュールとして機能するようにバインド(関連付け)されます。

/project/config.js

let app = angular.module('pgBoxAG', ['ngRoute']);

このコードは「pgBoxAG」トイウモジュールを作成します。という意味です。index.htmlには下のように、自作するJSファイルの中では下の順番で読まれるように実装しています。

    <!-- PGボックス(上から順に読み込む) -->
    <script src="./project/dataConst.js"></script>
    <script src="./project/config.js"></script>
    <script src="./project/services/service-config.js"></script>
    <script src="./project/pgbox.js"></script>
    <script src="./project/siteMapCtrl.js"></script>
< JSファイルの概要>

A.dataConst.jsには定数などの定義がしてあります。
B.config.jsには各モジュール(コントローラーとファクトリ)
C.pgbox.jsにはルートコントローラー
D.siteMapCtrl.jsにはサイトマップ用の各処理(サイトマップコントローラー)を実装しています。

WordPress連携

今夏のWordPress連携部分はヘッダー部分の横スクロールメニューの項目表示です。
大まかな処理としては下のように実装しています。

  1. pgbox.jsにあるコントローラーでSiteMapService(/project/service/(/project/service/serviceーconfig.js)を呼び出し、WordPressにある、カテゴリ一覧を取得する
  2. SitemapServiceからPHPファイルへリクエストを飛ばし返却値'(JSON)を取得して値を返却する
  3. PHPファイル(getCategories.php)でWordPressの部品を使用するための「おまじない」を使用してWordPressテンプレート(関数)を使用できるようにする。→require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp/wp-load.php' );
  4. カテゴリ一覧を取得、JSONに変換してクライアント側に値を返却

というような処理を実装しました。

現段階(2020-01-05)では、横スクロールメニューからのカテゴリ毎の記事一覧が表示できない状態です(BootStrapテーマファイルがそのまま残っています。)

とりあえずは、こんな状態です。まだまだ実装は続きます。

でわでわ。。。



AngularJS + PHP 〜WordPressと連携する〜

自分のブログ用サイトマップ(記事一覧)を作成しようと思いました。

WordPress連携

AngularJSとWordPress(WP)を連携する方法としてJSONでのデータ通信を使用します。世間ではRESTFullなんて言葉を使うようですが、ちょっと調べてみるとJSONでデータ通信を行うという解釈がされていることが多いようで。。。
まぁ言葉の意味は動的なことが多いので(特にIT業界)細かいところは気にしません。
ちなみにちゃんとした意味はウィキペディアを見た方が良いと思います。早い話が、1つのアーキテクチャスタイルなんですね(笑)。つまり「通信方法」のことではないということです。

何をやるのか?

WordPress(ブログシステム(CMS))に登録されている記事(POST)を一覧する機能をAngularJSで実装します。
通常はWordPressのAPI(WordPressテンプレート)を使用してXXX.phpで作成するのがスタンダードなやり方です。
理由は、WordPressがPHPで作成されているのでPHPで一覧ページを作成した方がテクノロジー的なギャップがないためです。

AngularJSを使う

このフレームワークを使用するのはWordPressだけでなく他のテクノロジーも使用したいためです。
具体的にはGoogleMapsAPI(JavascriptAPI)があります。今後Javaサーバーなどと通信したいときにもシンプルなHTMLファイルで実装しておけば改修は難しくありません。→HTML(+JS)とJavaはセットで使用することが多いです。
余談ですが、JSFというフレームワークがあり、これはJavaでJSを生成してくれるものです。つまりはJSで実装していた部分をJavaで実装ができるものです(JS自体も使用可能です)。

AngularJSの良いところ

HTML+JSでクライアントサイドを1つのアプリケーションとして作成できるところが良いところです。
具体的にサーバー側との通信部分をAjax通信(非同期通信)で行うための部品があるので簡単に実装できます(自分でXMLHttpの実装を行わなくて良い)。
つまるところは、サーバーとの通信時はリクエスト送信とレスポンスの受信方法を統一(JSONを使用する)してやればPHPだろうが、Javaだろうが関係ないということです。

設計を行う

具体的にAngularJSでの画面実装とサーバー(WordPress)とのやりとりを実現するのにどのようにやるか?この部分を考えます。

現状としては、画面のデザイン部分に関してはテンプレートを使用するつもりです。というか下のようなイメージです。

このテンプレートを自分の表示したいようにカスタムして実装を行います。とりあえずは下のような感じでいじりました(カスタムしました)。

ポイントとしては以下の機能が欲しかったので余計な部分を削除して、必要な部分を追加しました。

  1. 横スクロール型のメニューバー
  2. 選択したメニューによりそれに対応する表示を行うView(画面)

もともとテンプレートにあった、サイドバーなどは削除しました。

AngularJSの処理

現段階での実装(プロトタイプ実装)では下のような構成で処理を行っています。コードはGithubにあります。

  1. index.htmlで以下の順序でJSを読み込む
    ⑴.「./project/dataConst.js」
    ⑵.「./project/config.js」
    ⑶.「./project/pgbox.js」
  2. 「navigator.language」でアクセスした人のロケールを取得(現状はjaで固定)
  3. angularJSモジュール「pgBoxAG」をルーティグモジュール付きで作成する。
  4. navController(空実装)を作成する
  5. PageDataFactory(共通で使用するデータを保持する)を作成する
  6. ルーティングモジュールの設定(URLと表示HTMLのバインド)
  7. サンプルで作成したParisとLondonのコントローラー作成
  8. 初期表示処理として、「$scope.pageTitle」に"Site Map"を設定
  9. #!/pgboxにリダイレクト、pgboxCtrlを起動する

という形で実装しています。

問題

  1. 現状では、画面のヘッダーメニュー部分(横スクロール型のメニュー)にアクセスすることができない(Controllerが別になっているので。。。)
  2. カテゴリの一覧を表示したいが、表示する見た目が決まっていない

大雑把にこんな問題があります。そそくさと解決できそうなのは「ヘッダーメニュー部分にアクセスできない」の部分です。
これはpageTitleが"Site Map"の時には。。。という条件を入れてやれば初期表示時以外でも「pgboxCtrl」を起動できるので、このコントローラーをハンドラーにしようかと考えております。

でわでわ。。。



WordPress テスト実装 〜heade-test.phpを表示〜

ヘッダー部分のphpをテストします。前提としては以下のようなところです。

  1. header.phpをコピーしてheader-test.phpを作成済み
  2. index.phpを以下のように修正
    get_header();get_header('test');

そしてheader-test.phpの一番下の部分を下のように修正
<div id="content" class="site-content">テストのように修正しました。
なので表示したヘッダー部分に「テスト」という文字が表示されるはずです。

なんとか表示されました。確認のためにget_headerの部分も元に戻しget_header()表示して見ます。

確認よし!

横スクロールメニュー実装


上のようなメニューを作成したいと思っています。
ここに、カテゴリのリストを表示するのが今回の目標です。

早速、BootStrapを使用するのでそれをstyle.cssにインポートします。

/*--- Add 2019-12-30 --*/
@charset 'utf-8';
@import url('https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js');
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js');

これをstyle.cssのはじめの部分(48行目)に追加しました。

フォントが少し小さくなりましたが、そんな影響しないであろうと思いそのままにしています。

さらに、横スクロールを追加して見たものの。。。
PC版での表示はよし!

スマホ版での表示はアウトー!

CSSを細々といじるのはよろしくないので、というか嫌いなので他の方法を考えます。

でわでわ。。。



MAMP WordPress 〜インポート時のエラー対処〜

WordPressを起動したら、現在実行しているWordPress(レンタルサーバー上)の状態と同じような状態にします。(記事や設定など)

MAMPのインストールとWordPressのインストールと起動確認を行ったので、PHP開発の準備を進めていこうと思います。
WordPress自体は起動できたので、

インポートの実行

記事などのインポートを行おうと思います。単純にWordPressのダッシュボードから「ツール→エクスポート」を選択して「pg.WordPress.2019-12-30.xml」というファイルをダウンロードしました。

そして、ローカル(自分のPC)で実行しているWordPressへとインポートを行おうとしたときにエラーが出ました。

エラーの文言は以下のようなものでした。

ファイルが空のようです。中身のあるファイルをアップロードしてください。このエラーは php.ini ファイルでアップロードができない設定になっているか、post_max_size が upload_max_filesize よりも小さく設定されているために発生している可能性もあります。

早い話が、「php.iniの設定が不適切です」ということなので、以下のようなところを確認します。

  1. MAMPの「Open Web Start Page」の部分をクリックします。
  2. PHPの情報を見ます。
  3. 下のような画面があるので「post_max_size 」「upload_max_filesize 」の文言で検索して値を確認します。そして、「post_max_size 」 < 「upload_max_filesize 」の状態なのでエラーが出る

早い話が、post_max_sizeのサイズがアップロードしたファイルよりも大きければ問題なし!ということです。

php.iniを編集

上のphpInfoのページを「Loaded Configuration File」で検索します。

そして、記載には「/Applications/MAMP/bin/php/php7.3.8/conf/php.ini」とあるので、編集したいファイルはここにあるということです。

そして、一度サーバーを停止して編集します。
自分はテキストエディタとしてATOMを使用しているので下のような画面になります。

間違って「108M」に編集しました。本当は「10M」に編集する必要があります。
今回は自分がダウンロードしたファイルが9M(メガ)なので上の値にしました。

サーバーを再起動

上の手順を踏んだ後に修正したものを確認します。
phpInfoを見ます、上に表示する手順を記載しています。

そして、再度インポートを行います。

今回はエラーなく行ったようです。

下のように設定してインポートしました。

エラーが出ました、これは画像ファイルのインポートに失敗ということです。
まぁ、イメージはよしとします。記事の一覧は表示できたので。。。

テスト開発の開始

これは次回やります。。。

でわでわ。。。



MAMP 起動設定 〜WordPressのテスト環境を作る〜

MAMP(HttpServer)を使用して自分のPC上にWordPressのテスト環境を作成します。
つまり、レンタルサーバーでなく、ローカル(自分のPC)で好きなだけ、バグを出しても自分のレンタルサーバーに影響なし!

というわけです。

余計な音が入っていますが、MAMPを起動して見ました。
すでにインストールしてあるので、ダウンロードできるサーバーまで移動、インストールしたMAMPを起動といった感じで動かしました。

WordPressのダウンロード

こちらのサイトからダウンロードできます。(WPのサイト、英語です)

MAMPのインストール

これに関しては前回やったのでその記事を参照してください。
そして、ダウンロードやドキュメント関連はこちらのサイトにありました。

セットアップに関してはこちらのサイトを和訳して見ました。

MAMP起動

インストールした後に、MAMPを起動します。MACなのでAppフォルダにあるMAMPを起動するためには、そのアプリのフォルダを開くと下のようになっていますので。

MAMPを起動します。他のサイトにあるように起動した画面に「設定」があれば良いのですが、今回ダウンロードしたアプリにはありませんでした。
なのでちょいと探しましたら、下のような場所にありました。

ドキュメントルート

HTTPサーバーを起動した後に、HTMLを配置したりしてアクセスがあったときに表示できるようにしますが。。。

どこに配置するのか?

この答えは「ドキュメントルートに配置」です。
具体的には「ドメイン」と呼ばれる部分を抜かした「/」に当たるディレクトリがドキュメントルートになります。
例:ここのサイト場合
ドメイン:zenryokuservice.com
ドキュメントルート:zenryokuservice.com/
初期表示画面(未実装です。。。)zenryokuservice.com/index.html

こんな感じです。そして、アプリの設定は

真ん中にある「Document Root」の「Select」部分をクリックします。

そして、初めにダウンロードしたWordPressを解凍しておきそのフォルダをドキュメントルートに指定します。

サーバーを起動して見た結果下のように表示されました。

これは、ドキュメントルートにwordpressのフォルダ「wp」を配置しているためです。引き続きwpフォルダを開くと下のような画面が見れるのでそのままWordPressの設定を行なっていきます。

設定の途中で下のような画面がありますが。これはphpInfoを見ると細かい部分が見れます。

phpInfo

特にDB名の確認にはphpAdminを見ます。(参考サイトより)
読んで見たところ、自分で決めて良いみたいです。
とりあえず、DBの名前は上にあるように「mysql」で設定します。
そして、ユーザー名はphpAdminにあるrootを指定しました。実行結果

引き続き入力を行い、インストール完了

今回はここまでにしておきます。

ちなみに、投稿記事のインポート時につまづいたので、その時の対処に関して記載しました

でわでわ。。。



関連ページ

  1. WordPress プラグイン作成〜DBを使用する〜
  2. PHP PDO 〜MySQLにアクセスする〜
  3. PHP Ajax 〜DBに登録したデータを受信する〜
  4. Google Maps API PHP連携 〜マップ情報をDBに登録する〜
  5. PHP Image File 〜iPhoneやAndroidでの画像送受信の問題〜
  6. AngularJS Routing 〜PHPをWeb APIにする〜
  7. WordPress PHPカスタム〜根本的に見た目を変える〜
  8. WordPress PHPカスタム〜根本的に見た目を変える2〜
  9. Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜
  10. WordPress テスト実装 〜heade-test.phpを表示〜
  11. AngularJS + PHP 〜WordPressと連携する〜
  12. AngularJS + PHP 〜AngularJSの実装〜
  13. AngularJS + PHP 〜AngularJSの実装2〜
  14. WordPress 処理解析 ~index.phpを眺める~
  15. WordPress Plugin NewStatPress ~アクセス解析プラグインAPIを使う~
  16. WordPress 処理解析 ~ログイン処理を調べる~
  17. WordPressカスタム〜アンケートボタンを追加する(設計)〜
  18. WordPressカスタム〜プラグインの作成〜
  19. WordPressカスタム〜ダッシュボードのプラグイン画面作成〜
  20. WordPressカスタム〜ダッシュボードのプラグイン画面作成2〜
  21. WordPressカスタム〜ダッシュボードのプラグイン画面作成3〜
  22. WordPress プラグイン作成〜アンケート作成プラグインを作る〜

Eclipse PHPプラグイン 〜ElipseでWordPress環境を構築〜

現在使用しているWordPressの改修を行いたく。。。表示する画面にAngularJS(+BootStrap)を組み込みたく思い。。。
他の方法も考えましたが、結局はテスト環境を作成して実行した方が安全だという所に至りました。

下にPDTのインストールに関して記載しました、しかし自分はうまくいかなかったのでMAMPを使用して地道に開発することにします。
他の人はうまくいくようなのですが。。。

とりあえずは、HTTPサーバーとDBサーバー、WordPressが動かせればローカル開発は可能なのでそちらで実装します(笑)

PDTのインストール(できませんでした)

Eclipseの上部にあるHelp->newSoftwereで下のような画面を開きます。

そして、上部のテキストボックスに「pdt」と入力すると適当なリポジトリが選択されるので下のようにチェックを入れます。

そして、PHP をインストールします。

そして、再起動したらパースペクティブにPHPが存在することを確かめます。。。

しかし、PHPのパースペティクブが表示されず。。。おかしいと思い調べて見た所下のようにインストールされているのはPDTのみでSDKなどがインストールされていませんでした。

これで、パースペティクブが表示できると思ったが、下のようなエラーが出て上のものがインストールできませんでした。

リポジトリが見つからない

結論は、下のように「」のチェックを外してインストールすると良いということでした。「Check it!」というのはCheckを外してくださいという意味です。。。文言を間違えていました。。。

足りないパッケージをインストール

しかし、またも同じエラーが。。。
仕方ないので、下のMAMPをインストールしてテキスト
エディターでの開発を行います。。。
自分はCDT(C++開発用プラグイン)などインストールしているのでそれが原因なのか?うーむ残念。。。

MAMP(HttpServer)

そして、HTTPサーバーを使用しますのでこれをダウンロードします。MySQLにアクセスするためのphpadminなどもインストールするのが面倒なのでこれを使用します。
細かい設定などはこちらのサイトを参考にしました。

そして、MySQLとHttpサーバーがセットになっているのでHttpサーバーとDBサーバーの設定なども行います。
主に、サーバーが使用するポート番号と起動、停止の設定をやっているようでした。(参考サイト)

そして、ダウンロードしたもの「MAMP_MAMP_PRO_5.5.pkg」をインストールします。MACなのでクリックするだけですが。。。

まとめ

環境構築に必要なアプリケーションのインストールを行いました。今後は以下の手順を踏みます。

  1. レンタルサーバー上にあるワードプレスのテーマフォルダーをダウンロード
  2. ワードプレスのインストール(ダウンロードと解凍)
  3. MySQLの設定(ポート番号など)
  4. HTTPサーバーの設定

そして、ワードプレスでの自作ページの開発。。。

こんな感じで進めていきます。

でわでわ。。。



WordPress PHPカスタム〜根本的に見た目を変える2〜

WordPressの見た目を根本的に帰るのはindex.phpやheader.phpなどを編集してやる必要があります。

しかし、現在実行中のWordPressをテストのためにテスト中の画面を表示するのは。。。アウト!

でわ、どーするか?

index.phpをカスタム

結論から言うと、以下の通りです。

管理者がログインした時に「テストファイル」を参照するように修正すれば問題がない

実はこちらのサイトを参考にしました。

早い話が、管理者がログインした時にはtest_index.phpを参照するように修正してやればオK!

と言うことで。。。

管理者がログインした時

この時の実装としては、参考サイトで使用している関数get currentuserinfo()は非推奨メソッドになっているようなので別のis user logged in()を使用します。
なので、「管理ユーザー」ではなく「ログインユーザー」が開いた時は・・・のような条件をつけてやることになります。

具体的には

<?php if ( is_user_logged_in() ) { 
// もしログインしているならば。。。の処理
} ?>

上のような形で実装します。

使用しているテンプレートの「test-index.php」を開く

include('指定のパス’);
具体的には、テンプレートの「」を使用するのでテンプレートのindex.phpと同じ階層に作成したinlude(./test_index.phpを参照するようにします。。。

と実行してみたものの。。。どっかしらにエラーがあって表示されませんでした。。。と言うか対象のテストファイルが表示されていません。。。

何がダメなんだろうか?

ちょいと調査いたします。

でわでわ。。。



WordPress PHPカスタム〜根本的に見た目を変える〜

最近、残業が続きJavaの調査が間に合わず。。。着手しやすいPHP(WordPress)に関して記載します。

PHPと言ってもWordPressですが。。。

根本的に見た目を変える

根本的に言うのは、CSSとかでレイアウトを変更。とかではなく直接表示しているPHPファイルをカスタムしようと言うものです。

具体的に

自分の使用している、テンプレートが「twentyseventeen」なのでWordPressのルートから下のようなパス(ディレクトリ)にあるindex.phpを編集します。
/wp-content/themes/twentyseventeen

実際のコードです。

<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>

<div class="wrap">
    <?php if ( is_home() && ! is_front_page() ) : ?>
        <header class="page-header">
            <h1 class="page-title"><?php single_post_title(); ?></h1>
        </header>
    <?php else : ?>
    <header class="page-header">
        <h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
    </header>
    <?php endif; ?>

    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">

            <?php
            if ( have_posts() ) :

                /* Start the Loop */
                while ( have_posts() ) : the_post();

                    /*
                     * Include the Post-Format-specific template for the content.
                     * If you want to override this in a child theme, then include a file
                     * called content-___.php (where ___ is the Post Format name) and that will be used instead.
                     */
                    get_template_part( 'template-parts/post/content', get_post_format() );

                endwhile;

                the_posts_pagination( array(
                    'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
                    'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
                    'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
                ) );

            else :

                get_template_part( 'template-parts/post/content', 'none' );

            endif;
            ?>
        </main><!-- #main -->
    </div><!-- #primary -->
    <?php get_sidebar(); ?>
</div><!-- .wrap -->

<?php get_footer(); ?>

ポイントは以下のメソッドです。

  1. get_header()
  2. the_post()
  3. get_sidebar()
  4. get_footer()

これらのメソッドで行なっている部分に触らないようにカスタムします。

実践その1

まずは現在使用しているファイル(index.php, footer.php, header.php, sidebar.php)が上の1〜4のメソッドに紐づいているところに注意します。

そして、動いているPHPファイルに影響がないように、各ファイルの名前をコピーして、名前を変更します自分はわかりやすいように以下のように変更しました。

index.php -> index-test.php
footer.php -> footer-test.php
header.php -> header-test.php
sidebar.php -> sidebar-test.php

そして、変更後の見た目をイメージします。
具体的に自分はヘッダーをスライド式にしたいのでbootstrapを使用した形に変えようと思います。具体的な実行コードと見た目はここのページにありました。

これを自分のブログページに実装するにはどうしたら良いか?

Headerを見る

見た目通りに横スクロールのメニューなのでheader.phpをいじります。

上述しましたが、テスト用のファイルがあるのでそれぞれの修正を行います。

header-test.phpを参照するようにするには?

ここのページによると
get_header( $name );の「$name」にheader-「name」.phpに対応するファイルをインクルードしてくれるようです。
[例]
get_header( 'test' );であればheader-test.phpを読み込むようです。

同様に他もメソッドも名前を変更して指定できるようです。

  1. get_header()
  2. the_post()
  3. get_sidebar()
  4. get_footer()

これで準備完了

これまでの作業でとりあえずは準備完了です。
これからゆっくりとデザインを考えるもよし、早速実装に入るもよし。

自分は仕事があるのでもう寝ます(笑)

でわでわ。。。



JS GoogleMap 〜セレクトボックスの中身をDBから持ってくる〜

Ajaxを使用して、DB(カテゴリマスタ)からデータを取得します。使用する技術はPHPJavaScriptです。

ファイル構成

・画面表示部分(Sample.html)プレーンのHTMLファイルです。
・GetCategoryMst.php HTMLを出力しないプレーンのPHPファイルです。

アプリ全体像

小さなアプリケーションなので、簡単です。
<クライアントサイド(ブラウザ表示側)>
Sample.html: GoogleMapを表示するHTML
Sample.js : GoogleMapやAjax通信を行う処理を実装しています。

<サーバーサイド(DBからデータを取得するなどPHP)>
GetMapInfo.php: 初期表示時にオーバーレイの情報を取得します。
InsertMapInfo.php: HTMLから送信された情報をDBに登録します。
GetCategoryMst.php: これから作成するPHPです、

実装内容

処理の流れとしては、以下のようになります。

  1. HTML画面側でセレクトボックスをクリックする
  2. DBからカテゴリ情報を取得する
  3. 取得したデータをセレクトボックスにセットする

上記のような形で実装します。
まぁちょちょっといじるくらいなので、簡単に行けるであろう。。。というところです。
「〜であろう」というのは、もしかしたら想定外の問題が出てくるかもしれないので、そのように記載しました。

実装開始

既存のソースを眺めます。全部だとえらいことになってしまうので、一部抜粋して記載します。

/** 画面の初期化 */
function loadView() {
    // GeoLocation API
    getCurrentPos();
    // XMLHttpRequestの生成
    xhr = createXmlHttpRequest();

    sideWin = document.getElementById('sideWin');
    sideWin.hidden = true;

    // Load Overlay
    var areaData = dstMapData();
}

/** 画面の開閉 */
function sideWinHandle() {
    console.log("change");
    if (sideWin.style.display === 'block') {
        sideWin.style.display = "none";
    } else {
        sideWin.style.display = "block";
    }
    sideWin.hidden = !sideWin.hidden;
}

/** カテゴリの変更 */
function changeCategory(selectBox) {
    markerList.forEach(marker => {
        if (selectBox.value === marker.category) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    });
}

抜き出したコードは初期表示時に、画面の設定を行う部分の処理になります。

実装にあたり

今回の改修ポイントは、セレクトボックスを追加したので、以下の処理を行うように修正するというところです。

セレクトボックスをクリック(変更)したときにセレクトボックスに値が入っていなければ、DBからカテゴリ情報を取得する

というわけで、修正ポイントは「セレクトボックスをクリック(値が変わったとき)」になりますので、イベントハンドラの「OnChange」を使用します。

HTML修正

下のコードをselectタグに追加します。
&ltoption value="-" selected="selecred">--未選択--</option>

そしてJSの修正は、以前やったのでそちらを参照してください。

PHP

サーバーサイドのPHPを作成します。
やることは以下の通りです。

  1. DBからカテゴリマスタデータを取得する
  2. データをJSON形式で返却する

実装部分は以下の通り

  1. もともとあったPHPをコピー
  2. SQLの山椒テーブルを変更
  3. 取得する項目名を変更

シンプルなものです。

$driver_options = [
    PDO::MYSQL_ATTR_INIT_COMMAND => 'SET NAMES utf8',
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_EMULATE_PREPARES => false,
];

$selectQuery = "SELECT * FROM CATEGORY_MST";
$tags = "";

$cnt = 0;
try {
    $pdo = new PDO($dns, $username, $password, $driver_options);
    foreach ($pdo->query($selectQuery) as $row) {
        $data .= '{"categoryId" :"' . $row['CATEGORY_NAME   '] . '",';
        $data .= '"name": "' . $row['INFO_CATEGORY'] . '",';
        $json .= $data;
$cnt +=1;
    }
    if ($cnt != 0) {
        // 最後の","を削除する
        $json = substr($json, 0, -1);
        $json .= ']';
    } else {
        $json = "";
   }
    // コネクションの解放
    $pdo = null;
} catch(Exception $e) {
    print($e->getTraceAsString());
}
// レスポンスに出力
//print($cnt);
header("Content-Type: application/json; charset=UTF-8");
echo json_encode($json);

?>

目星はついています。下のコード部分を修正して、Ajax通信により上記のPHPを読んでやれば、おっけ!

修正対象メソッド

** カテゴリの変更 */
function changeCategory(selectBox) {
    markerList.forEach(marker => {
        if (selectBox.value === marker.category) {
            marker.setVisible(true);
        } else {
            marker.setVisible(false);
        }
    });
}

でわでわ。。。